Static Views
      Back to home
      1. Knowledge Base
      2. Views
      3. Static Views

      About Rich Text Views

      This article aims to provide a comprehensive overview of rich text views.

      This article covers the following topics:

       

      What are rich text views?

      Rich Text views are static views that allow you to add formatted text and images to your app that are not stored within records in your app. 

      Rich text views are often used for:

      • Welcome text as an introduction to the app

      • Adding logos and headers to pages that are printed

      • Instructions or lengthy text

       

      What do rich text views look like in the Live App?

      In the live app, rich text views showcase the static content that you have added. By default, these views will display the text "New Rich Text", which can be easily customized to suit your needs.

      richtext1

       

      Where do I access rich text views?

      To access your existing rich text views, navigate to the Pages section of the Builder and click on the page that contains the desired rich text view. The page preview will then display all the views currently on that page.

      From there, simply hover over the view and click the pen icon to begin editing the rich text view.

      richtext2

      To add new rich text views to your pages, select the "+ Add View" button highlighted below. From there, simply choose "Rich Text" from the "Static Views" section:

      richtext3

      Tip: To learn more on how to add, edit, and delete views, see our article here.

       

      Managing Rich Text Views

      To edit rich text views, follow the same process as editing other views. Simply hover over the view in the page preview and click on the pen icon.

      This will open the view editor in the side toolbox, allowing you to make changes directly in edit mode:

      richtext4

      These views utilize a user-friendly WYSIWYG editor, where you can input text and easily format it with various options such as headers, bold text, links, and more.

      The toolbar located at the top of the editor is utilized for incorporating rich formatting to your text. Below are the various formatting options that are accessible in rich text views:

      • Headers

      • Bold

      • Italics

      • Strikethrough

      • Font color

      • Background color

      • Links

      • Images 

      • Embedded Videos

      • Tables

      • Unordered Lists

      • Ordered Lists

      • Indentation

      • Text alignment

      • Horizontal rule dividers

       

      Using Images in Rich Text Views

      Adding Images

      To include images in your rich text view, you will need to add them using a link to an image that is hosted on another website:

      richtext5

       

      After adding the image URL, the image will be visible in both the rich text editor and the page preview. Once your changes are saved, the image will be visible in the Live App.

      richtext6

       

      Editing Images

      To modify an image in a rich text view, simply open the rich text editor and click on the image. This will open the image settings where you can make changes:

      • Title: This text will be used in the alt attribute, which is an HTML attribute applied to images. This text is often used as a text alternative for search engines or accessibility.

      • Link: When a user clicks on the image in the Live App, they will be directed to the specified link.

      • Position: This setting determines the positioning of the image within the view.

      richtext7

       

      Using HTML

      An additional option is available for users to insert their own HTML code by clicking on the < > icon in the editor toolbar:

      richtext8

      Note:

      Although you can use some basic HTML in rich text views, it's important to note that they are not true code views. As a result, certain elements may be removed from the view when you save it.

      If you encounter any issues while trying to save the code, it is likely because it cannot be executed from there. In such cases, it should be inserted into the API & Code area in the app's settings

       

      Embedding Content

      External content can be embedded into rich text views by placing the embed code within an iframe.

      To utilize an iframe, acquire the embed code from the third-party app, then access the view editor for the rich text view where you wish to display the embedded content. Choose the HTML editor in the toolbar.

      richtext9

      Next, insert the iframe code and incorporate the embed code within it.

      Note: If you encounter any difficulties setting up the iframe properly, you can easily find iframe code generators through a quick web search. Generators will assist you in adding necessary iframe elements such as width and height.

       

      Notes and Troubleshooting

      • At this time, anchor links are not supported by rich text views.

      • If images appear broken in your rich text views, it could be because the URL is not public. For instance, images embedded in Google Drive may not be visible.

        • Some customers have resolved this issue by using conversion tools like bytenbit.com to convert the image.

      • In case you're utilizing a link copied from Dropbox, you should remove the ?dl=0/ and append /?raw=1 to the end of your URL to properly insert the image itself, rather than the page where the image is hosted.