New to Kinvey? Get started today with this tutorial or attend our getting started webinar.

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.

System Views

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

The views offered by the Application 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.
  • landing page (web)—landing page for the web app.
  • login (web and mobile)—predefined sign-in page with web and mobile variations
  • register (mobile)—sign-up screen for the mobile app
  • register (web)—Coming soon!
  • unauthorized page (web)—page to show in case of HTTP code 403

Predefined Views

When creating a view, you can choose from a number of templates that aim at facilitating the implementation of 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.

Custom Views

The blank view type give you full control at creating custom views using Kendo UI components. You can design a custom view either completely visually by dragging and dropping or by writing code.

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. Click Add View to save the view properties and close the Add View dialog box.

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.

Got a question?