Custom Templates

 

How it Works

The applicatons generated by DB AppMaker use the Ionic Framework. Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. 

By default, DB AppMaker will automatically create the HTML template (*.html) for the table based on the selected fields for the List page and the View page (see Field Setup). However, you can also provide your own Custom Templates.

Note that Custom Templates do not replace the whole *.html pages, it only replace the core content of the page.

In a List page, the records are displayed as a List, each record is an item of the list, Custom Template for List page is a template for each record and it only replaces the HTML content inside each item.

In a View page, the record is displayed in a simple DIV, Custom Template for View page only replace the HTML content inside the DIV.

Note 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 whole 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,
  3. Scroll down the treeview or collapse the TypeScript node, select HTML > Table-specific > *list.html (or *view.html) > Content,
  4. Enter your Custom Template in the editor.

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

 

Example 1 - Custom Template in List page

<ion-thumbnail item-start *ngIf="item.Picture.url">
    <img [src]="item.Picture.listUrl" />
</ion-thumbnail>
<h2>{{ item.Model.value }}</h2>
<p class="field-value">
    <span class="field-caption">{{ '__tables.cars.fields.Trademark.caption' | translate }}</span>
    <span>{{ item.Trademark.value }}</span>
</p>
<p class="field-value">
    <span class="field-caption">{{ '__tables.cars.fields.Price.caption' | translate }}</span>
    <span>{{ item.Price.value }}</span>
</p>

Notes
  1. To get the field value, use item.<FieldName>.value,
  2. For fields with IMAGE View Tag (see Field Setup), get the URL by item.<FieldName>.listUrl,
  3. To get the translated field caption, use {{ '__tables.<TableName>.fields.<FieldName>.caption' | translate }}.
  4. There is NO need to include <ion-content> and <ion-list> in the Custom Template.

The result:

 

Example 2 - Custom Template in View page

<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Trademark.caption' | translate }}</span><span>{{ item.Trademark.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Model.caption' | translate }}</span><span>{{ item.Model.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.HP.caption' | translate }}</span><span>{{ item.HP.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Liter.caption' | translate }}</span><span>{{ item.Liter.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Cyl.caption' | translate }}</span><span>{{ item.Cyl.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.TransmissSpeedCount.caption' | translate }}</span><span>{{ item.TransmissSpeedCount.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.TransmissAutomatic.caption' | translate }}</span><span>{{ item.TransmissAutomatic.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.MPG_City.caption' | translate }}</span><span>{{ item.MPG_City.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.MPG_Highway.caption' | translate }}</span><span>{{ item.MPG_Highway.value }}</span></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Category.caption' | translate }}</span><span>{{ item.Category.value }}</span></p>
<p [innerHTML]="item.Description.value"></p>
<p class="field-value"><span class="field-caption">{{ '__tables.cars.fields.Price.caption' | translate }}</span><span>{{ item.Price.value | currency }}</span></p>

 

Notes
  1. To get the field value, use item.<FieldName>.value,
  2. For fields with IMAGE View Tag (see Field Setup), get the URL by item.<FieldName>.viewUrl,
  3. To get the translated field caption, use {{ '__tables.<TableName>.fields.<FieldName>.caption' | translate }}.
  4. There is NO need to include <ion-content> in the Custom Template.

The result:

 

 

 ©2018 e.World Technology Limited. All rights reserved.