Customizing Your Aras Forms: Part 2

As we covered in the first part of our blog series, the possibilities for your Aras forms extend beyond the configuration options in the Aras Form Editor. In this article, we'll see how we can combine a little CSS and Javascript to apply custom styles to our Aras form fields.

Getting Started

You can find all of the code and files for this demonstration on the Aras Labs GitHub page in the custom-form-css project. If you want to install the project and follow along, the project page includes all of the instructions for installing the code tree overlay and import package.

ARASLABS/CUSTOM-FORM-CSS

custom-form-css - Demonstrates how to customize form field appearance with custom CSS.

1. Import External CSS Stylesheet

Importing an external CSS stylesheet

Defining your form styles in an external CSS stylesheet can make maintaining many forms much more manageable. It's also a fairly simple approach to implement in Aras:

1. Add or create your custom CSS file in the customer folder in your Aras code tree: [Install Path]\Innovator\Client\customer\[file].css
2. Log in to Aras as an administrator
3. Open up your form in the Form Editor
4. Under the Form Body tab, edit the CSS property and add import statements for default.css and your custom CSS file.

Importing the default.css file ensures that the default Aras styles are applied to your form. This is important for basic formatting and layout. Importing your custom CSS file after default.css ensures that your rules will override any conflicts in the default Aras styles.

Tip: When selecting an Aras field in your CSS, you can use the field's name as a class selector. For example, a field named "my_field" can be styled using the ".my_field" CSS selector.

2. Override Default Label Style

Different label styles implemented via external CSS

One way to customize field labels is to set the properties under the Field Label tab for every form field. However, if would be easier if we had way to set and maintain the style of all field labels in one place. With a little bit of Javascript and a little CSS, we can do just that.

The basic steps for overriding the default field label styles are as follows:

1. Define your desired style in your external CSS stylesheet. (See Import External CSS Sylesheet above)
2. Using a form event, clear the style attribute on all field label elements.
3. Using the same form event, add your custom class to each field label's class attribute.

For step 1, we defined a class called "my_label".

For step 2, we created an OnLoad form event. The event method contains a few custom helper functions (to reduce repeated code) and the code to update the field label styles. Here's the code to clear the style attribute:

And here is the step 3 code that adds our custom class to the label field elements:

For the complete OnLoad form event method code, see labs_StyleForm.xml in the ArasLabs/custom-form-css project on GitHub.

3. Customizing Field Styles

Default vs custom field styles

Now that we've seen how to import external CSS and how to override default styles with CSS/Javascript, we can combine these skills to customize our form field styles. Overall, the basic steps are similar to overriding the default label style. We will again define a new style in our external CSS stylesheet and then update the form field elements with Javascript. However, the Javascript we use varies depending on field type.

Note: The code snippets below rely on the following helper functions we've defined in the OnLoad form event method.

You will need to copy these helper methods into your method code if you use the code snippets in this section.

Text & Textarea Fields

For text and textarea fields, we can simply replace the default classes with our custom class.

Date Fields

Date fields are composed of two parts - an input element for displaying the field's value, and an input element that acts as a button for triggering the datepicker dialog. Our Javascript will update the class of the input that displays the field value, and replace the source image of the "button" input field.

Item Fields

Like date fields, Item fields are composed of two input elements elements. The following sample code updates the "button" icons with icons from GitHub's open source Octicon icon set.

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.

Did you miss Customizing Your Aras Forms: Part 1? Check out the original post to learn how to display class-specific icons on forms, customize the item_info field, and style field groups.