Displaying HTML in Aras Innovator

Displaying HTML in Aras Innovator

Whether it's enabling administrators to create custom Forms or change the default user interface through CUI, Aras Innovator allows for easy configuration of the out-of-the-box client. However, there are still times when a particularly complex UI will require custom HTML to be written. In these cases, Aras Innovator still makes it easy to plug HTML directly into the client. In this blog post, we'll cover three different ways that we can display HTML to our users.

From the TOC

The first method we'll cover is how to display an HTML file when the user selects an item in the TOC. This method of displaying HTML is actually built right into the Aras Innovator client and doesn't require any additional coding beyond what's already included in the HTML file.

We'll start by creating a new ItemType that will serve as the hub from which this HTML file will be called. For demonstration purposes, we'll name this ItemType HTML View. Once we've created this ItemType we'll navigate to the TOC View relationship tab and add a relationship to an Identity who will be able to see this custom view instead of the standard grid. You can even define different views for different Identities! Once we've created the new TOC View relationship, we'll set the Start Page to the relative path of our HTML file in the code tree. You should define this relative path in relation to the /Innovator/Client/scripts/ folder. For example, if your HTML file were in the /Innovator/Client/customer/ folder, your relative path would be ../customer/test.html.

One thing to note is that this Start Page property just needs to point to an HTML source, so you can even pass in the URL to a website. To try this out, let's pass in the Aras website as our Start Page and see what happens.

Note that this may not work for every website. 

From a Dialog

Displaying HTML from the Table of Contents is a great way to display information in something like a dashboard. However, a different approach is more effective when we just need our users to perform some action or data entry. To do this, we can use our custom HTML page from a popup dialog using the sample below.

You can check out our blog post on Opening Custom Dialogs for more tips like how to return data that a user enters in your custom dialog!

From a New Tab

The last approach we'll go over is how to display HTML in a new tab within the Aras Innovator client. You can do this with code similar to the sample below.

Please note that if you choose to use your own HTML page, you should use CSS to set a background color for the page. While writing the sample above, I did this using the bgcolor attribute on the body tag like so: <body bgcolor="#FFF">. If you don't do this, you'll notice that your HTML page appears to be drawn over the main grid.

Just like with the TOC, we can even pass in websites to be displayed within a tab!

Conclusion

If you have any ideas of how you could use these techniques or if you have a story about how you've already used these techniques, please leave a comment below!