Configure UI Controls

Last Update: 9/26/2016

This example shows the steps before you can add a control to the hub that we created in Add a hub.

  1. Get the Client SDK and add it to your project.

    
    
  2. Reference the SDK from your HTML page.

    <head>
        <title>Sample app</title>
        <script src="sdk/scripts/VSS.SDK.js"></script>
    </head>
    
  1. Add a div element in the body of the page to contain the grid.

    <div id="grid-container"></div>
    
  2. In the script element, before calling VSS.notifyLoadSucceeded(), initialize the VSS SDK.

    // Sets up the initial handshake with the host frame
    VSS.init({
        // Our extension will explicitly notify the host when we're done loading
        explicitNotifyLoaded: true,
    
        // We are using some Team Services APIs, so we will need the module loader to load them in
        usePlatformScripts: true,
        usePlatformStyles: true       
    });
    
  3. Create a grid and load it with data. (Replace your current call to VSS.notifyLoadSucceeded() with the following snippet)

    // Load Team Services controls
    VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
        function (Controls, Grids) {
    
        // Initialize the grid control with two colums, "key" and "value"
        var dataSource = [];
        dataSource.push({key: "key", value: "value"});
    
        Controls.create(Grids.Grid, $("#grid-container"), {
            height: "1000px", // Explicit height is required for a Grid control
            columns: [
                // text is the column header text. 
                // index is the key into the source object to find the data for this column
                // width is the width of the column, in pixels
                { text: "Property key", index: "key", width: 150 },
                { text: "Property value", index: "value", width: 600 }
            ],
            // This data source is rendered into the Grid columns defined above
            source: dataSource
        });
        VSS.notifyLoadSucceeded();
    });
    
  4. Refresh the page to see the grid.

    Grid control on the hello world page

Try these next