How to use the org chart widget¶
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
Configure App Builder to be an API¶
- Go to the App Builder Control Center > Security Providers from the Connect menu
-
From the User Authentication panel on right hand side click Create
- Give the Provider a Name. For example: 'OrgChartAPI'
- For Type, select API Key
- Click Save
-
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
- Locate the Application from the resultant screen you are configuring and click the pencil Edit icon
- Enter the value where the API will access the resource into the Endpoint field. For example: 'charts'
- Click the x to exit out of the screen
- 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'
- 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.
- 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.
- Navigate to the App Builder App Workbench > Secure > User Management
-
Select an existing User or Create a New User to use for the API call
- The User has to be set to login type Interactive
- The user doesn't have to have local authentication
-
On the selected/created User's pop up screen click Keys
- Click Create and choose the API Provider created in Step 2. Copy the Key value that is generated for the User.
- Optionally set up any additional roles/security groups for the Object that might be needed.
Configure the org chart widget¶
- Upload the Org Chart widget to App Builder, to a Collection the app you want to work with has access to.
- 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
- The color values for the Label and the boarder is in
\Css\vinyl.orgchart.css
. Values in hex - 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¶
- 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.
- Add a Text Control, and add the Org Chart Widget to the Control
-
If the Org Chart is not displaying, you can optionally:
- 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
- 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.