Advanced Techniques - Mandatory fields with JavaScript

This workshop will demonstrate how JavaScript can be used to make edit elements into mandatory fields based on the value of another edit element. The example application for this workshop can be downloaded here and imported into your portal as usual.



The app contains the data group "Receipts". This data group contains the page "Submit receipt". The receipt amount is entered by default in Euro but there is also an option to enter the amount in a different currency. If the "EUR" entry is not selected in the "Currency" drop-down list, the "Amount - Other currency" field should become a mandatory field using JavaScript - otherwise it is just a normal edit field.



Open the properties dialog of the "Currency" drop-down list. Switch to the "Script" tab and click on "Edit JavaScript for Desktop". Insert the following script
function checkRequiredFields()
{
	var htmlCurrency = getElement("E537D95B69660BC4AA7A3C52A007CDEC46990482"); /*Currency  dropdowncontrol*/
	var htmlOtherAmount = getElement("469E26EC6A904905B80229B595C2041BBB299F9A"); /*Amount - Other currency  currencycontrol*/
	var htmlEuroAmount = getElement("AEE24101CED6A610394B9C0F829D35E7C864EF68"); /*Amount EUR  currencycontrol*/

	if(Browser.getValue(htmlCurrency) != "EUR")
	{
		checkRequired(htmlOtherAmount,"Please enter the amount in the foreign currecy!")
		htmlOtherAmount.oUp.setRequired(true);
		htmlEuroAmount.oUp.setRequired(false);
	}
	else
	{
		htmlOtherAmount.oUp.setRequired(false);
		htmlEuroAmount.oUp.setRequired(true);
	}

	return true;
}
Replace the GUIDs in the first three lines with the corresponding GUIDs from your application. The GUIDs can be determined easily using the Application structure area in the editor.

In the initial "if" condition, the function checks whether a different currency (unequal to EUR) has been selected. In this case, the method "checkRequired" checks whether a value has already been entered in the "Amount - Other currency" field and displays a notification if this is not the case. The method "oUp.setRequired" makes the "Amount - Other currency" field mandatory (true), while the "Amount EUR" field becomes optional (false). If "EUR" is selected as the currency, the "Amount - Other currency" field is optional and "Amount EUR" is mandatory. Click on "OK" and assign the new function to the "onchange" event. This means the script will be performed every time a currency is selected in the drop-down list.

Save the application and test the result in the browser.