Implementing screen with multiple themes

Hi All,

I have a screen in my application and the data for that screen is coming from an API. I have two different themes and I need to display the theme based on the request variable in the API. Could you please help me with an idea of how to implement it?

Thanks,
Hema

Hi Hemalatha,

if you just need it for one screen you can create 2 screens (each one in a different webflow with the respective theme) and the content of the screen all inside a block. You can reuse that block in both screens and they will have a different css behaviour.

Regards

Hi Jose,

Could you please let me know how to create two screens with different web flow and with their respective themes?

Thanks,
Hema

On your module you can create more UI flow:

Each flow have its own Theme:


Hi Jose,

Thanks so much.

I have created two screens and both of them have different themes.

I have a boolean variable based on which the screen needs to be rendered.

For example, If the variable is true, screen1 needs to be displayed and if it is false, screen2 needs to be displayed.

Thanks,
Hema

You can duplicate the logic to both screens instead of using a block for both, but that will require more maintenance in case of changes.

Hi Jose,

I have attached the oml. 

Thanks,

Hema

JSON_Test_UI.oml

It isn't working as you want?

Hi Jose,

I have written a condition to display screen1 and it is not working as expected.

Thanks,

Hema

What is failing? Provide more details please.

Hi Jose,

In this logic, it is not working as expected. If the flag is "True", I want it to stay in the current screen.


Flag is True and continues in the same screen. Only when it's False changes to Screen2.


yes and it is not working. It stays in Screen 2. I want the below screen to get displayed for the given condition.


Debut it to see why is changing to Screen2. Flag propably is false.

Hi @Hemalatha Paramasivan,

If you want to change the colors only like day night theme than you can switch class conditionally 

.theme-NAME1{
--color-primary: #000000;
--color-secondary: #ffffff;
}
.theme-NAME2{
--color-primary: #ffffff;
--color-secondary: #000000;
}

Or if you want to dynamic theme then you can follow this:- Dynamic Themes


Regards,

Ankit Maharshi

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.