Guidewire Jutro notes

1. How to get all available properties for a component

Just opening project's framework/packages/components/widgets/folder, and then open the specific component you want to check.

2. Component settings in metadata definition

For object's component settings in metadata json5 file, it will first try to match the jutro component with the same name. If no match found, then it will match the html build-in element. For example, 

"component": "button"

will map to jutro button component, instead of html button element. But

"component": "label"

will map to html label element.

3. Content setting

The jutro framework will do its best to put the content into the mapped html element, for example, button will show the content string as its text. div will just show the content between the open and close tag. 

4. Add custom page/component

To add a new custom page, first create the page component and metadata json5 file. 

Then import the component in app.js file and also add the component into componentMap object.

In app.routes.metadata.json5, add a new path to load the page component for the specific route url path.

Actually this is the same change when running the below generate page command:

jutro-cli generate page

5. Enable guidewiree jutro capability buildin page

In addition to import the page component into app.js and componentMap, as well as updating the app.routes.metadata.json5, you also need to update config.json5's capabilitiesConfig section to set the capability's value to true. Otherwise the page/component jsx file will not be loaded.

6. Dynamic update UI with override in renderContentFromMetadata

When defining UI content with Metadata json5 format, all the values are hardcoded in json5 files. In order to dynamically change the values (for example, set element visible property based on server side response), the jsx file can set override parameter in renderContentFromMetadata method. For example, the below code sets claim element's visible property based on the return value of isClaimVisible()

       Claim: {

            data: claimDataTable,

            visible: isClaimVisible(),

}

Note, the method will only be called once when the UI is rendered from metadata, once the rendering is finished, even if the function returns a different value, it will not be called again automatically.

In order to be sure UI will reflect the underling data change, in the data change handler function, it should call useState() method to notify react to refresh the UI, so the metadata will be evaluated again. 

Basically, values set in override parameter is same as other react component properties, and they are read only when passed to child component for initialization. 

7. Difference between to and href for Link component

When href attribute is set for Link component, it will cause to reload the page on that url, which will download the full index.html and js files.

When to attribute is set for Link component, it will stay in the current html page, and only reload the component based on app.js router configuration. So it is much fast and user friendly.