Button

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.1 documentation.

The button component provides a simple, clickable action button.

button

Button includes the following topics:

Create a Button

First include the App SDK JavaScript:

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

Instantiate a new Button

var button = new rally.sdk.ui.basic.Button(config);

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

Parameter Description Examples
config* A configuration object 
{ text: "Click Here" }

 

* = required parameter

The Button configuration object supports the following properties:

Parameter Description
text* The text to be displayed on the button
value A value to be associated with the button
enabled Whether the button is enabled
(Default = true)

* = required parameter

Display a Button

After you create the button, use the display method to display the button:

button.display(domElement, onClick);
Parameter Description Examples
domElement* The element in which to display the button.
This may be either an element or an element ID.		 
"buttonSpan", document.getElementById("buttonSpan")
onClick A callback function that will be executed each time the button is clicked. 
function onClicked(sender, eventArgs) {
var buttonValue = eventArgs.value; }

* = required parameter

Public Methods

Method Name Parameters Description Example
display See above - See above
destroy - Removes the component from the app. 
button.destroy();
getEnabledValue - Returns the enabled state of the button. 
button.getEnabledValue();
getValue - Returns the value as specified in the constructor config. 
var value = button.getValue();
setEnabled enabled Enables or disables the button as specified. 
button.setEnabled(false);

Events

Events are used to notify users 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 =
component.addEventListener(...);
component.removeEventListener(eventObj);

Example

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

<!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 --> <html> <head>    <title>Button Example</title>
   <meta name="Name" content="Component Example: Button" />
    <meta name="Version" content="2010.4" />
    <meta name="Vendor" content="CA Agile Central Software" />
    <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
    <script type="text/javascript">

   function onClick(b, args) {
      var buttonValue = args.value;
      console.log("Clicked!");
    }

    function onLoad() {

       var config = {
       text: "+ Add",
       value: "myValue"
    };

    var button = new rally.sdk.ui.basic.Button(config);
    button.display("buttonDiv", onClick);
    }

    rally.addOnLoad(onLoad);
   </script>
</head>
<body>
<div id="buttonDiv"></div>
</body>
</html>

Feedback

Benötigen Sie weitere Informationen? Die CA Agile Central-Community ist Ihre zentrale Anlaufstelle für Self-Service und Support. Treten Sie der CA Agile Central-Community bei, um dem CA Agile Central-Support Feedback mitzuteilen oder Fälle zu melden, Antworten zu finden oder mit anderen Benutzern zusammenzuarbeiten.