My app has 3 modes. Based on the mode I need the background image for all pages to change. The mode won't change after the page is rendered. I currently use the following css to display the background image.
background-image: url('/PathToImage/LogoTB.png');
I would like to set the the image url based on the mode of the app. Is this doable?
As I don't know how your app is set up I'll try to describe how I'd do it. If it is too far off of your structure let me know and share an oml and I'll have a look.What I would do is store the mode the user has selected in a client variable:then in the layout block I would add the class
"mode-"+Client.ApplicationMode
To the highest level element (prepending "mode-" just incase the applicationmode starts with a number)
By having this class there you can do all kinds of shenanigans depending on the mode.now in your css you can have this for each of your modes
.mode-[name of your mode] .Element-that-has-the-background { background-image: url('img1.jpg') }
You don't need to put the css on every page. Best practice is to keep the css in one location. The css on application level (the one named the same as the app)
Hello Tom,
Hope you are doing well.
In below thread there is one JS script please try this.
https://www.outsystems.com/forums/discussion/62560/dynamic-url-for-background-image-truncated-even-though-i-used-encodehtml/
Regards,
Ajit kurane.
Hi Tom,
You could make 3 classes
.mode1 { background-image:url('img-1.jpg'); } .mode2 { background-image:url('img-2.jpg'); } .mode3 { background-image:url('img-3.jpg'); }
And then set the right class to the element that has the background using the client variable.
This would be the easiest most maintainable way. If it's not what you're looking for let me know as there are a couple other options.
Interesting. However, how would I go about "setting the right class" to the element that has the background image. The flow is: the user selects one of three modes on the app's landing page which navigates them to the next page - which will have a background image indicating the mode. As they navigate through the various other screens in the app, each screen will have the same background image. In the css for each screen (of which there are only 4) i've already defined the 3 classes as you have suggested. Then i've hard-coded the "style class" of the appropriate element on each screen to one of the 3 classes. How would I change the class of an element at runtime? I guess that's where I'm stuck. Thanks for helping out with this.
Nailed it. Thanks.
Great to hear so! You are most welcome