Skip to main content

Hi everyone,

In our application (using Universal GUI), we have some custom components. We experience some problems when we want to style the custom components depending on choosen mode (dark / light) in the user preferences by the user.

The custom component is presented in an <iframe> in the browser, however, within the <iframe> the css class ‘dark’ is not applied, causing the custom components not to be adjusted to the selected mode (dark/light). This makes UI/UX of application not as good as we want to.

Any ideas how to solve this?

@Bart Metselaar any thoughts on this?


@André Romijn Hi Andre. We have some ideas about improving your ability to create seamless custom components. Recently we made it possible to call a process flow from within your component via postMessages, but that does take some code in the custom component. And for your css issue we cannot access your component with css nor can you access the Universal css. This is due to security limits in the browser. 

We could however add these as parameter string strings to the url of the previewer. E.G. mycustomcomponent.html?mode=dark

And you could then do something like

const urlParams = new URLSearchParams(window.location.search);
const themeMode= urlParams.get('mode');
document.body.className+= ' ' + themeMode;

With this idea we could also give stuff like the current subject and variant. Would this be valid solution for you? 


Hi @Sebastiaan Meijerink 

Thx for the reply.

Yes, passing parameters could really help, as we already use the same technique to pass parameters to our components ourselves (eg. tsf_appl_id for doing calls to indicium in a multi tenant enviroment or variables for selected record to display the right content)

However, we build our url's to our custom components in the code and i don't see how you can add the parameters to our url's or will you append them to our url? 

​​​​​​​Perhaps am i missing something ;-)


@André Romijn Yes we could append them. We would obviously need to check that we don't overwrite params with same name etc..And make the choice if we could use the hashroute.

Like; our_custom_component.html?tsf_appl_id=5#?mode=dark&subject=table1

 


Reply