How to apply a dashed border to a specific box in Plumsail Org Chart?

[dan]

Hi everyone,

I'm trying to style a specific box (for a specific employee) with a dashed border, e.g. for Mr. Smith.

Can you help me?

Best Regards and thx

Dan

[Petr (Petr Bushuev)]

Hi @dan ,

You can change style for a specific box if you edit the page with Org Chart, click the gear button on the box and change the style

However, there is no option to set a dashed border. For this case you can use a bit of JavaScript:

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    if (itemData["Title"].contains("Karen")) {
        const $boxCard = $(box.elem).find(".poch-group-item__card");
        $boxCard.css({
            'border': '2px dashed #000'
        });
    }
});

Best regards,

Petr

Plumsail team

[dan]

Hello Petr,

thanks for the response. Unfortunately, it doesn't work for me. When I try this, nothing changes. I've also tried using the UPN instead of the title, but that doesn't work either.

Thx

Dan

[a.cox (Anton Cox)]

Hi @dan,

Please try using the following code instead:

api.onBoxRendered((box, itemData) => {
    const idFieldName = api.config.idFieldMapping.InternalFieldName;
    
    if (itemData[idFieldName] == "employee@yourdomain.com") {
        const $boxCard = $(box.elem).find(".poch-group-item__card");

        $boxCard.css({
            'border': '2px dashed #000'
        });
    }
});

You just need to replace "employee@yourdomain.com" with the actual identifier (such as email or unique ID) of the employee.

[dan]

I've noticed that even the sample code provided on the official Plumsail help page (Custom CSS Example) doesn't seem to work:

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    if (itemData["Department"].contains("Marketing")) {
        const $boxCard = $(box.elem).find(".poch-group-item__card");
        $boxCard.css({
            'background-color': 'red',
            'border-color': 'red'
        });
    }
});

There’s no visible change when this code runs.

I am using different design templates, and I suspect that these designs might be overriding the JavaScript styling. Could that be the case?

What can we do to ensure that custom JavaScript and CSS are applied correctly, even when using built-in designs?

Thx
Dan

[a.cox (Anton Cox)]

Hi @dan,

Yes, you are correct. If a specific design or style is set for a certain box, it will override your JavaScript rules. In this case, there are a couple of ways to handle it:

1. Exclude this element from the design using conditions so that your custom styling can take effect:

   

2. Remove any styling applied to this box and then apply it manually via your JavaScript or CSS.