Skip to Content

How to use the org chart widget in Jitterbit App Builder

This article provides an overview of using the Org Chart widget in App Builder to achieve an Org Chart diagram on a panel in an app.

Note

The Org Chart widget is available from the Widget download library

Orgchartexample

Configure App Builder to be an API

  1. Go to the App Builder Control Center > Security Providers from the Connect menu

  2. From the User Authentication panel on right hand side click Create

    1. Give the Provider a Name. For example: 'OrgChartAPI'
    2. For Type, select API Key
    3. Click Save

  3. Navigate to the App Builder Control Center > from the Build menu click on REST APIs & Webhooks > select the Application you are configuring and click on Manage Endpoints

  4. Locate the Application from the resultant screen you are configuring and click the pencil Edit icon
  5. Enter the value where the API will access the resource into the Endpoint field. For example: 'charts'
  6. Click the x to exit out of the screen
  7. Click Create under Business Objects and select the Table or Object that holds your Org Chart Data and set a value for the Endpoint. For example: 'roster'
  8. Clicking the Structure icon will allow control over which fields are available in the API if you want to deactivate any columns that are not required for the Org Chart.
  9. Clicking the pop up icon allows you to set the # of rows the API can return. Increase this if needed depending on the number of levels in your Org Chart.
  10. Navigate to the App Builder App Workbench > Secure > User Management

  11. Select an existing User or Create a New User to use for the API call

    1. The User has to be set to login type Interactive
    2. The user doesn't have to have local authentication

  12. On the selected/created User's pop up screen click Keys

  13. Click Create and choose the API Provider created in Step 2. Copy the Key value that is generated for the User.
  14. Optionally set up any additional roles/security groups for the Object that might be needed.

Configure the org chart widget

  1. Upload the Org Chart widget to App Builder, to a Collection the app you want to work with has access to.
  2. Configure all Parameters required by widget, as enumerated on the Widget Download Library. Values entered are case sensitive, and the jsonURL value can be retrieved from Control Center > REST APIs & Webhooks > locate the Application entry configured above and click the corresponding Doc icon. The resultant URL will look something like https://localhost/rest/v1/roster/org_chart

If you want to change the colors of the Org Chart, you need to modify the files in the .Zip file for the widget

  1. The color values for the Label and the boarder is in \Css\vinyl.orgchart.css. Values in hex
  2. The color values for the lines, hover color etc is in \Css\jquery.orgchart.css. Values in RGB

Add the widget to an App Builder page

  1. Navigate to the app page where you want to display the Widget, and add a Single Row panel that will always return one record. For example: use the Param or User table.
  2. Add a Text Control, and add the Org Chart Widget to the Control

  3. If the Org Chart is not displaying, you can optionally:

    1. Configure the data source the panel is using to have a record that returns the API Key as well as the JSON Url being used by the Org Chart
    2. Add 2 Hidden Text Controls to the panel, which map to the API Key and the JSON Url. You can store these values from a Param table, for example.