Render Check List
Please note that this content is under development and is not ready for implementation. This status message will be updated as content development progresses.
Description
The RenderCheckList component is responsible for rendering a list of items with checkboxes. It is a composed component that will load data from another component (Import Button and QR Code Scanner Dialog Button), when the user clicks to import or scan a QR code. The component will render a list of items with checkboxes, the labels of the checkboxes will be the identifiers of the items that are loaded from the data with the path is configured at requiredFieldPath
field.
Example
{
"name": "RenderCheckList",
"type": "EntryData",
"props": {
"checkBoxLabel": "Imported valid json:",
"nestedComponents": [
{
"name": "ImportButton",
"type": "EntryData",
"props": {
"label": "Import JSON",
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
},
{
"name": "QRCodeScannerDialogButton",
"type": "EntryData"
}
],
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
}
Definitions
Property | Required | Description | Type |
---|---|---|---|
name | Yes | The name of the component(should be "RenderCheckList") | String |
type | Yes | The type of the component (should be "EntryData") | ComponentType |
props | Yes | The properties for the RenderCheckList | Props |
Props
| Property | Required | Description | Type | | ----------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ |String | | nestedComponents | Yes | An array of components to be rendered with the loaded data | Component[] | | checkBoxLabel | Yes | The label for the checkbox list | String | | style | No | The style for the component | Object |
Response Data
The data returned by the component will depend on the data type that is imported or scanned by the user. The data will be verified and decoded if it is an enveloped verifiable credential. There are 3 possible cases:
- If the imported or scanned data type is a
JSON
, the data will be returned without any transformation and have the key as the file name or URL of QRcode.
{
"data1.json": {
"foo": "bar" // Imported data
},
"data2.json": {
"foo": "bar" // Imported data
}
}
- If the imported or scanned data type is a
VerifiableCredential
, the data will be returned as an object with the key as the file name or URL of QRcode. The imported or scanned VC will be verified based on thevcOptions
provided in the Import Button or QR Code Scanner Dialog Button component.
{
"VC1.json": {
"@context": [], // Imported VC
"type": ["VerifiableCredential"]
},
"VC2.json": {
"@context": [], // Imported VC
"type": ["VerifiableCredential"]
}
}
- If the imported or scanned data type is a
VerifiableCredential
and the VC is an enveloped VC, the data will be returned as an object with the key as the file name or URL of QRcode. The imported or scanned VC will be verified and decoded based on thevcOptions
provided in the Import Button or QR Code Scanner Dialog Button component. The decoded VC will return the same level path as the original VC. For example, if the original VC was imported as the whole object of the file, the decoded VC will be returned together with the original VC in an object like below:
// imported VC file
{
"@context": ["https://www.w3.org/ns/credentials/v2"],
"id": "data:application/vc-ld+jwt,jwt",
"type": "EnvelopedVerifiableCredential"
}
// return data
{
"VC1.json": {
"vc": {
"@context": ["https://www.w3.org/ns/credentials/v2"],
"id": "data:application/vc-ld+jwt,jwt",
"type": "EnvelopedVerifiableCredential"
},
"decodedEnvelopedVC": {
"@context": ["https://www.w3.org/ns/credentials/v2"],
"type": ["VerifiableCredential"],
"credentialSubject": {
"id": "did:example:123",
"name": "Alice"
}
}
}
}
But when imported data has credentialPath
in vcOptions
, the decoded VC will be returned with the path specified in credentialPath
together with the original VC in an object like below:
// vcOptions
{
"credentialPath": "/vc"
}
// imported VC file
{
"vc": {
"@context": ["https://www.w3.org/ns/credentials/v2"],
"id": "data:application/vc-ld+jwt,jwt",
"type": "EnvelopedVerifiableCredential"
},
"linkResolver": "https://example.com"
}
// return data
{
"VC1.json": {
"vc": {
"vc": {
"@context": ["https://www.w3.org/ns/credentials/v2"],
"id": "data:application/vc-ld+jwt,jwt",
"type": "EnvelopedVerifiableCredential"
},
"decodedEnvelopedVC": {
"@context": ["https://www.w3.org/ns/credentials/v2"],
"type": ["VerifiableCredential"],
"credentialSubject": {
"id": "did:example:123",
"name": "Alice"
}
}
},
"linkResolver": "https://example.com"
}
}