In this tutorial, you will learn how to customize business views and hierarchies to provide a better navigation experience to your business users.

Business views

Hierarchies

Graphs

Learning outcomes

• Modifying business views and forms to add the ability to navigate to child records.
• Enhancing your application by adding hierarchies and configuring business views to render those hierarchies.
• Navigating the data using graphs.

Learning track

This tutorial is the fourth unit of the Data Authoring track. Make sure to complete the first three units before starting this tutorial:

• Build your first data authoring application
• Data quality
• Display cards, forms, and collections

If you have not completed these prerequisites, return to the Tutorials menu.

GO TO TUTORIALS

Also, if you have not already done so, click the button below to download resources such as the images and data sets that will be used in this tutorial.

DOWNLOAD TUTORIAL RESOURCES

Business views are the primary design elements for browsing data in an application. They focus on a set of related business entities that are displayed together within the same parent/child browsing experience.

In the next sections, you will be guided to enhance the business views of the Department and Employee entities.

Learning outcomes

• Adding the ability to browse the list of employees that belong to a department.
• Adding an embedded collection to the employee browsing form to manage education records.

In this section, you will modify the Department business view in order to display the employees belonging to a department.

Modify the Department business view

1. In the HR Tutorial application, from the navigation drawer, select the Departments business view.

2. Click the Consulting record. You will notice that the employees of this department are not displayed.

3. To change this, go to Application Builder, expand the Entities > Department > Business Views node and open the Department business view.

4. In the Transitions section, select DepartmentEO, and click Add Transition.

5. In the dialog, click the Edit Expression button.

6. Select Employees in the Attributes list, and click OK.

7. Click Finish to close the dialog.
8. Expand the transitions DepartmentEO > Employees and select the third line: Employee.

9. In the Display Properties finger tab, next to the Browsing Form property, click the Select a value button, and select EmployeeBrowsingForm.
10. Click OK.

11. Save your work.
12. Go back to the Welcome page and open the Employee Tutorial application.
13. Open the user profile menu and select Refresh application.

14. Open the Consulting department and notice the new tab that displays the list of employees of this department.

Congratulations!

You have added the list of employees that belong to a department.

To summarize:

• You have added a transition to the Department business view and configured the browsing form to use for this transition.
• You have refreshed the application and saw your changes in action.

Next, you will add an embedded collection to the employee browsing form.

You will now learn how to add the Education embedded collection to your Employee browsing form and allow the creation of multiple education records.

Modify the employee browsing form

Let us start by adding the Education embedded collection to the Employee browsing form.

1. In the Application Builder, expand the Entities > Employee > Forms node and double-click EmployeeBrowsingForm.

2. Drag and drop the Add Embedded Collection button into the first container of the General tab and enter the following values:

• Name: Education
• Value: EducationRecords

e

3. Select the Education collection you just added.
4. In the General section of the Properties view, enter the following values:

• Select Custom Label
• Label: Education
• Plural Label: Education

5. In the Component section, deselect Allow Grid.

6. Save your work.
7. Validate your model: In the Model Design view, right-click on the root node corresponding to the HRTutorial [0.0] model, and then select Validate.

8. You should have two warnings in the Validation Report view.

9. Double-click the first warning. The Department business view opens.
10. Select the Embedded Collection finger tab.
11. Click Refresh Configuration.

12. Set the following values for the Education embedded collection:

• Browsing Target: Form
• Form: EducationForm

13. Go back to the Validation Report view and double-click the second warning. The Employee business view opens.
14. Select the Embedded Collection finger tab.
15. Click Refresh Configuration.
16. Set the following values for the Education embedded collection:

• Browsing Target: Form
• Form: EducationForm

17. Save your work and validate your model again. There should be no warnings.
18. Go back to the Welcome page and open the Employee Tutorial application.
19. In the user profile menu, click Refresh application.

20. Select the Employee business view and open the Alexis Bull record.
21. Observe that the form now includes a list of education records.
    This list is currently empty for Alexis Bull.

Customize the Education form

1. In the Application Builder, expand the Entities > Education > Forms node, and double-click EducationForm.

2. Select the ID field of the form and deselect the Visible checkbox in the Label section of the Properties view.

3. Move FDN_Employee just below the ID.

4. In the Component section of the Properties view, enter the following values:

• Display Type: Chip
• Select Avatar

5. Save your work.

Enable the creation of multiple Education records

You will now change the behavior of the Create action to allow creating multiple education records.

1. In the Application Builder, expand the Entities > Education > Action Sets node, and double-click EducationActionSet.

2. In the Actions section, select CreateAuthorEducation.

3. In the Action Configuration finger tab of the Properties view, select Support Multiple Creation.

4. Save your work and validate your model.

Create some education records

You will now add some education records.

1. Go to the Welcome page and open the Employee Tutorial application.
2. In the user profile menu, click Refresh application.

3. In the navigation drawer, select the Employee business view and open the Alexis Bull record.
4. Open the Actions menu from the Education column, and click Create.

5. In the stepper, enter the following values, and then click Add another:

• From Date: 01-Sep-2009
• To Date: 15-Aug-2011
• Degree Received: MS Computer Sciences
• Country: United Kingdom
• School: Oxford University

6. In the stepper, enter the following values, and then click Go to list:

• From Date: 01-Sep-2011
• To Date: 15-Jul-2013
• Degree Received: MBA Sales and Finance
• Country: USA
• School: Stanford University

7. Finally, click Finish and wait for the new records to be processed.
8. Click Click to refresh when prompted.

9. Education records are now displayed directly in the employee form.

Congratulations!

You have enhanced user experience by customizing business views and embedded collections.

To summarize:

• You have created an embedded collection to manage education records within the employee form.
• You have refreshed and saw your changes in action.

Next, you will learn how to configure business views and display hierarchies.

Hierarchies are useful in any data-driven application. In Semarchy xDM, hierarchies follow the parent-child relationships you have defined in your data model.

In the next sections, you will be guided to create hierarchy views for Department and Employee records.

Learning outcomes

• Changing the Department business view to showcase employees within their respective department in a hierarchy.
• Adjusting both the model and data to establish a comprehensive employee hierarchy mirroring the organizational chart.

You will now modify the Department business view to display employees in their department in a hierarchy.

Modify the Department business view

1. In the Application Builder, expand the Entities > Department > Business Views node and double-click the Department business view.

2. In the Hierarchy Configuration section, select Enable Hierarchy View and Open Hierarchy by Default.

3. In the Transitions section, select the third line: Employee.

4. In the Collection Configuration finger tab of the Properties view, enter the following values:

• Select Customized Sort
• Sort Expression: FirstName asc, LastName asc

5. In the Transitions section of the editor, select the second line: Employees.
6. In the Icon and Labels finger tab of the Properties view, set the Icon to images://mdi/account-multiple.svg.

7. In the Hierarchy Configuration finger tab, select Enable in Hierarchy.

8. Save your work and validate your model. No errors or warnings should be returned.

Test the hierarchy view

Let us check the result in the application.

1. Go to the Welcome page and open the Employee Tutorial application.
2. In the user profile menu, click Refresh application.

3. Select the Departments business view. Employees and Departments are now displayed in a hierarchy.

Customize the hierarchy view

You will now remove the Employee label from the hierarchy view to streamline the user interface.

1. In the Application Builder, expand the Department node and open the Department business view.

2. In the Transitions section, select the second line: Employee.

3. In the Hierarchy Configuration finger tab, deselect Transition Node Visible.

4. Save your work and validate your model.
5. Go to the Welcome page and open the Employee Tutorial application.
6. In the user profile menu, click Refresh application.

7. Select the Departments business view. Employee records now directly display under their respective department.

Congratulations!

You have built your first hierarchy to display employees in their departments.

Next, you will build a hierarchy of employees.

In the next two sections, you will build a complete employee hierarchy that should reflect the organization chart.

In this section, you will start by implementing the employee hierarchy in your HR Tutorial model.

Add the Employee-Employee reference relationship

You first need to modify your data model to add a relationship between an employee and their manager.

1. In the Application Builder, expand the Diagram node and open the MainDiagram.

2. Add a self-reference for the Employee entity as shown below:

3. Enter the following values and then click Finish:

• Name: EmployeeReportsToEmployee
• Referencing [0..*] > Referencing Role Name: Reports
• Referencing [0..*] > Referencing Role Label: Report
• Referencing [0..1] > Referencing Role Name: Manager

4. Rearrange the reference link and the other entities with drag and drop.
5. Select Show relationship names > Label only.

6. Select Show relationships cardinalities.

7. Save your work.

Add the manager to the employee collection

Now you will modify the employee collection to add the manager field.

1. In the Application Builder, expand the Employee > Collections node and open EmployeeCollection.

2. Drag the FDN_Manager attribute and drop it between the Picture and IsContractor fields.

3. In the Column section of the Properties view, enter the following values:

• Display Type: Chip
• Select Avatar

4. Save your work.

Add the Manager field to the Employee browsing and authoring forms

Now, you will modify the employee browsing form to add the Manager field.

1. In the Application Builder, expand the Employee > Forms node and open EmployeeBrowsingForm.

2. Drag the FDN_Manager attribute and drop it in the Contact tab.

3. In the Component section of the Properties view, enter the following values:

• Display Type: Chip
• Select Avatar

4. In the Label section, enter the following values:

• Alignment: Left
• Position: Top

5. Save your work.

Now you will modify the Employee authoring form to add the Manager field.

1. In the Application Builder, expand the Employee > Forms node and open EmployeeForm.

2. Drag the FDN_Manager attribute and drop it between the FDN_Department and Title fields.

3. In the Component section of the Properties view, enter the following values:

• Display Type: Chip
• Select Avatar

4. Save your work.

Modify the employee business view

You will now modify the employee business view to add a transition to the reporting employees.

1. In the Application Builder, expand the Employee > Business view node and open the Employee business view.

2. In the Transitions section, select EmployeeEO, and click Add Transition.

3. In the dialog, click Edit Expression.

4. Select Reports and click OK.
5. Click Next.

6. Leave all options to defaults in the second step of the wizard, and then click Finish.

7. Expand the EmployeeEO node in the tree table and select Reports.

8. In the Icon and Labels finger tab of the Properties view, set the Icon to images://mdi/account-multiple.svg.

9. In the Display Properties finger tab, set the Display Form Tab as property to Icon and Label.
10. Save your work and validate your model.
11. Go to the Management perspective of Application Builder, right-click on the EmployeeTutorial, and then click Deploy Model Edition.

12. In the Deploy Model Edition wizard, click Finish to deploy your updated model.

Congratulations!

You have added the hierarchical relationship between employees to your model. In the next section, you will populate data for this relationship, then build and test the hierarchy view.

Now that your model is updated, you will populate it to reflect the following organization chart:

Since no hierarchical data is provided in this tutorial, you will use the mass update feature on Employee records to reflect the hierarchy.

First, you will update employees in the Consulting department to make them report to Allan Mcewen.

1. Go to the Employee Tutorial application.
2. In the user profile menu on the top right corner, click Refresh Application.

3. Go to the Employees business view and filter on Consulting.

4. Select all employee records except Allan Mcewen's.

5. In the Options menu, click Mass Update.

6. Scroll down to the end of the form, click Update Value for the Manager, and select Allan Mcewen.
7. Click Apply.

8. Click Finish.
9. When the toaster at the bottom left corner of the screen indicates "Changes successfully applied," click Click to refresh.

Now, you will update employees in the Development department to report to Martha Sullivan.

1. Filter employees in the Development department.

2. Select all employee records except Martha Sullivan's.
3. In the Options menu, click Mass Update.
4. Scroll down to the end of the form, click Update Value for the Manager, and select Martha Sullivan.
5. Click Apply.
6. Click Finish.
7. When the toaster on the bottom left corner of the screen indicates "Changes successfully applied," click Click to refresh.

Now, you will update employees in the Marketing department to report to Sarah Sewall.

1. Filter employees in the Marketing department.

2. Select all employee records except Sarah Sewall's.
3. In the Options menu, click Mass Update.
4. Scroll down to the end of the form, click Update Value for the Manager, and select Sarah Sewall.
5. Click Apply.
6. Click Finish.
7. When the toaster on the bottom left corner of the screen indicates "Changes successfully applied," click Click to refresh.

Now, you will update employees in the Sales department to report to Lindsey Smith.

1. Filter employees in the Sales department.

2. Select all employees except:

• Irene Mikkilineni
• Lindsey Smith

3. In the Options menu, click Mass Update.
4. Scroll down to the end of the form, click Update Value for the Manager, and select Lindsey Smith.
5. Click Apply.
6. Click Finish.
7. When the toaster on the bottom left corner of the screen indicates "Changes successfully applied," click Click to refresh.

Now you will find the employees that do not have a manager yet.

1. In the filter panel, set the Search type to Advanced and click the + button.

2. Enter the following values and click Add:

• Attribute: FID_Manager
• Operator: IS NULL

3. Click Apply.

4. Select all employee records except:

• Allan Mcewen
• Ellen Abel
• Tayler Fox

5. In the Options menu, click Mass Update.
6. Scroll down to the end of the form, click Update Value for the Manager and select Tayler Fox.
7. Click Apply.
8. Click Finish.
9. When the toaster indicates "Changes successfully applied," click Click to refresh.

Finally, you will update the last two employees without a manager.

1. Select all employee records except Tayler Fox's.
2. In the Options menu, click Edit.

3. Make Allan Mcewen report to Lindsey Smith, and click Edit Next.

4. Make Ellen Abel report to Louise Doran, and click Go to list.

5. Click Finish.

Now you can browse the hierarchy starting from the CEO.

1. Open the Tayler Fox employee form.

2. Select the Reports tab to see who reports to Tayler.

3. You can browse recursively the hierarchy by opening the Lindsey Smith employee form and going to the Reports tab.

The data of your org-chart is now all set. In the next section, you will build the hierarchy view and test it.

You are now ready to create the employee hierarchy view.

Create the employee hierarchy view

Create the EmployeeHierarchy business view following these steps:

1. In the Application Builder, expand the Entities > Employee > Business Views node.
2. Right-click Employee and click Duplicate.

3. Open the newly created Employee2 business view, select Auto Fill, and enter the following values in the Name and Definition section:

• Name: EmployeeHierarchy
• Root Filter: FID_Manager is null

4. In the Hierarchy Configuration section, enter the following values:

• Select Enable Hierarchy View
• Select Open Hierarchy View by Default

5. In the Transitions section, select the first line (i.e., EmployeeEO) and enter the following values in the Collection Configuration finger tab of the Properties view:

• Select Customized Sort
• Sort Expression: FirstName, LastName

6. In the Transitions section of the editor, select the second line (i.e., Reports) and enter the following values in the Hierarchy Configuration finger tab:

• Select Enable in Hierarchy
• Deselect Transition Node Visible

7. Save your work.

Create an action for the hierarchy view

Now you will add a shortcut in the application menu by creating an action to open the business view.

1. In the Application Builder, expand the Applications > EmployeeTutorial node and open Folders and Actions.

2. Select the Root folder and click Add Action.

3. Enter BrowseOrgChart in the Name field, and click Next.

4. Set the Business View to EmployeeHierarchy, and click Next.

5. Enter the following values and click Finish:

• Select Custom Label
• Label: Org. Chart
• Set the icon to images://mdi/file-tree.svg

6. Save your work.
7. Validate your model. No error or warning should be displayed.

Refresh and test the organization chart

Now you will refresh your application and navigate the organization chart hierarchy.

1. Go to the Welcome page and open the Employee Tutorial application.
2. In the user profile menu, click Refresh application.

3. In the navigation drawer, open the Org. Chart business view.

4. You can now navigate the organization chart hierarchy, starting from the CEO.

Congratulations!

You changed the model and the data of your application to create a complete employee hierarchy to reflect an organization chart.

In the next section, you will learn about the graph navigation feature and compare it with the hierarchical view.

Semarchy xDM provides a graph visualization feature that allows business users to explore all connections related to a specific record. Graphs can enhance or substitute hierarchies, providing deeper insights into the data.

Use the Graph view

You will now discover how to examine record relationships through the Graph view. A compelling scenario is efficiently locating an employee's manager, their peers, and other people working in their department.

1. Go to the Employee Tutorial application and select the Employees business view.

2. Select Alexis Bull.
3. In the browsing form, open the Options menu and click Browse Graph.

4. The graph shows Alexis's manager, his department, and his education records. Click the Expand button on the Sales department card.

5. Observe that the graph view allows you to see all employees from the Sales department. You will compare this feature with the hierarchy view in the next section.

6. Click the collapse and expand buttons on the different records to browse more related objects.

7. Move your mouse over the Lindsey Smith display card, and then click the navigate button to see the record's details.

Graph navigation versus hierarchy

You will now assess the distinctions between navigating through graphs and hierarchies.

1. In the Employee Tutorial application, select the Org. Chart business view.

2. Expand the Taylor Fox > Lindsey Smith node and then select Alexis Bull.
3. Observe that the Reports tab allows you to see the direct reports of the employee (if they exist).
4. Click on Sales on the browsing form.

5. Observe that the hierarchy view does not allow browsing the employees from the Sales department. This would require customizing the Department browsing form to display employees in a second tab.

Depending on the business requirements, graphs can be more powerful than hierarchies and contribute to a broader user experience.

Congratulations!

You have completed the last section of this tutorial by using the graph view and comparing it with the hierarchy view.

Well done! You have customized business views and built your first hierarchy views with Semarchy xDM.

Learning recap

• You have enhanced the Department and Employee business views.
• You have configured simple and recursive hierarchies.
• You have discovered that graphs can serve as an alternative navigation method compared to hierarchies.

Next steps

The next unit, Guided data authoring, will focus on data authoring use cases to optimize the interactions that business users have with your application when authoring data.

GO TO TUTORIALS

Thank you for completing this tutorial.