Browser Event Handlers
Examples of browser event handlers and how they can be used.
A browser event handler can be used on a form or a property in Omada. It responds to changes in form fields and executes specific actions based on those changes, allowing for interactive and responsive behavior on a form. It should not be used to configure security as it can be bypassed. Omada distinguished between two types of event handlers: Oninit event handler and Onsubmit event handler.
In Omada, browser event handlers are crucial for creating interactive and responsive forms. These handlers respond to changes in form fields and execute specific actions based on those changes, enhancing the user experience. However, it's important to note that event handlers should not be used for configuring security, as they can be bypassed. This document provides examples of various browser event handlers and their behavior.
Scope and purpose
This document aims to offer a collection of proven browser event handlers used effectively within Omada. An explanation of the code accompanies each example to facilitate a clear understanding of its functionality. The aim is to inspire and guide consultants, enabling them to implement browser event handlers confidently and efficiently, thereby avoiding the need to develop solutions from the ground up.
This document focuses exclusively on the implementation and use of browser event handlers within Omada forms. It does not cover broader topics such as overall form design, backend processing, or security configurations. Additionally, while the provided examples are based on successful use cases, they may require adaptation to fit specific project requirements. It is also important to note that event handlers should not be relied upon for security purposes, as they can be bypassed.
Oninit event handler
Use the Oninit event handler option on the form to select, add or edit JavaScript code that will run when the form is initiated or loaded. The Oninit event handler provides an opportunity to perform any initialization tasks, set default values, or modify the form based on specific conditions.
Onsubmit event handler
Use the Onsubmit event handler on the form to select, add or edit JavaScript code that will run when the form is submitted. The Onsubmit event handler allows you to customize the behavior of the form and perform any necessary actions when the form is submitted, such as validating input, updating data, or triggering additional processes.
This document will cover the Oninit event handler type.
Applying a browser event handler
To add a browser event handler, you can use the Oninit or Onsubmit event handler. The Oninit event handler is used to select, add, or edit JavaScript code that will run when the form is initiated. The Onsubmit event handler is used to select, add, or edit JavaScript code that will run when the form is submitted:
- Select the appropriate event handler and click it to open the code editor. In the code editor, you can write custom JavaScript code.
- Save the changes to apply the event handler to the form.
Browser event handlers - examples
Example 1: Display different properties on a form depending on the chosen resource type
The following script is an event handler that triggers when a specific property on a form changes. It checks the value of a reference property called C_RADG_RESOURCETYPE. Based on the value of this property, it dynamically modifies the visibility and required status of other properties on the form.
// ------------ ON INIT ------------ //
var propSysName = 'C_RADG_RESOURCETYPE';
var syPropertySysName = 'C_SYNC_AAD';
var emPropertySysName = 'EMAIL';
var onRefPropertyChange = function () {
var refPropertyDataObjectId = omada.uiHelper.getPropertyControl({ property: propSysName }).values.length ? omada.uiHelper.getPropertyControl({ property: propSysName }).values[0].value : 0;
var doId;
if(refPropertyDataObjectId == 0){
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true });
return;
}
omada.wsproxy.ConvertId({
id: refPropertyDataObjectId,
async: false,
success: function (data) {
doId = data;
}
});
//AD Security Group
if (doId === 'bfaaa99b-82c8-4921-828b-942d329c1fc9') {
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: false, value: [{ value: '' }] });
$("#" + omada.uiHelper.getPropertyControl({ property: syPropertySysName }).ctrlId).val('0');
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: true, hide: false });
}
//AD Distribution Group
else if(doId === 'eade7a5a-f3fd-4b6b-a82e-a2b13c5f8f88') {
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: true, hide: false, value: [{ value: '' }] });
$("#" + omada.uiHelper.getPropertyControl({ property: syPropertySysName }).ctrlId).val('1');
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: true });
}
};
window.omada.uiHelper.registerControlChangedEvent({ controls: [{ property: propSysName }], fireImmediately: true, callback: onRefPropertyChange });
Let's break down the JavaScript code and explain what it does:
-
Initialization Variables:
propSysName,syPropertySysName, andemPropertySysName: These variables store the names of properties being manipulated in the user interface. They are initialized with specific property names. -
Event Handler Function (onRefPropertyChange):
This function is called whenever a specific property (
propSysName) changes in the user interface. It retrieves the value of the referenced property (propSysName) using omada.uiHelper.getPropertyControl. If the value is 0, it hides and removes the required status for two other properties (syPropertySysNameandemPropertySysName). If the value is not 0, it converts the value to another format usingomada.wsproxy.ConvertIdand performs actions based on the converted value. -
Action based on Property Value:
The script contains conditional statements (if and else if) to determine what actions to take based on the value of the referenced property. If the value corresponds to a specific Data object ID (examples:
bfaaa99b-82c8-4921-828b-942d329c1fc9oreade7a5a-f3fd-4b6b-a82e-a2b13c5f8f88), it modifies the visibility and required status of other properties accordingly. It also manipulates the values of other properties or UI elements based on the conditions. -
Event Registration:
The script registers the event handler (
onRefPropertyChange) to be executed whenever the value of the specified property (propSysName) changes in the user interface. It useswindow.omada.uiHelper.registerControlChangedEventto achieve this.
To adapt this script for other purposes:
- Identify the properties you want to monitor and modify.
- Adjust the variable names
propSysName,syPropertySysName, andemPropertySysNameto match the properties you're working with or add new ones. - Update the logic inside the
onRefPropertyChangefunction to reflect the desired behavior based on the values of the monitored properties. - Replace the conditional statements (if and else if) with your own conditions and actions based on the properties' values.
Example 2: Display different properties on a form depending on the chosen account type
The following script is an event handler that triggers when a specific property on a form changes. It checks the value of a reference property called C_RAA_ACCOUNTTYPE. Based on the value of this property, it dynamically modifies the visibility and required status of other properties on the form.
// ------------ ON INIT ------------ //
var propSysName = 'C_RAA_ACCOUNTTYPE';
var pnPropertySysName = 'C_DISPLAYNAME';
var fnPropertySysName = 'FIRSTNAME';
var lnPropertySysName = 'LASTNAME';
var phPropertySysName = 'PHONE';
var cpPropertySysName = 'CELLPHONE';
var opPropertySysName = 'C_OTHERPHONE';
var emPropertySysName = 'EMAIL';
var syPropertySysName = 'C_SYNC_AAD';
var onRefPropertyChange = function () {
var refPropertyDataObjectId = omada.uiHelper.getPropertyControl({ property: propSysName }).values.length ? omada.uiHelper.getPropertyControl({ property: propSysName }).values[0].value : 0;
var doId;
if(refPropertyDataObjectId == 0){
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: true });
return;
}
omada.wsproxy.ConvertId({
id: refPropertyDataObjectId,
async: false,
success: function (data) {
doId = data;
}
});
//AAD Guest
if (doId === '05de30d8-6e7e-4d65-9e0e-c56491fca7f7') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: true, value: [{ value: '' }]});
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
$("#" + omada.uiHelper.getPropertyControl({ property: syPropertySysName }).ctrlId).val('0');
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: true });
}
//T User
else if(doId === 'd7ec8bff-00ef-49f4-aea7-1475c00d48e2') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: false });
}
//NP User
else if(doId === '35c413cb-1a8f-4286-ad2c-9c7bd48728de') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: false });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: false });
}
//NP Mail
else if(doId === '3be6ca12-0672-4df2-a565-00c9a73ced6f') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: false });
}
//NP Mail Admin
else if(doId === '7a83be5f-e3d9-446c-92a6-d00236e69ef3') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: true, hide: false });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: false });
}
//Service
else if(doId === 'e5c2d3ba-091b-40f8-860d-74bdabd95340') {
omada.dataObjectDialog.modifyField({ property: pnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: fnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: lnPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: phPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: cpPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: opPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: emPropertySysName, reqValue: false, hide: true, value: [{ value: '' }] });
omada.dataObjectDialog.modifyField({ property: syPropertySysName, reqValue: false, hide: false });
}
window.omada.uiHelper.registerControlChangedEvent({ controls: [{ property: propSysName }], fireImmediately: true, callback: onRefPropertyChange });
Example 3: Define a maximum validity period allowed for ‘Valid to’ date based on the ‘Valid from’ date
This script defines a function checkDateTimeValidityOnChange that validates date inputs in a form. It compares dates entered for Valid from and Valid to fields and checks if they meet certain criteria. If the dates are invalid, it displays error messages and optionally removes the invalid dates from the form fields. Finally, it triggers the validation function.
// ------------ ON INIT ------------ //
var checkDateTimeValidityOnChange = function () {
var validFromGreaterValidToErrorMessage = "'Valid to' must be after 'Valid from' date";
var validToGreaterMaxValidToErrorMessage = "'Valid to' date can be maximum 12 months from 'Valid from' date";
var validToSmallerThanTodayErrorMessage = "'Valid to' cannot be earlier than today";
var validFromSmallerThanTodayErrorMessage = "'Valid from' cannot be earlier than today";
var validToPropertyCtrl = omada.uiHelper.getPropertyControl({ property: 'VALIDTO' });
var validFromPropertyCtrl = omada.uiHelper.getPropertyControl({ property: 'VALIDFROM' });
var validTo = validToPropertyCtrl.hasValue ? new Date(validToPropertyCtrl.values[0].value.toISOString()) : new Date();
var validFrom = validFromPropertyCtrl.hasValue ? new Date(validFromPropertyCtrl.values[0].value.toISOString()) : new Date();
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
var maxValidTo = new Date(validFrom.toISOString());
maxValidTo.setMonth(maxValidTo.getMonth() + 12);
var errorMessage = '';
var removeValidTo = false;
var removeValidFrom = false;
if (validToPropertyCtrl.hasValue && validFromPropertyCtrl.hasValue && validFrom >= validTo) {
errorMessage += validFromGreaterValidToErrorMessage + '\n';
removeValidTo = true;
}
if (validToPropertyCtrl.hasValue && validTo >= maxValidTo) {
errorMessage += validToGreaterMaxValidToErrorMessage + '\n';
removeValidTo = true;
}
if (validToPropertyCtrl.hasValue && validTo < today) {
errorMessage += validToSmallerThanTodayErrorMessage + '\n';
removeValidTo = true;
}
if (validFromPropertyCtrl.hasValue && validFrom < today) {
errorMessage += validFromSmallerThanTodayErrorMessage;
removeValidFrom = true;
}
if (removeValidTo) {
omada.dataObjectDialog.modifyField({ property: ['VALIDTO'], value: "" });
}
if (removeValidFrom) {
omada.dataObjectDialog.modifyField({ property: ['VALIDFROM'], value: "" });
}
if (errorMessage.length > 0) {
omada.dialogHelper.showMessage({ convertCRtoBR: true, title: 'Validation error', message: errorMessage });
}
}
checkDateTimeValidityOnChange();
The script calculates the maximum validity period allowed for the Valid to date based on the Valid from date. It creates a new date object (maxValidTo) by adding 12 months to the Valid from date. This ensures that the Valid to date cannot exceed a maximum period of 12 months from the Valid from date.
If the Valid to date is set beyond this maximum period, it triggers an error message indicating the date cannot be more than 12 months from the Valid from date. This validation helps ensure that the validity period specified by the user does not exceed a predefined limit
Example 4: Limit the choices for Valid To
//Limit the choices for VALIDTO, that it cannot be more than +90 days
var validToFldId=getFieldIdFromPropertySysName("VALIDTO");
$('#'+validToFldId).datepicker( "option",
"maxDate", new Date(Date.now()+90*24*60*60*1000), )
$('#'+validToFldId).datepicker( "option","minDate", new Date() );
This JavaScript code initializes a date picker for a field identified by the VALIDTO property. It first gets the field's ID using the getFieldIdFromPropertySysName function. Then, it sets the date picker's options to ensure the selected date cannot be earlier than today (the minimum date) or later than 90 days from today (the maximum date).