AUTOCOMPLETE COMPONENT

Revision History

S/N Version Changes Date

1 1.0 First Version (Derivation from Input fields - Autocomplete, Select, 1 Nov 2023
Textfield.docx)
2 1.1 Include Add functionality and payload functionality 28 Mar
2024
3 1.2 Standardization of JSON elements: 3 Apr 2024
Component.options.textFieldProps
Data.sAdd.sMessageProps
Data.sAdd.sIconProps
Data.bPayload

Validation.bRequired validation only

4 1.3 Standardization of sDisplayField and sDisplayFormat 5 Apr 2024
5 1.4 Added CASCADE data.sAction 6 May 2024

I. AUTOCOMPLETE Component Type

This type creates a <Autocomplete> component type that shows the specified options inside
the Grid Item. This is equivalent to MUI’s Autocomplete component found at:
https://mui.com/material-ui/react-autocomplete/

a. The components elements JSON definition:

"component" : {
"sType": "AUTOCOMPLETE",
"sName": "autocomplete_default1",
"sLabel": "Select Inventory outlined group",
"sPlaceHolder": "Select Inventory outlined group",
"sHelper": "Select Inventory outlined Helper",
"sDefaultValue": "101",
"sProps": {
"freeSolo" : true,
"xs" : "2"
},

"options": {
"mode": "ADD",
"submode": "",
"textFieldProps": {
"variant":"outlined"
},
}
},
"sType": the component type, in this case Autocomplete

"sName": the unique name of the component, which will also be used as the field name

"sLabel": the label to display

"sPlaceHolder": the placeholder

"sHelper": the helper to display

"sDefaultValue": the default value to display in the textfield of the autocomplete

"sProps": the props of the grid that contains the component

"options": { //the options section will determine the different types of autocomplete to use

"mode": "type of Autocomplete ", //see table below

"submode": "submode of the Autocomplete", //see table below

"textfieldProps": will contain the Textfield props of the autocomplete

Autocomplete “options.mode” and “options.submodes”

S/N Mode Submode Autocomplete Behavior

1 DEFAULT
2 FILTER
3 MULTIVALUE
4 MULTIVALUE
5 MULTIVALUE
6 MULTIVALUE
7 ADD
- Normal autocomplete
- Autocomplete that retrieves info as you type in
the textbox
DEFAULT Autocomplete with multiple prop
FIXEDOPTIONS Autocomplete with fixedOptions prop
CHECKBOXES Autocomplete with checkboxes in the
selections
LIMIT Autocomplete with limits in display
- Autocomplete with option to display ADD and
call the dialog box for adding new option

Example 1.1: AUTOCOMPLETE -DEFAULT

"options": { //the options section will determine the different types of autocomplete to use
 "mode": "DEFAULT ", //see table below

"submode": "", //see table below

" textfieldProps ": "variant='outlined'", //will contain the Textfield props of the autocomplete

Example 2: AUTOCOMPLETE -FILTER

This mode is used to search while typing in the textfield instead of downloading the whole dataset
immediately:

Example 2: AUTOCOMPLETE -MULTIVALUE-DEFAULT

Example 3: AUTOCOMPLETE – MULTIVALUE-FIXEDOPTIONS

In this case scenario, a default value or values are shown but disabled in the texfield. Get the default
values from the component.sDefaultValue:
Example 4: AUTOCOMPLETE – MULTIVALUE-CHECKBOXES

Example 5: AUTOCOMPLETE – MULTIVALUE-LIMIT

Display a limited number of options

b. Autocomplete Data Elements Definition

"data" : {
"sAction" : "DEFAULT",
"sDataSource": "/record/data/get/all?table=acc_coa",
"sDisplayField" : "{sItemName}, {sInventoryCode}",
"sDisplayFormat" : "%s [%s]",
"sValueField" : "sAccountCode",
"sGroupField": "sAccountCategory",
"sAdd" : {
 "sAddMessage" : "NEW ACCOUNT", "sMessageProps" : {},
"sAddIcon" : "SettingsIcon", "sIconProps" : {},
"sAddForm" : "addCOADialog"
},
"bPayload" : 1

1. sDataSource response and sDisplayFormat

The data.sDatasource will return the fields as requested from the endpoint, data.sDisplayFields are
the fields to be used as parameter for the sDisplayFormat, and data.sDisplayFormat is the format to
be used for displaying the field

sValueField – indicates the field to be returned or sent to the back-end once a selection is done.

sGroupField – this will be the field to be used to group. Below is an example of an AUTOCOMPLETE
with grouping:

2. ADD section of the AUTOCOMPLETE

When the sOptions.mode is set to “ADD”, this indicates that the AUTOCOMPLETE behavior
will allow for adding of new record/option using a dialog form.
 When the sOptions.mode is set to “ADD”, do the following:

a. check if the adding a new record is allowed for the user by doing using the
sAdd.sFormName and sAdd.sAction then calling:

II. API end-point HTTP Type Authenticated

/form/isallowed/transaction?module=[modulename]&activity=[activity] GET Yes

Where:

Modulename – is the forms sAdd.sFormName

Activity – sAdd.sAction

The server response is shown below:

http status API Response Envelop

200 {
"metadata" : {
"msg": "success",
"status":"OK",
"statuscode":"200",
"timestamp": "the date and time of the response"
},
"data": { “Access” : “Yes”, “Module” : [modulename], “Activity”
: [activity], “user”: [userID]
}
}

If data.Access=Yes, then display the ADD section in the AUTOCOMPLETE.

If data.Access=No, then DO NOT display the ADD section in the AUTOCOMPLETE.

To display the ADD section:

a. Use the sAddMessage as the typography and apply the props using sMessageProps
b. If sAddIcon is specified, use it to as the icon to display in front of the typography and
apply the props using sIconProps.
 When the ADD section is clicked, display the DIALOG component as indicated in sAddForm.

1. After the record is created, when status.OK is received from the back-end, then the new
record will be added to the selection.
2. The new record will become the selected display:value of the autocomplete

3. Autocomplete Loading:

While selection is loading, the autocomplete should show the loading circular icon. Refer to:
https://mui.com/material-ui/react-autocomplete/#load-on-open

4. Validation Definition

The validation section of the component checks if the values in the component is correct base on the
validation rule specified:

"validation" : {
"sRegex": "", "bRequired": 0, "iMinLen": 0, "iMaxLen": 0, "iMinValue" :
0, "iMaxValue" : 0, "sErrorMessage" : ""
},
The validation rules will be checked before it is allowed to be sent to the server. If the component
does not satisfy the validation, then an error will be displayed.

Validate Elements Definition

"validation" : {

“sType”: “” // not used for AUTOCOMPLETE

"sRegex": "", // not used for AUTOCOMPLETE

"bRequired": 1, //if this component is required

"iMinValue": 0, // not used for AUTOCOMPLETE

"iMaxValue": 0, // not used for AUTOCOMPLETE

"iMinLen": 0, // not used for AUTOCOMPLETE

"iMaxLen": 0, // not used for AUTOCOMPLETE

"sErrorMessage": “” // not used for AUTOCOMPLETE

Validation Rules

1. Verify if the component is a required field

If the bRequired=0, then ignore this validation

If the bRequired=1, but there are no values in the component, then display “Value required”
with the helperText. Once this is corrected, the helperText will go back to the original helper
text specified in the component.sHelper.

*** when an input does not satisfy the validation, the AUTOCOMPLETE prop will have an additional
property error. The error prop will show the behavior below with the helper information
 5. Transmission to back-end

The data section of the component specifies if the text field is to be sent to be back-end or not:

"data" : { "bPayload" : 0},

If the value of bPayload=0, do not send to the back-end as part of the payload.

If the value of bPayload=1, send it to the back-end as part of the payload.

6. data.sAction and data.sDataSource substitution

"data" : {
"sAction" : "CASCADE",
"sDataSource": "/record/get/city/{component name}",
"sDataAware": “{component name}”

The sAction determines the behavior of the AUTOCOMPLETE:

“DEFAULT” – when sAction is DEFAULT, load the values of the AUTOCOMPLETE from the
sDataSource.

“CASCADE” – when the sAction is CASCADE, the values of the AUTOCOMPLETE will only be
loaded when there are changes in the specified sDataAware component.

For example, assume that there is a component sCountry, and a component sCity that is an
AUTOCOMPLETE with sAction=CASCADE, sDataAware={sCountry}. In this case, the sCity
component will not have any selection until a valid sCountry is selected. When the sCountry is
selected.

sDataSource in the data section is usually a URL that determines the API end-point to retrieve
the information.

If the sDataSource has the {} pattern, the it will be substituted with the actual value of the
specified component name between the {}. For example:

/record/get/city/{sCountry}

There will be a component with sName is sCountry, assume that sCountry value (not display) is
PH, then the URL to retrieve the value of the CASCADE AUTOCOMPLETE will be:

/record/get/city/PH