Skip to main content

IMPORTANT - Product End of Life Statement - IMPORTANT

Request RE, Survey, and Calendar 1.5 Support Ending December 31, 2020
Contact Kinetic Data Support with Questions
Kinetic Community



This utility provides a simple to use strategy for building up YUI panels (see screenshots for examples).  The KD.library.util.PanelBuilder is a very small, basic wrapper for the YUI container widget.  The code within this library can easily be copied into a Kinetic Request service item or other web application when direct YUI widget interaction is desired.

The PanelBuilder utilities automates the following:
  • Applies the yui-skin-sam css class to the body element (required to utilize the YUI container css; IE things like the page masking of a dialog) on load of the page.

  • Defaults many of the common options used to generate panels/dialogs.

  • Stores a reference to each panel so that future calls to the same panel element refresh the content without rebuilding the actual container elements.


  • YUI DOM Event Library
  • YUI DragDrop Library (only when configuring panels/dialogs to be draggable)

  • YUI Container Library
  • YUI Container CSS
Sample Javascript Dependencies Section
<!-- Include the YUI dependencies -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" type="text/css" href="">
Sample Javascript Dependencies Section (From Kinetic Request)
<!-- Include the YUI dependencies -->
<script type="text/javascript" src="/kinetic/resources/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="/kinetic/resources/js/yui/build/container/assets/skins/sam/container.css">

Example Usage

  // PanelBuilder options
    // Required parameter; this needs to be a valid element Id or the panel will not display
    containerId: 'panelContainer',
    // Required parameter;
    panelId: 'modalPanel',
    // Optional parameter; this sets the header of the panel.
    panelHeader: "Modal Panel",
    // Optional parameter;
    panelBody: "Go <a href="">Google</a>!",
    // Optional parameter;
    panelFooter: "This is a panel footer!",
    // Optional parameter; this sets the type of panel to use, which can be any subclass of YAHOO.widget.Panel.
    //   YAHOO.widget.Dialog is handy to automatically create buttons (see
    //   YAHOO.widget.ResizePanel is a custom developed YUI Panel extension in the resorces/js/extensions directory of Kinetic Request.
    panelClass: YAHOO.widget.ResizePanel
  // YAHOO.widget.Panel configuration options (merged with defaults and passed directly to the panel object constructor)
  {modal: true}


Attached to this page is a sample implementation of KD.library.util.PanelBuilder.  To run the sample, copy the panel-builder.js file and the panelBuilderSample.html file to the same directory on your local machine and open the panelBuilderSample.html file within the browser of your choice.  Below is a screenshot of the sample.