Field Setup

After loading the database, the database objects (tables and views) will be shown in the left pane (the database pane). Click on any table to go to the Field Setup Page for that table at any time.

Note For simplicity, we use "table" in the following description to refer to any of database object in the project. A database object can be either a table or a view.

DB AppMaker support most commonly used data types. If DB AppMaker finds any unsupported fields in a table, an [Unsupported Fields] tab will appear. You can click on the tab to view the list of fields that are not supported.

The Field Setup pages consists of two section. The upper section is a grid showing available options of all fields. The lower section contain two panels, the [View Tag] panel and the [Lookup Table] panel for the selected field.

 

The grid consists of the following sections:

 

 

General

Properties

Field Name Field Name (read only)
Data Type Data Type (read only)
Size Maximum field length (read only)
Caption Field caption to be displayed

Change Field Display Order by Drag-and-Drop

You can change the field order defined in the database by simple drag-and-drop. Simply ctrl-click or shift-click the Field Name column to select multiple fields, then drag it to where you want. DB AppMaker will generate scripts and display records according to this order.

Custom field order by drag-and-drop

 

List Page

Properties

List

Show field in List page. By default the field will be displayed like:

<field caption>: <field value>

If you want to change the CSS styles for the field caption, you can customize the CSS class field-caption.

For memo fields, the caption will not be displayed by default.

By default one field per line only. If want your own layout, use Custom Templates.

Sort

Enable runtime sorting and allow sorting by the field.

Notes

  1. BLOB fields cannot be used as sorting field.
  2. If Remote data (see Table Setup) is enabled for the table, memo field cannot be used as sorting field either.
  3. Runtime sorting supports sorting by a single field only.
Note There are 2 other fields, Thumbnail Field and Title Field, to be shown in the List page, see Table Setup.

 

View Page

Properties

View

Show field in View page. By default the field will be displayed like:

<field caption>: <field value>

If you want to change the CSS styles for the field caption, you can customize the CSS class field-caption.

For memo fields, the caption will not be displayed by default.

By default one field per line only. If want your own layout, use Custom Templates.

Note There are another field, Thumbnail Field, to be shown in the View page, see Table Setup.

 

 

View Tag

There are two types of View Tag, Formatted Text and Image.

Formatted Text - View Tag to display the field value as formatted text with optional hyperlink. Properties:

formatted text

 

Style attributes
Italic Display as italic
Bold Display as bold
Custom Attributes

Other custom attributes for the field. You can enter as string, e.g.

ng-style='color: blue;'

or preferably as JSON, e.g.

{'ng-style': 'color: blue;'}

Format
None No formatting
Currency Display as formatted currency
Date/Time Display as formatted date
Date/Time format Date/time format. There are many predefined format for you to select, you can also enter your own format. See AngularJS date filter for details.
Number Display as formatted number
No. of digits after decimal The number of digits after decimal, for use with Currency or Number.
String Format the field value as string
String format Format the field value as lowercase or uppercase
Replace CR+LF by <BR>

Display the fields with CR+LF replaced by <BR>

Note This setting only applied to memo fields.
Max width (List page)

Truncate the field value at specified max. length and append "..." to the end.

Note This setting only applied to memo fields in list page and must be larger than 0 to take effect.
Hyperlink
Href

Add hyperlink with specified href to the field value. This Href value must be a valid JavaScript expression and a valid URL.

You can also use other field values in the URL, e.g.

"http://www.mycompany.com/mypath/mypage?id=" + item.id

where item is a runtime variable (object) storing field values of a row, the properties of the object are named by the field names so you can access a field value by item.<fieldname> or item["<fieldname>"] (if the field name contains non-alphanumeric characters).

Custom Attributes

Custom attributes for the hyperlink

For example, you can enter a string,

rel='xxx'

or preferably as JSON,

{'rel': 'xxx'}

Custom View Tag
Custom View Tag

Display the field value in List/View page by custom code.

Important Custom View Tag overrides ALL above View Tag settings.

There are some ready-to-use Custom View Tag for you to choose:

  • Google Maps
  • Barcode and QR code
  • YouTube videos

If your data stores information for above, just click the down arrow button to open the setup form, enable one of them, read the notes at the bottom panel carefully, then click the Settings tab to setup, and click OK to save your settings.

Notes

  1. Only one of above Custom View Tag can be selected at a time. All records will use the same Custom View Tag. For instance, you can NOT use Barcode for a record and use Google Maps for next record.
  2. The above Custom View Tags are provided as examples only. The third party tools used are not developed by the author of DB AppMaker and are not part of DB AppMaker, NO TECHNICAL SUPPORT WILL BE PROVIDED.

If you want absolute freedom, click the [...] button to enter your own code to display the your data.

Important If you choose to enter your own code, you are completely on your own to display the field value. Intermediate knowledge in HTML, JavaScript, AngularJS and Ionic framework is required.

 

Image - Display the field as Image, audio or video. The field should be a BLOB field or a field storing the file name of an image.

Notes

  1. Only image, audio and video files can use the Image View Tag. Other files such as PDF cannot be displayed as image. If the field contains mixed file types, do not use Image View Tag.
  2. Supported video file types: .mp4 and .webm,
  3. Supported audio files: .mp3 and .wav,
  4. Older version of Android default browser (Android < 4.4) do not support audio and video types.

Image

IMG Tag attributes
Width Specify the width of the image in pixels
Height Specify the height of the image in pixels
Custom attributes

Other custom attributes for the image field. You can enter as string

alt='xxx'

or preferably as JSON, e.g.

{'alt': 'xxx'}

 

 

Lookup Table

The Lookup Table settings allow you to lookup display values for the current field from anther table.

lookup table

Lookup Table
Table name Required. The lookup table to be linked to.
Link field Required. The field to be used as the value of the lookup.
Display field #1 Required. The field in lookup table to be used as the display value.
Display field #2 Optional. The 2nd field in lookup table to be used as the display value.
Display field #3 Optional. The 3rd field in lookup table to be used as the display value.
Display field #4 Optional. The 4th field in lookup table to be used as the display value.
Display value separator Optional. The separator used to separate the display values. It not specified, comma will be used.
Order by Optional. Specify a field in the lookup table for sorting the display values.
Asc/Desc Optional. Sorting order. For use with Order By.
Filter

Optional. Specify the filter for the lookup table. The input should be a valid AngularJS filter expression. The filter can be in the format of:

expression : comparator

See AngularJS filter for details.

 

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