Jared Drueco | August 17, 2022
If you want to follow along, add this file structure to your new AL codebase. Create the files and leave them blank for now. We will go through the content of each file one by one.
The Control Add-in Object
Let’s first create the Control Add-in object by heading over to the Ctrl.al file. Use the code snippet tcontroladdin to create a boiler template. You can then modify it to this:
In this object, we are creating an object with a specified width and height. We are also linking the necessary scripts and stylesheets that will be used to render dynamic HTML.
The Startup Script
Recall the event “MyEvent()” from the control add-in object? Well that event is defined in the startup.js script like so:
This script runs once the control add-in object is initialized and creates an event called ‘MyEvent’ that invokes a trigger in AL on a page with that control add-in.
The Main Script
Now moving on to script.js, we create the following function MyProcedure() which we will call in our AL page:
The Test Page
We will now use AL string manipulation to add HTML to your iFrame.
In this page we first add the control add-in object we created to the page. Then we call the procedure defined in script.js which will take in the HTML string that we will create.
To create the HTML string, define a procedure on line 17. This procedure returns the HTML string which in turn becomes the input to the MyProcedure function we created in the script.js.
You can be as creative as you want if you know HTML. All you need to do is create the HTML as a string like in the example shown.
Styling The HTML
To make your dynamically rendered HTML look the way you want, you can use CSS in the styles.css file. Here is a basic style to make a white text box.
You can test to see if this works by opening up your test page after deploying to you cloud sandbox ordocker instance.
This also gives developers more flexibility when enhancing UI/UX since it doesn’t limit us to the built-in objects in AL anymore.