Organization Chart

Organization Chart tool is a tool that you can visualize your organization charts with tree structure in Xpoda. 

Appearance in Toolbox	Appearance in Free Form	Appearance in Responsive Form

Compatibility

Free Form	Responsive Form	Mobile

Properties of the Organization Chart tool:

Type(Field Type): Indicates the field type of the added form tool. The value here cannot be changed.

Edit Form: The name of the field to be created in the database is written.

Parent: On the edit form, it is used to define the parent unit (parent item) to which a record is connected in the organization chart. The value selected in this field determines to which unit the related record will be positioned in the schema.

Name: In the Edit form, this field is used to show the title or name information representing each item in the organization chart. The value selected in this field is displayed as the name that appears in the relevant box on the schema. (For example, the name-surname information for employees and the unit name for departments can be taken from this field).

Title: In the edit form, the field where an additional description or detail information for each item in the organization chart will be displayed is determined from this section. The value selected in this field is placed under the “Name” information in the schema boxes. (For example, the job description of an employee in this field (e.g. “Sales Manager”))  

Avatar In the edit form, the field that will be shown as an image (for example, a profile photo or icon) for each item in the organization chart is selected from this section. The value specified in this field is displayed visually at the top left of the boxes in the schema. Usually images such as a user photo, department logo or a representative icon are used here. The avatar field can be used to add visual richness to the schema and make it easier to distinguish items.

Expand: In the Edit form, this field is used to check whether there are children under an item in the organization chart. The value selected in this field determines whether the related record on the schema is expandable or not. If this field is “true”, it is accepted that there are children under the item and the user is offered the possibility to expand it.
On Xpoda, a ‘Switch element’ can be used for this field, allowing the user to select yes/no (true/false). In this way, the dynamic structure of the schema can be controlled in a practical way.

Help Text: It is the text entered for a description to appear when the mouse hovers over the form tool.

Height/Width: Adjusts the height and width of the form tool.

From Left/ Top: Adjusts the distance of the list widget from left and top.

Edit: Allows editing the records on the existing organization chart. If “Yes” is set, Users can modify the information of existing items in the schema on the Client side. (For example, details such as name, position or affiliation can be updated).

Create: “Yes” makes it possible to add new records (new positions or people) to the Organization chart.

Display: If “Yes”, the component will be displayed on the client screen.

Delete: If “Yes”, it allows to delete existing records in the Organization chart.

Organization Chart Example:

Let's create an Organization Chart example together.

In this example, we will prepare an organization chart of a hospital with the authorized persons.

With this organization chart, the hospital staff structure will be presented hierarchically and an interactive view will be provided.

First, we need an Edit Form where the Organization Chart component will get the data.  Let's design an Edit Form screen where the item values to be displayed on the Organization Chart will be taken. This form allows the user to enter the necessary information about each item to be included in the organization chart. In order for the items to be displayed correctly in the Organization Chart, it is very important that the Edit Form is configured correctly and effectively.

Let's come to the page where we will realize the design on the Studio side.

Select the form named Form_1, then in the properties section of the form on the right side of the screen, name the form by typing ‘HospitalOrganizationChart’ in the Name field. Let's write the table name we want to add as ‘HospitalOrgChart’ in the TableName field.

Let's drag 1 Drop Down Box, 2 Text Boxes, 1 Picture and 1 Switch tool from the form tools section on the left side and add them to our form.

Let's select the labels and fields in order and name them in the Text field in the properties section according to the example in the picture. Press Enter key after each naming.

In the Parent Unit drop-down box in the edit form, we need to write a special query for users to make a selection. In this query, first of all, we add an option that represents the “top level” departments that are not connected to any department as a parent unit. This option is usually expressed as “None” or “None” and is assigned an ID value of zero (0).

It is mandatory to assign (0) as the ID value.

Next, we list the UserTableID and Position units from the HospitalOrgChart table so that the user can easily select the department to which they are attached. Thus, the user can select “None” if there is no parent department to which the unit is attached; otherwise, the user can select the relevant department from the drop-down list.

Parent Unit drop down box query:

SELECT 0 AS id, 'None' AS DepartmentName 

UNION ALL 

SELECT UserTableID, Position FROM HospitalOrgChart WITH (NOLOCK) 

With this query, we give the user a list of all available positions (Position column) and their UserTableID values, with the option “None” (no parent) in the organization chart.

The Parent field in the Organization Chart has to be fed from the Title field, because each record in the related table creates a new id and this id is used for the Parent field. In this example, this is the reason why in the query of the ‘Parent Unit’ drop-down box corresponding to Parent, we pull the ‘Position’ corresponding to Title from the table with its id.

After completing the necessary adjustments, let's save the project and then switch to the client screen by clicking the Run button.

Let's enter a few sample records to be shown in the Organization Chart and save them with the save button at the bottom right of the screen. (If you don't want to use this button, you can drag a button tool by studio and give it a save action). Let's create the hierarchy by selecting the department (parent) each person is connected to.

Our first record is the one without a parent, so this record will be displayed at the top of the Organization chart.

Select ‘None’ from the drop-down box (this means that the person is not connected to any department). Then follow the numbers and enter the other information and save it with the green save button at the bottom right.

Let's enter a few more sample records.

The records we added in the ‘HospitalOrgChart’ Table are as follows.

After these steps, let's create a form where we will add the Organization Chart and name the form. Since we will not save to the database, let's select the type of the form as Report and drag and drop the Organization Chart.

Click on the Organization Chart we dragged and its properties will open on the right side.

At this stage, we must first write the query that we will get our data in the Organization Query section and select the Edit Form. After writing the query and selecting the Edit form, data will be loaded into the ‘Parent’,'Name',‘Title’,'Avatar',‘Expand’ drop-down boxes above, we can make selections by clicking on the small triangle icons on the right side.

To make the Organization Chart element run automatically when the form is opened on the Client screen, first select the relevant form from the left side on the studio screen where the Organization Chart is located. Then, go to the actions section on the right and click on Add New Action.

When the form is opened > Update Value > OrgChart_1 action and save it.

Save the screen and go to the Client screen with the run key.

On the Client screen, the Organization diagram will look like below.

Editing, Creating and Deleting Operations on Organization Chart

In the Organization Chart tool, the user is provided with easy and practical access to perform operations on each record. The user can access the following options by clicking on the three dots (⋮) icon on any record:

• Edit: Click on this option to update the information of the existing record.
• Delete: It is used to completely remove the related record from the organization chart.
• Creating a New Record (Create): This option is preferred to add a new position or person to the organization chart.

The activation of these functions was made possible by setting the Edit, Create, Delete buttons in the properties section of the Organization Chart tool to “Yes”. With this setting, dynamic edits can be made on the schema on the client side and user interaction is increased.

Let's connect the Head of Pediatrics to Dr. Alice Young, the chief physician, for this, hover over the 3-dot icon as in the image below and click Create, the edit screen will open, add the information as below, press save.