Documentation around "Edit scripted property value"

[bradwestvig]

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 @Andrew Barnes - AJB 

[Oleg]

One can easy explain the feature on an example of simple component like "Stylized text":

It's very helpful to insert <span>, <p>, <h1> etc. with some text inside. One has 3 options how to set property value for the component:

One can easy write a text like "Welcome!". Using "Dynamic data binding" one can set the property value to "@context.session.user.fullName" to display the name of the user. Using the 3-d option one can write simple script

/**
  * @param {params} params
  * @param {api} params.api
  * @param {any} params.imports
  */
function evaluateProperty({ api }) {
	return `Welcome ${api.context.session.user.fullName}!`;
}

to set the value to the text like "Welcome Brad Westvig!".

[jcarpentier]

Do you know how you'd overwrite formatting, like a color using this? I thought I had heard/read somewhere that was possible. 

[Brad Tilton]

You would most likely need to use a theme variable (or theming hook) to override some css within a component. I go into some explanation here with a video: https://developer.servicenow.com/blog.do?p=/post/quebec-ui-builder-themes/ and you can find the documentation here: https://docs.servicenow.com/bundle/quebec-application-development/page/administer/ui-builder/concept...

[jcarpentier]

Thanks. I have reviewed the documentation and watched the video (a couple times).

I was more curious if you could overwrite the "--now-color--primary-1" value in just ONE property of a component, not change the value for the entire theme.