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:
- Add or create your custom CSS file in the customer folder in your Aras code tree: [Install Path]InnovatorClientcustomer[file].css
- Log in to Aras as an administrator
- Open up your form in the Form Editor
- Under the Form Body tab, edit the CSS property and add import statements for default.css and your custom CSS file.
gist.github.com/…/ef67ecd7bd00303ec8d5651f81a71982
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:
- Define your desired style in your external CSS stylesheet. (See Import External CSS Sylesheet above)
- Using a form event, clear the style attribute on all field label elements.
- 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".
gist.github.com/…/c9e6bf8a8f890fd2e4772cc361cc6f36
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:
gist.github.com/…/ec029fabb00fce911f90361d7875a34c
And here is the step 3 code that adds our custom class to the label field elements:
gist.github.com/…/0a858c9291cecbfd90bf26dad9858cc5
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.
gist.github.com/…/672550ed875ce45892ea31332e6f917a
Text & Textarea Fields
For text and textarea fields, we can simply replace the default classes with our custom class.
gist.github.com/…/106d2093c1989ac001767d01ee6962bb
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.
gist.github.com/…/7887688ca131ec58dd3257e69bd5ef62
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.
gist.github.com/…/2347bb9ce9b4df6209b35792c08104c2
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.