1. General information
1.1. Description of the control
JavaScript is a control that allows any javascript code to be embedded in the body of the edit form. The javascript code will be automatically executed when the edit form is loaded, and it is possible to debug it directly in the web browser in the javascript console (e.g. in Google Chrome, the javascript debugging console is displayed using the keyboard shortcut “CTRL+Shift+J”).
- The code runs when the browser loads the corresponding place of the page – i.e. before the whole page has finished loading and before the controls placed below exist, including the “Save”, “Delete” and “Back” buttons. Code that works with them should therefore be placed in a JavaScript control at the end of the form.
- After an ajax update of the form the code does not run again. In the FULLAJAXMODE() mode, on the other hand, it runs only after the whole page has loaded and again after each ajax update; values inserted by the server (variables, results of the “SQL” and “ngef” functions) remain from the first load.
- With the “Disable JavaScript” option in the edit form settings, the JavaScript controls are not rendered. JavaScript in the events of other controls and in the “Client” field of buttons is not disabled by it.
- Calling an external function through the “ngef.aspx” page is allowed only if the text “ngef.aspx?Identifier” is written literally in quotation marks in the code – an address composed of variables is not allowed. A detailed description is provided in the separate guide External functions.
- Variables and functions used in the code are evaluated by the server and their values are inserted without escaping – details are provided in the separate guide JavaScript functions.
1.2. Create a new control
- A detailed description of creating new controls in the edit form is provided in the separate guide Creating edit form controls.
1.3. Edit or delete a control
- For each existing control, a pencil icon appears on the left side of the edit form to change or delete the control's settings.
- Individual controls can be moved vertically in the edit form using the Drag&Drop method. Moving consists of grabbing the control, preferably behind its name located in the left column of the edit form, and then dragging it to the desired position in the edit form.
- Controls can be moved only with the “Drag&Drop” check box located above the toolbar with controls selected. For security reasons, this check box is cleared after each login to the application, so that a control is not moved by accident.
2. List of tabs in the control settings dialog
- General – Setting general properties
- Help – Javascript editor help
- Rights – Rights settings
- Administration – Setting other properties
2.1. “General” tab
2.1.1. Name
- The name of the control.
- The drop-down list offers the names “display()”, “onchange()”, “onclick()” and “beforeSave()”. If the code of the control is empty, selecting a name inserts the corresponding template into the code.
2.1.2. Variables and functions
- Drop-down list with a selection of variables, javascript and server functions that can be used inside javascript code.
- A detailed description of the variables is provided in the separate guide Variables.
- A detailed description of javascript functions is provided in the separate guide JavaScript functions.
- A detailed description of the server functions is provided in the separate guide Server functions.
2.1.3. Identifiers
- Drop-down list with a selection of database control identifiers that can be used inside javascript code.
2.2. “Help” tab
- Overview of the keyboard shortcuts of the javascript code editor. The tab is displayed only when the code editor is enabled.
2.3. “Rights” tab
2.3.1. Rights
- Rights define a list of user groups and users who have permission to view the control on the edit form.
2.3.2. Replace rights to other controls
- The “Replace rights to other controls” function is used to unify the rights within the entire edit form for controls that are related in terms of rights.
- Thanks to the “Show...” link, it is possible to display a list of all controls in the edit form, including setting the rights of these controls. A check box is displayed for each control to select it. When the control is saved, the same rights are then set for the selected controls.
- An alternative for unifying rights within the entire edit form is to display the report available from the “Subordinate object rights” tab in the edit form settings.
2.4. “Administration” tab
- The “Administration” tab is only displayed for existing controls.
2.4.1. Dictionary
- The dictionary displays a list of calls of the “alert” and “confirm” javascript functions and of the “COLORLEGEND” server function used throughout the NET Genium installation.
- Dictionary search is used to design the correct form of user messages and to maintain the consistency of nomenclature throughout the application.
2.4.2. Change tracking
- Change tracking displays a detailed report with all changes made to the javascript code by individual users.
2.4.3. Compare
- The “Compare” button is used to compare the javascript code on the “General” tab with another version of the code, which the administrator inserts into the text field on the “Administration” tab.
- After pressing the button, a comparison table with two columns is displayed:
- General – values displayed on the “General” tab,
- Administration – the corresponding values from the “Administration” tab.
- If the values in the same item differ, the system highlights the difference in red text.
- A textual summary of discrepancies (e.g., “General is not equal to Administration”) is displayed in a dialog.
2.4.4. References
- The “References” button is used to display the JavaScript content from the “General” tab, in which all occurrences of “el(BT123)”, “bt_Click(BT123)”, “button_Enable(BT123)”, and “button_Disable(BT123)” are replaced with corresponding links that allow quick access to the settings of the button referenced in these four JavaScript functions. The identifiers of database controls also get links to their settings.
2.5. “Save”, “Save and continue editing”, “Copy”, “Delete”, and “Close” buttons
- “Save” button – Saves changes to the control settings.
- “Save and continue editing” button – Saves changes to the control settings and keeps the settings dialog open for further modifications.
- “Copy” button – Creates a new copy of the current control with identical settings, but with a newly generated unique identifier.
- “Delete” button – Permanently deletes the control.
- “Close” button – Closes the control settings dialog without saving changes.
3. The display() function and hiding parts of a form
- Most edit forms conditionally hide parts of the form based on values entered in controls (text fields, checkboxes, etc.). This is typically done by setting the “style.display” property of “div”, “table”, and similar elements.
- For this purpose, it is customary to define a javascript function named “function display() {}” within the form. A template for this function can be generated directly in the javascript editor by selecting “display()” from the drop-down list.
if (!adminMode)
{
// control_Disable(#ng_#);
}
function display()
{
if (adminMode) return;
// #ng_:Table#.style.display = jsDisplay(true);
}
display();
- The “adminMode” variable indicates whether admin mode is active. It has the value “false” in user mode, in the preview of a form or view page, and also when the administrator is not allowed to change the form (the application group is reserved for selected administrators).
- All logic that hides parts of the form must be placed after the line “if (adminMode) return;” so that administrators always see the complete form layout.
- Calling the “display();” function on the last line is essential to ensure that hiding logic is applied immediately when the form is rendered. A blank line is inserted between the function declaration and this call.
- The “display();” function must also be called from the “OnChange” event of all controls whose values affect form visibility.
- Example of a typical implementation of the “display()” function:
function display()
{
if (adminMode) return;
D1.style.display = jsDisplay(control_GetValue(#ng_status#) == 'New');
D2.style.display = jsDisplay(#ng_show#.checked);
D3.style.display = jsDisplay(control_GetValue(#ng_status#) == 'New' && #ng_show#.checked);
}
display();