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

Business views

Hierarchies

Graphs

What you'll learn

Before you start

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

If you have not already done so, you can download resources such as images and data sets used within this tutorial by clicking on the button below.

DOWNLOAD TUTORIAL RESOURCES

The estimated duration of this unit is about 1 hour and 50 minutes.

Business views are the primary design elements for browsing the data of 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 steps, you will be guided to enhance the business views of the Department and Employee entities.

What you'll learn

In this step, you will modify the Department business view in order to display employees that belong to departments.

Modify the department business view

  1. In the HR Tutorial application, go to the Departments business view using the Navigation Drawer.

  1. Open the Consulting record and notice that you do not see the list of employees for this department.

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

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

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

  1. Select Employees in the Attributes list, and then click OK.

  1. Finally, click Finish to close the dialog.
  2. Expand the transitions DepartmentEO > Employees and select the third line: Employee.

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

  1. Save your work.
  2. Go back to the Welcome Page and open the Employee Tutorial application.
  3. Open the user menu and select Refresh application.

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

Congratulations

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

What we've covered

In the next step, 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's 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.

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

  1. Select the Education collection you just added. In the Name and Definition finger tab of the Properties view, enter the following values:

  1. In the Component section, unselect Allow Grid.

  1. Save your work.
  2. 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.

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

  1. Double click on the first warning and go to the Embedded Collection finger tab. Click Refresh Configuration.

  1. Enter the following values for the Education embedded collection:

  1. Go back to the Validation Report and double click on the second warning.
  2. Go to the Embedded Collection finger tab. Click Refresh Configuration. Enter the following values for the Education embedded collection:

  1. Save your work and validate your model again. You should have no remaining warning.
  2. Go back to the Welcome Page and open the Employee Tutorial application.
  3. Open the user menu and select Refresh application.

  1. Go to the Employee business views and open the Alexis Bull record. Observe that the form now includes a list of education records. This list is currently empty for Alexis Bull. You will create some records in the next section.

Customize the education form

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

  1. Select the ID field of the form and then unselect Visible in the General section of the Properties view.

  1. Move the FDN_Employee field just after the ID.

  1. In the Style finger tab, enter the following values:
  1. 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.

  1. In the Actions section, select CreateAuthorEducation.

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

  1. Save your work and validate your model.

Create some education records

Now let's add some education records.

  1. Go to the Welcome Page and open the Employee Tutorial application.
  2. Open the user menu and select Refresh application.

  1. Go to the Employee business view and open the Alexis Bull record. Open the Actions menu from the Education column and select Create.

  1. In the stepper, enter the following values and then click ADD ANOTHER:

  1. In the stepper, enter the following values and then click GO TO LIST:
  1. Finally, select FINISH and wait for the new records to be processed. Select CLICK TO REFRESH when prompted.

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

Congratulations

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

What we've covered

The next step will show you how to configure business views to 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 steps, you will be guided to create hierarchy views for departments and employees.

What you'll learn

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, go to Entities > Department > Business Views and then open the Department business view.

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

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

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

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

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

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

Test the hierarchy view

Now let's check the result in your application.

  1. Go to the Welcome Page and open the Employee Tutorial application.
  2. Open the user menu and select Refresh application.

  1. Open the Departments business view to see the result. Employees and Departments are now displayed in a hierarchy.

Customize the hierarchy view

You will now remove the Employee label from the hierarchy view for a cleaner user interface.

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

  1. In the Transitions section, select the second line Employee.

  1. In the Hierarchy Configuration finger tab, unselect Transition Node Visible.

  1. Save your work and validate your model.
  2. Go to the Welcome Page and open the Employee Tutorial application.
  3. Open the user menu and select Refresh application.

  1. Open the Departments business view to see the result. Employees are now directly displayed under the department.

Congratulations

You have built your first hierarchy to display employees in their departments. In the next step, you will build a hierarchy of employees.

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

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

Add the Employee-Employee reference relationship

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

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

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

  1. Enter the following values and then select Finish:

  1. Rearrange the reference link and the other entities with drag and drop.

  1. 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.

  1. Drag and drop the FDN_Manager attribute between the Picture and IsContractor fields.

  1. In the Style tab, enter the following values:
  1. 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.

  1. Drag and drop the FDN_Manager attribute in the Contact tab.

  1. In the Label tab, set the Label Position to Top.
  2. In the Style tab, enter the following values:
  1. 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.

  1. Drag and drop the FDN_Manager attribute between the FDN_Department and Title fields.

  1. In the Style tab, enter the following values:
  1. 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.

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

  1. In the dialog, click Edit Expression.

  1. Select Reports and click OK.
  2. Click Next.

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

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

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

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

  1. 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 step, 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 organization chart depicted below:

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

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

  1. Go to your Employee Tutorial application, open the user menu on the top-right corner, and then select Refresh Application.

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

  1. Select all employees except Allan Mcewen.

  1. Open the Actions menu and select Mass Update.

  1. Scroll down to the end of the form, click Edit Value for the Manager, and then select Allan Mcewen. Finally, click APPLY.

  1. Click FINISH. Wait until the toaster at the bottom-left corner of the screen indicates "Changes successfully applied", and then select CLICK TO REFRESH:

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

  1. Filter employees on Development.

  1. Select all employees except Martha Sullivan.
  2. Open the Actions menu and select Mass Update.
  3. Scroll down to the end of the form, click Edit Value for the Manager, and then select Martha Sullivan. Finally, click APPLY.
  4. Click FINISH and wait for the mass update to be processed.

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

  1. Filter employees on Marketing.

  1. Select all employees except Sarah Sewall.
  2. Open the Actions menu and select Mass Update.
  3. Scroll down to the end of the form, click Edit Value for the Manager, and then select Sarah Sewall. Finally, click Apply.
  4. Click FINISH and wait for the mass update to be processed.

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

  1. Filter employees on Sales.

  1. Select all employees except:
  1. Open the Actions menu and select Mass Update.
  2. Scroll down to the end of the form, click Edit Value for the Manager, and then select Lindsey Smith. Finally, click APPLY.
  3. Click FINISH and wait for the mass update to be processed.

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 then click on Add criterion.

  1. Enter the following values and select ADD:

  1. Click APPLY.

  1. Select all employees except:
  1. Open the Actions menu and select Mass Update.
  2. Scroll down to the end of the form, click Edit Value for the Manager, and then select Lindsey Smith. Finally, click APPLY.
  3. Click FINISH and wait for the mass update to be processed.
  4. When the toaster indicates "Changes successfully applied", select CLICK TO REFRESH.

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

  1. Select all employees exceptTayler Fox.
  2. Open the Actions menu and select Edit.

  1. Make Allan Mcewen report to Lindsey Smith and select Edit Next.

  1. Make Ellen Abel report to Louise Doran and select GO TO LIST.

  1. Finally, select FINISH.

Good job! Now you can browse the hierarchy starting from the CEO.

  1. Open the Tayler Fox employee form.

  1. Go to the REPORTS tab to see who reports to Tayler.

  1. 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 step, 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. Right-click Employee and select Duplicate.

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

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

  1. In the Transitions section, select the first line EmployeeEO and enter the following values in the Collection Configuration finger tab of the Properties view:

  1. In the Transitions section of the editor, select the second line Reports, and then enter the following values in the Hierarchy Configuration tab:

  1. 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, go to Applications > EmployeeTutorial and open Folders and Actions.

  1. Select the Root folder and click Add Action.

  1. Set the Name to BrowseOrgChart and click Next.

  1. In the next step, set the Business View to EmployeeHierarchy and then click Next.

  1. In the final step, enter the following values and click Finish:

  1. Save your work.
  2. 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. Open the user menu and select Refresh application.

  1. Open the Org. Chart business view in the Navigation Drawer.

  1. 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 step, 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 navigate all relationships surrounding a given record. Graphs can complement or replace hierarchies to give more insights into the data.

Use the Graph view

You will now learn how to explore record relationships using the Graph view. A strong use case is to quickly find one employee's manager, his peers, other people working in his department, etc.

  1. In the Employee Tutorial application, open the Employees business view.

  1. Select Alexis Bull. From the browsing form, open the actions menu and then select Browse Graph.

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

  1. 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.

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

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

Graph navigation versus hierarchy

You will now compare the graph and hierarchy navigations.

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

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

  1. Observe that the hierarchy view does not allow to browse the employees from the Sales department. This would require to customize the Department browsing from 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 step 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!

What we've covered

What's next?

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