How To Add And Keep Custom Code Changes In Your App

This article explains how you can add custom code to your mobile app, generated by the Telerik Platform Views service (formerly Screen Builder), so that these changes are not overwritten the next time you edit the app in the Views service.

When you generate an app with the Views service, it's common to enhance and modify the generated code in AppBuilder. If you want to do that but want to return to the Views service to edit the app again, e.g. add a new or edit an existing view without losing the custom code changes, you should follow certain rules. In every file generated by the Views service there is a block comment outlining an area dedicated for such custom code changes.

Adding custom code in a JavaScript file

If you want to add custom code in a JavaScript file, look for the block comment quoted below and add your code between the start and end statements of the block comment.

// START_CUSTOM_CODE_nameOfTheComponent
// END_CUSTOM_CODE_nameOfTheComponent

For example, if you are using the Progress Data Service as a data provider, you can handle some of the Progress Data Service events in a custom code block at the end of the index.js file of the Data List view.

// START_CUSTOM_CODE_newdataListViewModel
// you can handle the beforeFill / afterFill events here.
app.newdataListView.newdataListViewModel.jsdoOptions.events = {
    'beforeFill' : [ {
        scope : app.newdataListView.newdataListViewModel,
        fn : function (jsdo, success, request) {
            // beforeFill event handler statements ...
        }
    } ]
};
// END_CUSTOM_CODE_newdataListViewModel

Adding custom code in an HTML file

If you want to add custom code in an HTML file, look for the block comment quoted below and add your code between the start and end statements of the block comment.

<!-- START_CUSTOM_CODE_nameOfTheComponent -->
<!-- END_CUSTOM_CODE_nameOfTheComponent -->

Adding custom code in a CSS file

If you want to add custom code in a CSS file, look for the block comment quoted below and add your code between the start and end statements of the block comment.

/* START_CUSTOM_CODE_nameOfTheComponent */


/* END_CUSTOM_CODE_nameOfTheComponent */

Adding custom code in an XML file

If you want to add custom code in an XML file, look for the block comment quoted below and add your code between the start and end statements of the block comment.

<!-- START_CUSTOM_CODE_nameOfTheComponent -->
<!-- END_CUSTOM_CODE_nameOfTheComponent -->

Note that if you delete part of the start or end statements of the block comment, the Views service won't be able to distinguish your custom code and might overwrite it.

The aforementioned block comments are available in the files that are generated by the Views service for your app, views, data providers andthemes (styles).

Reference: http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes