Technical Forum
Ask questions. Discover Answers.
Showing results for 
Search instead for 
Did you mean: 

Modern Template "Decision Box" modify "title" item


Hi folks,

I have tried to modifie the decision box item of APM to act as a disclaimer. For this i need to modify the title to render HTML but no matter what i try it always gets rendered as text (h2) not as html.

Here is the code i have added to advanced customization (user-decision.js)




define(["require", "exports", "apmui"], function (require, exports, apmui_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var app = apmui_1.App.get();
     * Subscribe to the application startup event.
     * This event is called when page scripts are already loaded but the page is still not rendered.
    app.subscribe(apmui_1.EventType.START, function (_, store) {
        /* Check that the page is decision_box
         * This also ensures that TypeScript compiler can narrow type of page data and show correct completion options.
        if (store.pageType !== apmui_1.PageType.DECISION_BOX) {
        /* Get reference to decision box configuration */
        var decisionBoxConfig = store.decisionBox.config;

        /* Modify the title of the decision box */
        decisionBoxConfig.title = `
            <div class="custom-text-block">
                <p>This is the first HTML text block.</p>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item A</li>
                    <li>Item B</li>
                    <li>Item C</li>
                <p>This is the second HTML text block.</p>

        /* Get reference to decision box options list */
        var options = decisionBoxConfig.options;

        /* Add extra options.
         * Options array entries will be displayed on the page in the same order.
         * I.e if you want to display new entries before fallback, `options.splice(1, 0, ...entries)` should be used.
            image: '/public/images/modern/decision/red.png',
            message: 'Option 3',
            // The value here should match the value in VPE agent branch expression
            result: 1,
        }, {
            image: '/public/images/modern/decision/red.png',
            message: 'Option 4',
            // The value here should match the value in VPE agent branch expression
            result: 2,






 Has anybody an idea how do i get it to work?



Community Manager
Community Manager

Hey @Martin_Foidl  - FYI - I've floated this post to the top of the forum for now, to give your post more visibility and a higher chance of getting an answer from the community.

Hi @Leslie_Hubertus - THANK YOU 😊

F5 Employee
F5 Employee

I doubt that you can do it that way - you are editing the content of the title which later gets templated into the wrapping HTML, which is why it is treated as just text. A better way would be to wait until after the page is loaded and then update the text via Javascript directly. I've done that before with logon pages and it worked well. Take a look at examples here