1. Set component prop in metadata json5 file
When creating component using Guidewire Jutro metadata json5 format, for simple element, for example, label component of element type, the label text is set by "content" attribute, and other attributes are set by componentProp attribute as below:
{
id: 'myLabel',
type: 'element',
component: 'label',
content: 'mylabel name',
componentProps: {
for: 'myfor',
},
selfLayout: {
component: 'div',
componentProps: {
someattr: 'mycustattr',
},
},
},
This indicates jutro (4.1.1) just puts whatever componentProps settings into the element's html without validation whether the attributes actually exist or not.
Note the selfLayout node defined in the metadata creates a new wrapping element for the current element. if the node is deleted, then <div someattr='mycustattr'> element will also be deleted.
2. Set component in jsx with override and resolver
In many cases, we need to set component properties dynamically in jsx files for example, set the callback method for button element. This can be done by passing resolver parameter in jsx's renderContentFromMetadata method. For example, if metadata sets button's callback to a string, the string needs to map to a method defined in jsx file as below
{
id: 'btnFileCLaim',
component: 'button',
type: 'element',
content: 'button name',
componentProps: {
size: 'small',
type: 'primary',
onClick: 'clickme',
},
},
in component jsx file:
const MyTestComponent = () => {const onclickme = () => {
console.log('button clicked');
};
const override = {
};
const resolvers = {
resolveClassNameMap: styles,
resolveCallbackMap: {
clickme: onclickme,
}
};
return renderContentFromMetadata(uiMetadata.viewClaimList, override, resolvers);
};
export default MyTestComponent;
When overriding property values, the id is used as key, and there is no need to specify componentProps. For example, in above sample, the below code can be used to override the button's label and type property
No comments:
Post a Comment