You probably know that Aras offers a powerful form editor for defining form layout and behavior, but did you know that it also allows you to use an external CSS file to style your forms? In this article, we'll review three ways to tweak the look and feel of your Aras forms.
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.
If you're using this article as a resource while working on another project, you'll need to complete a few setup steps:
- Add or create your custom CSS file in the customer folder in your Aras code tree: [Install Path]\Innovator\Client\customer\[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.
1. Show Classification-Specific Icons
Show a custom icon on the item form for each classification
Every Aras form created via an ItemType has a field called item_info. This field displays the ItemType label, the ItemType icon, and a table of information about the context item. This HTML field is then populated by a script and Aras client functions when the form loads.
Instead of modifying the default Aras client functions in the code tree, which could have unintended effects throughout the system, we are going to create a new HTML field and override the default behavior of item_info.
The following code will be the HTML Code contents for our new HTML field, custom_icon. The code gets the classification of the context item, sets the source and display style of our img element, and then hides the default icon.
The new icon's positioning style is set in the custom external CSS file. This lets us reuse the style on multiple forms.
After adding the HTML Code contents to the new HTML field and saving your form, you should now see your custom icons when opening items with a given classification.
2. Customize Item Info Table
Customized item_info field shows classification name and styled state
To customize the property table displayed on Aras forms, we'll be taking a closer look at the item_info field. The item_info HTML field contains a span element and a script tag by default. The script tag defines the populate_ITEM_INFO_INTERNAL_SPAN function, which calls a couple Aras functions to populate the span element with a table of properties.
As we discussed above, modifying the default Aras client functions in the code tree can have unintended effects throughout the system. This time we'll override the default item_info content by adding our own function to the script tag.
Here's the updated content for the item_info field. It defines a new function called style_ITEM_INFO_INTERNAL_SPAN that creates a new element to display the state property, hides the default state property, and replaces the ItemType title with the classification.
Now we need to handle the style for the new state property and form title. We'll add the following CSS to our custom stylesheet:
Save your changes to the item_info field and update your custom stylesheet. The style changes should now appear on all forms for that ItemType.
Note: The code shown so far won't add the colored background to the item_info field. We'll cover that in the next step.
3. Field Group Style
Custom field groups styled with external CSS
Aras offers a "groupbox" field-type for grouping logically related form fields, but we can easily use some well-placed HTML fields and CSS if we just want to visually group elements. In the screenshot above, there are two field groups. One group is formed by styling the border of the item_info field, and the other is an HTML field with a styled div.
To use the field group style shown in the screenshot, add the following CSS to your custom stylesheet. Then set class=".info_group" on the item_info span and class=".user_group" on the new HTML div.
You may need to tweak the the dimensions and location of the field groups to fit into your forms. Other than that, you should be good to go!
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.
And keep an eye out for Customizing Your Aras Forms: Part 2, where we'll cover how to style form input fields!