Text, HTML, and Embedding in Clappia

Help Video

‍

This article explains the Text, HTML, and Embedding block that can be added to design an app.

‍

‍

Use Cases

1. Adding read-only instruction, help text, formatted text, images, videos etc. to an app
2. Embedding any videos or external images
3. Embedding another Clappia app
4. Add long questions or paragraphs

Editing the Block

Click on the block and start editing on the panel that appears on the right side.

Label

This is what appears as the label for the content added in this block.

‍

Plain Text or HTML

This is the editor area where you can write and edit any text, insert an image, link, table, or a page break in the box and it will appear as a read-only text to the end-users.

‍

- Type any plain text in the box and stylize the text to Rich Text with respect to font size, font colour, background colour, bold, italicize, underlining, alignment, ordered grouping, indentation and many more formatting options along with the source code generator of the text.

- You can also insert images. Click on the Image icon a dialogue box will appear asking you to upload the image. 

- After selecting the image, the parameters of the image are automatically fetched from the original image. The relation between the width and height is locked by default. You can click on the lock icon to remove the relations nd resize your image.

- You can also insert a table and type your text and insert any media in the cells of the table.

‍

- the above text and image has automatically generated the code in HTML format in the backend. You can click on the source code button and the HTML opens up.

Conditional Formatting for Text in the HTML Block

You can format any text inside the editor of the HTML Block using conditional formatting. This allows you to change how specific text appears, or hide it completely, based on conditions using field variables and formulas.

This is useful when you want certain information to stand out (for example, highlight urgent cases), or to hide details that are not relevant for a particular submission.

How to apply conditional formatting

Highlight the text in the editor that you want to format and right-click on the highlighted text. Choose Apply Conditional Formatting from the menu.

In the below image, you can see the highlighted text belongs inside a table. To highlight texts that are in the same row but different coloumns, conditional formatting needs to be applied separately. The below example, "Pending" and "4" will be formatted separately.

Inside the Conditional Formatting panel, you can:

• Add a condition using the same formula style used across Clappia. For example, {status}="Pending", you can type @ to select the fields from your app.

• Choose a CSS Property to apply when the condition is true:
  • Font
  • Font size
  • Text color
  • Background colour
  • Hidden (useful when you want to hide specific text entirely based on a condition)

You can add multiple properties by clicking on Add Another Property for the same condition or add multiple conditions.

In the example below, the text appears with a different text colour when the status value is "Open":

• Condition: {status} = "Open"
• CSS Property: Background Colour
• Value: (choose a colour)

Similarly, you can hide an entire line of text if it should not appear.

To edit a conditionally formatted text, highlight the text > right click > select 'Update Conditional Formatting'.

To remove the conditional formatting, right click the text and select the option 'Remove Conditional Formatting'.

‍

‍HTML

If you know the basics of HTML, you can add rich text or anything that HTML supports by writing HTML in the input box.

If you don't know how to write HTML, we recommend using this awesome service https://wordtohtml.net/ that lets you write anything like a word file and converts it into HTML. Copy the converted HTML and paste it here.

You can also embed your URL in this block.

‍

- Click on the source code <> icon and an input box opens up.

‍

- Write your code or embed your URL and click on save.

‍

- You can see the HTML is converted accordingly to plain text in the editor and displayed accordingly in the app.

‍

Live App with examples

Supported HTML Tags and attributes

Popular ones -

• div
• p
• b, i, u
• a - Supported Attributes: class, href, name, target
• button - Supported Attributes: type, class, data-*
• img - Supported Attributes: src, width, height
• iframe - Supported Attributes: src, width, height, frameborder
• h1, h2, h3, h4, h5, h6
  
• table, th, tr, td, tbody, thead, tfoot - Supported attributes: class, style, width
• aside
• header
• footer
• nav
• section
• hr, br
• ul, ol, li
• blockquote
• pre
• small
• span
• strong
  

Others -

• abbr, address, article
• bdi, bdo
• caption, cite, code, col, colgroup
• data, dd, dfn, dl, dt
• em
• figcaption, figure
• hgroup
• kbd
• main, mark
• q
• rb, rp, rt, rtc, ruby
• s, samp, sub, sup
• time
• var
• wbr

‍

Formatting Options

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

What Else Can You Build with the Text, HTML & Embedding Block?

The Text, HTML & Embedding block is much more than a way to display text or instructions. By combining HTML with values from your app, you can completely customise how information is presented to users. Create dashboard-style layouts, colourful KPI cards, profile cards, summaries, navigation tiles, approval screens, or visually rich forms that don't look like traditional forms. You can also display values from Formula Blocks, Code Blocks, or other fields in custom layouts, making it easier for users to view and understand important information at a glance.

Examples of custom interfaces built using the Text, HTML & Embedding block are shown below.