Service UI Frame

The Service UI Frame control allows the user to view services and comes with easy to configure appearance and behavior options.  The Service List control lists the services, and the Service UI Frame control displays the selected service.

Note that not all services will have a UI which displays cleanly.

Like all Portal Builder controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).



Style of Content The specified style of the frame.  The name of the CSS file, the type, and the app acronym

     Css file Name of the CSS file

     Css Type Web, External, Server, Design 

     App acronym The Process App acronym, e.g.   

Width The width of the frame, e.g 50px, 100%, default unit is in px if not specified

Height The height of the frame, e.g 50px, 100%, default unit is in px if not specified


Navigate On Task Closed Will have the control fire a boundary event when the frame is closed


Here are the Task List configuration option settings...


Note: The Control Id of the Service UI Frame is Service_UI_Frame1


The Service UI Frame configuration option settings...


The Custom HTML (this changes the sub-type to an icon, see Font Awesome for a list of icons)....


When the page first loads...

When a service is selected, that service is displayed...


With the Service UI Frame control, there are 5 types of event handlers:

  • On Load When the page loads, Note that this particular event is only fired ONCE per page load
  • On Service Open When a service is opened
  • On Service Closed When a service is closed
  • On Service Unavailable When a service is not available
  • On Status Changed When the status of a service has changed

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article. 


For detailed information on the available methods for this control, access the JS Doc file.


  • Author: Courtney Silva
  • Date Created: February 25, 2016
  • Date Modified: March 1, 2016



Was this article helpful?
0 out of 0 found this helpful