Edit the Code of Hybrid View Templates

After you have created your hybrid view template, you can further edit its code to implement additional functionality and user interface which are not exposed by the Views service.

This article contains the following information:

Edit Code

  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 the template that you want to edit.
    Note that you cannot edit the code of the default templates maintained by Telerik. You need to create a custom template first.
  3. Click Edit Code.
  4. If prompted, confirm that you want to copy the code of the template into your app.
  5. Wait for the Views service to navigate you to the Code tab for the app.
  6. In the Project Navigator, expand the generator-<generatorName> directory and open the file that you want to modify.

View Template Structure

Typically, hybrid view template projects have the structure outlined below. The listed files and naming conventions are mandatory. However, some templates might have additional directories and files (such as Master Detail-based views).

Note that you cannot add, remove or rename files. You need to use the existing structure of the view template.

generator-<generatorName>
├─ generators
│  └─ <generatorName>
│     ├─ templates
│     │  ├─ model.js
│     |  └─ view.html
│     ├─ .schema.json
│     └─ model.json
└─ lib
   └─ generators
      └─ migration
         └─ ...

IMPORTANT: Limit your changes to the files in the <generatorName> directory. The lib directory contains version control data for the template.

model.js

model.js contains the JavaScript code that you want to reuse across your apps. Modify this file to extend or customize the functionality. When you generate a view based on the template, the code is injected in pre-defined positions in the final index.js for the view. You have no control over where the code is injected. To work around this limitation, you might use jQuery to inject the code in a selected place.

You can use Kendo UI and Underscore.js templating, to avoid hardcoding data which might change across apps. When the view is generated, the templates are processed based on the data in model.json and .schema.json. You can use Kendo UI and Underscore.js templates to include or exclude code based on conditions or to populate an element with its correct value from the available JSON files.

In model.js, you can build on the existing JavaScript code or you can completely replace its contents with custom code. The latter is useful, when you need to create new custom reusable functionality which is not provided by the Views service.

IMPORTANT: Preserve the code sections for custom, user-defined code (declared by an opening START_CUSTOM_CODE comment and a closing END_CUSTOM_CODE comment. After other developers reuse your template, they will be able to place custom code inside their generated views using the dedicated sections.

view.html

view.html contains the HTML code that you want to reuse across your apps. Modify this file to extend or customize the user interface. When you generate a view based on the template, the HTML code is injected in pre-defined positions in the final view.html for the view. You have no control over where the code is injected.

You can use Kendo UI and Underscore.js templating to avoid hardcoding data which might change across apps. When the view is generated, the templates are processed based on the data in model.json and .schema.json. You can use Kendo UI and Underscore.js templates to include or exclude code based on conditions or to populate an element with its correct value from the available JSON files.

In view.html, you can build on the existing HTML code or you can completely replace its contents with custom code. The latter is useful, when you need to create new custom reusable user interface elements which are not provided by the Views service. For example, you might want to create a view which uses Kendo UI widgets which are currently not available in the Views service or if you want to add customized fields in a form.

IMPORTANT: Preserve the code sections for custom, user-defined code (declared by an opening START_CUSTOM_CODE comment and a closing END_CUSTOM_CODE comment. After other developers reuse your template, they will be able to place custom code inside their generated views using the dedicated sections.

.schema.json

.schema.json contains data about the elements of the view template, including child elements. When you generate a view based on the template, the Views service generators read the data from this file and use it to determine how and what code to inject in your app.

IMPORTANT: Avoid modifying this file. Any changes to it might cause the Views service generators to not be able to scaffold your app properly.

model.json

model.json contains customizable data about the elements of the view template, typically data about child elements such as field labels and contents. When your app contains a form view with fields, the structure and data of these fields is stored in model.json. When you generate a view based on the template, the Views service generators read data from this file and use it to customize the code injected into your app.

You can use this file to configure some elements inside your views. For example, you can provide labels, placeholder text, information about data binding, and so on.

The Views service uses this file to generate your view only on initial generation. To re-apply the model properties and values from this file to an already generated view, you need to re-add the view to your app.

TIP: Create your view template from a view in which you have already enabled all the features that you require. This way, you will receive an already populated model.json file which you can further customize.

lib

The lib directory contains version control data for the template. This is a system directory. You cannot modify its contents.

Test the View Template

To verify that the template behaves as expected, you can generate a view from it and preview it in the device simulator or on an actual device.

  1. In the Code tab, save all changes to the template.
  2. In the Project Navigator, right-click the generator-<generatorName> node.
  3. Select Generate View.
  4. Wait for AppBuilder to reload your app and show a confirmation popup.
  5. To test your template in the device simulator, from the main menu, select Run and choose a device from the list.
  6. To test your template on device, select RunBuild. For more information about how to proceed, see Run Hybrid Apps in the AppBuilder Companion App and Run Apps Over the Air.
  7. If you need to modify your template, re-generate the view by repeating Steps 1—4.
  8. Synchronize your changes to the simulator or the device.

Next Steps

  1. (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.
  2. 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.