Working with Views

The views are the main building blocks of your app. Each screen in the app is represented by a view. The Views service (formerly Screen Builder) offers different types of predefined views that cover the most common layout and functionality scenarios.

This article provides details on working with views and elaborates on each view type and its specifics.

Types of Views

The Views service features the following default types of views:

VIEW TYPE DESCRIPTION
Empty view Use this view when you want to quickly create your app structure and navigation, or when you want to later define custom content for the view with AppBuilder. If you need to, you can later change the view type to a predefined one.
Form view Use this view to create forms in your app and collect data from users. You can easily add action buttons and various form elements to the view. You can enable data binding for this view.
Authentication view Use this view to provide a mechanism for registration and authentication of users in your app. The logic behind these views is tied to the Backend Services user management and you do not need to write any additional code to implement registration and authentication.
Master Detail view Use this view to present read-only or editable data records to users. You can enable user-side adding, editing and deleting of data entries. You can show data stored in Telerik Backend Services, Progress Data Service or Progress Sitefinity and enable various features to provide easier browsing of the data, like grouping, filtering, master-detail preview, etc.
You can link Master Detail views to represent related data.
Map view Use this view to present on a map read-only or editable location data records to users in the form of pointers on the map. You can enable user-side adding, editing and deleting of data entries. You can show data stored in Telerik Backend Services, Progress Data Service or Progress Sitefinity.
You cannot create custom templates from this default template.
About view Use this view to share information about you and your app. It will help you stay connected with your users using the different social network "Follow us" links and contact button.
Progress Sitefinity-based views Use any of these views to create a Master Detail view bound to the selected static or dynamic content type. For example, a view bound to the News or Blogs in your Progress Sitefinity.
You cannot create custom templates from these default templates.
This feature is applicable only to hybrid apps.

If needed, you can create your own custom view templates and share them throughout your account. For more information, see Working with Custom View Templates.

Add New Views

To add a new view to your app, complete the following steps:

  1. From the left-side navigation, select ViewsManage Views.
  2. Click Add View and select the type of view that you want to add.
  3. Provide the view name and title.
    The name is later used as an object name in the code. The title is shown in the application user interface.

    Once defined, you cannot modify the view name. Make sure that the name matches the naming convention that you want to apply to your code.

  4. Choose whether you want the view to be visible in the main app navigation. If disabled, this option also hides the navigation menu from the current view.
  5. Configure the view-specific settings.
  6. Click Apply.

The Views service reloads the app to include your new view and loads the updated app in the device simulator on the right.

When you have related content types, you can create linked views to represent the related data. For example, you can use linked views to show a list of blogs and blog posts per blog.

You can also insert hyperlinks to another view inside the current view to enhance the app navigation or to open a view which is hidden from the navigation and must be accessible only from the current view.

This operation is applicable to apps that use a Backend Services, a Progress Data Service, or a Progress Sitefinity data provider.

You can link static or dynamic content types which have a hierarchical relation (one of the content types is a parent to the other). For example, blogs and blog posts.

If you need to represent related data (for example, categories and their respective items), you can link two Master Detail views or two Progress Sitefinity-based views to create a list in which every item opens a second filtered list. For example, you can use linked views in a shopping app to list the available brands on one screen and the available items for a selected brand.

The primary view is the list which opens another list view with filtered content. When you work with hierarchical data, this list is bound to the parent data type or object. For example, the brands in a shopping app.

The secondary view is the filtered list view opened by tapping a list item in the primary view. When you work with hierarchical data, this list is bound to the child data type or object. For example, the available items per brand in a shopping app.

To link views, complete the following steps:

  1. On the Data Providers tab, verify that you have configured one of the following data providers:

  2. On the Manage Views tab, verify that you have created two Master Detail views or two Progress Sitefinity-based views.

  3. If you are using Master Detail views, verify that you have bound their list views to their respective content types.
  4. Open the primary view.
  5. In the Master Detail View panel, navigate to the List Screen section and expand Item Action.
  6. Select Open existing view with related content and from the drop-down list, select the secondary view.
    If you are using a Progress Sitefinity data provider and the drop-down list is empty, the hierarchical relation between the content types is not configured properly. Make sure that one of the content types is a parent to the other and try again.
  7. Provide the required relation data, based on your data provider:
    • Backend Services: In the <secondary view> identifier fields drop-down menu, select the relation field which links the two content types. For example: myBrandID.
    • Progress Data Service: In the <secondary view> identifier fields text box, provide the integration name for the relationship between the core objects. For example: R123456789.
      In the <primary view> field that refers to <secondary view> text box, provide the integration name for the field which connects the core objects. Usually, this is the id of the core object bound to the primary view.
    • Progress Sitefinity: No additional data configuration required.
  8. Apply all changes.
  9. (Optional) Remove the secondary view from the navigation.
    1. Open the Master Detail view or the Progress Sitefinity view that you want to remove from the navigation.
    2. In the Master Detail View panel, navigate to the General section and expand Navigation.
    3. Deselect the Include this view in the app navigation check box and apply the change.

When you need to navigate from the current view to another view, you can insert a hyperlink. When a user taps the hyperlink, your app will switch to the configured target view.

The source view contains the hyperlink which leads to another view.

The target view is the view to which the hyperlink navigates, when tapped.

  1. Verify that you have created the views that you want to connect with a hyperlink.
    The views must be Master Detail, Progress Sitefinity-based view, or Form views.
  2. On the Manage Views tab, open the source view.
  3. Click Add field in the Custom Fields group and select Hyperlink.
  4. Provide Name and Label.
  5. Configure the Label position.
  6. From the Link type drop-down list, select View.
  7. Configure the hyperlink text.
  8. From the Link to view drop-down list, select the target view.
  9. Click Apply.
  10. (Optional) If you want to link the target view to the source view, open the target view and repeat Steps 3-9.

Reorder Views

If you want to change the order of the views in the navigation menu, you can drag and drop them in the Manage Views tab. After each reordering you need to confirm and apply this change.

This operation regenerates the entire app and any code changes made outside of the Views service will be lost. Any changes made in the Views service will be preserved.

To prevent the loss of custom code, make sure that you have added your custom code changes in the dedicated block comments in the generated code.

Delete Views

If you no longer need a view in your app, you can delete it.

To delete a view, complete the following steps:

  1. Verify that the view that you want to delete is not the initial app view.
  2. Verify that the view that you want to delete is not referenced in another view.
  3. On the Manage Views tab, select the view that you want to delete.
  4. Click the cogwheel icon next to the view title and select Delete.
  5. Confirm that you want to delete the view.

This operation regenerates the entire app and any code changes made outside of the Views service will be lost. Any changes made in the Views service will be preserved.

To prevent the loss of custom code, you might want to use one of the following approaches:

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.