Shell.UI.Pivots.js

Article
08/24/2015

Applies To: Windows Azure Pack

Provides methods to manage pivot links on an extension page.

Pivots are the links under the main title of an extension page that are used to navigate to subpages.

Widgets

None.

Enums

None.

Types

Shell.UI.Pivot(id, displayName, template, activated, image, visible, navFilter)

Name	Type	Description
id	Object	The Pivot identifier
displayName	String	The Pivot display name.
template	Object	The pivot template.
activated	Function	The Pivot activated callback function.
image	Object	The Pivot image.
visible	Boolean	The pivot visibility.
navFilter	Object	The Pivot navigation filter.

Shell.UI.PivotImageDescriptor(url, urlHover, altText)

Name	Type	Description
url	String	URL to the image.
urlHover	String	URL to the hover image.
altText	String	The image alternative text.

Properties

Name	Type	Description
Shell.UI.Pivot.displayName	String	The Pivot display name.
Shell.UI.Pivot.id	Object	The pivot identifier.
Shell.UI.Pivot.image	Object	The pivot image.
Shell.UI.Pivot.navFilter	Object	The Pivot navigation filter.
Shell.UI.Pivot.template	Object	The Pivot template.
Shell.UI.Pivot.visible	Boolean	The Pivot visibility. true if the Pivot is visible, otherwise false.
Shell.UI.PivotImageDescriptor.altText	String	The alternative text for the Pivot image.
Shell.UI.PivotImageDescriptor.url	String	The Pivot image URL.
Shell.UI.PivotImageDescriptor.urlHover	String	The Pivot image URL for the hover image.

Methods

Name	Description	Returns	Parameters
Shell.UI.Pivots.add	Adds the list of pivots to the specified list of pivots.	Nothing	extensionId (String): The id of the extension the pivots are being added for. pivot (Array): The pivots to be added. Can also take a single Shell.UI.Pivot too.
Shell.UI.Pivots.clear	Removes all pivots for the active extension.	Nothing	extensionId: The extension the Pivot belongs to.
Shell.UI.Pivots.getPivotContentArea	Gets the Pivot content area.	Object	None.
Shell.UI.PivotImageDescriptor.getQuickStartIcon	Gets the image descriptor quick start icon. Returns a PivotImageDescriptor object containing the image URL, hover image URL and alternative text.	Object	None
Shell.UI.Pivots.insert	Inserts a pivot at the position specified.	Nothing	extensionId (String): The id of the extension the pivots are being added for. pivot (Shell.UI.Pivot): The pivots to be inserted. position (Number): The position to insert the pivot at.
Shell.UI.Pivots.registerExtension	Registers the extension.	Nothing	Extension: The extension to be registered. initializeCallback: The callback function for initialization.
Shell.UI.Pivots.remove	Removes the specified pivot from the list of pivots.	Nothing	pivot (Shell.UI.Pivot): The pivot to be removed.
Shell.UI.Pivots.set	Sets the pivots.	Nothing	extensionId (String): The id of the extension the pivots are being added for. pivot (Array): The pivots to be set. Can also take a single Shell.UI.Pivot too.
Shell.UI.Pivots.update	Updates the Pivot List	Nothing	extensionID: The Pivot extension identifier.

Examples

The first step is to create the tabs object.

tabs: [
    {
        id: "timeZoneList",
        displayName: "Time Zones",
        template: "tzsTimeZoneList",
        activated: tzs_opened
    },
    {
        id: "secondTab",
        displayName: "Another Tab",
        template: "tzsSecondTab"
    }
]

Because page switching is common in the user interface, it's a good idea to create a reusable function that will re-initialize the pivots every time the page is navigated to.

initializePivots: function() {
    Shell.UI.Pivots.clear(this.name);
    Shell.UI.Pivots.add(this.name, this.tabs);

    // Another way to add is to add the tabs individually
    // Shell.UI.Pivots.add(new Shell.UI.Pivot("timeZoneList", "Time Zones", "tzsTimeZoneList", tzs_opened));
    // Shell.UI.Pivots.add(new Shell.UI.Pivot("secondTab", "Another Tab", "tzsSecondTab"));
    Shell.UI.Pivots.update(this.name);
}

Share via