Forum Discussion

Martin_Foidl's avatar
Jul 12, 2023

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 (...
  • Martin_Foidl's avatar
    Oct 03, 2023

    I now got the solution (with help from F5 Support).

    What helped was to modify the existing template from https://community.f5.com/t5/technical-articles/apm-advanced-customization-examples-with-modern-template-v15-1/ta-p/288979 to meet our needs. We just needed to replace "apmui/page/login/View" with "apmui/page/decisionBox/View", and we had to remove one of the function calls which appeared to be specific for the login page.

     

    define(["require", "exports", "tslib", "module", "apmui/page/decisionBox/View"], function (require, exports, tslib_1, module, View_1) {
        "use strict";
        Object.defineProperty(exports, "__esModule", { value: true });
        requirejs.config({
            map: {
                'apmui/master/View': {
                    'apmui/page/decisionBox/View': module.id,
                },
            },
        }); 
    
        /* Replacement View component */
        var CustomDecisionBoxView = /** @class */ (function (_super) {
            tslib_1.__extends(CustomDecisionBoxView, _super);
            function CustomDecisionBoxView() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            CustomDecisionBoxView.prototype.componentDidMount = function () {
                document.getElementsByClassName("apmui-content")[0].getElementsByTagName("h2")[0].innerHTML = "my own header<br> with html <br> line break tags";
            };
            return CustomDecisionBoxView;
        }(View_1.default));
        exports.default = CustomDecisionBoxView;
    });

     

    Hope this helps others 🙂

    One thing though - You need to remove every text in "General Customization" and replace it with a space. Otherwise the default values get appended to your customaization.