Add and Configure Organizational Tree Map Extension on Your Zoho Creator Page
Requirement
Include an Organizational Tree Map extension in your Zoho Creator application to visualize and understand your organizational hierarchy quickly and intuitively.
Use Case
Consider a Zoho Creator employee management application used in your organization to store information about all employees. To display hierarchical data of your employees, you can embed the Organizational Tree Map extension in any of your application pages. This extension allows you to visualize the reporting structure clearly and interactively, providing an intuitive overview of the organizational hierarchy.
Pre-requisites
Installing the Organizational Tree Map Extension for Zoho Creator
- Search for and install the Organizational Tree Map Extension for Zoho Creator from Zoho Marketplace. Learn how to Install and Manage Extensions.
Alternatively, you can also install Organizational Tree Map Extension directly from Zoho Creator. Navigate to the Operations section > Application > Marketplace > Extensions and install it.
Steps to Follow
- Create a form with the following details to store employee's information.
Form Name
Form Link Name
Field Type
Field Name
Field Link Name
Employee Details
Employee_Details
Name
Employee Name
Employee_Name
Email
Email
Email
Phone
Phone
Phone
Single Line
Designation
Designation
Lookup(Employee Details)
Note: This lookup field is to be linked with the same form with a display field as 'Employee Name'.Reporting To
(Employee Name)
Reporting_To
Image
Photo
Photo
- Create a page with the name 'Organizational Chart' to add the Organizational Tree Map extension.
- Drag and drop the Tree Map Widget extension listed under the Installed category under the Widgets section in the left pane.
- Navigate to the page variables on the page and add the following page variables to include the required parameters for the extension.
Variable
Data Type
appname
TEXT
reportname
TEXT
employee
TEXT
photo
TEXT
employeesubtext
TEXT
reportingto
TEXT
- Configure Page Script by adding the following script to the editor to supply data to the extension's parameters.
- //Define values for the page variables.
- input.appname = "Employee-Management"; //Link name of the application.
- input.reportname = "All_Employee_Details"; //Report link name of the 'Employee Details' form's report.
- input.employee = "Employee_Name"; //Field link name of the 'Employee Name' field in the 'Employee Details' form.
- input.photo = "Photo"; //Field link name of the 'Photo' field in the 'Employee Details' form.
- input.employeesubtext= "Designation"; //Field link name of the 'Designation' field in the 'Employee Details' form.
- input.reportingto = "Reporting_To"; //Field link name of the 'Reporting To' field in the 'Employee Details' form.