Displaying text

Looking at the different components for display static or dynamic text

Paragraph

The Paragraph component displays text inside your application. It's the <p> equivalent in html. But of course it supports Bindings so you can render any text you like from any of the available Datasource or JavaScript functions.

Adding a Paragraph

Adding a Paragraph

Then, you can use Bindings within the Text setting in the Settings Panel, or simply enter static text by just typing in the box, or some combination of both.

For example, you may want to display the total number of rows coming back from a Data provider.

Paragraphs also support newlines:

Text bindingDesign view

Customizing text styling

The Paragraph component has several ways of styling the text using the Settings Panel.

SettingDescription
SizeThe size of the text, choose from several presets ranging from extra small to 3XL.
ColorChange the color of the text. Press the X on the bottom to reset to default.
Bold/Italic/UnderlineAdds the respective bold, italic and underline styling. Can be combined.
AlignmentThe alignment of the text. Choose between left, right, center and justify.

Headline

The Headline component is identical to the Paragraph component, with the simple caveat that the sizes are three ahead.

For example a Medium Headline is the equivalent of a 2XL Paragraph.

Adding a Headline

Adding a Headline


Markdown viewer

The Markdown viewer component is similar to the paragraph element. It can display text in your application. But the difference is, that it can render markdown. It is really useful to display text coming from any markdown source, including the Long Form Field element.

The Markdown Viewer component has full support of all markdown elements as displayed above, including headers, images and tables.

Adding the Markdown Viewer component

Adding the Markdown Viewer component

From the Settings Panel you can configure the value of the markdown viewer element, where you can also use Bindings.


Related components

There are a number of other components that can display text, on top of the additional functionality they provide.

These include: