Log in to AnswerLog in to Follow
2022-02-17 14-08-46
Rafael Valente
20Views
6Comments
Module not referenced automatically
Question
Architecture
CSS
Dependencies
Front-end
Development

Hello everyone!

Using Reactive, I have module A with a public Theme that is being referenced as the default theme in module B.
In the later, I have a public block that is styled with the classes defined in the module A Theme style sheet.

Now, I am referencing the public block in module C and using it in a screen but when this happens, the module A public theme is not being referenced automatically and, therefore, the styling of the public block is not seen when opening module C screen.
Moreover, if i inspect module C screen in the browser, i can see that module A style sheet is not loaded.

This seems a very common use case so i'm puzzled with this.
I reached out to OutSystems support that answered that it would be good also to post this question in the forum, so there you go.
Below, find an image that might help understand the problem.


 

Thank you in advance.

0
0
21 Mar

HI Rafael! 

The CSS from the web blocks is loaded but not any of the CSS from the Module where it is defined, mainly because  the web block should follow the theme from the module where it is used , not his own. 

If you have any class that is needed, you have to define that class in the CSS from the web block or in the CSS from your theme. 

Hope this helps you. 

Graça

0
0
21 Mar

Hello Graça.

The reason why I have all the CSS in the style sheet of module A theme is because i only want to load all the styles that i need once. Since i will have a lot of public blocks that will be consumed in module C, if i put the CSS in the block style sheet directly, i might encounter some performance problems because there will be loaded a lot of style sheets (all the ones that module C depends on + style sheets from the referenced blocks).

0
0
21 Mar

Have thought in building a theme to your application? 

Take a pick in the  third option from this page

 https://success.outsystems.com/Documentation/11_x_platform/Developing_an_Application/Design_UI/Look_and_Feel/Themes?origin=d

If your theme includes all the common CSS you use across the application the problem is solved for the majority of the WBs and you'll need to define in the WBs only the ones that are very specific to the WB that uses them. 

0
0
21 Mar

I tried to make a diagram to explain better the use case.
So, as you can see below, Module A and B belong to a specific business scope different from the one where Module C fits.
This representation is desired because, in the future, if another consumer appears that belongs to a different business scope, say Scope Z, the consumer won't have to bother with styling.

0
0
21 Mar

Well, it seams the only other way to do it is upload the CSS needed with the screen. Is feasible , I have seen it done and working but I no longer remember the details. 

You would need to build a file (txt file) with all the CSS specific to the blocks in Module B . The way  to upload it and, if using reactive, at which phase, I do not know. 

But if you want to keep the blocks CSS independent from the application theme , putting it in the block is the simpler option.

 Sorry I could not help you.

0
0
21 Mar

But you did help :)

I will try to come up with a solution also and post it here.

Thank you Graça.

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