Forum Discussion
Modern Template "Decision Box" modify "title" item
- 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.
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.
Recent Discussions
Related Content
* Getting Started on DevCentral
* Community Guidelines
* Community Terms of Use / EULA
* Community Ranking Explained
* Community Resources
* Contact the DevCentral Team
* Update MFA on account.f5.com