Organizational Chart app helps you display the hierarchy within your organization. You can further customize the Org Chart with the use of a template to include relevant information such as contact details, photos, email, designations, etc.
What is an Org Chart?
Create an Org Chart app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Org Chart under Visualization type.
3. Click Update app to apply your changes.
Keywords specific to the Org Chart app
Below is a list of keywords specific to the Org Chart app.
| Keyword | Description |
|---|---|
|
Specifies the name of the element (names of people in your organization). * This will display the content of the card unless another column has CardsContent specified (only in templated apps). |
|
|
Specifies the name of the ‘parent’ element - or the immediate supervisor of the person in column A. In our example below, the OrgChartParent (immediate supervisor of Gregory & Thomas is Emily). * The entries in this column need to be exactly the same as the column with OrgChartName. This is also case and space sensitive. ** Note that we left the immediate supervisor of Olivia as blank (cell B3) to specify that this is the root node or the head of the organization. |
|
| CardsContent |
Specifies which column is displayed by the app. |
Other keywords
| Keyword | Description |
|---|---|
|
Displays a list of choices in a side panel; if used with Hidden, the text is hidden until users click in the sidebar to make the text appear. We also recommend using it with templates. |
|
|
Hides a column in your data presentation. |
|
| HyperlinkType | Adds links to text or image elements and as an alternative to using templates. This is useful if you want to generate links in your table without showing the full links (only text or images are shown). It also hides the URL column. |
| ButtonType | Displays a button that redirects to a link. You can also specify the color of your link (using HTML Color Names like red, blue, green or hex color codes). |
| ImageType | Displays images from a column containing links to images. This is an alternative to using templates. When users hover over the image, a larger version pops up. |
| IconType | Displays icons without using a template. Choose any icons from https://material.io/icons/ |
| RatingType | Transforms numbers from 0 to 5 to star-rating icons. |
| ListType | Transforms CSV values into HTML ordered lists. |
| NumberedListType | Transforms CSV values into HTML numbered lists. |
Settings in the Org Chart app
| Setting | Use |
|---|---|
|
Allow node collapse (optional) |
Node collapse setting allows the end-user to double click on a child element to hide or display it.
|
|
Node Size |
Size of the Org Chart Cards, Small/Medium/Large (this can be overridden with your CSS template).
|
Examples of Org Chart apps
Live example 1: (Simple) Org Chart
Live example 2: (Advanced) Org Chart with Template
Live example 3: (Advanced) Org Chart with Template and Sidebar
Comments
3 comments
Great template guys!!
I am going to put it in practise immediately!!
Cheers,
Fernando
Hi,
How can I add a photo in org chart, actually I had in google drive the photos that I like to add.
Now, I can insert the photo however I can't change the photo size
Please sign in to leave a comment.