Decision box design using js

[krazzy522]

dear all

I am trying to update decision box design using JS file, I have done it in login page by following this link login design and I am thing to update same in other pages 

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 DecisionBoxView = /** @class */ (function (_super) {
        tslib_1.__extends(DecisionBoxView, _super);
        function DecisionBoxView() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        DecisionBoxView.prototype.componentDidMount = function () {
            _super.prototype.componentDidMount.call(this);
            requirejs(['https://d3js.org/d3.v6.min.js'], function (d3) {
                 
          var itea =  d3.select("main").html("<div id='itea'><img src='https://mc.com.sa/file/Image/itea.png'></div>" + d3.select("main").html());
       
 
                
                
            });
        };
        return DecisionBoxView;
    }(View_1.default));
    exports.default = DecisionBoxView;
});

[G-Rob · Accepted solution]

Take a look at Advanced Customizations here: https://community.f5.com/t5/technical-articles/apm-advanced-customization-examples-with-modern-templ...

You'll need to modify the CSS in order to add an image to the decision box.

[G-Rob]

I see that the article you referenced shows an example of the decision box customization. Is there a particular question or problem that you're experiencing? 

[krazzy522]

Hi @G-Rob 

I saw the example of decision box in the link, but it is not fulfilling my requirements,

I am trying to insert a div with an image in decision box, could you please help me with the code to insert it

Edited by @Leslie_Hubertus to ensure G-Rob sees the reply by tagging him in this post

[G-Rob]

Unfortunately, the example code is for inserting additional options, not general images. I'm not sure how this could be accomplished; perhaps support can help via a support request. 

[krazzy522]

Dear G-Rob 

I need the example code for inserting an additional option in the decision box.

[G-Rob]

I apologize that I'm unable to help. Hopefully someone else in the community can help out.

[G-Rob · Accepted solution]

Take a look at Advanced Customizations here: https://community.f5.com/t5/technical-articles/apm-advanced-customization-examples-with-modern-templ...

You'll need to modify the CSS in order to add an image to the decision box.

[krazzy522 · Accepted solution]

I have inserted div in JS file like below and added CSS to the div

thank you for your time and support

var divLogo = document.createElement("div");
divLogo.id = "logo";
document.body.appendChild(divLogo);
var img = document.createElement("img");
img.setAttribute("src", "logo.png");
divLogo.appendChild(img);