APM Modern Customization - modify Header in user-common.js and form in user-logon.js

Question

Hi!I try to customize the modern logon pages and as I have multiple pages so I want to modify the header section in the user-common.js and the single logon pages in the user-logon.js files.I somehow cannot make it work, currently only the header from user-common.js gets rendered but not the user-logon.js. It seems to me that they interfere with each other the way that I try to do that.user-common.js:define(['require', 'exports', 'tslib', 'module', 'apmui/page/logon/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/logon/View': module.id,
            },
        },
    });
    /* Replacement View component */
    var CustomLogonView = /** @class */ (function (_super) {
        tslib_1.__extends(CustomLogonView, _super);
        function CustomLogonView() {
            return (_super !== null &amp;&amp; _super.apply(this, arguments)) || this;
        }
        CustomLogonView.prototype.componentDidMount = function () {
            _super.prototype.componentDidMount.call(this);

var content = document.getElementsByClassName('apmui-content')[0];

var content = document.createElement('div');
            content.style.cssText = 'max-width: 400px; width: 100%; padding-top: 20px;';
            content.innerHTML =
                "&lt;p&gt;Please register &lt;a href='/register.php'&gt;here&lt;/a&gt; if you don't have an account yet.&lt;/p&gt;";
        };
        return CustomLogonView;
    })(View_1.default);
    exports.default = CustomLogonView;
});&nbsp;How can I then modify only the header (or footer) via the user-common.js and the logon page content via user-logon.js files? I'm thankful for any advice :)&nbsp;&nbsp;Greetings,Eric

zamroni777 · Answer

i havent tried it but maybe you can:right click on existing header image/object then click&nbsp;Inspect.browser will open developer tool which you can inspect that html object further to find out the element ID or Class attribute.after finding the id or class name, you can use Javascript HTML DOM programming to get to the element and modify it.https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassNamehttps://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById&nbsp;

emalzer · Answer

hey!thanks, I already identified the elements I need to change and use the getElementsByClassName already in the code (see above).I just dont't know how to modify the header section via user-common.js and the content section via the user-logon.js with react/preact framework.

zamroni777 · Answer

you can try put the the code within window.onload to make sure the code in executed when the page fully are loaded:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

"use strict";
window.onload = async function() {
....your js codes here...
}

and in your user-logon.js, the content object is replaced with newly created element.
so the next lines actually doesnt modify document.getElementsByClassName('apmui-content')[0]

var content = document.getElementsByClassName('apmui-content')[0];
var content = document.createElement('div');

you can add console.log(content) to see the object details Devtool's Console tab.

emalzer · Answer

tried to do this and insert this in the user-common.js, but did not work:window.onload = function() {
    var header = document.getElementsByClassName('apmui-header')[0];
    if (header) {
        header.classList.add('custom-header');
        header.innerHTML = '&lt;div&gt;Custom Header Content&lt;/div&gt;';
    }
}Looks like a little bit a dirty workaround to let the page render and then re-render it...&nbsp;&nbsp;I also tried building the javascript code similar to one of the&nbsp;examples here - the "Example 2: Logon box custom component". But this does also not work, it just shows no change in the source and the page after rendering.define(["require", "exports", "module", "react"], function (require, exports, module, React) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    requirejs.config({
        map: {
            /* Override header view component when it is loaded from main View */
            'apmui/master/View': {
                /*
                 * `module.id` is a reference to current module;
                 * replace with exact module name when using named define syntax
                 */
                'apmui/master/PageHeader': module.id,
            },
        },
    });
    /* Replacement Header component */
    function CustomPageHeader(props) {
        React.useEffect(function () {
            var header = document.getElementsByClassName('apmui-header')[0];
            if (header) {
                header.classList.add('custom-page-header');
                header.innerHTML = '&lt;div&gt;Custom Page Header Content&lt;/div&gt;';
            }
        }, []);
        return React.createElement("div", { className: "apmui-header" }, props.children);
    }
    exports.CustomPageHeader = CustomPageHeader;
});&nbsp;

Forum Discussion

APM Modern Customization - modify Header in user-common.js and form in user-logon.js

Recent Discussions

APM SOO to webpage witn windows credentrial

How are memory and disk allocated to different modules on bigip appliance?

APM Logon page logs

R2600 Enabling Multi-Interface Causes L2 Forwarding

Issues with kubernet cluster server which is managed by Tanzu

Related Content

APM Advanced Customization Examples with Modern Template, v15.1+

F5 Distributed Cloud Customer Edge on F5 rSeries – Reference Architecture

Deploying F5 Distributed Cloud Customer Edge in Red Hat OpenShift Virtualization

F5 Distributed Cloud - Customer Edge Site - Deployment & Routing Options

custom response page for api

ABOUT DEVCENTRAL

RESOURCES

SUPPORT

PARTNERS