Walkthrough 2: Display an external webpage 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 http://go.microsoft.com/fwlink/?LinkID=856273, in the client application.

Prerequisites

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 Common Data Service platform.

  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

    Standard Web Application hosted control

  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 Common Data Service platform.

  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

    Toolbar Container hosted control

  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 Common Data Service platform.

  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

    Create a new toolbar button

  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.

    Choose New to create an action call

  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=http://go.microsoft.com/fwlink/?LinkID=856273

    Create an action call in Unified Service Desk

  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

    Create an action call in Unified Service Desk

  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.

    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 Common Data Service platform.

  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 Common Data Service platform 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 the Common Data Service platform 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:

Show Help button in Unified Service Desk

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

Help displayed in the client 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