Hi JSONForms Team,
Thank very much for having this channel and such a nice library.
I am trying to create custom Layout Renderer (MyGroupLayoutControl) using List and used it with custom renderer. I am able to get the fields from UI Schema using my custom control but I cannot get the Data to show up on the UI next to field, eventhough in my layoutProp I see its being passed.
I am trying to create custom Layout Renderer (MyGroupLayoutControl) using List and used it with custom renderer. I am using List control from UI5-WebComponent-react library. @ui5/webcomponents-react - npm .
I am able to get the fields from UI Schema using my custom control but I cannot get the Data to show up on the UI next to field, eventhough in my layoutProp I see its being passed.
/**********MyGroupLayoutControl.js *****************/
import { withVanillaControlProps } from “@jsonforms/vanilla-renderers”;
import React from “react”;
import { withJsonFormsLayoutProps, ResolvedJsonFormsDispatch } from “@jsonforms/react”;
import { CustomListItem } from “@ui5/webcomponents-react/lib/CustomListItem”;
import { List } from “@ui5/webcomponents-react/lib/List”;
import styles from “…/Components/SectionList/SectionList.module.css”;
const offerData = {
OFFER: {
items: [
{
offerLetterId: 123,
offerSentDate: "2012-11-09",
sentBy: "Lorna Okamoto",
senderUserId: "lokamoto1",
lastUpdatedDate: "2020-12-02",
sendMode: "eSignOffer",
comments: "sample text",
subject: "Offer-Executive",
offerLetterSecKey: "uniquely generated key alphaneumeric key",
candResponseDate: "2020-12-02",
candResponseComments: "sample text",
status: "pending",
cancelOffer: true,
OfferEsignDetail: "https://odata/V4/recruiting/ApplicationManagement.svc/v1/OfferLetters(123)"
},
{
offerLetterId: 125,
offerSentDate: "2020-10-09",
sentBy: "Carla Grant",
senderUserId: "cgrant",
lastUpdatedDate: "2020-12-02",
sendMode: "eSignOffer",
subject: "Offer-Engineering Manager",
certificate: "View Certificate",
offerLetterSecKey: "uniquely generated key alphaneumeric key",
candResponseDate: "2020-12-02",
candResponseComments: "sample text",
status: "pending",
cancelOffer: false,
OfferEsignDetail: "https://odata/V4/recruiting/ApplicationManagement.svc/v1/OfferLetters(123)"
}
]
}
};
const MyGroupLayoutControl = (props) => {
const { data, uischema, schema, path, enabled, cells, visible, renderers } = props;
const layoutProps = {
elements: uischema.options.detail.elements,
schema: schema,
path: "#/properties/OFFER/properties/items",
direction: "column",
visible: visible,
enabled: enabled,
cells: cells,
uischema: uischema,
renderers: renderers,
data: data || offerData //data passed in JSON form is same as offerData constant
};
/* const horizontalLayout = uischema;
const elementsSize = uischema.options.detail.elements ? uischema.options.detail.elements.length : 0;
const layoutClassName = getStyleAsClassName(“horizontal.layout”);
const childClassNames = [“horizontal-layout-item”].concat(getStyle(“horizontal.layout.item”, elementsSize)).join(" ");
*/
function getSectionItemId(key) {
return "sectionItems_" + key;
}
function getFieldValueId(fieldId, index) {
return fieldId + index + "_val";
}
const onButtonFieldClick = (evt) => {
console.log(evt);
};
const onLinkClick = (evt, value) => {
console.log(evt, " & value", value);
};
const renderListItems = (list) => {
if (list) {
return list.map((item, key) => {
//layoutProps.data = item;
return (
<CustomListItem
id={getSectionItemId(key)}
key={getSectionItemId(key)}
data-option-id={key}
data-testid={getSectionItemId(key)}
aria-label={getSectionItemId(key)}
className={styles.customListItem}
>
<div>
{visible &&
uischema.options.detail.elements.map((child, index) => (
<>
<div>
<ResolvedJsonFormsDispatch
schema={layoutProps.schema.properties.OFFER.properties.items.items}
uischema={child}
path={child.scope}
enabled={true}
renderers={layoutProps.renderers}
cells={layoutProps.cells}
data={item}
key={index}
/>
</div>
</>
))}
</div>
</CustomListItem>
);
});
}
return "";
};
return (
<>
<List data-testid="sectionList">{renderListItems(offerData.OFFER.items)}</List>
</>
);
};
export default withVanillaControlProps(withJsonFormsLayoutProps(MyGroupLayoutControl));
//export default withJsonFormsArrayControlProps(MyGroupLayoutControl);
/* ---------------------------------------------------------------------- */
Below is my UI Template.
{
“type”: “VerticalLayout”,
“elements”: [
{
“type”: “MyGroup”,
“scope”: “#/properties/OFFER/properties/items”,
“options”: {
“detail”: {
“type”: “VerticalLayout”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/subject”
},
{
“type”: “Control”,
“scope”: “#/properties/offerSentDate”
},
{
“type”: “Control”,
“scope”: “#/properties/sentBy”
},
{
"type": "Control",
"scope": "#/properties/sendMode"
},
{
"type": "Control",
"scope": "#/properties/comments"
},
{
"type": "Control",
"scope": "#/properties/status"
}
]
}
}
}
]
}
My JSONSchema is as below -
“OFFER”: {
"type": "object",
"properties": {
"items": {
"type": "array",
"items": {
"type": "object",
"additionalProperties": false,
"properties": {
"offerLetterId": {
"type": "integer",
"options": {
"hidden": true
},
"readOnly": true,
"title": ""
},
"offerSentDate": {
"type": "string",
"format": "date",
"readOnly": true,
"title": "Offer Extended On"
},
"sentBy": {
"type": "string",
"readOnly": true,
"title": "Author"
},
"senderUserId": {
"type": "string",
"options": {
"hidden": true
},
"readOnly": true
},
"lastUpdatedDate": {
"type": "string",
"format": "date",
"options": {
"hidden": true
},
"readOnly": true
},
"sendMode": {
"type": "string",
"readOnly": true,
"title": "Send Mode",
"fieldType": "link"
},
"comments": {
"type": "string",
"readOnly": true,
"title": "Comments"
},
"subject": {
"type": "string",
"readOnly": true,
"title": "",
"fieldType": "link"
},
"offerLetterSecKey": {
"type": "string",
"options": {
"hidden": true
}
},
"candResponseDate": {
"type": "string",
"format": "date",
"readOnly": true,
"title": "Candidate Responded On"
},
"candResponseComments": {
"type": "string",
"readOnly": true,
"title": "Candidate Response Comment",
"options": { "hidden": true }
},
"status": {
"type": "string",
"readOnly": true,
"title": ""
},
"cancelOffer": {
"type": "boolean",
"readOnly": true,
"fieldType": "button",
"title": "Cancel Offer"
},
"OfferEsignDetail": {
"type": "string",
"format": "uri",
"qt-uri-protocols": ["https"],
"qt-uri-extensions": [".getesignofferletters()"]
}
},
"required": [],
"title": "Offer "
},
"title": "Offer"
}
},
"required": ["id", "items"],
"title": "Offers"
}
Please help with resolving this issue.
Regards,
Kushal K