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
List Page
View Page
Edit Page
Add Page

General

Field Name	Field Name (read only). You can select multiple fields by ctrl-clicking or shift-clicking field name(s) in this column and do the follows: Change Field Display Order by Drag-and-Drop You can change the field order defined in the database by simple drag-and-drop. Select single field by clicking the field name (or select multiple fields by ctrl-clicking or shift-clicking the field names), then drag it to where you want. DB AppMaker will generate scripts and display records according to this order. .
Data Type	Data Type (read only)
Size	Maximum field length (read only)
Caption	Field caption to be displayed
Primary Key	Primary Key of the table. Composite key is supported. Important You should use the same primary key as declared in the database, do not change it unless you are absolutely sure that the selected field(s) values are unique. Otherwise a record cannot be located properly and unexpected results may occur.
Auto-Update Value	A dynamic value to update the field automatically in Add/Edit pages. The dropdown list for this setting is preloaded with a few functions for your selection. For example, you may want to record the last modified date of a record, then you can select "CurrentDate()". Do not select a function that return values of unmatching data type, for example, you should not select a function that return a non-numeric string for a numeric field. Notes This is for use with the PHP API. The value must be a valid PHP expression. This setting will make the field hidden automatically and it overrides the default value in Add page (see below). You can add your own PHP expressions, each expression must accept no argument and return a value. You can add your expressions (comma separated) for the Advanced Settings Auto-Update values (PHP) (See Tools - Advanced Settings), e.g. date("Y-m-d H:i:s", strtotime("+1 day"))

List Page

Show

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

If you want to change the CSS styles for the field caption, you can customize the CSS class field-caption under HTML -> SCSS -> User tab, see HTML Settings.

For memo fields, the caption will not be displayed by default unless you have enabled Max Length (List page) (see below).

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. In the generated app, there will be a "sort" icon at the top right corner of the List page, click the icon and user will be able to sort the items.

Notes

BLOB and memo fields cannot be used as sorting field.
Runtime sorting supports sorting by a single field only.

Search

Enable field for search in List page.

Note There are 2 other fields, Thumbnail Field and Title Field, to be shown in the List page, see Table Setup.

View Page

View

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

If you want to change the CSS styles for the field caption, you can customize the CSS class field-caption under HTML -> SCSS -> User tab, see HTML Settings.

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.

View Tag

HTML tag to display the field for viewing (see below for details). Used in List/View pages. You can either click the View Tag column and select a View Tag from the drop down box or click the icon on the View Tag panel toolbar to select. After selecting the View Tag, you can further setup its properties in the View tag panel.

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
Italic	Display as italic
Bold	Display as bold
Custom Attributes	Other custom attributes for the field in JavaScript as JSON, e.g. {"attribute": "value"}
Format
None	No formatting
String	Format the field value as string
Number	Display as formatted number
Date/Time	Display as formatted date
Currency	Display as formatted currency
Percent	Display as percentage
Custom	Custom format, see Pipe below.
Date/Time format	Date/time format. Possible values of Date/Time named format are: Default - Angular shortDate format DateTime - Date and time, Angular short format Date - Date only, Angular shortDate format Time(AM/PM) - Time only, Angular mediumTime format Time - Time only, Angular shortTime format Ymd mdY dmY YmdHis mdYHis dmYHis ymd mdy dmy ymdHis mdyHis dmyHis YmdHi mdYHi dmYHi ymdHi mdyHi dmyHi where Y - A full numeric representation of a year, 4 digits y - A two digit representation of a year m - Numeric representation of a month, with leading zeros, 01 through 12 d - Day of the month, 2 digits with leading zeros, 01 to 31 H - 24-hour format of an hour with leading zeros, 00 through 23 i - Minutes with leading zeros, 00 to 59 s - Seconds, with leading zeros, 00 through 59 Note Above formats do not include the date or time separator, the actual date or time separator during runtime is determined by Angular locale, see Internationalization (i18n).
No. of digits after decimal	The number of digits after decimal, for use with Currency, Percent or Number.
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.
Pipe	Optional. Angular pipe for the format. A pipe takes in data as input and transforms it to a desired output. (Read Pipes for details.) The following pipes can be used: lowercase uppercase titlecase Notes This setting will override any above format settings. You can enter other pipe, but you need to make sure it can be used, you may need to import the pipes to the module.ts and .ts of the page. (See Code for details.)
Hyperlink
Href field	Display the field as hyperlink with the href attribute set to the value of this field. It can be the field itself.
Original field value	Use original field value of the Href field in the hyperlink instead of display field value. If the Href field has lookup table or user values, by default the display value will be used. If this option is enabled, the original field value will be used instead.
Target	The target in which to load the URL, an optional parameter that defaults to _self. _self Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser. _blank Opens in the InAppBrowser. _system Opens in the system's web browser.
Prefix	Prefix added before the Href field value. Note This setting is a string to be quoted by backtick (` `) so that it will be template literal. For example, you can enter: (no quotes) mypage/ The value of the Href field will be appended to the end of the your prefix in the outputted HTML. If you want pass a field value, you can enter: (no quotes) mypage/${row.myField.value)/
Suffix	Suffix added after the Href field value. You can use this setting to append additional URL parameters. Note This setting is a string to be quoted by backtick (` `) so that it will be template literal. For example, you can enter: (no quotes) &myfield=${row.myField.value} Note If the suffix is URL parameter(s), you should use ? (if no other URL parameter) or & (if other URL parameter exists) at the beginning of the string.
Custom Attributes	Custom attributes for the hyperlink in JavaScript as JSON, e.g. {"attribute": "value"}
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 QR code Video 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 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. If you use Video Custom View Tag for the Thumbnail field of the List page, it will be displayed as image only. 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. Notes If you choose to enter your own code, you are completely on your own to display the field value. Intermediate knowledge in HTML, JavaScript, Angular and Ionic framework is required. If List page, Custom View Tag is generated inside ion-item.

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

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.
Supported video file types: .mp4 and .webm,
Supported audio files: .mp3 and .wav.

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 in JavaScript as JSON, e.g. {"attribute": "value"}
Hyperlink and Custom View Tag (same as above)

Edit Page

Edit	Show field in Edit page
Title	Alternative text to be used as placeholder property of the Edit Tag. (See the setting Use place holder under Tools -> Advanced Settings.) Note If you use Multi-Language (see Config Settings), use Multi-Language Property Editor, see Tools for details.
Read Only	Make the field read only in Edit page
Edit Tag	Form element for the field. Use in Add/Copy/Edit pages (see below for details). You can either click the Edit Tag column and select a Edit Tag from the drop down box or click the icon on the Edit Tag panel toolbar to select. After selecting the Edit Tag, you can further set up its properties in the Edit Tag panel.

Edit Tags

Edit Tags are form controls for the field in Add/Copy/Edit pages.

Text

ion-input tag

Display the field as a textbox.

Size	Size attribute of the textbox
Maxlength	Maximum input length of the textbox
Validation	See section below
Use lookup table	Enable Auto-Suggest. Auto-Suggest is similar to Select Edit Tag (see below), when clicked, a modal dialog will be shown, when user types in the searchbar, a dynamic dropdown list populated with data from the lookup table matching the user input will appear for user to select. After enabling this option, then enter the lookup table info in the Lookup Table panel next to the Edit Tag panel. See Lookup Table for more details.
Lookup page size	For use with Auto-Suggest. Specifies the number of records per page in the dialog. If not specified, default is 20.
Custom attributes	Other custom attributes in JavaScript as JSON. Example { "(keyup)": "onKey($event)" } Then you can add your onKey() method to the Add/Edit Page component in the Code tab, see Code -> TypeScript -> Table-Specific -> add.ts and edit.ts -> other, e.g. onKey(event: any) { console.log(event.target.value); }
Option Template	Optional template for options. For use with Auto-Suggest only. See Lookup Table for details.
Custom Edit Tag	See section below

Password

ion-input tag with type="password"

Display the field as a masked textbox.

Size	Size attribute of the textbox
MaxLength	Maximum input length of the textbox
Validation	See section below
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Custom Edit Tag	See section below

Radio

Ionic Selectable tag

Display the field as a single selection list.

Can search	Determines whether to show searchbar in the modal dialog. When user types in the searchbar, the options will be filtered by the search text.
Validation	See section below
Use lookup table	Use lookup table instead of user values. After enabling this option, then enter the lookup table info in the Lookup Table panel next to the Edit Tag panel. See Lookup Table for more details.
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Option Template	Optional template for options. See Lookup Table for details.
Custom Edit Tag	See section below

Checkbox

ion-checkbox tag

Display the field as a single checkbox. For boolean fields only.

Note For MySQL, DB AppMaker considers enum('Y','N') and enum('1','0') as boolean fields. For Oracle, fields with two and only two User Values (see below) and the labels and values are "Y" and "N" (or "1" and "0") will be considered as boolean fields. DB AppMaker will display a boolean field by a checkbox automatically.

Validation	See section below
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Custom Edit Tag	See section below

Select

Ionic Selectable tag

Display the field as a single or mulitple selection list.

Multiple	Determines whether to enable multiple selection, i.e. [isMultiple]="true". If disable, the tag is same as Radio (see above).
Can search	Determines whether to show searchbar in the modal dialog. When user types in the searchbar, the options will be filtered by the search text.
Validation	See section below
Use lookup table	Use lookup table instead of user values. After enabling this option, then enter the lookup table info in the Lookup Table panel next to the Edit Tag panel. See Lookup Table for more details.
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Option Template	Optional template for options. See Lookup Table for details.
Custom Edit Tag	See section below

TextArea

ion-textarea tag

Display the field as a textarea.

Cols	No. of columns of the textarea
Rows	No. of rows of the textarea
Validation	See section below
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Custom Edit Tag	See section below

File

ngx-file-upload tag

Display the field as a file upload control. For BLOB fields or string fields only.

If the field is of BLOB (binary) data type, file is uploaded to the database.

If the field of string type, file is uploaded to a subfolder relative to the project folder.

Multiple	Allow multiple upload. Field value will be comma separated file names. NOT application to BLOB field.
Upload folder	Folder where the uploaded file will reside. If you do not enter a specific folder, all the uploaded files will be put in the global upload folder specified in the Config tab (see Config Settings). Notes Unlike the global upload folder setting (which is a constant and must be a string without double quotes, see Config Settings), this field setting must be a valid PHP expression. If it is a string, it must be single or double quoted. Make sure that the web server user have read/write access to the folder. The path can be dynamic. For example, if the upload path varies with some field value, you can refer to other fields by $this->MyField->DbValue. However, you must be very careful when using dynamic folder, make sure the setting is valid as a folder name, i.e. it does not contain some characters which can not be used in a file path on your server. The setting will be evaluated to obtain the upload folder before the file is displayed and before the uploaded file is saved, so your setting should be consistent, do not use random number or current date/time to name the folder. If Multiple is enabled, all upload files use the same upload folder. The path is relative to API folder. Use slashes "/" as path delimiter, no leading slash. e.g. If the project folder of your website is D:\demo and you enter "uploads/" in this textbox, the folder for the uploaded files will be D:\demo\api\uploads. Note that you can change the API folder location, see Using Extensions for details. Make sure that the web server user have read/write access to the folder.
Allowed file types	Comma separated file extensions (e.g. jpg,png,gif) without spaces and quotes.
Max file size (bytes)	The maximum allowed file size in bytes.
Max number of files	The maximum number of files that are allowed to be uploaded if Multiple (see above) is enabled. It must be larger than 1. (If you just allow one file, disable Multiple.) If not specified, unlimited file uploads are allowed. Since file names are stored as comma separated value in the field, the max number of files is also limited by the field size defined in the database.
Validation	See section below
Custom attributes	Other custom attributes in JavaScript as JSON, e.g. {"attribute": "value"}
Custom Edit Tag	See section below

Custom Edit Tag

Display the field value in Add/Edit pages by custom code. The custom code will be generated

Important

Custom Edit Tag overrides ALL above Edit Tag settings.
Custom Edit Tag is a provision for your own code. If you choose to enter your own code, you are completely on your own to edit the field value. Intermediate knowledge in Angular Reactive Forms is required. NO TECHNICAL SUPPORT WILL BE PROVIDED.
Custom Edit Tag is generated inside ion-item and after ion-label of the field.

To use Custom Edit Tag, click the [...] button to enter your own code to display the your data in your own HTML.

Validation (for Add/Copy/Edit)

The data input for each field can be validated using Angular validators.

Validate	Supported validation formats are: Integer Float Range - for validating a range of number Date - for validating date with or without time Time - for validating time with or without seconds Email Credit card GUID US phone number US zip code US social security number Regular Expression Notes The actual date/time separator during runtime is determined by Angular locale, If Regular Expression, the Arguments setting (see below) must be entered. You can add your own validators (comma separated) in the Advanced Setting CustomValidators. (See Tools -> Advanced Settings.) Make sure you import your validators before use, see Code for details.
Arguments	Arguments for validator. For Regular Expression and custom validation functions only. Note This is JavaScript arguments, it should be comma separated (if more than one) JavaScript expressions. e.g. If it is a string, it must be single or double quoted. If the Validate setting (see above) is Regular Expression, this setting must be a valid JavaScript regular expression pattern along with flags that identify how to apply the pattern (delimit the pattern by "/" characters, not single or double quotes), e.g. /foobar/i See Creating a Regular Expression for more information about the pattern and flags.
Required	Check this checkbox if the field is mandatory. Notes If the field is defined as NOT NULL in your database, the field is required even this option is not enabled. If you do not want to validate NOT NULL field, you can disable the advanced setting Validate NOT NULL fields. By default required fields will be denoted by an asterisk beside the field caption. You can change the asterisk to other or remove it in the language file.
Error message	Enter your own error message to show if error occurs. If not entered, default error messages will be used. Note If you use Multi-Language (see Config Settings), use Multi-Language Property Editor, see Tools for details.

Add Page

Add

Show field in Add page

Default Value

Default value for field (for adding new record only) .

The value must be a valid JavaScript expression. (If it is a string, must be single or double quoted.)

Using User Values for Edit Tag (Radio/Select)

For Radio/Select Edit Tags, the default option values are user input values, you can enter as many value/label pairs as you want in the User Values panel next to the Edit Tag panel.

Note For boolean fields, if you use Radio Edit Tag with User Values, the first value/label should be for True and the second for False.

Using Lookup Table for Edit Tag (Text/Radio/Select)

In real world applications, the option values usually come from a (lookup) table in the database. DB AppMaker make it very simple to use lookup values for key field values, simple click Use Table, the Lookup Table panel will replace the User Values panel, see Lookup Table for details.

Dynamic Selection Lists

DB AppMaker supports Dynamic Selection Lists in which child lookup fields' selection list options change dynamically based on option selected in the parent selection list. To setup child lookup fields, click the Child lookup fields... button and the following setup form will be displayed:

Read Tutorial - Dynamic Selection List for more information.