The common approach is to use Setup.addTab in the onLoad() handler function to create a new Tab object and assign UI components to it.

 var tab = Setup.addTab( "New Tab" );
 

<klip>
   <identity>
      <title>
         API: Tab
      </title>
   </identity>
   <locations>
      <contentsource>
         http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png   
      </banner>
   </locations>
   <style>
      alert {
         type: item;
      }

      sender {
         itemcol: 2;
         noterow: 1;

         label: 'Sender';

         emphasis: strong;
      }


      summary {
         itemcol: 3;
         noterow: 4;

         wrap: false;

         notelabel: false;
      }

      date {
         itemcol: 4;
         noterow: 2;

         label: 'Date';
      }

      category {
         noterow: 3;

         label: 'Category';
      }


      level {
         itemcol: 1;
         noterow: 5;
         notelabel: false;
         
         type: image;
      }

      url {
         type: link;
      }
            
      id {
         key: override;
      }
   </style>
   <klipscript>
   <![CDATA[

var button;

function onLoad() {

    // Create a new tab
    var tab = Setup.addTab( "New Tab" );

    //
    // tab is a Tab object that points to the first tab
    //
    
    tab.addText( "Welcome to Klipfolio Dashboard.");
    tab.addSpacer( true );				// we reference this with Setup[0][1]
    tab.addText( "Klipfolio Dashboard, the desktop dashboard for business.");
    tab.addSpacer( false );
    button = tab.addButton( "Klipfolio Inc." );
    button.url = "http://www.klipfolio.com/";
    
    trace( "URL for button: " + button.url + "\r\n" );

	// You can reference individual tab by using Setup[] as an array.
	// For example, Setup[0] is first tab and Setup[0][0] is UI component 
	// in the first tab.

    // trace( "What is the URL: " + Setup[0][4].url + "\r\n" );
}

function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}
  
   ]]>
   </klipscript>
</klip>

     	

 URL for button: http://www.klipfolio.com/
 

Properties Detail

length

integer length

Returns the number of UI components contained in this Tab (read-only).

name

String name

Specifies name of this Tab as displayed in the user interface.

You can change the name of a Tab after it is created.

addButton

Button addButton( <String> label )

Adds a Button component with the specified label this tab.

Parameters:
label - text for the button

Returns:
the new Button component

addCheckbox

Checkbox addCheckbox( <String> label )

Adds a Checkbox component with the specified label this tab.

Parameters:
label - text for the checkbox

Returns:
the new Checkbox component

addComboBox

ComboBox addComboBox( [<String> item1] [, <String> item2] [, etc ...] )

Adds a ComboBox component with the specified items to this tab.

Parameters:
item1 - first item in the checkbox
item2 - second item in the checkbox

Returns:
the new ComboBox component.

addListControl

ListControl addListControl( [<boolean> checked [, <boolean> multiselect [, <String> item1 [, <String> item2 [, etc ...]]]]] )

Adds a ListControl component to this tab. You can optionally specify whether or not the items have checkboxes, if the user select multiple entries, and a default list of items.

Note that any items added by this method will be neither checked nor selected.

Parameters:
checked - true to display a checkbox before each item. The default is false. [optional]
multiselect - true to all the user to check/select multiple items. The default is /false. [optional]
item1 - the first item in the list [optional]
item2 - the second item in the list [optional]

Returns:
the new ListControl component

addSpacer

Spacer addSpacer( [<boolean> line] )

Adds a Spacer component with the option of making it visible as a horizontal line.

Parameters:
line - true means show horizontal line [optional]

Returns:
the new Spacer component

addText

Text addText( <String> label )

Adds a Text component with the specified label this tab.

Parameters:
label - text to display

Returns:
the new Text component

addTextArea

TextArea addTextArea( [<String> text] )

Adds a TextArea component with the optional default text to this tab.

Parameters:
text - to initially fill in the textarea [optional]

Returns:
the new TextArea component

addTextField

TextField addTextField( <String> text [, <boolean> obscured] )

Adds a TextField component with default text to this tab.

Parameters:
text - to initially fill in the textfield
obscured - true to obscure the text with '*' characters [optional]

Returns:
the new TextField component

remove

boolean remove( <integer> index | <object> object )

Removes an existing component from the Tab.

Parameters:
index - of the item to remove
object - one of Button, Checkbox, Text, ComboBox, TextField, TextArea, Spacer, or ListControl component to remove.

Returns:
true if the component could be found and removed from the tab; otherwise, returns false.