There are two ways to add a tab in Places Administration for a custom resource. You can either use iframes to embedded a Web page into a new, or create a JavaScript to render the content of the tab dynamically based on an extension point.

There are two ways to add a tab in Places Administration for a custom resource. You can either use iframes to embedded a Web page into a new, or create a JavaScript to render the content of the tab dynamically based on an extension point.

Use the <tab> element to create a new tab and configure the ui.extension.config property to reference your resource.

To create a tab that embeds a Web page using iframes, use the <tag> element with the following attributes and elements:

Supported <tag> attributes:

url: Defines the src attribute used by the <iframe> element. After clicking the new tab, the Web content from that resource will be displayed in the Places Administration content area.

width: Defines the width attribute used by the <iframe> element. By default, it's set to 100 percent.

height: Defines the height attribute used by the <iframe> element. By default, it's set to 800 pixels.

scrolling: Defines the scrolling attribute used by the <iframe> element. By default, it's set to auto.

Supported <tag> elements:

<title>: Defines the name of the tab. The lang attribute is required for this element and is used to support globalization (g11n). If no language code is provided, the title with the attribute of lang="en" will be the default name used.

<tips> (Optional): Defines the content in the tip box for that tab. The lang attribute is required and is used to support globalization (g11n). If no language code is provided, the tip with the attribute of lang="en" will be the default tip used.

The following sample illustrates how to use these attributes and elements.

<!-- extend Places Administration by creating a new tab -->

<extension>

<!-- define the properties of the new tab -->

<tab url="http://www.ibm.com/" height="600" scrolling="yes">

<!-- defines the title of the new tab in English -->

<title lang="en">

My new tab

</title>

<!-- defines the title of the new tab in Spanish -->

<title lang="es">

My new tab

</title>

<!-- Content for tips box in English -->

<tips lang="en">

A tip about what to do in this new tab

</tips>

<!-- Content for tips box in Spanish -->

<tips lang="es">

A tip about what to do in this new tab

</tips>

</tab>

</extension>

To create a tab that uses JavaScript to render content dynamically, for example, by invoking a dojo widget, use the <tag> element with the following attributes and elements:

Supported <tag> attributes:

method: Defines the JavaScript function that is used to render the page content and must match the name of that function.

script: Defines the JavaScript file containing the function that is used to render page content. This JavaScript file should be in the WAR that has been deployed. For example, if the JavaScript file is located in http://hostname/AdminUIExtension/js/SampleExtTab.js then this value should be set to /AdminUIExtension/js/SampleExtTab.js.

Supported <tag> elements:

<title>: Defines the name of the tab. The lang attribute is required for this element and is used to support globalization (g11n). If no language code is provided, the title with the attribute of lang="en" will be the default name used.

<tips> (Optional): Defines the content in the tip box for that tab. The lang attribute is required and is used to support globalization (g11n). If no language code is provided, the tip with the attribute of lang="en" will be the default tip used.

The following sample illustrates how to use these attributes and elements.

Note: When you create a new tab, the content is rendered based on the HTML Document Object Model (DOM). The HTML DOM represents an HTML document as a tree, where each HTML element and attribute is viewed as a node. By default, the content is appended to the /*HTML DOM node*/node. This is the area next to the Tips that contains the main content of the tab. This can be overwritten.