We looking to gain a better understanding around UI Builder. One of the features we want to better understand is the "Edit scripted property value". The documentation seems pretty light out in the docs site and community around this. Anyone have some guidance on how we can learn more about this feature? How would we know what values to script to?
@Brad Tilton
Very good question!
"Stylized text" component has 3 properties: text, tag and css. All the properties can be configured by either direct text value, dynamic data binding or scripted property value. By click on "Edit text CSS" one can set the following CSS rule for example:
h2 {
color: blue;
}
It will change the color of the text:
On the other side, css property can be changes via dynamic data binding or scripted property value too:
or using more JavaScript object destructuring (see here😞
/**
* @param {params} params
* @param {api} params.api
* @param {any} params.imports
*/
function evaluateProperty({api: {context: {session: {user}}}}) {
const color = user.roles.includes("itil") ? "red" : "blue";
return "h2 { color: " + color + "; }";
}As the result the CSS will be red for ITIL users:
In the same way, one can define new client state variable, like validationError, and to set the style to "red" if state scripted property value
return `h2 { color: ${api.state.validationError? "red" : "black" } }`;One can set the state variable dynamically inside of client script:
api.setState("validationError", false);As the result the style of text will be changes dynamically from client script.
