Set Content And Typography

Set content and typography is an action in the rule panel which is used when you want to change the text (content) and apply styling (typography) of a widget at runtime—that is, while the app is running. It allows you to dynamically update a label, button, or any text-based component when a specific event (like button click) occurs.

Properties and Explanation

Here are the steps to follow in order to use the set Content and Typography action:

1

Select Element Id:

This property is used to specify the widget (like label, text, or button) where you want to apply changes. It tells the system which element should be updated when the action runs

2

Content Text:

This sets or updates the visible text of an element during runtime. It is used when you want to dynamically display or change messages on the page.

🔗 Learn more

3

Font:

This controls the font style, size, weight, and appearance of the selected element at runtime, allowing dynamic UI updates.

🔗 Learn more

4

Line Height:

This setting adjusts the vertical spacing between lines of text in a selected element, enhancing readability or layout control at runtime.

🔗 Learn more

5

Font Weight:

This setting controls the thickness or boldness of the text for a selected element, allowing you to apply light, regular, or bold styles dynamically.

🔗 Learn more

6

Font Style:

This setting defines the appearance of the text, such as normal, italic, or oblique, and is used to style content dynamically at runtime.

🔗 Learn more

7

Text Decoration:

This setting controls visual decorations applied to text such as underline, line-through, or overline, allowing dynamic styling of content during runtime.

🔗 Learn more

8

Text Align:

This setting specifies horizontal alignment of the text within its container. You can choose left, center, right, or justify to control how the text appears at runtime.

🔗 Learn more

Full Configuration Example

Below is a screenshot of the Set Content and Typography action configuration, showing all properties set for the Select Element id, Content Text, Font, Line Height, Font Weight, Font Style, Text Decoration and Text Align:

The screenshots above shows the complete configuration of the Set Content and Typography action, including all relevant properties set up on the page.

A heading is placed on the page with default text. When the user clicks it, a rule runs that changes the heading’s text, centers its alignment, and updates font styling using the Set Content and Typography action.