Deprecation Warning! The content below is only applicable for use within deprecated 1.x versions of CA Agile Central's App SDK. Use of the component(s) and/or code on this page is not supported. To develop custom apps within our current environments, please see App SDK 2.0 documentation.

The dialog component provides an easy way to create a modal dialog.


Dialog includes the following topics:

Create a dialog

First include the App SDK JavaScript:

<script type="text/javascript" src="/apps/[version]/sdk.js"></script>

Instantiate a new dialog:

var dialog = new rally.sdk.ui.basic.Dialog(config);

The parameters for rally.sdk.ui.basic.Dialog are as follows:

Parameter Description Examples
config* A configuration object. { title: "Hello World",
width: 300, id:"helloWorld",
content: "<div>Hello World!</div>"
  * = required parameter

The dialog configuration object supports the following properties:

Parameter Description
closable Whether the dialog may be closed
(default = true)
draggable Whether the dialog may be moved
(default = true)
title The text to be displayed in the dialog title bar
buttons An array of strings which will be displayed as buttons
content* An HTML string or node to display as the dialog content
height The dialog height in pixels
(by default the dialog will be sized according to its contents)
width The dialog width in pixels
(by default the dialog will be sized according to its contents)
  * = required parameter

Display a dialog

Once created, use the display method to display the dialog. The dialog will automatically be centered in the app.


Public methods

Method Name Parameters Description Example
display - Display the dialog in the app dialog.display();
destroy - Removes the dialog from the app and destroys its content dialog.destroy();
show - Reshow a dialog that was previously displayed and hidden dialog.show();
hide - Hide a dialog that was previously displayed dialog.hide();
getValidEvents - Returns an object containing the valid events for dialog var events = dialog.getValidEvents();


Events are used to notify consumers of a component when actions occur. The following methods are provided in order to interact with this component's events:

Method Parameters Description Example
addEventListener eventName*, listener*, scope Registers the specified listener with the component's queue for the specified event and returns an object which can be used to remove the event listener later. The listener parameter should be a function with two parameters: 1) the component that fired the event; 2) an eventArgs object with properties specific to the event being fired. This function will be called by the component when the event occurs. If the optional scope parameter was specified the function will be called on that object (such as scope.listener(sender, args);). function listener(sender, eventArgs) {
//Respond to event
var eventObj =
component.addEventListener(eventName, listener);
removeEventListener eventObj* Unregisters the specified event from the component.
The eventObj parameter should be the return value of addEventListener() when the listener was originally registered.
var eventObj =
getValidEvents - Returns an object with a property for each event name supported by the component. This is useful for passing as the first parameter to addEventListener(). var eventName = component.getValidEvents().onClick;

  * = required parameter

The dialog component supports the following events:

Event Name Description Event Arguments Example
onClose Fired when the dialog is closed This event has no arguments. function onDialogClosed(dialog,
eventArgs) {
dialog.addEventListener("onClose",   onDialogClosed);
onButtonClick Fired when a dialog button is clicked The eventArgs object passed to any event listeners
contains the button property. The value of the clicked button as specified by the config.
function onDialogButtonClicked(dialog,
eventArgs) {
   var button = eventArgs.button;

Static methods

Static methods are also provided in order to simplify showing dialogs.

Method Name Parameters Description Example
show config* Display a dialog based on the specified config. rally.sdk.ui.basic.Dialog.show({id: "dialog", content: "<div>Hello World!</div>"});
hide id* Hide the dialog with the specified ID. rally.sdk.ui.basic.Dialog.hide("dialog");

 * = Required parameter


Copy and paste the following into a CA Agile Central custom app page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2010 CA Agile Central Software Development Corp. All rights reserved -->
   <title>Dialog Example</title>
    <meta name="Name" content="Component Example: Dialog" />
    <meta name="Version" content="2011.03.12" />
    <meta name="Vendor" content="CA Agile Central Software" />
    <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
    <script type="text/javascript">

       var checkBox;
       var dropdown;

      function onDialogButtonClicked(d, args) {
          if(args.button === "Save") {
            //Save values here
             var showTasks = checkBox.getChecked();
          var type = dropdown.getValue();


      function createDialog() {
          var dialogDiv = document.createElement("div");

          var dropdownDiv = document.createElement("div");
          dropdownDiv.id = "dropdown";
          drop-down = new rally.sdk.ui.basic.Dropdown({label: "Type", showLabel: true, items:
             hierarchicalrequirement: "Story",
             defect: "Defect"

          var checkBoxDiv = document.createElement("div");
          checkBoxDiv.id = "checkbox";
          checkBox = new rally.sdk.ui.basic.CheckBox({label: "Show Tasks", showLabel: true});

          return dialogDiv;

      function onLoad() {
          var dialog = new rally.sdk.ui.basic.Dialog({title: "Settings", draggable: true,
            closable: true, buttons:["Save", "Cancel"],
               content: createDialog()});
          dialog.addEventListener("onButtonClick", onDialogButtonClicked);

    <style type="text/css">
       .dialogContent div {
          margin-bottom: 10px;


Need more help? The CA Agile Central Community is your one-stop shop for self-service and support. To submit feedback or cases to CA Agile Central Support, find answers, and collaborate with others, please join us in the CA Agile Central Community.