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.

         <title>Sample app</title>
         <script src="sdk/scripts/VSS.SDK.js"></script>
  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
         // 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
  4. Refresh the page to see the grid.

    Grid control on the hello world page

Try these next