12
Views
5
Comments
Solved
Numbers\UserInitials pattern not formatting as expected
Application Type
Traditional Web
Service Studio Version
11.10.5 (Build 37061)

I'm creating a simple chat feature using the Content2\ChatMessage webblock.  I simply wanted to add the User Initials pattern to label each message rather than the whole user name.  Sounded simple!

However, when added no formatting at all is being applied to Numbers\UserInitial pattern, so all I get is the text, no circle, no colour set despite all attributes being set.  It feels like the pattern classes aren't getting applied?

UserInitialProperties.png

mvp_badge
MVP
Rank: #73
Solution

Hi Martin,

I just checked the shared .oml file and found that the problem was occurring because of the absence of Base theme, where all the widget related and other root element CSS rules are defined.

Steps to follow:

  1. Open Manage Dependencies window
  2. Search for BaseThem inside OutSystemsUIWeb module

  3. Map the Base theme on the application module from the property section as shown below


 

Other than this, I also observed that the screen is not referring to any screen layouts and Common UI flow is also missing (maybe it's because of sample .oml file)?!

Please refer to the attached updated .oml file.

Hope this helps you!


Kind regards,

Benjith Sam

UserInitial.oml

mvp_badge
MVP
Rank: #73

Hi Martin,

Just now I checked the mentioned case and it's working fine for me.

OutSystemsUIWeb: Version 1.8.7

If possible could you please share the sample .oml file with us?


Kind regards,

Benjith Sam

Rank: #25545

Hi!

Thanks for your reply.  Its a bit tricky for me to share the actual OML, but I have created a new stripped down one that does the same thing.  I just hope I am missing something silly....

UserInitial.oml

mvp_badge
MVP
Rank: #73
Solution

Hi Martin,

I just checked the shared .oml file and found that the problem was occurring because of the absence of Base theme, where all the widget related and other root element CSS rules are defined.

Steps to follow:

  1. Open Manage Dependencies window
  2. Search for BaseThem inside OutSystemsUIWeb module

  3. Map the Base theme on the application module from the property section as shown below


 

Other than this, I also observed that the screen is not referring to any screen layouts and Common UI flow is also missing (maybe it's because of sample .oml file)?!

Please refer to the attached updated .oml file.

Hope this helps you!


Kind regards,

Benjith Sam

UserInitial.oml

Rank: #25545

This is great, thanks!  It solves the immediate issue with the formatting.

I think I need to do some reading on Themes. We already have a custom theme used within the App, so I want to add what's missing from the OutSystemsUIWeb   BaseTheme?  I'm hoping that's straight forward as I don't want to change the look of everything that has been developed beforehand....

mvp_badge
MVP
Rank: #73

You're welcome, Martin. Glad to help you :)

Yes, you can also follow the approach of theme layering in your application architecture i.e. Consider OutSystemsUIWeb - BaseTheme (as it includes all the native widget CSS rules) as the foundation theme layer and on top of it define the custom theme based on your requirement. 

Kind regards,

Benjith Sam