Getting started
Configuration wizard
HTML templates
JavaScript framework
Additional resources
- Video: Introducing Plumsail Org Chart
- Data caching
- SharePoint Server 2019/SE (On-Premises) resources
- Installation for SharePoint 2019 / SE
- Quick configuration
- How to add Org Chart to Microsoft Teams tabs
- Generate organization structure report
- Layout
- Filtration
- JavaScript custom code
- General settings
- Display assistants
- Display dotted-line managers for Org Chart
- Display vacancies
- Customize box HTML template and CSS styles
- HTML templating syntax
- Change Org Chart skin
- Create org chart with two root managers
- Order employees boxes using custom field
- How Org Chart pulls data from AD On-Premises
- Drill down to current user by default
- Drill down to specific box using URL parameter
- Include and use fields from additional list
- Use advanced Org Chart navigation
- How to open Org Chart in full-screen mode on load
- Support of search in a list with more than 5000 items
- Exclude disabled users in On-Premises
- Configuring profiles sync in On-Premises
- Make sure that SharePoint has enough data
- Exporting properties to a directory service
General
- Version history
- Licensing details
- Data protection and security
- Custom code security measures
- Billing and subscription management
Printing & Reports
- Printing organizational structure
- Generate multi-page PDF report
- Export to CSV and analyze in Excel
- Custom styles for printed Org Chart
Microsoft Teams
Display different types of employees
Filter and order boxes
- Create and manage filtered views
- Order employees boxes using a custom field
- Group employees boxes using a custom field
Customize boxes and styles
- Format boxes conditionally
- Customize box HTML template and CSS styles
- Display awards and conditionally format Org Chart
- Create an Org Chart with two root managers
- Change Org Chart theme
- Localize Org Chart
Show specific user on load
- Drill down to specific box using URL parameter
- Drill down to current user by default
- Drill down to manager of user from URL by default
Manage web part size and scale
- Open Org Chart in full-screen mode on load
- Make Org Chart use full page width
- Automatically scale boxes to fit visible area
Other examples
- How to customize Org Chart
- How to use advanced Org Chart navigation
- Use tenant properties to disable Org Chart features
- Include and use fields from additional list in Org Chart
- Support of search in a list with more than 5000 items for Org Chart
- Show Org Chart based on a list data source for anonymous users
- How to check if a user has Tenant Administrator permissions
How to open Org Chart in full-screen mode on load (SharePoint Server 2019/SE)
Full-screen mode on load
To open Org Chart in full-screen mode on load, you just need to open the configuration wizard (click on gears at the top right corner of the web part and choose Settings) and switch to Custom JavaScript step:
Add the code below into code editor:
renderer.onInitialLoadingFinished(function(event){
renderer.enableDisableFullScreen();
});
Then finish the wizard. This script will enable a full-screen mode for your OrgChart when it loads.
Automatically scale boxes to fit visible area
For users using version 2.2.24 or higher, you can also configure your charts to automatically resize boxes to fit visible area. If you have many employees in your org chart it could look like this:
As you can see some of the boxes are outside of visible area. I will show how to automatically scale boxes to fit web part:
Just open the configuration wizard by clicking gears at the top right corner of the web part. Then click Settings. Switch to Custom JavaScript step and put the code below into code editor:
renderer.onInitialLoadingFinished(function () {
renderer.showLoadingPanel();
var $pochContent = renderer.querySelector(".poch-content")
var $viewPort = renderer.querySelector(".poch-control").children().first();
var viewPort = $viewPort[0];
var topOffset = 20;
var currentZoom = 1;
function adjustWidth() {
var realViewPortWidth = viewPort.scrollWidth * currentZoom;
var contentWidth = $pochContent.width();
if (realViewPortWidth > contentWidth) {
currentZoom = currentZoom - 0.1;
if (currentZoom > 0) {
renderer.zoom(currentZoom);
adjustWidth();
}
} else {
renderer.hideLoadingPanel();
renderer.dataProvider.getRootItemId(function (rootId) {
renderer.scrollToBox(rootId);
});
}
}
setTimeout(adjustWidth, 50);
});
Then finish the wizard. This script calculates visible area, and resizes org chart until it fits width of visible area.