This post will cover best practices for building your own UIs in forms. There are many tools but make Aras Innovator respond exactly the way you want it to, from the Custom User Interface selection to the form editor, but today we’re going to assume you’re comfortable writing a bit of your own HTML and Javascript. This isn’t about how to write a UI on the web, but instead intended as some tips and best practices for writing a UI in Aras, and is intended as a next step to opening a custom dialog from a method. The screenshots in this post were taken on Aras Innovator Version 12 Service Pack 4, and while the steps should be similar if you’re on Version 12 you may notice some slight differences in what you see if you’re using a different service pack.
Building the Form
Start with the form. We need a fresh form, and we need that form to have at least one field we can work with. For information on how to open a form from wherever you need, take a look at Opening A Custom Dialog from a Method.
- From the Table of Contents>Administration>Forms, go ahead and create a new Form.
- In the Name field, type “Summary” and hit the Save button.
- In the Form Editor below, create a new HTML field.
- Select the new field from the Fields list.
- Click the Field Label tab
- Erase anything in the Label. We’ll make our own labels later.
- Click the Field Type tab.
Now we’re getting somewhere. See that HTML Code box? As long as you put valid HTML in that box, you can make use of your existing web development skills. Of course, this is a best practices article, and you’ll soon find that this small box is not an ideal development environment. While you could work in the editor of your choice and then copy and paste code into the field HTML Code box, Aras Innovator already has a better way.
Aras Innovator Methods can be written in Javascript, and triggered from any number of Events. We want to set up an event to run such a method, which can then manipulate the div and add anything else we need. Still from the Form, use the following steps:
- Click the Form Event tab
- Create a new Method
- Give it a name- for this example, we’ll call it “SummaryCreator”
- Make sure the Method Type is JavaScript.
- In the Execution_Allowed_To column, set this as needed. In our example, we’ll use the World identity.
- For the Event, make sure to select onLoad. We want this event to fire as soon as we navigate here.
- Give it an early Sort Order. For example, we’re using 10.
- Save the Form.
When we saved the form, Aras Innovator created our method for us. We can right click our method in the Form Events and select Open to get right to work!
One neat trick- Methods are versioned, meaning each time you hit Done here, you'll create a new version you can later go back to or refer to. We like to make committing easy!
Writing the Method
In this Method, remember that you have access to everything on the Document Object Model. This means that code like the following should result in the age-old Hello World display.
From here, a web developer can begin using the tools they’re familiar with to manipulate the display, run client-side code, and even make use of external libraries via referencing the library in an url. If you passed in an Aras object to your form, then you also have the powerful Aras IOM here. You also have some versioning courtesy of the Aras Innovator Method editor, and changes you make will show up in your form without needing to refresh your window.
Conclusions and Congratulations
Here, you’ve created a form you can freely manipulate with JavaScript, all without leaving Aras Innovator. While Aras Innovator prides itself on being a low code application, it provides not only the tools for a developer but convenient ways to deploy your skills. If you find you need to roll up your sleeves and write some code yourself, we're here to help you, integrating your custom methods and forms right alongside ones built without code.