Skip to content


The documentation applies to:✅ v0.8.0

Preparation knowledge

Before you read, please ensure you must complete this step. This step will help you to a basic knowledge about Standard Component.


We assume you have an experience to work with LET Portal, at least login/menu and how to redirect. We just provide some short steps for letting you know a main points

Controls Population

Controls Population

This section is helping you to create quickly these controls by querying your target database. LET Portal will detect based on your query's result to generate some controls.

However, based on your database type, a query is depent on. For example: MongoDB need to use json, and SQL-based need to use SQL.

At reference, you can take a look on MongoDB Expression and SQL Expression


Control Info

  • Control Name: This field indicates an unique control to distinguish another controls in the same Standard. However, it isn't an unique name on a Page. For helping a distinction, we use a pattern name {Section Name}_{Control Name}
  • Control Type: According to control type, it will have a different control options and validator groups. Check the table below


Same prefers to a first row

Control Type Options List Validators
Textbox label, placeholder, disabled, hidden, bindname Required, Min Length, Max Length, Regex, Email, Equal To
Label Same NULL
Line Breaker NULL NULL
Textarea Same Same
Number Same Required, Number, Number Range
DatePicker Same Max Date, Min Date, Equal, Equal To
Checkbox Same Required
Slide Same Required
Radio Same Radio
Rich Text Editor Same Required
Icon Picker Same Required
Markdown Editor Same Required
Select Same, multiple Required
Auto Complete Same, multiple Required
Uploader Same, allowfileurl, saveonchange Required, File Maximum Size, File Extensions
Multi Uploader Same, allowfileurl, saveonchange Required, File Maximum Size, File Extensions

Control Options

Control options are used to configure some properties of control. They are defined by Key-Value instead of a group of controls. However, we also have a hint to help you to fill a correct value. These important options are below (another options are quite easy to understand):

Option Name Hint Default Value Warn
bindname Use for mapping data in or out Same as control name See concept
disabled An Evaluted Expression string, it allows user to change a value NULL See expression
hidden An Evaluted Expression string, it allows user to change a value NULL See expression
multiple Only for Select and Auto-Complete, allow user can select multiple values false
allowfilreurl Only for Uploader and Multi Uploader, allow set downloadable url instead of file id false
saveonchange Only for Uploader and Multi Uploader, allow upload a file manually false This mode is still developing

Selection Controls

We have three selection controls which want to have a datasource. They are Radio, Select and AutoComplete.

A datasource can be Static, Database or Web Service. However, we need to ensure a json data should be an array with child element contains two properties name and value:

    "name": "MongoDB",
    "value": "mongodb"


We are still developing Web Service datasource and OutputProjection for this feature. So you can use $project on MongoDB or SELECT as on SQL for projecing name and value

Validation Options

These options are helping to check a valid state of control's value and showing an error message. There are nothing special on these options. A minor note is you can display a option (the most side textbox on a row) value by using {{option}} on error message field.

Display validator option

Async Validators

A most difficult understanding of control is async validator. Async Validator is a technique which helps a value to be validated before sending to server-side on submitting step. It doesn't block an user's behavior on website and quickly help user to find out a valid value.

There are two types of async validator:

  • Database validator: you need to query a database for ensuring no found data. We recommend this way for small query and this database is yours.
  • HTTP validator: you need to perform an ajax call for checking with another web service. We recommend this way for complicated case.

For example, you can edit App Form Standard and click on "Edit Async Validators" button on name control to show.

Sample Async Validator

Edit sample async validator

For these configurations, they are the same with these setups that we have done. Only one field we need to highlight, it is Evaluated Expression. This field is using to evaluate a response of Database Validator or HTTP Validator. It is valid when expression is true, otherwise is false

This field is using only response var to access a result of Database Validator or HTTP validator. For example with App Form, a string "response.result == null" is true if there is no app name is existed on database.


response.result is a default result's model when you execute query on Database. A model is below

    result: any,
    isSuccess: boolean,
    error: string

Control Events

Control events are the built-in event on LET Portal. These events can't be added or removed. Also they can configure the chaining events such as triggering change, reset default value of another control.

There are three action types of control's event:

  • Trigger Events: Allow to trigger multiple events on the same section
  • Query Database: Allow to query on database to fill values
  • Web Service: Allow to call HTTP web service

Sample control events

For more detail about Chaining Events, read here