Extension Points and Source Code Customization : Static files : Custom code
  

Custom code

Every view has a folder that is automatically populated with customizable HTML and JavaScript files when you first generate the code for the view using the Generate or Preview option in the Designer. These customizable files (and some others that are not customizable) are created for each view in the following location:
webAppDir\app\src\modules\module-folder\view-folder\
The customizable files include customSection.html, router-events.js, and controller.public.js, where:
module-folder
Specifies a folder named for the module in which the view is created. If you name the module in the Designer with words separated using camel case or using any special character other than hyphen (-), the folder name always contains hyphens to separate all lower-case words.
view-folder
Specifies a folder named for the view in a similar manner as module-folder, and is where the custom HTML and JavaScript files are created.
customSection.html
Where customSection specifies the file name for one or more HTML files containing a custom HTML section for the view. Depending on the type of view, each of these files can have one of the following names, corresponding to the custom HTML section it can contain:
*topSection
*topParentSection
*middleSection
*topChildSection
*bottomChildSection
*bottomSection
The view design panel indicates the supported custom HTML sections and where they appear in the view.
router-events.js
Defines an ECMAScript 6 (ES6) class containing methods that define some default general event functions. You can change the names of these methods as long as you also change them for the corresponding property of the view, and otherwise add custom code to modify their behavior. For more information, see General view events.
controller.public.js
Defines an ES6 class containing methods that define some default general and view-specific event functions. You can change the names of these methods as long as you also change them for the corresponding property of the view, and otherwise add custom code to modify their behavior. This is also the file where you can add methods for all other view-specific event functions that you need to define and whose names you also specify for corresponding properties of the view. You can similarly add methods for row template functions that you can use to define custom formats for grid rows. For more information, see General view events, View-specific events, and Row templates. You can also extend the view's data source by overriding the function _$getDataSourceOptions(), which is defined in the controller.js file. For example, you can modify the data source's page size as shown in this example:
_$getDataSourceOptions(name){
this.$dsOptions[name].pageSize = 2;
return this.$dsOptions[name];}
Note: The name is different in every generated view - it can be primeDS, jsdo resource name, or an auto generated name for Foreign Key data sources. This name can be seen in the private controller.