Create Custom View Templates

When you need to create a new custom view template, you can do that by duplicating an existing template or by creating it from a customized view.

This article contains the following information:

Create Template

You can create a new view template by basing it on one of the default templates or an active shared template (a shared template which has not been archived).

When you base your new view template on one of the default templates, you can choose from the following options:

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.
  1. Open the app in which you want to develop custom templates and navigate to the Views tab.
  2. On the View Templates tab, click Create Template.
  3. Select a template from the list.
  4. Provide name and title and click Create view template.

This operation adds a new Views service project to the code of your current app. If you navigate to the Code tab, you will see that a new directory is available in the root of the app. The newly added directory is named generator-<generatorName>.

You cannot create new view templates from the Progress Sitefinity-based view templates or from the Map template. If you want to use a Progress Sitefinity-based or a Map-based view template across your apps, see Create from View.

Duplicate Template

By duplicating an existing template, you can use an already customized view template to begin the development of new templates. You cannot duplicate shared templates unless they are stored in the current app.

  1. Open the app in which you want to develop custom templates and navigate to the Views tab.
  2. On the View Templates tab, select a template.
  3. Click Duplicate.
  4. Provide name and title and click Duplicate.

This operation adds a new Views service project to the code of your current app. If you navigate to the Code tab, you will see that a new directory is available in the root of the app. The newly added directory is named generator-<generatorName>.

Create from View

If you need to reuse an already customized view across multiple apps in your account, you can create a template from it. After you share the new template, you can use it in other apps and just tweak styling and data.

  1. Open the app which contains the view that you want to use and navigate to the Views tab.
  2. On the Manage Views tab, verify that you have applied all changes to the view that you want to use.
  3. In the list of views, hover over the one that you want to use.
  4. Click the cogwheel icon and select Save as view template.
  5. Provide name and title and click Save as template.

Name and title from the source view are not preserved. The navigation icon, if navigation is enabled, is not preserved.

This operation adds a new Views service project to the code of your current app. If you navigate to the Code tab, you will see that a new directory is available in the root of the app. The newly added directory is named generator-<generatorName>.

Next Steps

  1. (Optional) Modify the code of the hybrid or the NativeScript template.
    You might need to modify the code of the template if the customization provided by the Views service are not sufficient for your development needs. For example, you might need to apply widget configurations which are not exposed by the Views service.
  2. (Optional) Share the custom template to make it available across the account.
    This will let other developers on your team use the template in their apps. They will also be able to modify the code of the template, if needed.
  3. Use the custom template across apps.
    Other developers or you can add new views using the template or use it to change the view type of empty views.
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.