View 3

layer group

description_view

The dataset chores contains 2 columns with data. So far we’ve only displayed 1 column, the name. Let’s display the description in a separate view.

Go to Views again and click New to create the third view for this example. Name the view description_view, this time select type View and click Create.

In the Views Properties tab, set View Layout Mode to Free Positioning so we can place components where we want them.

Rich Text Display

  • The Rich Text Display displays formatted text

  1. Click the Add Component tab.

  2. Find the Text Display group.

  3. Click Rich Text, and a new component is added to the canvas.

  4. Move it to the middle of the canvas and resize it to your liking

Input

  • The Text Input lets the user input text.

    1. Under the View Properties tab, scroll down to Inputs and click New Input.

    2. Give the input the same name as the dataset column it should display,in this case description.

    3. Select type Text and click Add.

    4. Select the rich text display on the canvas, and open the Component Properties tab.

    5. Under Data, write ${description} in the field Text. This instructs the rich text display to get it’s content from the input called description.

Back-navigation

The last thing we will do is to add events so when we click the description in the Rich Text component, we navigate back to the second_view or the welcome_view.

Go to Views again and select description_view.

Normal click

  1. Select the View Properties tab.

  2. Find Outputs and click New Output.

  3. Name the output richTextClick and select type Event.

  4. Click Add.

  5. Select the rich text component on the canvas.

  6. Select the Component Properties tab.

  7. Find On Press and select richTextClick in the drop down list.

Long click

  1. Select the View Properties tab.

  2. Find Outputs and click New Output.

  3. Name the output richTextLongClick and select type Event.

  4. Click Add.

  5. Now, select the rich text component on the canvas.

  6. Select the Component Properties tab.

  7. Find On Long Press and select richTextLongClick in the drop down list.