Rules for writing javascript

1. Spaces, tabs, and line breaks

• Spaces are used between the "if" keyword and the opening parenthesis, on both sides of the "=" operator, after commas used as separators of variables or function parameters, and in similar cases.
• Tabs are used to indent code from the left margin on a new line. One tab corresponds to two spaces and serves as a shortcut for inserting them in the JavaScript editor. Each level of code nesting requires one tab (two spaces). Code at the top level is not indented.
• Line breaks are used before and after the opening curly brace "{" as well as before and after the closing curly brace "}".

• Bad example

2. Single quotes

• Single quotes are always used as the default string delimiter. This is because JavaScript code is often combined with server functions, and double quotes are therefore reserved for server function calls.
• Parameters of server functions are often required to be enclosed in double quotes, as they may contain commas, which would otherwise be interpreted as parameter separators. Text enclosed in double quotes is treated as a string constant, and server functions are not evaluated inside it – only variables are substituted.
• The only exception are the parameters of the "SQL" and "SQLARRAY" functions, inside which server functions may be called even though their parameters are enclosed in double quotes.

• Example 1

• Example 2

• Example 3

3. Semicolons

• JavaScript code defined in control event handlers must end with a semicolon.

• The only exception is JavaScript code used in the "ActionButtons" control for the "Save", "Delete", and "Back" buttons. In this case, the code must not end with a semicolon, as it is used as the return value of a condition in the generated page source.

4. Buttons and postbacks

• Buttons configured as "Script", "Print to template", "Open view page", or "Open edit form" first execute the JavaScript code defined in the "Client" field (if any). They then trigger a postback, i.e. a form submission using the POST method, sending all form data including information about the button that initiated the postback.
• The corresponding server-side script is then executed. After completion, the user is returned to the form. During processing, the form content is hidden and the message "Please wait…" is displayed at the top.

• A button click can be triggered programmatically using the JavaScript function "bt_Click(string id)". Only one postback can be triggered from JavaScript at a time; repeated or parallel calls are treated as an error, and only the first postback is executed.
• To refresh a form, the JavaScript function "form_Update()" is used. This function also performs a postback using the hidden "btUpdate" button to reload all form controls.

5. 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 entering "display()" or selecting it from the drop-down list.

function display()
{
  if (adminMode) return;
}

display();

• The "adminMode" variable indicates whether administrative mode is active. When an administrator uses the preview of a form or view page, the "adminMode" variable has the value "false" even though administrative mode is active.
• 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.
• The "display();" function must also be called from the "OnChange" event of all controls whose values affect form visibility.

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();