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) {
return;
}
/* 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>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>This is the second HTML text block.</p>
</div>
`;
/* 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.
*/
options.push({
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?
Thanks
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.