Agile Developer

Hooks In Forms

Hooks In Forms

Axpert provides the following hooks in which developers can write their code:

  1. AxAfterTStLoad – This method is invoked after loading the page along with all controls. This event may be used to write code to introduce different controls.
  2. AxAfterLoadTab – This method is invoked when the user clicks on a tab in a form for the first time. This method can be used to change controls or add new controls in DC/frames which were not loaded during AxAfterTstLoad. This happens only for TabDCs.
  3. AxAfterAddRow – This method is invoked when a new row is added to a grid DC. This may again be used to bind new controls in the grid DC.
  4. AxAfterBlur – This method is invoked after the user changes the value in a control and leaves the control. This method can be used to bind data to controls.
  5. AxAfterFillGrid – This method is invoked after binding data of a fill gird result to controls in the grid. This method may be used to bind fill grid results to new controls.
  6. AxBeforeFillGrid– This method is invoked before calling the web service to get the fill grid result. This may be used to send additional param values or modified param values to fill grid.
  7. AxBeforeTStLoad– This event is invoked after receiving form load data from the web service. Use this event to modify data received from the server and bind custom data to controls.
  8. AxBeforeBlur– This event is invoked before making getdependent calls. Write special custom validations for this field in this event. Return false as the result, the rest of the normal functionality of Axpert will not be executed. This may be used to make calls to external API to validate the data too.
  9. AxAfterGetDependents – This event is invoked after making a getdependent call. It may be used in exceptional cases to modify the JSON result given by the web service.
  10. AxGetCustomFieldValue(fldid) – This event is invoked when Axpert needs to read data from external control. This event can be used to assign values to Axpert from a third party control. This event should return the field value.
  11. AxAfterInlineEditRow(DCNo, RowNo) – This event is invoked when a grid row is edited by user. This may be used to add new controls or bind custom data into controls. In case of popup edit of rows, use the AxpAfterPopupEditRow.
  12. AxAfterPopupEditRow(DCNo, RowNo) – This event is invoked when a grid row is edited by the user when the inline edit is false for the grid dc in a struct.

THE FOLLOWING STANDARD FUNCTIONS MAY BE USED TO WRITE CUSTOM CODE
Fields and Field Ids in Axpert forms

Every field has a unique name that is given in the tstruct. For each field, in the tstruct a corresponding control is created in the form. The id of the control is called the field id. The field is a combination of the field name, row number, and DC No.

GetFieldsName(FldId)

This function will return the field name and the input should be the field id.

GetFieldsRowNo(FldId)

This function will return the row number of the field for a given field id. The row no will be 000 for fields in non-grid DC. In case of grid DC, it starts with 001, 002, 003, …

GetFieldsDcNo(FldId)

This function will return the dc number of the given fielded.

GetFieldId(AxFldName, AxRowNo, AXDcNo)

This function returns the field id of the given field name, rowno&dcno.

AxGetFieldData(FldId)

This function will return the values for the selected field (both lists and autocomplete fields). This function will return a three-dimensional array. The first dimension is a value that is shown for selection in the drop-down for users. The second dimension contains the id. The third dimension contains the dependent fill fields. Each element in this array will be comma-separated in case of more than one dependent.

//var custData = AxGetFieldData(FldId) //custData[0]—dropdown values, custData[1] — Id &custData[2]– dependent fill field is available

Hooks.png

UI SCSS Hooks

SCSS ( Sassy CSS) enables object-oriented CSS writing. Any code written in SCSS is eventually compiled into CSS. This compilation is done on the node. Until version 10.9 we used node web services, but are no longer in use. We are now using node-based SCSS compilation.

All compiled files are available in the axpertUI folder. The uncompiled files will be available in the compiler folder.
For a node, we need to install packages before we get started.
Go to the dedicated folder and execute npm install in the command prompt. This will install all the necessary packages in the system.
Open VS code software and press F5. This will start the execution in the console as shown below

On completion of the execution, the updated files will be available in the UI folder.

Additional SCSS imports are to be referred to in the following empty “_custom.scss” partial file available in the “\UI\compiler\src\sass” directory

Any customization or changes to the variables and refer to any variables, can be implemented in this folder by creating a new SCSS file or using an existing file.