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

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:

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

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:

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:

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:

(/* 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) || '%')
       )
    )
)
(    /* 2. Filter by department */
       (:DEPARTMENT is null)
    or (FID_Department = :DEPARTMENT)
)
(    /* 3. Exclude contractors eventually */
    (:EXCLUDE_CONTRACTORS is null)    
    or (:EXCLUDE_CONTRACTORS = '0')
    or (:EXCLUDE_CONTRACTORS = '1' and IsContractor = '0')
)
(    /* 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Select RESET to clear the search results.

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

  1. Select RESET to clear the search results.

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

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

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

  1. Select Exclude Contractors? and then click APPLY.

  1. Select Active Only? and then click APPLY.

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

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

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

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

  1. Enter the following values and then click ADD:

  1. Select SAVE AS.

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

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

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

  1. Search for richard cameron click the Search button.

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

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

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

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

  1. 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) || '%')
       )
    )
)

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

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

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

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

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

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

  1. Set the Search Parameter to SearchString.

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

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

  1. Select Global Search in the Navigation Drawer.

  1. Search for richard cameron click the Search button.

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

  1. Try other searches:

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

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

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.

  1. Select Image Libraries from the Overview.

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

  1. Click Add to load the image files provided with the tutorial.
  1. Select all the files contained in the data-authoring\pictures\image-library folder of the tutorial resources and then click Open.
  2. Once the files are loaded, set the Target Library to Create a new library.

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

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

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

  1. Click Select Image next to the Avatar property.

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

  1. Repeat the same operation for the following properties:

  1. The Branding section should look like this:

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

  1. Save your work.

See your changes in action

  1. Open your application from the Welcome Page.

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

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

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

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

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

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

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

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

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

  1. Enter the following SemQL expression and then click OK:
IsContractor = '1'
  1. Save your work.
  2. 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:

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.

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

  1. Select OK to confirm the deletion.
  2. 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.

  1. Enter the following values and then click Finish:

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

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

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

  1. Enter the following values and then click Next:

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

  1. Enter the following values and then click Finish:

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

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

  1. Enter the following values and then click Next:

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

  1. Enter the following values and then click Finish:

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

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

  1. Enter the following values and then select Next:

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

  1. Enter the following values and then click Finish:

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

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

  1. Enter the following values and then click Finish:

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

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

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

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

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

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.

  1. Enter the following values and then click Next:

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

  1. Enter the following values and then click Finish:

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

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

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

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

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

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.

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

  1. Click OK to confirm the deletion.

  1. Select Add Group in the Groups section.

  1. Enter the following values and then click Finish:

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

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

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

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

  1. Select Add Group in the Groups section.

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

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

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

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

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

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

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

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

  1. The menu offers the following actions:

  1. Select Browse in the Navigation Drawer.

  1. The menu offers the following actions:

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.

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

  1. Enter the following values and then click Next:

  1. Enter the following value and then click Next:

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

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

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

  1. Select Add Group in the Groups section.

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

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

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

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

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

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

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

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.