OutSystems Markdown Text Widget
Write markdown formatted text in Service Studio, effortlessly!
TL;DR: This widget allows the developer to write markdown formatted text directly into Service Studio. It enables the quick and easy introduction of styling elements (bold, lists, links, separators, headings, etc.) into text, that will then be displayed on your web or mobile application.
Try the demo here or get it from the OutSystems Forge!
I thought about this concept while writing the ‘About’ screen for another project I’ve worked on recently: “What if instead of having to style each bit of text individually, I could just use markdown to style everything, and then have it parsed and rendered on the web application with the intended style?”
What I wanted to display on this screen involved some lists, bold text, links, and images. This is part of the screen I was preparing:
And this is how the screen looks inside Service Studio, while writing the content inside the Markdown Text Widget:
Notice that not only lists, and bold text can be created, but also the links and images can be added just by using markdown. And all of this inside Service Studio! :)
This widget was built mainly to facilitate the writing of content on screens with a lot of formatted static text (such as pages with instructions or documentation), but it can also parse text dynamically. There is an optional input parameter that can be used to update the rendered text at runtime.
This component is based on Markdown notation and it uses the Marked JS library, that is included inside the component (click here to see Markdown syntax). The Marked JS library is only 33kb in size, and as such is very light on your build and load times.
Also, a feature I wanted to have, and one that was rather challenging to code, was the support for multiple instances of the widget inside the same screen. This was achieved by having every widget JS instance identified with an instance id.
Wrap up: This widget allows the developer to type markdown text directly into OutSystems Service Studio.
This means that you can write text without having to drag a lot of different text boxes for bold, links , and even to create lists easily! In essence:
- It accelerates your text formatting needs during development
- It’s easy to use
- Can be used for hardcoded or dynamic text
- It’s very lightweight
- Multiple instances of the block can be used on the same screen
