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

KD.library.util.PanelBuilder

  1. Last updated
  2. Save as PDF

 

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.

Requirements

  • 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="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/container/assets/skins/sam/container.css">
 
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

KD.library.util.PanelBuilder.renderPanel(
  // 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="http://www.google.com">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 http://developer.yahoo.com/yui/container/dialog/)
    //   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}
);

Sample

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.