Programming an iApps LX GUI¶

You can either modify certain specific default GUI configurations, such as the background color of the existing default GUI, or you can override the default GUI and create your own presentation. You can use Angular or any other suitable presentation framework. As the output presentation is an open directory, it supports any framework, such as HTML, JavaScript, or images that the web server supports. The custom GUI configuration needs to be included in the RPM package, under the file directory /var/config/rest/iapps/<unique-block-name-version>/presentation, which is then served by an Apache web server.

Within the iApps LX block instance, the presentationHtmlReference property points to the presentation folder. The presentationHtmlReference property is used when you want to override the default GUI and create your own presentation.

You can configure a custom GUI when creating an iApps LX template using REST APIs (see Creating an iApps LX block instance using REST APIs) or using the BIG-IP GUI (see Creating an iApps LX block instance from the BIG-IP GUI).

Creating a custom GUI¶

You can modify either certain specific default GUI configurations, such as the background color of the existing default GUI, or you can override the default GUI presentation and create your own presentation. The customized GUI can be represented using HTML,JavaScript, css, or images, which is referenced (by a link) from the presentationHtmlReference property in the iApps LX block instance. The custom GUI configuration is included in the RPM package, and after being imported is saved under the file directory /var/config/rest/iapps/<unique-block-name-version>/presentation.

The following is an example of a snippet of a JavaScript code to customize the default background and text color of the default GUI.

Window.onload = function () {
    var ele = document. getElementById(‘#containerDiv’);
     // customize background and text color
    ele.style. backgroundColor = ‘teal’;
    ele.style. color = ‘navy’;

The following is an example of a snippet of a JavaScript code to override the default GUI with your own HTML.

    //  if you want to override presentation UI with your own HTML
        ele.innerHTML  = ‘’ // HTML generated should be assigned here

        // modify rendering only for headerDiv
        ele = document. getElementById(‘#headerDiv’);
        ele.innerHTML = ‘<h1>new heading</h1>’;
}

Note

You can also customize an iApps LX GUI from the BIG-IP GUI. From the Advanced view (Main > iApps > Templates > Templates LX), where the JSON block opens, you can configure a custom GUI (either certain specific default GUI configurations, such as the background color of the existing default GUI, or you can override the default GUI presentation), by editing the link for the presentationHtmlReference parameter.esentationHtmlReference parameter.

For example:

 "presentationHtmlReference": {
  "link": "https://localhost/your-presentation-html-path"
}

Note

All the HTML and JS files in the /var/config/rest/iapps/appName/presentation directory are served by the specified BIG-IP in the https://<BIG-IP-address>/iapps/appName path.

Previous Next