Custom Templates

 

How it Works

The applicatons generated by DB AppMaker use the Ionic Framework which supports a client side Model–View–Controller (MVC) architecture. The View part of the MVC model is the HTML template which you can freely create.

By default, if you have not specified any custom layout for the List/View of a table, DB AppMaker will automatically create the List/View HTML template of the table based on the selected fields for list and view (see Field Setup).

A typical generated List template will look like below. Note that the code in bold is the generated HTML code for a field.

<ion-view>
  <ion-content>
...
<img ng-src="{{item.<ThumbnailField>}}">
<h2>{{item.<TitleField>}}</h2>
<p><span class="field-caption">{{fieldCaptions.<Field1>}}</span><span>{{item.<Field1>}}</span></p>

...
  </ion-content>
</ion-view>

Similarly for the View template:

<ion-view>
  <ion-content>
...
<img ng-src="{{item.<ThumbnailField>}}">
<p><span class="field-caption">{{fieldCaptions.<Field1>}}</span><span>{{item.<Field1>}}</span></p>

...
  </ion-content>
</ion-view>

If a Custom Template is provided, DB AppMaker will replace the above codes with your Custom Template. You can provide separate Custom Templates for the list/view template.

Notes

  1. In above sample code, <ThumbnailField>, <TitleField> and <Field1> are not real code, they represent the Thumbmail Field, the Title Field and the field itself respectively. See Table Setup for more info about Thumbmail Field and Title Field. (In real code, there are no angle brackets.)
  2. In above sampe code, the ng-* attribute is an AngularJS directive that augments an existing DOM element. The double curly brace notation {{ }} is built-in Angular markup to bind expressions to elements. For more details, read: https://docs.angularjs.org/guide/concepts
  3. Do not confuse Custom Template (which is a table level setting within a project) with customizing the whole template zip file. If you want to customize the general layout of the generated app or customize something for all tables and all projects, you should customize the template zip file, see Customizing Template.

 

How to Use

To enter your Custom Template for a table, perform the following steps:

  1. Select the table in the database pane,
  2. Select the Code tab (which contains Client Scripts and Custom Templates),
  3. Scroll down the treeview or collapse the Client Scripts node, select a template node under Custom Templates,
  4. Enter your Custom Template in the editor.

Then just generate, build and run your app as usual.

 

Example - Custom Template in List

<img ng-src="{{item.Photo.url}}">
<h2>{{item.FirstName}} {{item.LastName}}</h2>
<p>{{item.Title}}</p>
<p>{{item.City}}, {{item.Country}}</p>

Notes
  1. To get the field value, use item.<FieldName>,
  2. For fields with IMAGE View Tag (see Field Setup), get the URL by item.<FieldName>.url,
  3. To get the field caption, use fieldCaptions.<FieldName>.
  4. There is no need to include <ion-view> and <ion-content> in the Custom Template.

The result:

 

 

 

 ©2017 e.World Technology Ltd. All rights reserved.