Split USD Layout to Display Multiple Controls

Leave a comment

In Unified Service Desk, you may want to display 2 hosted controls within the same USD tab at the same time.

For example, let’s say USD loads and displays 2 hosted controls showing Google and Bing – the user can only see one hosted control at a time:

We will go through setting this up so the hosted controls are side by side, i.e. a vertical split, and then change this to a horizontal split.

First, create a new hosted control that will house the split. We will call this Search Engines, as we are hosting both search engine controls in this one. The type should be Panel Layout. Note the options for Panel Type. We will select Vertical Split:

  • Standard Main Panel
  • Ribbon Main Panel (internal use only)
  • Vertical Split
  • Horizontal Split
  • XAML
  • User Defined

Next we will change our Google Hosted Control. You can see we currently have it displaying in the MainPanel:

We will change this to Search Engines/LeftPanel:

And for Bing Search Engines/RightPanel:

 

Start USD. You will see Search Engines load in vertical split screen:

Now if we want to change this to horizontal layout:

You will see:

Now if we want to control the height or width, we can use the actions:

  • SetTopPanelHeight
  • SetBottomPanelHeight
  • TopPanel
  • BottomPanel

For example, to set the height:

The top panel height is now set:

The splitter can also be manually resized.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 1 =