In this tutorial, you will focus on customizing a better search experience and on building an elegant and productive navigation experience.

What you'll learn

• Creating your own search forms and customize the Global Search
• Interacting with the image libraries to load your own set of images
• Customizing the application branding, folders & actions, and Navigation Drawer (main menu)
• Embedding external links in your application

Before you start

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

• Build your First Data Authoring Application
• Data Quality
• Display Cards, Forms, and Collections
• Business Views and Hierarchies
• Guided Data Authoring

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

DOWNLOAD TUTORIAL RESOURCES

The estimated duration of this unit is about 2 hours.

In the next steps, you will discover the search capabilities of Semarchy xDM, and you will be guided to create a custom search form for the Employee entity and the Global Search.

What you'll learn

• Creating a custom search form using parameters and a SemQL condition
• Testing your search form with various search criteria
• Saving filters and share filters amongst your team
• Enhancing the Global Search

Built-in search types

xDM provides built-in search types that you can configure as available search methods in your business views.

Built-in search types include:

• Full-text: searches all attributes of an entity that are marked as Searchable.
• Form: shows a default form with all the available attributes and pickers to select values.
• Advanced: Allows specifying which attributes to search on and the operators to use for comparison.
• SemQL: allows using SemQL queries to search (for advanced users).

In the next step, you will create a custom search form.

It is usually more efficient to provide your users with a customized search experience using your own search forms.

Search forms allow you to specify search parameters that users will use to filter data. Your search forms will use these parameters to build a SemQL condition that applies the desired filter.

Search parameters can be exposed as simple text fields, checkboxes, date pickers, static drop-down lists, or dynamic value pickers.

In the next sections, you will learn how to build your first search form and enhance the Global Search with a second search form.

Create the employee search form

In this section, you will build an employee search form to help your users be more productive when filtering data.

The form will have 4 parameters:

• Search for: simple text field
• In Department: value-picker field
• Exclude Contractors: checkbox
• Active Only: checkbox.

To build such a search form, you will first add your parameters to the form, then you will build the SemQL condition that uses these parameters, and finally, you will expose this form in your business view.

Define the SemQL search condition

The filter applied by your form is a SemQL condition that will use each parameter as a bind variable to filter the appropriate records.

This condition will use 4 parameters:

• SEARCH_STRING: used to search in the first name, the last name, the full name (concatenation of the first and last names), the title, within any education records' degree received, or school. Notice the use of the lower() function and the like operator.

(/* 1. search in first name, last name, title and education records */
(:SEARCH_STRING is null)
or (lower(FirstName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(FirstName ||' '|| LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(Title) like '%' || lower(:SEARCH_STRING) || '%')
or (any EducationRecords have (
          (lower(DegreeReceived) like '%' || lower(:SEARCH_STRING) || '%')
       or (lower(School) like '%' || lower(:SEARCH_STRING) || '%')
       )
    )
)

• DEPARTMENT: searches for an exact match on Department if provided.

(    /* 2. Filter by department */
       (:DEPARTMENT is null)
    or (FID_Department = :DEPARTMENT)
)

• EXCLUDE_CONTRACTORS: filters on non-contractors if Exclude Contractors? is selected on the form.

(    /* 3. Exclude contractors eventually */
    (:EXCLUDE_CONTRACTORS is null)    
    or (:EXCLUDE_CONTRACTORS = '0')
    or (:EXCLUDE_CONTRACTORS = '1' and IsContractor = '0')
)

• ACTIVE_ONLY: filters on end date null if Active Only? Is selected.

(    /* 4. Keep active employees only */
    (:ACTIVE_ONLY is null)
    or (:ACTIVE_ONLY = '0')
    or (:ACTIVE_ONLY = '1' and EndDate is null)
)

You will use this SemQL condition in the next section.

Add the search form

You will now configure a new search form for the Employee entity.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Entities > Employee in the Model Design View. Right-click Search Forms and then select Add Search Form.

3. Leave all default properties in the dialog and then click Finish.

4. In the Search Parameters section, click the Add Search Parameter button.

5. In the dialog, enter the following values and then click Finish:

• Name: SearchString
• Binding: SEARCH_STRING
• Label: Search for

6. Click again the Add Search Parameter in the editor. Enter the following values and then click Finish:

• Name: Department
• Binding: DEPARTMENT
• Label: In Department

7. Select the Department parameter in the Search Parameters table. Select the Display Properties finger tab of the Properties view and then enter the following values:

• Display Type: Value Picker
• Lookup Entity: click the Select a value button and then select Department.
• Bound Select Expression: ID
• Primary Text Expression: Name
• Secondary Text Expression: Description
• Default Sort Expression: Name

8. Click again the Add Search Parameter button in the editor. Enter the following values and then click Finish:

• Name: ExcludeContractors
• Binding: EXCLUDE_CONTRACTORS
• Label: Exclude Contractors?
• Type: Boolean [Built-in Type]

9. Select the ExcludeContractors parameter in the Search Parameters table, select the Display Properties finger tab of the Properties view, and set Display Type to Checkbox.

10. Click again the Add Search Parameter button in the editor. Enter the following values and then click Finish:

• Name: ActiveOnly
• Binding: ACTIVE_ONLY
• Label: Active Only?
• Type: Boolean [Built-in Type]

11. Select the ActiveOnly parameter in the Search Parameters table. Select the Display Properties finger tab of the Properties view and then set Display Type to Checkbox.

12. In the Name and Definition section of the editor, click the Edit Expression button next to the SemQL Condition property.

13. Paste the following SemQL Condition and then click OK:

(
   /* 1. search in first name, last name, title and education records */
(:SEARCH_STRING is null)
or (lower(FirstName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(FirstName ||' '|| LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(Title) like '%' || lower(:SEARCH_STRING) || '%')
or (any EducationRecords have (
          (lower(DegreeReceived) like '%' || lower(:SEARCH_STRING) || '%')
       or (lower(School) like '%' || lower(:SEARCH_STRING) || '%')
       )
    )
)
and (
    /* 2. Filter by department */
       (:DEPARTMENT is null)
    or (FID_Department = :DEPARTMENT)
)
and (
    /* 3. Exclude contractors eventually */
    (:EXCLUDE_CONTRACTORS is null)    
    or (:EXCLUDE_CONTRACTORS = '0')
    or (:EXCLUDE_CONTRACTORS = '1' and IsContractor = '0')
)
and (
    /* 4. Keep active employees only */
    (:ACTIVE_ONLY is null)
    or (:ACTIVE_ONLY = '0')
    or (:ACTIVE_ONLY = '1' and EndDate is null)
)

14. Save your work.

Assign the search form

You will now assign the search form to the employee business view.

1. Navigate to Entities > Employee > Business Views in the Model Design View and then double-click Employee.

2. In the Transitions section of the editor, select EmployeeEO in the table view. Select the Display Properties finger tab of the Properties view and then click the Edit button next to the Search Configurations property.

3. Select the Employee Search Form(Custom) in the Available column. Move it to the first position using the Move Up button and then click OK.

4. Save your work.
5. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

You will test your form in the next step.

Use the employee search form

After designing your search form, you will now refresh your application to see your changes and then test different search combinations.

1. Open your application from the Welcome Page.

2. Open the user menu on the top-right corner, and then select Refresh Application.

3. Select Employees in the Navigation Drawer. Click the Filter button above the Employees collection to open the filter panel. The employee search form you created is selected by default.

4. Enter champion in the Search for field and then click APPLY:

5. Select RESET to clear the search results.

6. Enter oxford in the Search for field and then click APPLY:

7. Select RESET to clear the search results.

8. Enter amit banda in the Search for field and then click APPLY:

9. Select RESET to clear the search criteria and results.

10. Enter Consulting in the In Department field and then select APPLY:

11. Select Exclude Contractors? and then click APPLY.

12. Select Active Only? and then click APPLY.

13. Save your search criteria by selecting SAVE AS. You will be able to reuse it later.

14. Set the filter name to Consultants (active) and then select SAVE.

15. Share this filter with other users: open the actions menu next to your filter and then click Share.

Combine filters

You will now create another filter to learn how to combine filters.

1. Select NEW FILTER.

2. Set the Search type to Advanced and then select Add criterion.

3. Enter the following values and then click ADD:

• Attribute: HireDate
• Operator: >=
• Value: 01-Jan-2013

4. Select SAVE AS.

5. Set the filter name to After 2012 and then select SAVE.

6. Click APPLY and observe that the new filter returns only 4 records.

7. Deselect the switch next to the After 2012 filter and click APPLY. Observe that the search returns 8 records now that this filter is disabled.

Congratulations

You have successfully created and used a custom search form for employees. In the next step, you will learn how to use a search form in the Global Search.

If you use the Global Search and try to search for a person's full name, you will not get any results. This is because Global Search searches in individual attributes, such as first name or last name, but not on the concatenation of them.

Let's start by testing the Global Search as it as was configured initially in the first unit, Build Your First Data Authoring Application:

1. In the Employee Tutorial application, select Global Search in the Navigation Drawer.

2. Search for richard cameron click the Search button.

3. The search returns no result because the Global Search configuration does not search on the concatenation of the first name and last name.

To avoid this issue, you will now configure the Global Search to use a similar form and the same condition on full name as the search form you created previously.

Create a new search form

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Entities > Employee > Search Forms in the Model Design View. Right-click EmployeeSearchForm and then select Duplicate.

3. Double-click on the newly created EmployeeSearchForm2 in the Model Design View.

4. In the Name and Definition section of the editor, enter the following values:

• Select Auto-Fill
• Name: CustomizedTextSearch

5. Click the Edit Expression button next to the SemQL Condition property.

6. Replace the existing SemQL Condition with the following one and then click OK:

(
   /* 1. search in first name, last name, title and education records */
(:SEARCH_STRING is null)
or (lower(FirstName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(FirstName ||' '|| LastName) like '%' || lower(:SEARCH_STRING) || '%')
or (lower(Title) like '%' || lower(:SEARCH_STRING) || '%')
or (any EducationRecords have (
          (lower(DegreeReceived) like '%' || lower(:SEARCH_STRING) || '%')
       or (lower(School) like '%' || lower(:SEARCH_STRING) || '%')
       )
    )
)

7. Select the following Search Parameters in the table view and then click the Delete button:

• Department
• ExcludeContractors
• ActiveOnly

8. Save your work.

Modify the Employee business view

You will now edit the Employee business view to add your new search form.

1. Navigate to Entities > Employee > Business Views in the Model Design View and double-click Employee.

2. In the Transitions section of the editor, select EmployeeEO in the table view. Select the Display Properties finger tab of the Properties view and then click the Edit button next to the Search Configuration property.

3. Select the Customized Text Search in the Available column and move it to the second position in the list using the Move Up button. Unselect Text(Built-in) and then select OK.

4. Save your work.

Modify the Global Search Configuration

You will now modify the Global Search Configuration to replace the search type used for employees with your new search form.

1. Navigate to Applications > EmployeeTutorial in the Model Design View and then double-click Global Search Configuration.

2. In the Searched Business Views section of the editor, select Employee in the table view and then set the Search Type to Customized Text Search.

3. Set the Search Parameter to SearchString.

4. Save your work.
5. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

Test the enhanced Global Search

It is now time to test your new search form.

1. Open your application from the Welcome Page.

2. Open the user menu on the top-right corner, and then select Refresh Application.

3. Select Global Search in the Navigation Drawer.

4. Search for richard cameron click the Search button.

5. The Global Search is now able to retrieve an employee when you type in a full name.

6. Try other searches:

• amit branda
• architect
• oxford

Your Global Search is now configured to be more flexible.

Congratulations

You have successfully enhanced the user experience by adding search forms to your application.

What we've covered

• You created the EmployeeSearchForm with its parameters and its SemQL condition.
• You tested your search form with various search criteria.
• You learned how to save filters and share filters with other users.
• You enhanced the Global Search to have it search on the employees' full names.

The next part of this tutorial will focus more on improving the look and feel of your application.

In the second half of this tutorial, you will make your application more user-friendly.

Your application relies on a folder structure and a Navigation Drawer, which appears on the left side of the application.. The next steps will teach you how to tune their content.

What you'll learn

• Creating an image library
• Configuring your application branding
• Adding the Contractors business view
• Defining a folder structure with new application actions
• Defining the Navigation Drawer (main menu) for your application
• Adding to your main menu a link to an external resource

The human eye interprets images much faster than text. Therefore choosing relevant, bold, and intentional images is fundamental when designing your application.

Semarchy xDM allows you to load and store images into image libraries and refer to these images with a URL. These images can then be assigned to folders, actions, cards, etc.

In this section, you will create a new image library and import some images from the data-authoring\pictures folder of the tutorial resources.

1. Select Configuration on the Welcome Page.

2. Scroll drown to Application Customization and click Image Libraries.

3. Click the Import Image Library button to open the import wizard.

4. Click Add to load the image files provided with the tutorial.

5. Select all the files contained in the data-authoring\pictures\image-library folder of the tutorial resources and then click Open.
6. Once the files are loaded, set the Target Library to Create a new library.

7. Set the Name to employee-tutorial and then click OK.

8. Finally, click OK to complete the image library creation.

9. The images are now available for your application.

Congratulations

You have successfully created an image library. You will use the images it contains in the next steps.

The first impression users have about an application depends on its look and feel. Semarchy xDM allows you to assign several images to enhance your application.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Applications > EmployeeTutorial in the Model Design View and then double-click EmployeeTutorial.

3. Click Select Image next to the Avatar property.

4. Search for employee-tutorial-avatar and hit the Enter key. Finally, select the image returned.

5. Repeat the same operation for the following properties:

• Logo: search for the image employee-tutorial-logo

• Cover: search for the image employee-tutorial-cover

• Favicon: search for the image employee-tutorial-favicon

6. The Branding section should look like this:

7. Finally set the Sort Method to Position in the Display Properties section.

8. Save your work.

See your changes in action

1. Open your application from the Welcome Page.

2. Open the user menu on the top-right corner, and then select Refresh Application.

3. The logo of the homepage has been updated with the Application Logo.

4. The Navigation Drawer has been updated with the Application Cover.

5. The avatar has been updated with the Application Avatar.

6. Finally, the browser favicon has been updated with the Application Favicon.

7. Go back to the Welcome Page to see that the Application Avatar is also used here.

Congratulations

You have configured the branding for your application. In the next step, you will enrich your application with a new business view.

So far, you can browse data about your employees through the Employees business view or the Org. Chart business view.

The goal of this section is to have you add the Contractors view with a predefined filter on contractors only.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Entities > Employee > Business Views in the Model Design View, right-click Employee, and then select Duplicate.

3. Open the business view Employee2 newly created in the Model Design View.

4. Select Auto Fill and set the Name to Contractors.

5. Click the Edit Expression button next to the Root Filter property.

6. Enter the following SemQL expression and then click OK:

IsContractor = '1'

7. Save your work.
8. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

Congratulations

You have successfully added a new business view to your application. You will later add this business view as an action from your folders menu.

In the next step, you will configure folders and actions.

In the next sections, you will be guided to create a folder structure like the one depicted here.

The root folder of your application will contain two folders:

• The Take Action folder, with 3 actions to create/import employees and to create departments.
• The Browse folder, with 4 actions to respectively browse employees, contractors, organization charts, and departments.

Remove the useless actions

Let's start by removing from the Navigation Drawer the actions you don't need.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Applications > EmployeeTutorial in the Model Design View and double-click Folders and Actions.

3. Select Entities in the Folders and Actions table and then select Delete.

4. Select OK to confirm the deletion.
5. Repeat the same operation for the BrowseEducation action.

Rename the Global Search

Select GlobalSearch in the Folders and Actions table and then set the Label to Search.

Configure new folders and actions

You will now add folders and actions to your application.

Create the TakeAction folder

1. Select Root in the Folders and Actions table and then click Add Folder.

2. Enter the following values and then click Finish:

• Name: TakeAction
• Label: Take Action
• Icon: images://mdi/plus-circle-outline.svg

3. Select TakeAction in the Folders and Actions table, select the Display Properties finger tab in the Properties view, and then set the Icon Color to md:green.

4. Drag and drop the TakeAction folder between Inbox and BrowseDepartment.

5. Select again the TakeAction folder in the Folders and Actions table and then click Add Action.

6. Enter the following values and then click Next:

• Name: NewEmployee
• Action Type: Create

7. Set the Action to EmployeeActionSet > CreateAuthorEmployees [Create Action] and then click Next.

8. Enter the following values and then click Finish:

• Select Use Custom Label
• Label: New Employee
• Description: Click to create a new employee or contractor.
• Icon: images://mdi/account-plus.svg
• Image: images://employee-tutorial/create-employee.png

9. Expand the TakeAction folder and then select NewEmployee in the Actions and Folders table.

10. Select the Display Properties finger tab in the Properties view, set the Image Mode to Fill.

Add the ImportEmployees action

You will now add a new action to import employees.

1. Select TakeAction in the Folders and Actions table and then click Add Action.

2. Enter the following values and then click Next:

• Name: ImportEmployees
• Action Type: Import

3. Set the Action to EmployeeActionSet > ImportAuthorEmployees [Import Action] and then click Next.

4. Enter the following values and then click Finish:

• Select Use Custom Label
• Label: Import Employees
• Description: Click to import employees or contractors.
• Icon: images://mdi/account-multiple-plus.svg
• Image: images://employee-tutorial/import-employee.png

5. Select the ImportEmployees action in the Actions and Folders table.

6. Select the Display Properties finger tab in the Properties view and then set the Image Mode to Fill.

Add the NewDepartment action

Now you will create a third action to create a department.

1. Select TakeAction in the Folders and Actions table and then click Add Action.

2. Enter the following values and then select Next:

• Name: NewDepartment
• Action Type: Create

3. Set the Action to DepartmentActionSet > CreateAuthorDepartments [Create Action] and then click Next.

4. Enter the following values and then click Finish:

• Select Use Custom Label
• Label: New Department
• Description: Click to create a new department.
• Icon: images://mdi/folder-plus.svg
• Image: images://employee-tutorial/create-department.png

5. Select the NewDepartment action in the Actions and Folders table.

6. Select the Display Properties finger tab in the Properties view and then set the Image Mode to Fill.

Add the Browse folder

You will now create the Browse folder.

1. Select Root in the Folders and Actions table and then click Add Folder.

2. Enter the following values and then click Finish:

• Name: Browse
• Label: Browse
• Icon: images://mdi/folder-account.svg

3. Select Browse in the Folders and Actions table. Select the Display Properties finger tab in the Properties view and then set the Icon Color to md:blue.

4. Drag and drop the Browse folder between TakeAction and BrowseDepartment.

5. Select BrowseDepartment in the Folders and Actions table. Select the Display Properties finger tab in the Properties view and then enter the following values:

• Description: Browse the departments and their employees.
• Image: images://employee-tutorial/departments.png
• Image Mode: Fill

6. Select BrowseEmployee in the Folders and Actions table of the editor, select the Display Properties finger tab and then enter the following values:

• Description: Browse all employees and contractors.
• Image: images://employee-tutorial/employees.png
• Image Mode: Fill

7. Select BrowseOrgChart in the Folders and Actions table of the editor. Select the Display Properties finger tab in the Properties view and then enter the following values:

• Description: Browse the organization chart in a hierarchy and their employees.
• Image: images://employee-tutorial/orgchart.png
• Image Mode: Fill

Add the BrowseContractors action

You will now create a new action to browse contractors using the Contractors business view you created earlier.

1. Select Browse in the Folders and Actions table and then click Add Action.

2. Enter the following values and then click Next:

• Name: BrowseContractors
• Action Type: Browse Business View

3. Set the Business View to Contractors and then click Next.

4. Enter the following values and then click Finish:

• Select Use Custom Label
• Label: Contractors
• Description: Browse contractors only.
• Icon: images://mdi/worker.svg
• Image: images://employee-tutorial/contractors.png

5. Expand the Browse folder in the Folders and Actions table of the editor.

6. Select BrowseContractors of the editor. Select the Display Properties finger tab of the Properties view and then set the Image Mode to Fill.

7. Drag and drop the following actions into the Browse folder:

• BrowseDepartment
• BrowseEmployee
• BrowseOrgChart

8. Order the actions in the Browse folder as below with the Move Up and Move Down buttons:

• BrowseEmployee
• BrowseContractors
• BrowseOrgChart
• BrowseDepartment

9. Save your work.
10. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

Congratulations

You have configured the folder structure and application actions. In the next step, you will configure the Navigation Drawer.

The goal of this step is to configure the main menu (Navigation Drawer) of the application.

The menu will have 4 items:

• Search: Opens the Global Search.
• Inbox: Opens the Inbox (used in workflows).
• Take Action: Opens the Take Action folder you created earlier.
• Browse: Opens the Browse folder you created earlier.

To build the Navigation Drawer for your application, follow these steps:

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Applications > EmployeeTutorial in the Model Design View and double-click Navigation Drawer.

3. Select RootFolder in the Groups table view and then click Delete.

4. Click OK to confirm the deletion.

5. Select Add Group in the Groups section.

6. Enter the following values and then click Finish:

• Name: SearchAndInbox
• Unselect Show Label
• Unselect Divider

7. Select SearchAndInbox in the Groups table view and then click the Add Item button.

8. Set the Action to Global Search [Global Search] and then click Finish.

9. Select and expand SearchAndInbox in the Groups table view and then click Add Item.

10. Set the Action to Inbox [Inbox] and then click Finish.

11. Select Add Group in the Groups section.

12. Set the Name to Employees and then click Finish.

13. Select Employees in the Groups table view and then click Add Item.

14. Set the Action to TakeAction [Folder] and then click Finish.

15. Select and expand Employees in the Groups table view and then click Add Item.

16. Set the Action to Browse [Folder] and then click Finish.

17. Save your work.
18. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

Now it's time to see your changes reflected in your application.

You can now watch the results of your hard work in your application.

1. Open your application from the Welcome Page. Notice the updated avatar.

2. Open the user menu on the top-right corner, and then select Refresh Application.

3. The navigation menu has been updated. Select Take Action.

4. The menu offers the following actions:

• New Employee takes you to the Author Employees stepper to create a new employee.
• Import Employees takes you to the Author Employees stepper to import employees.
• New Department takes you to the Author Departments stepper to create a new department.

5. Select Browse in the Navigation Drawer.

6. The menu offers the following actions:

• Employees: takes you to the employee business view.
• Contractors: takes you to the employee business view filter on contractors.
• Org. Chart: takes you to the employee hierarchy view by managers.
• Departments: takes you to the employee hierarchy view by departments.

Congratulations

Good job! The application looks much better for your business users.

In the next step, you will add some external content to your application.

Semarchy xDM allows you to embed external content through URLs in your application. You can configure actions in your folders that open an external link in a separate browser window/tab, or embedded within the application.

Create the GDPR action

You will now add a link to an external resource about the GDPR.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Applications > EmployeeTutorial in the Model Design View and double-click Folders and Actions.

3. Select Root in the Folders and Actions table and then select Add Action.

4. Enter the following values and then click Next:

• Name: GDPR
• Action: Open URL

5. Enter the following value and then click Next:

• URL: https://ec.europa.eu/info/law/law-topic/data-protection

6. Finally, enter the following values and then click Finish:

• Select Use Custom Label
• Label: GDPR
• Description: General Data Protection Regulation
• Icon: images://mdi/bank.svg

7. Select GDPR in the table view of the editor. Select the Display Properties finger tab of the Properties view and then set the Icon Color to md:amber.

8. Save your work.

Add the GDPR action to the Navigation Drawer

You will now add the new action to the Navigation Drawer.

1. Open the HRTutorial model in the Application Builder.
2. Navigate to Applications > EmployeeTutorial in the Model Design View and then double-click Navigation Drawer.

3. Select Add Group in the Groups section.

4. Set the Name to ExternalLinks and then click Finish.

5. Select ExternalLinks in the Groups table view and then click Add Item.

6. Set the Action to GDPR [Open URL] and then click Finish.

7. Save your work.
8. In the Application Builder, right-click on the root node in the Model Design View, corresponding to the HRTutorial [0.0] model, and then select Validate. The validation report should raise no error.

See your changes

Let's see the new external link in your application.

1. Open your application from the Welcome Page.

2. Open the user menu on the top-right corner and then select Refresh Application.

3. The navigation menu has been updated. Select GDPR.

4. The GDPR website opens in a new tab.

You have successfully added to your application an external link.

Excellent job following this unit and completing the Build Your First Data Authoring Application track! With this unit, you've learned how to customize the search experience, the branding, and the navigation in your application. You now have a complete and user-friendly application for data authoring.

What we've covered

• Search: You created your own search forms and customized the Global Search.
• Image Library: You added an image library to load your own set of images.
• Application Navigation: You customized the application branding, folders & actions, and the Navigation Drawer.
• External Links: You added a link to an external resource to the Navigation Drawer.

What's next?

If you have not done so already, you can follow the Data Consolidation track and create a customer B2B application to consolidate data from various sources, or the Integration track to learn how to query and load data via using the SQL and REST APIs.