Walkthrough 3: Display model-driven apps (Unified Interface apps) records in your agent application
This walkthrough demonstrates how to display model-driven app records in your agent application. In this walkthrough, you’ll display all the account and contact records in the model-driven apps. You’ll also create a search button with drop-down menu items for displaying accounts and contacts in the agent application.
Prerequisites
You must have completed Walkthrough 1: Build a simple agent application for Unified Interface Apps. The configurations that you completed in walkthrough 1 are required in this walkthrough.
This walkthrough assumes that you will be using the same user credential that you used in walkthrough 1 to sign in to the agent application at the end of the walkthrough to test the application. If a different user will be testing the application, you must assign the user to Contoso Configuration. More information: Walkthrough 1: Build a simple agent application for Unified Interface Apps
You must know about the following in Unified Service Desk:
The following two types of hosted controls: Unified Interface Page and Toolbar Container. More information: Hosted control types and action/event reference
Action call and how to configure it. More information: Action calls
Filter access using Unified Service Desk configuration. More information: Manage access using Unified Service Desk configuration
In This Walkthrough
Step 1: Create Unified Interface Page type of hosted controls to display account and contact records
Step 2: Create a toolbar container type of hosted control
Step 3: Add a toolbar and attach it to the toolbar container
Step 4: Add toolbar buttons and action calls to display records
Step 5: Add the controls to the configuration
Step 1: Create Unified Interface Page type of hosted controls to display account and contact records
In this step, you’ll create two hosted controls of Unified Interface Page type to display the account and contact records respectively.
Sign in to Unified Service Desk Administrator.
Select Hosted Controls under Basic Settings.
Select + New.
On the New Hosted Control page, specify the following values:
Field Value Name Contoso Accounts Search Display Name Contoso: Accounts Unified Service Desk Component Type Unified Interface Page Allow Multiple Pages No Pre-Fetch Data Checked Application is Global Checked Display Group MainPanel Select Save.
Select + New to create another hosted control for displaying contact records.
On the New Hosted Control page, specify the following values:
Field Value Name Contoso Contacts Search Display Name Contoso: Contacts Unified Service Desk Component Type Unified Interface Page Allow Multiple Pages No Pre-Fetch Data Checked Application is Global Checked Display Group MainPanel Select Save.
Step 2: Create a toolbar container type of hosted control
Toolbar Container type of hosted controls are used to hold and display the toolbars in Unified Service Desk. In this section, you’ll create a Toolbar Container hosted control that will appear at the top of the client application.
Sign in to Unified Service Desk Administrator.
Select Hosted Controls under Basic Settings.
Select + New.
On the New Hosted Control page, specify the following values
Field Value Name Contoso Main Toolbar Container Unified Service Desk Component Type Toolbar Container Display Group ToolbarPanel Select Save.
Step 3: Add a toolbar and attach it to the toolbar container
In this step, you’ll create a toolbar, and attach the toolbar to the toolbar container hosted control created in step 2. This is done to display the toolbar in your agent application.
Sign in to Unified Service Desk Administrator.
Select Toolbars under Basic Settings.
Select + New.
On the New Toolbar page, type Contoso Main Toolbar in the Name box, and then select Save.
Attach the toolbar to the toolbar container hosted control created in step 2. Select the Related tab, and then select Hosted Controls.
Select Add Existing Hosted Control. The Lookup Records pane is displayed.
Type Contoso Main Toolbar Container in the search box. Select the record from the list, and then select Add.
Select Save.
Step 4: Add toolbar buttons and action calls to display records from Unified Interface Apps
In this step, you’ll add buttons on the toolbar and attach action calls to the buttons so that when the button is selected, appropriate records are displayed in the hosted controls that were created in step 1. You’ll configure the search button so that selecting the button displays the account and contact submenu items, and selecting a button displays the respective records.
After you save the toolbar in step 3, Select the General tab.
In the Buttons area, select + New Toolbar Button.
On the New Toolbar Button page, specify the following values:
Field Value Name Contoso Search Button Button Text SEARCH Tooltip Search accounts and contacts Order 1 Select Save.
Select the Related tab and select Toolbar Buttons.
Note
You are now adding child toolbar buttons to an existing toolbar button to create a submenu structure.
On the next page, select + New Toolbar Button.
On the New Toolbar Button page, specify the following values.
Field Value Name Contoso Search Account Button Button Text Account Order 1
The Order field defines the position of buttons in the toolbar. Buttons are arranged from left to right or top to bottom in an ascending order.Select Save.
You’ll now add two action calls: first to display the account records in the hosted control created in step 1 and the second one on the Contoso Global Manager hosted control to display the account hosted control.
In the Actions area, select Add Existing Action Call. The Lookup Records pane is displayed.
Select the search icon and then select + New Action Call.
On the New Action Call page, specify the following values:
Field Value Name Contoso Action Call: Search Account Order 1 Hosted Control Contoso Accounts Search Action Find Data account Select Save. The new action call gets added to the Contoso Search Account Button button.
Select the back button on the browser to go back to the Contoso Search Account Button page.
You’ll add another action call to the button to set the focus on the hosted control that displays the account records in the client application.
Repeat Steps 9 to 11 and specify the following values.
Field Value Name Contoso Action Call: Display Account Search Order 2 Hosted Control Contoso Global Manager Action ShowTab Data Contoso Accounts Search Select Save.
Repeat Step 13, and then select Add Existing Action Call. The Lookup Records pane is displayed.
Type Contoso Action Call in the search box. Select the action that you created in the Step 11 and 14, and then select Add.
The new action call gets added to the Contoso Search Account Button button.
Navigate to Contoso Search Button toolbar button to add a child button for searching and displaying contacts. Select the Toolbar Buttons tab.
Select Add New Toolbar Button.
On the New Toolbar Button page, specify the following values:
Field Value Name Contoso Search Contact Button Button Text Contact Order 2
The Order field defines the position of buttons in the toolbar. Buttons are arranged from left to right or top to bottom in an ascending order.Select Save.
You’ll now add two action calls: first to display the contact records in the hosted control that were created in step 1 and the second one on the Contoso Global Manager hosted control to display the contacts hosted control.
In the Actions area, select Add Existing Action Call. The Lookup Records pane is displayed.
Select the search icon and then select + New Action Call.
On the New Action Call page, specify the following values:
Field Value Name Contoso Action Call: Search Contact Order 1 Hosted Control Contoso Contacts Search Action Find Data contact Select Save.
Select the back button on the browser to go back to the Contoso Search Button.
You’ll add another action call to the button to set the focus on the hosted control that displays the contact records in the client application.
Repeat Steps 22 to 23, and specify the following values.
Field Value Name Contoso Action Call: Display Contact Search Order 2 Hosted Control Contoso Global Manager Action ShowTab Data Contoso Contacts Search Select Save.
Select the back button on the browser to go back to the Contoso Search Button.
Select Add Existing Action Call. The Lookup Records pane is displayed.
The action calls that you created are displayed. Select the action calls, and then select Add.
The new action call gets added to the Contoso Search Contact Button toolbar button.
Select Save.
Step 5: Add the controls to the configuration
In this step, you’ll add the action calls, hosted controls, and toolbar that were created in this walkthrough to Contoso Configuration to display these controls to the user who is assigned to the configuration. Contoso Configuration was created in Walkthrough 1: Build a simple agent application for Unified Interface Apps.
Add the following to Contoso Configuration.
| Control name | Control type |
|---|---|
| Contoso Action Call: Search Account | Action Call |
| Contoso Action Call: Display Account Search | Action Call |
| Contoso Action Call: Search Contact | Action Call |
| Contoso Action Call: Display Contact Search | Action Call |
| Contoso Accounts Search | Hosted Control |
| Contoso Contacts Search | Hosted Control |
| Contoso Main Toolbar Container | Hosted Control |
| Contoso Main Toolbar | Toolbar |
To add a control to the configuration:
Sign in to Unified Service Desk Administrator.
Select Configuration under Advanced Settings.
Select Contoso Configuration to open the definition.
Select the Hosted Controls, Events and Action Calls tab.
Select the ellipsis (...) in the Action Calls section, and then select Add Existing Action Call. The Lookup Records pane is displayed.
Type the name of the action call mentioned in the above table in the search box. The action calls are displayed in the search results. Select the record from the list, and then select Add.
Select the ellipsis (...) in the Hosted Controls section, and then select Add Existing Hosted Control. The Lookup Records pane is displayed.
Type the name of the hosted control mentioned in the above table in the search box. The hosted controls are displayed in the search results. Select the record from the list, and then select Add.
Select the Toolbars, Window Navigation Rules and Entity Searches tab.
Select the ellipsis (...) in the Toolbars section, and then select Add Existing Toolbar. The Lookup Records pane is displayed.
Type Contoso Main Toolbar in the search box. Select the record from the list, and then select Add.
Select Save.
Step 6: Test the application
Start the Unified Service Desk client application, and sign in to the Dynamics 365 instance where you configured Unified Service Desk using the same user credentials that you assigned to the Contoso Configuration in Walkthrough 1: Build a simple agent application for Unified Interface Apps. For information about connecting to Dataverse instance using the Unified Service Desk client application, see Connect to a model-driven instance using the Unified Service Desk client.
Your agent application will now have a SEARCH button in the toolbar area with two child buttons (Account and Contact) that are displayed on selecting the down arrow.
Select Account or Contact under the SEARCH button to display the respective records from your instance in separate tabs in the Unified Service Desk client application.
Conclusion
In this walkthrough, you learned how to display model-driven app records in the Unified Service Desk client application. You also learned how to filter access to Unified Service Desk controls using configuration.
See also
Support for Unified Interface Apps in Unified Service Desk
Unified Interface Page (Hosted Control)
Unified Service Desk and Unified Interface Configuration Walkthroughs
Walkthrough 1: Build a simple agent application for Unified Interface Apps
Walkthrough 2: Display an external webpage in your agent application
Walkthrough 4: Display a Unified Interface apps record in a session in your agent application
Walkthrough 5: Display enhanced session information by displaying session name and overview data
Walkthrough 6: Configure the Debugger hosted control in your agent application
Walkthrough 7: Configure agent scripting in your agent application
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for