Org Chart Module

Building in the WCMS

Overview

The Org Chart Module combines preformatted documents and employee data you input into the module to create dynamic hierarchical organization charts. This module helps keep org charts uniform across the agency and adds versatility to how the page user accesses the information.  This module can be added to the WCMS for both internet and intranet pages. We’ve also added a new pathway to link an intranet instance of an org chart module to an internet page as well.

The Org Chart Module is a reusable component.  Once you create one, you can insert it into multiple pages.

Initial Preparation

Assets

To build an Org Chart in the module, you will need to collect the following elements:

  • A pdf version of your Org Chart including header (Contact DCS for creation if needed)
  • An image for each person who will be included in the Org Chart  (Use THIS IMAGEimage icon if employee image is not available)
  • If using the static image and accordion configuration, you’ll need an image of the org chart with no header

Employee Data

Required information for each employee that will be entered into the module manually:

Additional Information that can be added for each employee:

  • Employee Link (Link to individual employee page.  Links to the Intranet cannot be made from the Internet)
  • Division
  • Division Link
WCMS Quick Facts

Most fields that are left blank will not populate in the Org Chart.

The information required for linking assets in the Org Chart can be selected and copied from the path found above the title in the WCMS editor for each asset.

Screen Capture of the Path used to link assets in the Org Chart

There are several different viewing options for the Org Chart Module.  The two main ways are to pick between the Accordion or the Interactive views.  If you want to have a cross-link to both views, two separate instances of the module need to be placed in separate pages and the paths to each page need to be added in the Org Chart Module itself.

WCMS Folder Configuration

Create a folder for each center with the folder structure as seen below:

  • images: Upload all images including static org chart image here
  • json: Create the Org Chart Module in this folder
  • pdf: Upload the pdf file of the org chart into this folder

Example

Screen Capture of example file structure for Org Chart Module creation

Creating the Org Chart

  1. From the WCMS content browser, select “New Content” and then select the “Org Chart” Module
  2. Enter a title and file name ending in “.json”
  3. Save the module
  4. Complete the fields in the following sections sequentially.

! Remember to save often.  Like many other WCMS modules, only saved changes persist when the page refreshes.

General Section

Screen Capture of the General Section of the Org Chart Module Editor

Enter information as appropriate for your organization:

  • Organization Name
  • Link to Organization Page
  • Organization Abbreviation

You can cross-link between pages showing different viewing options of the Org Chart (Accordion and Interactive). To do that, add a path for each page containing the two versions of the Org Chart in the appropriate fields at the bottom of the general section.  If only one view is desired, then the two “Link” fields can be left blank.

Accordion Data Section

If an Accordion view is going to be used exclusively or as a cross-link, a path pointing to the static image of the Org Chart must be entered in the “Org Chart Image” field.  If the Interactive view is the only view, then this field may remain blank.

A PDF version of the Org chart must be provided no matter what views are selected.  The path pointing to the file is entered in the “Org Chart PDF” field.

Screen Capture of Accordion Data Section of the WCMS Org Chart Module Editor

Employee Data

Screen Capture of Employee Data Section of the Org Chart Module Editor

Enter the employee data you collected into the appropriate fields for each employee in these fields.  Fields may be left blank, and they will not appear in the Org Chart.

To add new employees, the “Add” button will create a new entry as a tier below the current employee.  To move the employee in the hierarchy, simply use the grey panel on the left of that entry to drag it to the correct position in the Org Chart.  The “Remove” button will delete that employee entry from the chart, so be careful.  That action cannot be undone.

The “Image” field is for a path to the WCMS folder where you’ve added the profile image for that employee.

Additional Links

Screen Capture of the Additional Links Section of the WCMS Org Chart Editor

You can optionally enter links to pages associated with your organization:

  • Link Text – Short Title for Link
  • Link Description – Brief sentence describing link content
  • URL – Another reminder, URLs cannot link from the Internet to the Intranet.

Accordion Data Section

If an Accordion view is going to be used exclusively or as a cross-link, a path pointing to the static image of the Org Chart must be entered in the “Org Chart Image” field.  If the Interactive view is the only view, then this field may remain blank.

A PDF version of the Org chart must be provided no matter what views are selected.  The path pointing to the file is entered in the “Org Chart PDF” field.

Screen Capture of Accordion Data Section of the WCMS Org Chart Module Editor

Internet Options

If this Org Chart is being mirrored to the Internet from an Intranet instance, there are options available to hide or show employee names and profile images depending on your division’s PII strategy.

Save and Add the Org Chart Module to a Page

When the Org Chart is completed, make sure to save your work.  It is now ready to be added to a page.  Remember, if you’re going to have multiple views for the Org Chart, you’ll need to make a separate page for each view option.  Then return back to this module and add the pathways for each page in the corresponding fields in the General Section.

Adding the Org Chart Module and Settings

Screen Capture of Org Chart Options in the WCMS editor

As a reusable module type, you can add the saved Org Chart to any page.  Use the “Add Element” button and then select the “Org Chart” module.

Display Type

The Display Type drop down allows you to select which view type you want to display on this page.  If you’re doing cross-linked views on two pages, this is where you’ll select whether it is the Accordion or Interactive view.  The “Both” option may be selected to display the Static Image of the Org Chart, the Accordion, and the Interactive view all on the same page.

Intranet to Internet Mirroring

If you need to link an Org Chart that was created for the Intranet to an Internet instance, you can.  You will need to copy your Org Chart Module to the Org Chart site and publish to link for it to be available in the “available Intranet Org Charts” list found in the editor.  For assistance with this process, contact your POC to coordinate with the WCMS Support Team.

Page last reviewed: March 11, 2021
Content source: WCMS / Template Team