I have a Status class defined in my theme module stylesheet and that Status class is utlizied on container/widgets in other modules.
Now, I have a screen where the Status class name will be displayed and on clicking on that user can modify the css (For example - entering color code in input) and on clicking on save I want to update that particular Status class with new css. How to do that ?
For example -
Success Container Class before update -
.successcontainer
{
color: #172b4d;
}
Success Container Class after update -
color: #42526E;
Hi @Bhanu Pratap
Here is the sample oap.
Hope this helps.
Regards,
Manish Jawla
Thanks, I'll check this.
Thanks @Manish Jawla, Your solution is what I wanted.
Great :) happy to help you. I believe that this solution will work in your scenario.
Hi @Bhanu Pratap ,
In order to achieve this, you need to use Css variable inside your class.
For reference you can refer my component from forge:
https://www.outsystems.com/forge/component-overview/21137/sidebar-collapse-layout-o11
I am changing the value of left menu variable for spacing here using simple JavaScript, you can do the same for Css as well.
Hi @Manish Jawla,
Thank you for the reply.
Sure I'll check the component logic if that works for my usecase.
Hi Bhanu,
Like Manish mentioned, you can change the CSS property using a JavaScript node in your action.
To change the color property of a CSS class you can use:
document.getElementById(@Id).style.color=@UserInput;
Hi @Beatriz Sabino,
Thanks for the reply.
Let me try that as well if it works then will let you know here.
@Beatriz Sabino, Manish solution is more effective for my usecase. Thanks