Views: The Essentials

Views allow you to control how, when, and where data is presented to the app user, and how the user interacts with the data.

The following provides an example of the Nearby card view from the Facility Inspections template. You have full control over the view name (Nearby), its position in the app (navigation bar), its layout and contents, and conditions for when it is displayed.

Nearby card view from Facility Inspections sample.

Manage views as described in the following sections:

See also View types.

Explore the Views panel

We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

The Views panel is available in the new editor (preview) only. The Views panel does not appear in the legacy editor.

Go to App App icon > Views.

The Views panel is displayed and the first view in the primary navigation is opened in the editor.

Views secondary panel

As highlighted in the previous figure, you can use the View panel to:

See also View types.

Create a view

 To create a view:

  1.  Open the app in the app editor.
  2. Go to App App icon > Views.
  3. Depending on where you want to launch the view in your app, click + adjacent to Primary navigation, Menu navigation, or Other views. 
  4. You can change the view position, as described in Move a view to a different position,
  5. The Add a new view dialog displays.
  6. Do one of the following:
    • To add a suggested view, click the suggested view.
    • Click Create a new view.
  7. Configure the view.
  8. When you are done, save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.
We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

 To create a view:

  1.  Open the app in the app editor.
  2. Go to UX > Views.
  3. Perform one of the following tasks:
    • To create a new view, click New View.
    • To add a suggested view, click the suggested view.
    • To copy an existing view, expand it and click Copy.

      Create a new view, add a suggested view, or copy an existing view.
  4. Configure the view.
  5. Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

Configure the view

Configure the view by using the settings described in the following sections.

View details

Configure the view details defined in the following table.

Setting

Description

View name

Name of the view. It must be unique within your app.

If you enter a name that is the same as an existing view, the app editor will automatically append a number to the view name to differentiate between them.

For this data

Data referenced by this view. Select a table or slice from the list. Only data from the table or slice can be displayed within the view.

To create a new slice, see Create a slice when configuring a view.

Note: This option is not available for dashboard views.

View type

View type that determines how the data is presented to the app user.

Select from a variety of view types, such as chart, form, detail, map, table, and more. Each view type has its own characteristics and type-specific view options.

Position

Position of the view in the app display. Select one of the following positions:

  • Primary navigation: Accessed in the primary navigation bar at the bottom of the screen for mobile and tablet apps and in the left navigation bar on desktop apps Set Position to first, next, middle, later, or last based on the preferred order of appearance.
  • Menu navigation: Accessed in the app's main menu. Set Position to menu.
  • Other view: Accessed only when referenced implicitly while navigating through data. Set Position to ref.

For example, the following shows the position of primary and menu navigation views in mobile apps:

Mobile app showing primary views in the bottom navigation bar and menu views in the dropdown menu

View options

Each view type has type-specific view options that allow you to tailor the appearance of the view. For example, the view options for a table view are shown here:

View options example

Display

All view types have configurable display options. Display options affect how the view is presented in the navigation bar along the bottom of the app display, and in the app's main menu.

Display options for a view

Configure the view display by using the settings defined in the following table.

Setting

Description

Icon

Icon to be displayed along with the view's Display name (see below). Choose an icon from the predefined list. Custom icons are not allowed. Every view must have an icon. If no icon is selected, a type-specific default will be used.

Display name

Name displayed for the view. Enter a fixed value (T) or to a text expression (flask).

Display name using expression

If Display name is not specified or if set to an expression that evaluates to a blank value, the view's name is used.

Show if

Yes/No expression that determines whether the view is included as a navigation element in its designated Position (for example, in the navigation bar or the main menu).

If the expression evaluates to TRUE, the view will be included. 

Show if using expression

No Show if expression is equivalent to the expression, TRUE .

Warning: Show if is not a security measure. Show if merely hides the view from navigation; there are other legitimate ways for a user to access the view.

Behavior

Each view type has type-specific behavior options that may allow you to tailor the behavior of the view when the user interacts with it. For example, the behavior options for a table view are shown here:

Behavior options in a view

Configure the behavior for the view by using the settings defined in the following table, if available.

Setting

Description

Event Actions

Some view types provide the opportunity to customize the app's response to certain events triggered by user activity. When a recognized view event occurs, the configured action is performed.

App link

Not configurable. Provides two ways to target the view from a navigation element:

  • Deep link to the view to be used as the target of an action of type App: go to another view within this app. For example: (LINKTOVIEW("By House")

  • Full URL for the view to be used as the target of an action of type External: go to a web site or from a web browser.

Note: The use of app links is not affected by a view's Show if setting; a Show if expression that evaluates to FALSE does not prevent the use of an app link to the view.

Documentation

Expand the Documentation section and enter a descriptive comment for the card view that will enable collaborators to easily understand its purpose.

Preview a view

 To preview a view:

  1.  Open the app in the app editor.
  2. Go to App App icon > View.
  3. Position your cursor over the view in the Views panel and select More > Show in preview.
We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

  1. Open the app in the app editor.
  2. Go to UX > Views
  3. Expand the view you want to preview.
  4. Click Show in Preview.

Rename a view

To rename a view:

  1. Open the app in the app editor.
  2. Go to App App icon > View.
  3. Position your cursor over the view in the Views panel and select More > Rename.
  4. Edit the name end press Enter.
  5. Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

You can also rename a view by editing the View name field when configuring the view details.

We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

  1. Open the app in the app editor.
  2. Go to UX > Views
  3. Expand the view you want to rename.
  4. Edit the View name field under View details.
  5.  Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

Move a view to a different position

To move a view to a different position:

  1. Open the app in the app editor.
  2. Go to App App icon > View.
  3. Position your cursor over the view in the Views panel and select More > Move to and select Primary navigation, Menu navigation, or Other view
    The currently selected position is checked.
  4.  Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

The view is copied viewname_n, by default, where viewname is the name of the existing view and n is incremented by 1 each time you copy the view. You can rename the view by editing the View name field when configuring the view details.

You can also move a view to a different position by editing the Position field when configuring the view details.

We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

  1. Open the app in the app editor.
  2. Go to UX > Views
  3.  Edit the Position field under View details.
  4.  Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

Copy a view

To copy a view:

  1. Open the app in the app editor.
  2. Go to App App icon > View.
  3. Position your cursor over the view in the Views panel and select More > Duplicate.
  4.  Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

The view is copied viewname_n, by default, where viewname is the name of the existing view and n is incremented by 1 each time you copy the view. You can edit the name of the view, see rename the view.

We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

 To copy a view:

  1.  Open the app in the app editor.
  2. Go to UX > Views.
  3. Expand the view you want to copy.
  4. Click Copy.
  5.  Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.

Delete a view

 To delete a view:

  1.  Open the app in the app editor.
  2. Go to App App icon > View.
  3. Position your cursor over the view in the Views panel and select More > Delete.
We've made some improvements to the app editor, currently in preview.
You are opted in to the new editor by default, but you can switch back to the legacy editor at any time.

If you are using the legacy editor

 To delete a view:

  1.  Open the app in the app editor.
  2. Go to UX > Views.
  3. Expand the view you want to delete.
  4. Click Delete.
  5. Save the app by selecting one of the following:
    • Save - Save the app
    • Save & verify data - Save the app and verify the data defined.
Was this helpful?
How can we improve it?

Need more help?

Try these next steps:

Search
Clear search
Close search
Google apps
Main menu
Search Help Center
false
false
false
false