Table of Contents

Rich Text

Danielle Kellogg Updated by Danielle Kellogg

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. 

It's 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 display static content you choose to add. By default, these views will contain the text “New Rich Text”, which you can then customize. 

Arrow pointing to rich text view in a live app

Where Do I Access Rich Text Views?

You can access your existing rich text views by clicking on the page that contains your rich text view in the Pages section of the Builder. Once you have selected the page, the preview will display all views currently on that page. There you can select and edit any rich text view in the preview by hovering over the view and clicking the pen icon. 

Hand pointing to 'edit this view' option for Rich Text views in the Knack Builder

Further, you can add new rich text views by selecting the “+Add View” button in the Pages section of the Builder. Then select “Rich Text” from the “Static Views” section.

Arrow pointing to 'Add View' button in Builder & another arrow pointing to the Rich Text view option

Read more on how to add, edit and delete views in our About Views article.

Manage Rich Text Views

Editing rich text views is done the same way other views are edited. Select the edit icon while hovering over the view in the page preview and the view editor will open in the side toolbox. The rich text view editor will open directly in edit mode. 

Hand pointing to the 'Edit this View' button for a Rich Text view

These views use a simple WYSIWYG editor, which means “what you see is what you get”. Here you enter text and format it with basic options for headers, bold, links, and more.

The toolbar at the top is used to add rich formatting to your text. Here are the following formatting options available in rich text views:

  • Headers
  • Bold
  • Italics
  • Strikethrough
  • Font color
  • Background color
  • Links
  • Images (added with a URL)
  • Embedded Videos
  • Tables
  • Unordered Lists
  • Ordered Lists
  • Indentation
  • Text alignment
  • Horizontal rule dividers

Using Images

If you are adding images to your rich text view, these must be added via a link to an image hosted elsewhere on the internet. 

Arrow pointing to the image insert button for Rich Text views

Once you have added the image using the image URL, the image will appear in both the rich text editor and the page preview. In addition to being visible in the Live App once your changes are saved.

Screenshot showing an image appearing in both the Rich Text view editor and the Page Preview section of the Builder

Using HTML

You can also insert your own HTML code by pressing on the very first "< >" icon in the editor toolbar. 

Arrow pointing to HTML button in the Rich Text view editor

While some basic HTML can be used, Rich Text views are not true code views so some elements may be stripped from the view when saved. 

If you're running into issues saving the code, it likely cannot be run from there and should be inserted into the API & Code area on the app.

Embedding Content

You can embed external content into rich text views, however, the embed code needs to be within an iframe.

To do use an iframe, obtain the embed code from the third-party app, then open the view editor for the rich text view you want the embedded content to appear on. Select the HTML editor in the toolbar. Then add the iframe code and place the embed code within that.

You may need to add iframe elements such as width, height, etc. to get this set up to properly. A quick web search should provide iframe code generators if you're having trouble setting this up on your own. 

Notes and Troubleshooting

  • At this time, anchor links are not supported by rich text views.
  • Broken images that are embedded with links may be due to the URL not being public. For example, images embedded from Google Drive will appear broken. We have had some customers resolve this issue by using conversion tools such as http://app.bytenbit.com/index.html to convert the image.
  • If you're using a link copied from Dropbox, you'll need to remove the ?dl=0/ and add /?raw=1 to the end of your URL in order to insert the image itself, not the page where the image is hosted.

How did we do?

Details

Calendars

Contact