I have a custom web block that takes in an Input variable and uses it in a container's Style Classes property. When I use the web block and input a class that's defined elsewhere (e.g. in the screen or application style sheets), the style is properly applied once the application is published and opened in a browser, but OS Studio does not reflect the input style during development.
Off the top of my head, I know that some OutSystemsUI components work that way, but I can't remember which ones. Is there any way to get this functionality for personally developed web blocks?
I'd like to be able to do this in ODC preferably, but an answer for OS 11 would be great too.
Hi @Daniel Santos ,
The following article describes how preview works in OutSystems and might answer your question:
Preview in OutSystems Service Studio and the “-servicestudio” attribute
Hello @Mihai Melencu ,
Unfortunately, this does not help me. I already know how to use the "-servicestudio" attributes to make the Service Studio preview different from the published application UI. That's not what I'm looking for.
What I'm trying to do is preview a web block's UI if the CSS class of one of its contents is not defined within the web block but instead provided in an Input variable.
So if I use the same web block twice in a screen, and input "Class1" into one and "Class2" into the other, I'd like OS Service Studio to show each of those instances of the web block with different styles based on those inputs, instead of the default Container styling that currently shows.
When applying conditional CSS, only the class(es) from the true branch of the If expression typically appear in the preview. For example, with If(Condition, Class1, Class2), only Class1 will be visible in the preview.
Those certain widgets you mentioned in your post, such as input fields, change styles based on specific properties, most commonly the Disabled attribute. These styles often rely on pseudo-classes or attribute selectors. For example: .button-group-item[disabled].
@Daniel Santos : As far as I know, previewing style classes passed via input variables is not supported in Service Studio or ODC Studio. If the input variable has a default value, only that default style is rendered in the editor — not any new value passed in at usage time. They apply correctly at runtime but won't show in the editor during development.
I've found a component from OutSystemsUI that allows OS Studio (11 or ODC) to preview input style classes.I'm not sure if there are any others, but the Card web block seems to work this way.
After cloning the OutSystemsUI module and checking the web block, I don't see anything in its implementation of input style classes that would differentiate it from someone making their own custom web block.
You are right, The card component is rendering the class provided in the ExtendedClass. I am not sure how they are doing here. May be lets wait for some one who is having in-depth understanding on this.
Even if we copy and paste the same card component into the application from outsystemsUI clone, the ExtendedClass preview still doesn't work.
Yes Daniel, Service Studio (in OS 11 or ODC) does not preview CSS classes passed through input parameters like ExtendedClass or custom Style Classes dynamically. These styles are applied only at runtime in the browser.
Hi @Daniel Santos, to the best of my knowledge, styles applied dynamically via input parameters are not reflected during development time. If you want to see the effect in Service Studio, you can create an additional CSS class e.g( .test { -servicestudio-color: red; } ) and apply it to the container or block — this will make it visible in the editor.
thank you