Edit Tabs

The “Edit” panel displays the selected record editor’s attributes and scripts in several tabs:

  • Fields
  • Properties
  • Layout Scripts
  • Row Scripts

Fields

By default, the last tab, which is the “Fields” tab is displayed. This tab allows you to add, order, edit and delete the fields in the dataset.

Add Field

To add a field for editing, click on the “Add” button at the upper right corner of the Edit panel. The “Add Field” dialog box will appear.

Field Description Mandatory Input Type Constraints Default Value
Field Name of field in dataset. Y Drop-down list Select from list First option
Data type Data type of select field. Y Textbox Not editable According to selected field
Name Name of selected field. Y Textbox Any text As per selected field
Editable If selected, allows the field to be editable. Y Checkbox Select or unselect Selected
Can add If selected, allows the field to be added. Y Checkbox Select or unselect Selected
Format Selects the format of the field. N Drop-down list Select from list None
Choice source Selects the source for the field.
This field is only available for string type.
Y Drop-down list Select from list None

Select the desired field from the drop-down list in the “Field” field. Change and edit the other properties as desired. The “Editable” is disabled and unselected for the _id field of the dataset.

Name

The name of the field to be displayed in the Editor is defined in the “Name” field. This field uses the name of the selected field by default. You can changed the name as desired. You can also define the “Name” field as a JSON string array.

In the example below, the “gender” column should accept values that is “M” or “F” only. Since it is a string field, any value can be accepted (such as “Male”). You may wish to indicate the standard values (i.e., M and F) at the column, so that users will not enter the wrong value.

To do so, select the “Fields” tab. select the icon under the “Actions” column corresponding the field “gender”. The “Edit Field” dialog box will appear.

In the “Edit Field” dialog box, change the “Name” field as follows:

["Gender',"M/F"]

Save the change. In the Editor page, the “gender” column is now displayed in two lines, Gender on the first line and M/F on the second line.

Choice source

The “Choice source” field is available only for string type and it allows you to restrict the values using the several options available:

  • No Choice (blank) - Users can set any value in this field (default)
  • Custom Choices - Enter own choices (separated by commas) in the “Choices” field
  • Other Collection - Allows selecting choices from another dataset
  • Original Collection - Uses its own source as choices
  • Schema - Uses the schema;s choices as the choices

Click on the “Next” button and the “String Constraint” screen appears in the dialog box. For “No Choice” and “Original Collection” options, the “Character Limit” fields must be set but the “Regex” is optional.

Key in required value for the fields and the “Finish” button will appear.

Click on the “Finish” button to add the field. Clicking on the “Previous” button (if available) bring you back to the previous screen. Click on the “Cancel” button to abort the action.

The added field will appear in the “Fields” tab. The “Choice Source” column will reflect the option selected earlier.

Multiple Select

The record editor allows multi-boolean editing if the “Multiple Select” field if selected.

To do so, when a boolean field is to be added, a “Next” button will appear clickable.

After selecting the desired settings, click on the “Next” button. The “Boolean Constraint” page will appear. By default, this field is unselected.

Select the checkbox to enable multiple select. This will allow all records to be select or unselect together in the Editor mode. Do note that this action is un-reversible. If this is not the action you desire, do not select this field.

Click on the “Finish” button to save the settings.

When Editor mode, the boolean field that allows multiple select has a icon at the column title. This icon allows you to select or unselect all the records by clicking on the or icon respectively.

Do note that this action is un-reversible, proceed with caution.

Order Field

By default, the fields are listed according to the sequence the fields are added. This function allows you to sort the order of the fields.

To do so, click on the “Order” button at the upper right corner of the Edit panel.

In “Fields Sort Order” dialog box, drag-and-drop the fields to their desired location. Click on the “OK” button to save the changes. Click on the “Cancel” button to abort.

Edit Field

To edit a field, click on the icon under the “Actions” column corresponding the desired field.

In the “Edit Field” dialog box, make the necessary changes. Click on the “Next” button and edit the “String Constraint” fields (if applicable). Then click on the “Finish” button to save the changes.

Delete Field

To delete a field, click on the icon under the “Actions” column corresponding the desired field. Do note that there is no notification when a field is deleted. You can simply add the field back into the list.

Properties

In the “Properties” tab, there are three sections. Each section allows you to change or edit the record editor.

Properties Section

Field Description Mandatory Input Type Constraints Default Value
Name Unique name assigned to the record editor. Y Text field Any text (case-sensitive) Name of record editor
Dataset Defines the dataset to edit. Y Drop-down list Select from list Selected dataset
Options Consists of three selections.
If selected, allows user to add, delete and/or enable the record editor.
Available options:
- Can Add
- Can Delete
- Enabled
N Checkboxes Select or unselect Not selected
Export Allows user to export the record editor in the selected option(s).
Available options:
- CSV
- XLSX
N Checkboxes Select or not selected Not selected
Enabled If selected, enable the record editor. N Checkbox Select or unselect Selected
Actions on Left If selected, displays the Actions column on the left of the editor instead of on the right by default. N Checkbox Select or unselect Not selected
Extra Fields Lists the extra fields to be used by others. N Textbox Any text Empty

Options

The “Options” field consists of three selections.

If the _id field of the dataset is string type, the “Can Add” field will be enabled for editing. In this case, if the “Can Add” field is selected, the _id will be available to be as a normal field in the “Fields” tab. For non-string type _id fields in the dataset, the “Can Add” field will be disabled (not selected).

If the “Can Delete” field is not selected, no records are allowed to be deleted in the “Editor” page.

You can allow or disallow adding or deleting records in the dataset by selecting or deselecting the “Can Add” and “Can Delete” feilds respectively.

To enable or disable the record editor, select or deselect the “Enabled” field respectively. By default, the record editor is enabled and allows adding and deleting of records. Disabled record editors will not be able to access Editor page.

Export

The “Export” field allows the user to export the record editor in the selected options (either in CSV and/or XLSX format). The Record Editor will display the buttons for the selected options that the upper right corner of the page.

Logging Section

The Logging section consists of two portions, the Added portion and the Last Modified portion. These fields allow you to change or edit the timestamp, user ID and/or user name when the record editor is created and/or when the record editor is modified. They are optional fields.

Field Description Input Type Constraints Default Value
Timestamp Date and time of creation or modification. Text field Any text Empty
By (User Id) User ID of creation or modification. Text field Any text Empty
By (User Name) User name of creation or modification. Text field Any text Empty

Roles Section

In the “Roles” section, you can select the roles that are allowed to access the record editor by selecting the roles listed.

Alternatively, you can search for the roles required. You can also choose to select all, select none, or invert selection by clicking on the respective icons at the upper right corner of the panel.

Click on the “Save” button located on the upper right corner of the “Edit” panel to proceed with saving the changes made. Clicking on the “Cancel” button aborts the action and retains the record editor’s attributes prior to opening the “Edit” panel.

Layout Scripts

The Layout Scripts tab consists of three portions. The upper portion (grey) consists of the “Layout Scripts Enabled” field and a drop-down list. The “Layout Scripts Enabled” field is selected by default, which enable any scripts in this tab. The drop-own list consists of three options:

  • Display Script - runs each time the record editor is displayed, or if a record is added or edited
  • Search Setup Script - customise search panels
  • Search Results Script - filters and display the search results

The middle portion (white) allows you to key in the code for the selected script from the drop-down list.

The lower portion (grey) shows you the location of the cursor in terms of lines.

Row Scripts

The “Row Scripts” tab allows you to add scripts to customise the record editor for each individual editable cell.

This tab consists of three portions. The upper portion contains a “Row Scripts Enabled” field and a drop-down list. The “Row Scripts Enabled” field is not selected by default. If selected, the scripts in this tab will be enabled. The drop-down list consists of several scripts:

  • Pre Holder Script - TBD
  • Pre Display Script - this script is called for each row when shown
  • Pre Edit Script - this script is called for each row when edit is clicked
  • Post Edit Script - this script is called for each row when save is clicked
  • Post Holder Script - TBD

The middle portion (white) allows you to key in the code for the selected script from the drop-down list.

The lower portion (grey) shows you the location of the cursor in terms of lines.

Examples

Using Display Script

In the simple example below, a table is to be displayed at the bottom of the record editor.

To do so, in the “Layout Scripts” tab, select “Display Script” from the drop-down list and key in the following code.

Click on the “Save” button to save the code. In the record editor page, a small table is displayed at the bottom.

The script runs after each update. A HTTP endpoint can be called to extract updated summary information (such as summation of a column) and format it for display in the table.

Using Search Setup Script and Search Results Script

Below is an example of customising a search for records in “education_level” that has a “B” in it. For the “Search Setup Script”, the code is as shown below.

For the “Search Results Script”, the code is as shown below.

To use the customised search function, select the “Contains ‘B’” field and click on the icon. All records with values that contains ‘B’ in the education_level field are displayed.

To revert, unselect the “Contains ‘B’” field and click on the icon.

You can also create a more dynamic search using the following script in the “Setup Script”.

The script removes the icon. Once the checkbox is selected, the search is triggered.

Using Pre Edit and Post Edit Scripts

In this example, the record editor has three fields, namely “City”, “Country” and “Region”. When editing the field “Region”, it is desired to limit the choices to just “Asia” and “Europe”. Uou can use “Pre Edit Script” to limit the choice to these two values via radio buttons and “Post Edit Script” to accept the change and save into the database.

To do so, key in the code as shown in the screenshot below for the “Pre Edit Script”.

The code in the “Pre Edit Script” access the Region field and displays the options as radio buttons instead of textbox. It allows for the user to select when the “Edit” icon in the Record Editor is clicked.

For the “Post Edit Script”, key in the code as shown below. The code in the “Post Edit Script” saves the newly selected value back to the record.

Ensure the “Edit Scripts Enabled” field is selected.

In the Record Editor, when the user clicks on the “Edit” icon under the “Actions” column for a row, the options defined in the “Pre Edit Script” will appear as radio buttons. Without the code, a textbox will appear for the “Region” field as per “City” and “Country” fields.

This allows the user to select one of the two options for the “Region” field in just one click via radio buttons, rather then typing it in a textbox.

Using Pre Display Script

In this example, the data has two columns; namely “Color1” and “Color2”. “Color1” shows the name of the colour it holds and “Color2” shows the code of the colour it holds. But both does not show the colour in the cell, making it difficult to To allow the user to change the colour easily, “Pre Display Script” and “Pre Edit Script” can be used to display the color selected.

To do this, key in the code as shown in the screenshot below for the “Pre Display Script”.

The code in the “Pre Display Script” access the CSS of the cells of the field required and displays the colour of the text in the cell.

In the “Pre Edit Script”, key in the code as shown below. The code in the “Pre Edit Script” gets the colour of the cell when the “Edit” icon in the Record Editor is clocked.

Ensure the “Edit Scripts Enabled” field is selected.

In the Record Editor, when the user clicks on the “Edit” icon under the “Actions” column for a row, the cell under “Color1” is empty, so no colour is displayed while “Color2” displays the colour as defined by the code in the cell. Click onto the cell of “Colour1” and key in a colour, in this example, Pink is used. Click onto the cell of “Color2” and the colour chooser appears. Choose the desired colour, in this case, green is selected. Click on the “Save” icon and the cells now display the colour selected.