Overriding the London with Metro UI Framework

Overriding the London with Metro UI Framework

Hi everyone, 

I would like to ask a question. Actually, I have several attempts to override OutSystems themes with different UI Frameworks here on the Web, but I can only make use of Bootstrap among them.

Now, I want to create my blog to use the Metro UI Framework and it's similar to the example template they have. 

While the existing UI styles are already existent and uses London theme, I really wanted to make use of this. My attempt is that I removed London Theme from the references, and added Metro UI in the CSS of Themes, and minified version at the Javascript eSpace. It gets messy as I go along in fixing the warnings in the TrueChange. 

Any useful tips on changing from London to Metro or any other UI Framework tools. I feel I can be very productive when I can even leverage these UI toolkits with OutSystems.

By the way, I am currently using the personal environment, since the application I'll be constructing is my own personal blog.


Looks interesting, I'll do a quick try on it and see what TrueChange issues I get.

Most of the times the challenge is to make sure the layouts have all the required placeholders for the scafolding to continue working.

From a quick look on the CSS we wont be able to use the outsystems Grid though ..so it loses some of the platform capabilities there.

Not bad for a rush attempt: example page.
DIdn't know where to put the "Actions" placeholder, and didn't add the "Header" placeholder since I think the Title would fit there better. If you see a better place to put the "Title" and "Actions" go ahead.

There are no TrueChange warnings, but scaffolding does some wierd stuff like adding some tables in an attempt to workaround not having a Grid. You will probably not going to want to use any of it anyway since the framework is all based on tiles.

Attaching the module I created.
Already has all the css, javascript and dependencies (latest versions of jquery 2.x and jquery widget).
The only change I did in the css was replacing the "../" to "/MetroTheme/" to make sure the font's always had the correct location inside the module.

Didn't try to do the Menu stylings, but left the placeholder and block there.

Tried to do a little attempt on the search button but since I removed the form it kinda failed. Didn't lose any time to actually try making it work, just left it in there to show the styling.

Added some blocks to help on the Tile patterns, but since most content styling requires specific styles to be applied on each div I think it's better to do it inplace instead of having specific "Pattern" blocks for each combination.

Would be nice to give it a bit more work and add on the forge later when a bit more complete,
Tell me what you think.

João Rosado


This is WOW for me. :) Well, I was thinking of selecting some CSS rules on the Metro theme and some Javascript libraries, since OutSystems can do better than that (with my at least 1 year experience with OutSystems) like for example, the Table Records.

The implementation of Metro UI would be a challenging one for me to obey with the Responsive, Mobile-ready theme. I think this made me motivated to at least create a simple OutSystems application with the Metro Theme before I dive into my personal blog development.