Org Chart Configuration to be only done once for all charts used within SharePoint environment

Hi there, I hope you're well :slight_smile:

I would like to know whether I can configure the main Division org chart for our company and then just apply the configured org chart on the different SharePoint sites for the separate teams within the Division, filtering with the correct team manager name to show the team org chart but not needing to re-apply the same JavaScript and CSS configuration every time for each team org chart?

Hello @Rhapsidion!

The web part configuration is defined in object api.config. You can explore its structure if load an Org Chart page, then start a browser console log, and execute there the following code:

JSON.stringify(Plumsail.OrgChart.getFirstInstance().api.config)

It will return a text string containing a JSON object of the web part configuration. Knowing the structure of the object, you can define certain configuration parts in your own JavaScript file. For example, this is how you can get access to different parts of the configuration:

api.config.searchResultTemplate;
api.config.tooltipTemplate;
api.config.boxTemplate;
api.config.customCss;

Here is a sample of defining custom CSS:

api.config.customCss = ".poch-group-item__card.box { background-color: black !important; border-color: black !important; }";

Once the JavaScript file is ready, place it in some SharePoint library and ensure that all users who use Org Chart have at least read permissions to it. Then, you can load that configuration file on the 'Custom JavaScript' tab of the Org Chart configuration wizard for each web part that requires it.

let scriptUrl = "https://tenant.sharepoint.com/sites/somesite/SiteAssets/OrgChart/code.js";
$.getScript(scriptUrl);

Hi @Evgeniy,

Thank you for the detailed information - it looks like I might be doing something wrong as it's not working for me at the moment.
Also, I realise now that this does not include the data source, layout & skin or design template, so a user would still need to go and manually set those for each Org Chart, unless that can also be included within the script? Then all they need to do is add the Plumsail web part to the page, select the employee to start structure filtration from, then load the configuration file on the 'Custom JavaScript' tab of the Org Chart configuration wizard for each web part that requires it? Is that possible? :smiley_cat:

The configuration file is quite large and I provided just some samples. You can download your configuration on the page with the Org Chart web part using this command in the browser console:

JSON.stringify(Plumsail.OrgChart.getFirstInstance().api.config)

Copy the generated contents and save it in a JSON file to have access to all available properties:

Particularly, there you can find the configuration of the data source and other required sections:

изображение

изображение

So as I mentioned, there is no sense to quote the whole structure here because it is large. You need to download it and refer to it as a model. Also, I forgot to mention that in the Org Chart documentation we have an article dedicated to configuring Org Chart through JavaScript. Please use it too.

For now, I would advise you to configure just a small and simple part of your custom JavaScript (for example, custom CSS) and then to try loading it in a new web part. If it works, add one configuration layer after another to see where it fails. If you still encounter troubles with it, please share your .js file and screenshots showing how you try to load it - perhaps, I will be able to help you with it. You can do it in the ticket you raised not to expose your data publicly.

1 Like

Thank you @Evgeniy, I will give it a try :smiley_cat: