Views

Views represent web pages or mobile screens together with all the necessary settings for them. They are contained in modules. Views consist of components that can be predefined components from the Kinvey Studio component palette or your own components.

View Types

The view types that you can create in a module divide in several categories.

System Views

The so called system views are predefined and are only available in the System module. They can be customized to your needs for both web and mobile.

The views offered by the System module include:

  • app-layout (web)—determines the layout of web pages.
  • home (mobile)—a home screen for the mobile app that initially contains information pertaining to Kinvey Studio. You will need to customize or remove it in your production apps.
  • home (web)—a landing page for the web app that initially contains information pertaining to Kinvey Studio. You will need to customize or remove it in your production apps.
  • login (web and mobile)—predefined sign-in page with web and mobile variations
  • register (mobile)—sign-up screen for the mobile app
  • register (web)—sign-up screen for the web app

Predefined Views

When creating a view, you can choose from a number of predefined templates that facilitate you to implement the most common app scenarios such as visualizing databases. They come with predefined layout, look, and feel that you can use directly in a production-quality app. In addition, you can tweak the templates to fit your needs.

Examples for predefined views include:

  • Web:
    • Data Grid
    • Data Grid Form
  • Mobile:
    • Single Line
    • Chat View
    • Two Columns Cards

Blank Views

The Blank view type gives you full control over the view layout. You can design a Blank view completely visually by dragging and dropping Kendo UI components. Consequently, you can extend the view's functionality by writing code or change its appearance.

Custom Code Views

The Custom Code view is a special type of view that you can create for both web and mobile. Dragging and dropping components is disabled for this view type. It only creates three files that you need to use to define the view's layout and functionality from scratch: a .css file, an .html file, and a .ts file that you can view in Code mode.

Browsing Views

  1. Enter an application and then open the module where you want to create the view.
  2. Find the Views pane on the left.
  3. To filter what views you see, use the platform toggles on the top:

    • Toggle the desktop monitor icon to show or hide web views.
    • Toggle the mobile device icon to show or hide mobile views.
  4. Use the Search box to filter the list of views.

    Each letter you type filters down the list in real time.

  5. Recognize the view platform by the icon in front of it:

    • Web views wear a desktop monitor icon
    • Mobile views wear a mobile monitor icon

Adding Views

  1. Enter an application and then open the module where you want to create the view.
  2. Click the plus sign in the upper-left corner.

    The Add View dialog box appears.

  3. Select platform: Web or Mobile.

    The view types predefined for the selected platform appear.

  4. Select the predefined view type that you want to add.

  5. In Name, provide the development name of the view.
  6. (Optional) In Display Name, define the name of the view as it will appear in the navigation and on the landing page of the generated application.
  7. Under Mobile navigation, select the type of navigation where you want the view to appear.

    You can change the navigation setting later.

  8. Under Authentication, ensure that Requires Authentication is unchecked if you want to provide anonymous access to the view.

  9. Click Add View to save the view properties and close the Add View dialog box.

Adding Master-Detail View on Mobile

The master-detail pattern is popular in mobile development as is allows to display rich data about products or other list data within the constraints of the limited screen real estate.

The following procedure creates and interconnects three views:

  • Master—shows a simplified list of all items in the collection
  • Detail—shows detailed information for a selected list item
  • Form—collects input from the user to create a new collection item

To create the Master view:

  1. Enter an application and then open the module where you want to create the view.
  2. Click the plus sign in the upper-left corner.

    The Add View dialog box appears.

  3. Select Mobile to see the available mobile view types.

  4. Create a list-type view that most closely matches your needs:

    • Single Line
    • Two Lines
    • Image & Single Line
    • Image & Two Lines
    • Single Column Cards
    • Two Columns Cards
  5. In the Inspector on the right, click Data > Collection and select the backend collection that feeds data for the list.

  6. Under the section by the same name as the view type, configure what entity fields to display in the list.

    For example, in a Two Lines view, you can select the Title to display the registrationPlate and the Second Line to display the make.

  7. Click the Save icon to save the changes to the view.

To create the Detail view:

  1. Create a new view:

    • Automated approach:

      1. In the list of views, click the gear icon next to the master (Vehicles) view and select Create Details View.

        A new view (vehiclesMasterMobile-details) appears that includes components to display the respective data types from the Master view. It has the same data service configured as the master view.

      2. Make any customizations that you would like and finally click Save.

    • Manual approach:

      1. Create a new Blank mobile view.

        Name is accordingly. For example, Name: vehiclesDetailMobile; Display Name: Vehicle Details.

      2. In the Inspector for the detail view, add a new data service that matches the data service of the Master view.

      3. For Result Type, select entity

        This option limits the view's access to only the appropriate collection data as determined by the item selected in the master view.

      4. Click Save.

      5. Use the Design mode to lay out all the components needed to display the collection data that you want.

        For example, you could add an Image and bind it to {{$data.vehicles?.image}} and a Label for {{$data.viewDataSource1?.make}}, {{$data.viewDataSource1?.model}}, {{$data.viewDataSource1?.registrationPlate}}, {{$data.viewDataSource1?.vin}}, and {{$data.viewDataSource1?.year}} each.

        Tip Use a nested horizontal Stack Layouts to arrange the labels in a pair of columns.

      6. Click the Save icon to save the changes to the view.

  2. Go back to the Master view.

  3. In Inspector > Properties, find Configuration & Features > Select a view to navigate to when an item in the list is tapped and select the Detail view that you just created.
  4. Click Save.

To create the Form view:

  1. Create a new view:

    • Automated approach:

      1. In the list of views, click the gear icon next to the Master view and select Create Form.

        A new view (<MasterViewName>-form) appears that serves as a form for creating new records in the vehicles collection. It has the following preconfigured:

        • Same data source as the master view
        • Input fields for all data inside a collection entity with appropriate labels
      2. Make any customizations that you would like and finally click Save.

    • Manual approach:

      1. Create a new Blank mobile view.

        Name is accordingly. For example, Name: vehiclesFormMobile; Display Name: Add Vehicle.

      2. In the Inspector for the detail view, add a new data service that matches the data service of the Master view.

      3. For Result Type, select entity
      4. Click Save.
      5. Use the Design mode to add a layout onto the view.
      6. Add a Form component to the layout.
      7. In the Inspector, find Data > Data and select the same data service as the Master view's.
      8. In the form, lay out all the components needed to collect the collection data that you want to write, binding each to the respective data service field from the Inspector.

        Tip Use a nested horizontal Stack Layouts to arrange components in columns.

      9. Click the Save icon to save the changes to the view.

  2. Go back to the Master view.

  3. In Inspector > Properties, ensure that Add New Item Button is selected.
  4. Change New Item Button Text to make sense for your collection.

    Example: Add Vehicle.

  5. In Select a view to navigate to when add new item is tapped, select the form view that you just created.

  6. Click Save.

Reusing a View

In case you want to reuse a certain view layout, you can lay out a Custom type view and then export it as a template.

Templates only store the view's visual layout. Any code changes that you make will not become part of the template.

Exported templates appear in the Add View palette.

To create a template:

  1. Enter an application and create a new view of the Blank type.
  2. Drag and drop the components that you want to appear on the template and save the view.
  3. In the list of views, click the view's gear icon and select Export from the menu that appears.
  4. In Export View as Template, give the template a name and a description.
  5. Click Export View.

To remove a template:

  1. Open your app folder by clicking App Actions > Reveal in Explorer.
  2. Delete the template folder including all files in it.

    The template folder is located under:

    • For web templates: <app base folder>/templates/snapshots/blank/
    • For mobile templates: <app base folder>/templates/snapshots/mobile-blank/

Editing View Settings

  1. In the list of views inside a module, hover the view that you want to edit.
  2. Click the gear icon and select Settings from the menu that appears.
  3. In Edit View Settings, update the properties that you want.
  4. Click Save to save or Cancel to discard your changes.

Editing View Properties and Events

  1. In the list of views inside a module, click the view that you want to edit.
  2. In the Inspector pane on the right, click the following tabs to make changes:

    • Properties: Set or change view properties such as data service and predefined buttons. The available properties depend on the view type.
    • Events: Connect events to event handlers. Write an event handler function in the Code view and then type its name under an event name.
  3. In the left-hand toolbar, click Save to save the view.

Deleting Views

  1. In the list of views inside a module, hover the view that you want to delete.
  2. Click the gear icon and from the menu, select Delete.
  3. Select Delete and then confirm the action.

Duplicating Views

  1. In the list of views inside a module, hover the view that you want to duplicate.
  2. Click the gear icon and from the menu, select Duplicate.
  3. In the Duplicate View dialog box, update the properties you want.

    Note that you cannot change the view platform or the view template when duplicating.

  4. Click Save to save or Cancel to discard your changes.

Moving Views

  1. In the list of views inside a module, hover the view that you want to move.
  2. Click the gear icon and from the menu, select Move.
  3. In the Move View dialog box, select a Destination Module.
  4. Optionally, change the Name and Display Name of the view.
  5. Click Move View to save or Cancel to discard your changes.

Reordering Views

The order of the views on the module page corresponds to the order in which they will be rendered by the application at runtime. To reorder the views, drag and drop them within the module list.

Related Resources

Kinvey Support Knowledge Base solutions: