More than one image to add into each user box

Org Chart Microsoft 365 version
1

Hi there :smiley_cat:

I have been asked to add relevant images into each user box if the user has a role of Fire Marshal, First Aider or Mental Health First Aider. Some users have two or all three of these roles.

I've followed the guidance here, but it is only working when I apply the code for one role within the Plumsail org chart. As soon as I add the extra code for the other roles, the images don't show up.

For example, when I add the code for Fire Marshal all is well and you can see the image -
image

As soon as I add the extra code for First Aider for instance, no images show.
This is my JavaScript code:

//Fire Marshal
api.onBoxRendered((box, itemData) => {
if (itemData.RelevantRoles == "Fire Marshal") {
console.log($(box.elem))
var $card = $(box.elem).find(".poch-box__content");
var roleSpan = $("

");
$card.append(roleSpan);
}
});

//First Aider
api.onBoxRendered((box, itemData) => {
if (itemData.RelevantRoles == "First Aider") {
console.log($(box.elem))
var $card = $(box.elem).find(".poch-box__content");
var roleSpan = $("

");
$card.append(roleSpan);
}
});

This is my CSS code:

.role {
position: absolute;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}

/Set image URL for the Fire Marshal/
.Fire-Marshal {
content: url(../SiteAssets/OrgChart/FireMarshal.png);
mix-blend-mode: multiply;
}

/Set image URL for the First Aider/
.First-Aider {
content: url(../SiteAssets/OrgChart/FirstAider.jpg);
mix-blend-mode: multiply;
}

Can you spot what I am doing wrong?

Thank you for your assistance in this :nerd_face:

2

Hi @Rhapsidion,

Your code has two api.onBoxRendered events. Events can be initialized only once, so code for other roles should be placed in one event like so:

//Fire Marshal & First Aider
api.onBoxRendered((box, itemData) => {
    var relevantRoles = itemData.RelevantRoles;

    if (relevantRoles == "Fire Marshal" || relevantRoles == "First Aider") {
        var $card = $(box.elem).find(".poch-box__content");
        var roleSpan = $("HTML CODE");

        $card.append(roleSpan);
    }
});

In this case, the "if" block will go through if relevantRoles of this user are either 'Fire Marshal' or 'First Aider'. If you want separate images for each, use the following code:

//Fire Marshal & First Aider
api.onBoxRendered((box, itemData) => {
    var relevantRoles = itemData.RelevantRoles;

    if (relevantRoles) {
        var $card = $(box.elem).find(".poch-box__content");
        var roleSpan;

        if (relevantRoles == 'Fire Marshal') {
            roleSpan = $("FIRE MARSHAL IMAGE");
        } else if (relevantRoles == 'First Aider') {
            roleSpan = $("FIRST AIDER IMAGE");
        }

        $card.append(roleSpan);
    }
});
1 Like
3

Hi @a.cox,

Happy Thursday! :smiley_cat:

Thank you for that information - I have tried it and it's working for the separate roles. What if a user has both roles - how do I show both of the images for both roles?

Thank you for your help :star:

4

Hi @a.cox,

Happy Monday! I managed to figure out how to show more than one image/icon if a user has more than one relevant role. Now, how do I place the images/icons next to each other in a line from left to right instead of underneath each other please?

image
image1133×591 27.1 KB

Thank you :smiley_cat:

5

Hi @Rhapsidion,

Great job on figuring this out! Regarding the inline image layout, could you please share your existing CSS and JS code?

1 Like
6

Thank you @a.cox - here you go:

JS Code =
api.onBoxRendered((box, itemData) => {
var relevantRoles = itemData.RelevantRoles;
if (itemData.RelevantRoles.includes("Fire Marshal")) {
console.log($(box.elem))
var $card = $(box.elem).find(".poch-box__content");
var roleSpan = $("

");
$card.append(roleSpan);
}
if (itemData.RelevantRoles.includes("First Aider")) {
console.log($(box.elem))
var $card = $(box.elem).find(".poch-box__content");
var roleSpan = $("
");
$card.append(roleSpan);
}
if (itemData.RelevantRoles.includes("Mental Health FAider")) {
console.log($(box.elem))
var $card = $(box.elem).find(".poch-box__content");
var roleSpan = $("
");
$card.append(roleSpan);
}
});

CSS code =
.role {
position: center;
width: 32px;
height: 32px;
top: 60px;
left: 0px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}

.Fire-Marshal {
content: url(../SiteAssets/OrgChart/FireMarshalIcon.png);
mix-blend-mode: multiply;
}

.First-Aider {
content: url(../SiteAssets/OrgChart/FirstAiderIcon.png);
mix-blend-mode: multiply;
}

.Mental-Health-FAider {
content: url(../SiteAssets/OrgChart/MHFAIcon.png);
mix-blend-mode: multiply;
}

7

Hi @Rhapsidion,

To make the images display inline, you need to use the <span> element for each of the images instead of <div> as shown in our documentation:

api.onBoxRendered((box, itemData) => {
    var relevantRoles = itemData.RelevantRoles;
  	var $card = $(box.elem).find(".poch-box__content");
  	var roleSpan;
  
    if (itemData.RelevantRoles.includes("Fire Marshal")) {
        roleSpan = $("<span class='Fire-Marshal'></span>");
        $card.append(roleSpan);
    }
  
    if (itemData.RelevantRoles.includes("First Aider")) {
        roleSpan = $("<span class='First-Aider'></span>");
        $card.append(roleSpan);
    }
  
    if (itemData.RelevantRoles.includes("Mental Health FAider")) {
        roleSpan = $("<span class='Mental-Health-FAider'></span>");
        $card.append(roleSpan);
    }
});
1 Like
8

Hi @a.cox,

That's great - thank you, it worked - Yaaayyy!!! :smiley_cat:

1 Like