Org Chart app: Create an organizational chart

Organizational Chart app helps you display the hierarchy within your organization. You can further customize the Org Chart using a template to include relevant information such as contact details, photos, email, designations, etc.

What is an Org Chart?

Copy this template

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.

Screenshot_2020-04-16_at_17.26.02.png

Keywords specific to the Org Chart app

Below is a list of keywords specific to the Org Chart app.

Keyword

Description

OrgChartName

Specifies the name of the element (names of people in your organization).

* This will display the card's content unless another column has CardsContent specified (only in templated apps).

OrgChartParent

Specifies the name of the ‘parent’ element - or the person's immediate supervisor 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 organisation's head.

CardsContent

Specifies which column is displayed by the app.
How to use cardsContent:
1. Create an empty column in your datasheet (using appropriate header-label like Template).
2. Specify the ‘CardsContent’ keyword in the second (parameters) row.
3. Insert a new column in your template sheet (tab) with the same header-label used in your cardsContent column (we used Template in the example above).
4. Add the relevant HTML elements and {{markers}} in the Template cell. More

Other keywords

Keyword	Description
Sidebar	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.
Hidden	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 your link's colour (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

Copy this template

info The next examples are advanced topics as they have been created with Templates. They require knowledge in HTML and CSS. To know how to set up a Template, we recommend reading the following: Awesome Table Template