Getting started
Configuration wizard
HTML templates
JavaScript framework
Additional resources
- Video: Introducing Plumsail Org Chart
- Data caching
- SharePoint Server 2019/SE (On-Premises) resources
- 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
JavaScript Configuration (SharePoint Server 2019/SE)
Config stores all configuration settings for Org Chart. You can read it and modify before Org Chart is rendered. Thus, you can change configuration based on your logic dynamically.
Just use renderer.config outside of any events right in the code editor.
Below are some useful properties from the configuration which you can override. Other properties can be defined in user interface of the configuration wizard, but you can override them also if required.
Input parameters
Property |
Description |
|---|---|
nodesSortFieldName |
Name of field which is used for sorting. For User profiles it is Example: renderer.config.nodesSortFieldName = "PreferredName";
|
nodesSortOrder |
It is Example: renderer.config.nodesSortOrder = "DESC";
|
searchResultSortFieldName |
Name of field which is used for sorting. For User profiles you need to use a name of Sortable Managed property. You may find these properties in SharePoint Central Administration > Search > Manage Search Schema. Example: renderer.config.searchResultSortFieldName = "LastName";
|
searchResultSortOrder |
It is Example: renderer.config.searchResultSortOrder = "DESC";
|
searchResultMaxCnt |
Max number of items is search results. It is 10 by default. Example: renderer.config.searchResultMaxCnt = 15;
|
spSearchQueryPattern |
The pattern for a keyword in a search query. You may adjust the severity of the search query with this property. For example, if you specify this property as Example: renderer.config.spSearchQueryPattern = "{{keyword}}";
|
spSearchSourceId |
The GUID of your custom SharePoint Result Source. “Local People Results” result source is using in the Org Chart by default. You may get more information about creating a custom result source by this link. Example: renderer.config.spSearchSourceId = "F2HR7450-98KV-6JA3-23LT-GNZOP20D1S73";
|
idFieldMapping |
Stores information about field where box id is stored. For example you can extract internal field name like this. Example: renderer.config.idFieldMapping.InternalFieldName;
|
parentIdFieldMapping |
Stores information about field where box parent id is stored. For example you can extract internal field name. Example: renderer.config.parentIdFieldMapping.InternalFieldName;
|
ListDataSourceSettings |
Stores information about list data source. For example you can extract list id. Example: renderer.config.ListDataSourceSettings.ListId;
|
itemsPerNodeLimit |
Limit for items per one node for compact layout. Default value is 100. Example: renderer.config.itemsPerNodeLimit = 150;
|
clientSideCachingLifeMinutes |
Life time in minutes for client side cache. Example: renderer.config.clientSideCachingLifeMinutes = 60;
|
renderInitialNode |
You can disable rendering of initial node if you want to drill down to some other node on web part load. By default it is set to true. It helps to reduce time of initial loading. Example: renderer.config.renderInitialNode = false;
|
RootNodeId |
You can specify root ID dynamically from your code. Example: renderer.config.RootNodeId = "account@contoso.onmicrosoft.com";
|
minSearchKeywordLenght |
Min number of symbols for a search keyword. It is 2 by default. Example: renderer.config.minSearchKeywordLenght = 3;
|
displayDottedLineForSolidEmployee |
Show/hide the feature for displaying dotted-line managers drill down link for boxes. It is true by default. Example: renderer.config.displayDottedLineForSolidEmployee = false;
|
connectionLinesWidth |
Set the width of connections lines between boxes in Org Chart. It is 1 by default. Example: renderer.config.connectionLinesWidth = 2;
|
CsvExportFields |
You can specify a custom array of fields that will be used in the export to CSV. Fields with the item’s current level and the subordinate’s count will be included to the result file automatically. If you use User Profiles data source you need to specify the internal names of SharePoint user profile properties in the array; in case of SharePoint list data source specify the internal field names from the SharePoint list. Example: renderer.config.CsvExportFields = ["ID", "Title", "Office", "JobTitle"];
|
BoxesCustomization |
Stores the customization for some single boxes. This is the key/value dictionary where the key is an ID of a box and the value is an object of box customization. Available fields for customization: Orientation – sets a box’s orientation. Can be Example: renderer.config.BoxesCustomization = {
"6": {Orientation: "Horizontal"},
"3": {Orientation: "Horizontal"}
};
|