Using the JSON Display Provider

The Lightning Conductor Web Part for Microsoft® SharePoint®, provides several different ways of displaying the aggregated content from lists and libraries. You can select one of the display providers on the Web Part tab on Configure Lighting Conductor Web Part dialog:

• SPGridView Display Provider
• XSL Style Display Provider
• JSON Display Provider.
  

The JSON display provider allows you to configure the Lightning Conductor Web Part to display the aggregated content using client-side code. Use this option if you have a developer with knowledge of SharePoint, JavaScript and most likely JQuery. The SPGridView Display Provider is most suited to users who have no coding experience.

This page describes how to configure the Lightning Conductor Web Part (LCWP) to use the JSON Display Provider, and the JavaScript you need to include.

Procedure

1. Open the Configure Lightning Conductor Web Part dialog.
   
   
2. On the Web Part tab, in the Configure Display Provider section, select JSON provider.
   
   The Display tab disappears as you will need to provide JavaScript to render the content.
   
   
3. Use the Data Source and Column tabs to select the content you wish to aggregate.
   
   
4. At the bottom of the Configure Lightning Conductor Web Part dialog, click Save.
   
   The Web Part properties are updated and the Web Part attempts to call a JavaScript function with a signature LightningConductor(jsonData).
   
   
5. Link the JavaScript file to the page where you have added the Lightning Conductor Web Part. The JavaScript file should contain the LightningConductor(jsonData) function and the client-side code to render the content provided by the Lightning Conductor Web Part.

Contents of the JavaScript file

The JavaScript file should contain the LightningConductor function:

< script language=“JavaScript” >
    function LightningConductor(jsonData) {
         // Your code here
    }
< /script >

Otherwise the following notification message is displayed:

You could upload the JavaScript file, for example, to the Site Assets library, add a Content Editor Web Part (CEWP) on the same page as the LCWP, and then point to the JavaScript file using the To link to a text file, type a URL text box in the Content Link section in the Web Parts tool pane.

Alternatively you can include the script directly on the page using one of the following methods:

• Add the CEWP to your page. You will find the CEWP in the Web Part pane, by clicking, under Categories, Media and Content.
  
  

1. Place the cursor inside CEWP.
   
   
2. On the Format Text tab, click Edit Source in the Markup group to display the HTML Source dialog.
   
   
3. Type the JavaScript in the HTML Source text box, and then click OK.
   
   
4. On the Page tab, click Stop Editing if this is a Web Part page or if you have added the CEWP to a wiki page, on the Page tab, click Save.

• Add the HTML Form Web Part to your page. You will find the HTML Form Web Part in the Web Part pane, by clicking, under Categories, Forms.
  
  

1. From the Web Part menu, click Edit Web Part.
   
   
2. In the Web Part tool pane, in the Form Content Editor section, click Source Editor to display the Text Editor — Webpage Dialog.
   
   
3. Delete the existing code, and then type your JavaScript into the text box, and then click OK.
   
   
4. In the Web Part tool pane, click OK or Apply.
   
   
5. On the Page tab, click Stop Editing if this is a Web Part page or if you have added the CEWP to a wiki page, on the Page tab, click Save.

• On a wiki page, include content directly in the page.
  
  

1. Place the cursor in the same column as the LCWP and then on the Format Text tab, click Edit Source in the Markup group to display the HTML Source dialog.
   
   
2. Type the JavaScript in the HTML Source text box, and then click OK.
   
   
3. On the Page tab, click Save.

Go to top →