Form Implementation
The edit of the grid will be a link to a form page (no dialog). See example of "Employee" form implementation: example
Below are useful links with example of Tabs, Form elements and more Example for Forms in a Tab: and more
Form fields example:
Tutorial for bootstrap on how to build tabs (and all): here
The form is a collection of input fields. Fields are grouped by category. Each fields has a type and some validation instructions. Following is the mapping between the configuration json and the instruction how to create the form:
Categories in Backand are dividing the fields into Tabs. Field that doesn't have category will be display above them otherwise it will be display in the tab.
{...., categories: [{
"__metadata": {
"id": "0"
},
"name": "General",
"columns": "2",
"ordinal": 0
},...]} which is the collection of all the fields categories ordered by ordinal
in the field level we have
{
... **
"category": {**
"__metadata": {
"id": "0"
},
"name": "General",
"columns": "2",
"ordinal": 0
}, .....**
which is the specific category of the field
Each tab display the fields in columns based on the "columns" property in the category config
Tab in a form can hold fields (like previous example) but can also be a sub grid. Sub grid is a Grid directive that filter on the foreign key.
- load once when tab selected - need to be cached
- example for load the grid
- property "childrenView=Grid" - tbd - remove
The type of the field is a combination of "type" and "displayFormat" properties in the field level. Here is the list of types and their related array of displayFormats:
TBD:
{
"ShortText": ["[SingleLine](#SingleLine)", "MultiLines", "MultiLinesEditor", "Html", "Email", "Password",
"SSN", "Phone", "DocumentReference"],
"LongText": ["MultiLines", "MultiLinesEditor", "SingleLine", "Html"],
"Image": ["Crop", "Fit"],
"Url": ["Hyperlink", "ButtonLink"],
"Numeric": ["GeneralNumeric", "Currency", "NumberWithSeparator", "Percentage"],
"Boolean": [],
"DateTime": ["Date_mm_dd", "Date_dd_mm", "Date_mm_dd_12", "Date_dd_mm_12", "Date_mm_dd_24", "
[Date_dd_mm_24](#Date_dd_mm_24)", "Date_Custom"],
"Email": ["Email"],
"Html": ["Html"],
"SingleSelect": ["DropDown", "AutoCompleteStratWith", "AutoCompleteMatchAny"],
"MultiSelect": ["checklist", "grid"],
"ImageList": ["Tile", "Slider"]
}
iii tbd
- SingleLine - An input element with type equals text
<input type="text">. max char: tbd - MultiLines - A text area element
<textarea></textarea> - MultiLinesEditor - A text area element with html editing capabilities (WYSIWYG), in the grid you present it as a html
- Html - An input element with type equals text
<input type="text">. In grid display as html. - Email - An input element with type email
<input type="email"> - Password - An input element with type equals password
<input type="password"> - SSN - An input element with type equals text
<input type="text"> - Phone - An input element with type equals text
<input type="text"> - DocumentReference - tbd
An anchor element. Display the link with an icon that open a dialog with 3 fields: Name, URL and new page.
<a href="http://www.google.com" target=_blank>google</a>
An input element with <input type="number" step="any" min="1" max="10" />
- All formats display as text with type="number" and only display the actual format in the grid
- Min and Max value - Need to validate on he minimum and maximum values
An input element with type equals check <input type="check">
Element with type="date" or "datetime" (open a date picker). Need to consider the following formats:
- Date_mm_dd - for example 05/28/1968
- Date_dd_mm - for example 28/05/1968
- Date_mm_dd_12 - for example 05/28/1968 01:10:00 PM
- Date_dd_mm_12 - for example 28/05/1968 01:10:00 PM
- Date_mm_dd_24 - for example 05/28/1968 13:10:00
- Date_dd_mm_24 - for example 28/05/1968 13:10:00
- Date_Custom - Custom format according to the "format" property in the field level
A select element with options according to the /1/view/config/table1?withSelectOptions=true you will get the name of the field with a name value collection.
- Value / Default value - the option need to be selected.
Example:
"selectOptions": { "FK_t1t3_t1_Parent": { "1": "aaaa", "2": "bbb" } }you will get: `
- AutoCompleteStratWith - An input element with type equals text
<input type="text">after 2 key presses call autoComplete api (tbd) and get max 20 results that starts with the input - AutoCompleteMatchAny - The same as the above only contains the input (not necessarily starts with). this is done in the server side.
A dropdown checklist element that takes its options like SingleSelect DropDown we used ui.dropdownchecklist.js
for create: disableInCreate = true for edit: disableInEdit = true
for create: hideInCreate = true for edit: hideInEdit = true you can use the get verb with id like /1/view/config/table1/5 the get the json for edit and then use the put verb for update, the get verb return a json with hideInEdit = false
required = true
In create mode display a default value.
On how many columns the field span (If bigger the columns then equal to maximize)
- When "horizontalLine" is set to true add
<hr>above the field location - When "separatorTitle" is not empty display a title under the
<hr>###Pre Label An HTML that need to be added before the field as is ###Post Label An HTML that need to be added after the field as is
tbd
In drop down fields when based on "inlineAdding" or "inlineEditing" need to display icons that open the related form in Create or Edit mode. After the user add or update the value the drop down need to be refresh to show the changes. For new value it should be selected.