Forum Discussion

The-messenger's avatar
The-messenger
Icon for Cirrostratus rankCirrostratus
Nov 22, 2021

Edit Full Webtop Text v15.1.4

I'm creating APM policies for v15, using the Modern option. So far looks good but I need to edit text to show our organization. How do I edit the "Welcome to F5 Networks" text at the top of the Webtop page?

  • Found it. Select General Customization, Select the Text option. Find the Webtop profile, select Full Webtop Settings and Webtop Header Message.

  • It's also possible to change the text with use of javascript. In the Advanced Customization settings, navigate to the webtop and add the code below to the user-webtop.js file. This example may help others when making changes to parts that can't be found in the General Customization settings.

    define(["require", "exports", "tslib", "module", "apmui/page/webtop/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/webtop/View': module.id,
                },
            },
        });
        /* Replacement View component */
        var CustomWebtopView = /** @class */ (function (_super) {
            tslib_1.__extends(CustomWebtopView, _super);
            function CustomWebtopView() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            CustomWebtopView.prototype.componentDidMount = function () {
                var header = document.getElementsByClassName('apmui-header')[0];
                var span = header.getElementsByTagName("SPAN")[0];
                
                span.style.visibility = 'hidden';
            };
            
            CustomWebtopView.prototype.componentDidUpdate = function () {
     
                var header = document.getElementsByClassName('apmui-header')[0];
                var span = header.getElementsByTagName("SPAN")[0];
                span.innerHTML = "My Cool Company";
                
                span.style.visibility = 'visible';
     
            };
            return CustomWebtopView;
        }(View_1.default));
        exports.default = CustomWebtopView;
    });

     

    • The-messenger's avatar
      The-messenger
      Icon for Cirrostratus rankCirrostratus

      Thanks. The entire code above is added? Currently I see no code when I select the .js file. In previous version, I could see the default code and edit it.

       

      So to be clear, with default settings, viewing the viewer-webtop.js file, it will be blank?

      Only added/custom code is seen when viewing the vewer-webtop.js file ?

       

      *For the message box, wouldn't we edit user-message.js?

      • Niels_van_Sluis's avatar
        Niels_van_Sluis
        Icon for MVP rankMVP

        Yes, by default all the user js and css files are empty. And yes, these files are per section (webtop, messagebox, logon) and are only triggered in the releated parts of the APM user interface.