A common use case is to have certain fields on a form be dependent on another field. In order to avoid confusion, you may want to enable or disable these fields unless a certain value is selected. Today we'll cover how to dynamically enable and disable fields on a Form.
Code Structure
The code that you will use to disable any kind of field will follow the same basic structure. You will first get the parent element of the field. Next, you'll find the appropriate input elements based on the field type. Lastly, you'll add the disabled attribute to the input elements in order to prevent users from interacting with them. This same code can also be called from any event on the Form whether, it be an onFormPopulated Form Event to disable the field as soon as the form loads or an onChange Field Event to disable a field when another field is edited.
Text Fields
Text fields are among the simplest fields available on a Form. There is only one input that we need to disable which we can accomplish by using the code below.
If the field is successfully disabled, you should see it as it appears at the right of the image below. The border will be grayed out to indicate that it is not editable.
Dropdown Fields
Dropdown fields are slightly more complex than text fields. Additionally, the way to disable dropdowns is dependent on the version of Innovator that you are using. In service packs before 11.0 SP11, dropdowns were just a select element that could be disabled with the code below.
In SP11+, Aras introduced support for type-ahead for list fields. To accommodate this, dropdowns are now made up of an input field and a button that brings up the list of options. You must disable both of these fields in order to completely disable the dropdown.
It will be easier to see that the other fields have been successfully disabled as they have a button that will be noticeably grayed out.
Item Fields
Similar to dropdowns, item fields also consist of an input field that users can type keyed names into and a button that launches a search dialog. This means that the code will look very similar to what we used to disable the dropdown. However, this is one small addition we need to make. In writing this blog post, I found that immediately after disabling my item field from an onFormPopulated event, it was immediately re-enabled. To get the field to disable, I added in a small timeout as seen in the sample below.
A timeout of 100ms worked great in my test environment, but you may find that you need to increase the timeout in your own environment.
Date Fields
The last input type we'll cover in this blog post is also the trickiest. Rather than being composed of an input field and a button, a date field is composed of two input fields: a text field and an image field. In addition to disabling both of the inputs, we also want to gray the image so our users know that the field is disabled.
If you do not include the bottom line of the sample above, the field will be disabled, but the calendar image will not be grayed out like below.
Other Fields
The same concepts used to disable the fields covered in this blog post can be applied to any of the fields offered by the Form editor in Aras Innovator. You can make use of your browser's debug console (which you can open by pressing F12 on your keyboard) in order to inspect the field and figure out which elements you need to disable.
LOOKING FOR MORE ARAS INSPIRATION?
Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.