Walkthrough 2: Display webpages and external URLs in your agent application

This walkthrough demonstrates how to display a webpage or external URL in your agent application. In this walkthrough, you’ll learn how to display the Unified Service Desk Guide, which is available online at https://go.microsoft.com/fwlink/?LinkID=856273, in the client application.

Prerequisites

• You must have completed Walkthrough 1: Build a simple agent application. The configurations that you completed in the first walkthrough are required in this walkthrough.

• This walkthrough assumes that you will be using the same user credential that you used at the end of Walkthrough 1 to sign in to the agent 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

• You must be familiar with the following concepts in Unified Service Desk:

  • These two types of hosted controls: Standard Web Application and Toolbar Container. More information: Hosted control types and action/event reference

  • How to configure Action calls

  • Filter access using Unified Service Desk configuration. More information: Manage access using Unified Service Desk configuration

In This Walkthrough

Step 1: Create a hosted control to display the webpage

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 a toolbar button and action calls to display the webpage

Step 5: Add the controls to the configuration

Step 6: Test the application

Conclusion

Step 1: Create a hosted control to display the webpage

In this step, you’ll create a hosted control of Standard Web Application type to display the webpage.

1. Sign in to the Dynamics 365 instance.

2. Go to Settings > Unified Service Desk.

3. Click Hosted Controls.

4. Click New.

5. On the New Hosted Control page, specify the following values:

   Field	Value
   Name	Contoso Help
   Display Name	Contoso Help
   USD Component Type	Standard Web Application
   Allow Multiple Pages	No
   Hosting Type	Internal WPF
   Application is Global	Checked
   Display Group	MainPanel

   

6. Click Save.

Step 2: Create a toolbar container type of hosted control

Toolbar Container hosted controls are used to hold and display the toolbars in Unified Service Desk. In this section, you’ll create a Toolbar Container type of hosted control that appears in the toolbar region of the client application.

1. Sign in to the Dynamics 365 instance.

2. Go to Settings > Unified Service Desk.

3. Click Hosted Controls.

4. Click New.

5. On the New Hosted Control page, specify the following values:

   Field	Value
   Name	Contoso About Toolbar Container
   USD Component Type	Toolbar Container
   Display Group	AboutPanel

   

6. Click 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.

1. Sign in to the Dynamics 365 instance.

2. Go to Settings > Unified Service Desk.

3. Click Toolbars.

4. Click New.

5. On the New Toolbar page, type Contoso About Toolbar in the Name box, and then click Save.

6. Attach the toolbar to the toolbar container hosted control created in step 2. On the nav bar, click the down arrow next to Contoso About Toolbar, and click Hosted Controls.

7. On the next page, click Add Existing Hosted Control, type Contoso About Toolbar Container in the search bar, and then press ENTER or click the search icon.

8. From the search results, select Contoso About Toolbar Container.

9. Click Save.

Step 4: Add a toolbar button and action calls to display the webpage

In this step, add a button on the toolbar and attach an action call to the button so that when the button is clicked, the specified webpage is displayed in the hosted control that you created in step 1.

1. After you save the toolbar in step 3, the Buttons area becomes available. In the Buttons area, click + on the right corner to add a button.

2. On the New Toolbar Button page, specify the following values.

   Field	Value
   Name	Contoso Show Help
   Button Text	Show Help

   

3. Click Save to save the record, and enable the Actions area.

4. Add two action calls to specify the URL of the webpage to navigate to for the hosted control that you created in step 1. Additionally, create another action call to on the Contoso Global Manager hosted control to display the hosted control created in step 1 in the agent application.

   In the Actions area, click + on the right corner to add an action call.

5. In the search box in the Actions area, press ENTER or click the search icon.

6. In the search results box, click New in the lower right corner to create an action call for this toolbar button.

   

7. On the New Action Call page, specify the following values:

   Field	Value
   Name	Contoso Action Call: Display Help
   Order	1
   Hosted Control	Contoso Help
   Action	Navigate
   Data	url=https://go.microsoft.com/fwlink/?LinkID=856273

   

8. Click Save. The new action call is added to the Contoso Show Help button.

9. Add another action call to the button to set the focus on the hosted control that displays the webpage in the client application. In the Actions area, click + in the right corner to add an action call.

10. In the search results box, click New in the lower right corner to create an action call for this toolbar button.

11. On the New Action Call page, specify the following values.

    Field	Value
    Name	Contoso Action Call: Display Help Hosted Control
    Order	2
    Hosted Control	Contoso Global Manager
    Action	ShowTab
    Data	Contoso Help

    

12. Click Save. The new action call gets added to the Contoso Show Help button. You can see both action calls added to the toolbar button.

    

Step 5: Add the controls to the configuration

In this step, add the action calls, hosted controls, and toolbar that you 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.

Add the following to Contoso Configuration.

Control name	Control type
Contoso Action Call: Display Help	Action Call
Contoso Action Call: Display Help Hosted Control	Action Call
Contoso Help	Hosted Control
Contoso About Toolbar Container	Hosted Control
Contoso About Toolbar	Toolbar

To add a control to the configuration:

1. Sign in to the Dynamics 365 instance.

2. On the nav bar, click Dynamics 365, and then select Settings.

3. Go to Settings > Unified Service Desk.

4. Click Configuration.

5. Click Contoso Configuration to open the definition.

6. On the nav bar, click the down arrow next to Contoso Configuration, and select Action Calls.

7. On the next page, click Add Existing Action Call, type “Contoso Action Call” in the search bar, and then press ENTER or click the search icon.

8. Both action calls are displayed in the search results. Add both of them.

9. Similarly, add both of the hosted controls and the toolbar by clicking the down arrow next to Contoso Configuration, and clicking Hosted Controls and Toolbars respectively.

10. Click 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 information about connecting to Dataverse instance using the Unified Service Desk client application, see Connect to a model-driven app instance using the Unified Service Desk client

Your agent application will now have a Show Help button at the top-right corner:

Clicking Show Help displays the specified web URL within the Unified Service Desk application.

Conclusion

In this walkthrough, you learned how to display a webpage in Unified Service Desk client application. You also learned how to filter access to Unified Service Desk controls using configuration.

See also

Walkthrough 1: Build a simple agent application
Walkthrough 3: Display records in your agent application
Walkthrough 4: Display a Microsoft 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
Walkthrough 8: Use Parature knowledge within your agent application
Unified Service Desk Configuration Walkthroughs