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.

 

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.
 

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

https://www.youtube.com/carldesouza

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.comLinkedIn Twitter | YouTube

 

Leave a Reply

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