WebPart Tabs

This webpart displays the associated webparts within its zone in tabs.

Constructor

The constructor allows the developer to specify a static configuration. An optional configuration webpart exists to allow the user to specify the configuration when editing the page.

Configuration

  • ListName:string
    • The list name
  • WebUrl:string
    • The relative url to the web containing the list.

Query Options Specify the following values in the constructor:

  • _caml:string
    • The CAML query to execute against the target list.
  • _query:ODataQuery
    • The OData query to execute against the target list.

Events

  • onRenderFooter
    • An optional event to render custom components below the tabs.
  • onRenderHeader
    • An optional event to render custom components above the tabs.

Configuration WebPart (Optional) The list configuration webpart displays a custom panel to allow the user to select the following:

  • List
    • Drop down list of available lists in the target web
  • Web Url
    • Relative url to the web containing the list
    • A blank value defaults to the current web

Additional Information

Reference this github project for an example of using the Tabs webpart.

Code Example

import { WebPart, WebPartTabs } from "gd-sprest-react";

export class Tabs {
    constructor() {
        // Create an instance of the webpart
        WebPart({
            displayElement: WebPartTabs,
            targetElementId: "wp-tabs"
        });
    }
}