Hey,
I've been digging at custom Components for UI Builder.
The CLI reference for "Component Configuration" mentions two properties for the "now-ui.json" file:
- requiredSysProps
- requiredTranslationKeys
How do I work with these two properties?
How can I access the System Properties and Translation Keys inside a Component or inside the UI Builder interface?
---------
Context:
So far I can only guess how to apply the properties.
The translation keys might or might not have something to do with the translation service that's mention in the UI Framework reference for translations.
However it's never explicitly mentioned whether the translation keys you provide in now-ui.json will be preloaded or automatically wired to Component properties.
For the "requiredSysProps" I haven't found any chapter in the documentation that seems even remotely on topic.
After calling "snc ui-component deploy" I can see that the requiredSysProps I added in my now.ui-json were automatically added to the "UX Component Definition" record of my custom Component:
Unfortunately I have not found out how to wire it up so that the Component has access to it.
Is there some property of the createCustomElement function System Properties will be passed to?
Will it be automatically wired to a propery of the properties object, if I create a property with the same name?
Any help would be appreciated 🙂
Best regards,
Aaron
There seems to be a global object "ux_globals" in the browser that has a "sysprops" property.
I can find my "my.sys.prop" System Property and its value in it.
Can anybody confirm whether this is the correct way to access System Properties with "requiredSysProps"?
-----
I'm now able to add the value of my System Property to my view.
You can't fetch it in the "properties" object you pass to the createCustomElement function, because System Property values won't be available there yet.
But if you do it in the "setInitialState" function, the value seem to be there.
My code now looks something like this:
And the function that constructs my view now has access to the value from the state:
Which happily results in this:
-----
To get to "ux_globals" was a small Odssey.
Using the Next Experience Developer Tools, I was able to make out that the Page component has a "nowSysProps" property:
Scrolling all the way down, I can see my System Property happily sitting there:
Having found out about nowSysProps, I started searching the DOM via the regular browser dev tools.
Eventually I found the ux_globals object.
Way after that I did find a reference to System Properties (and the "ux_globals" object) in the documentation.
The "Persisting Metric" part of the UI Framework reference casually drops a reference to ux_globals in a subclause.
It doesn't explain the object, nor its origins, now whether it's the proper way to access System Properties with.
It seems that all System Properties and their values listed in the "now-ui.json" file will be made into a property of the page component. That's in line with what I expect the now-ui.json to do.
Instead of using "ux_global" I suspect there should be a way to properly access System Properties in a Component on the Page. Via context or something else that gets passed down.
I really wish the "Component Configuration" part of the CLI reference would drop a hint about any of this.
