My Sharepoint World: Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Refer here to understand more about JSON Web Service.

Step 3: Refer here to understand about SPServices. This is specialized Jquery to execute SharePoint related operations.

Step 4: In a Web Part Page, Edit Page and Add Content Editor Web Part.

Step 5: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to content editor web part or Write code in Web Part's text editor directly.

Step 6: We are trying to accomplish the following here. Using a button "Get JSON Data we will retrieve the JSON data and updata a HTML table. Now another button "Update into SharePoint List" enables you to update the retrieved data into a SharePoint List.

Initially the button to retrieve the JSON data is displayed from the Content Editor Web Part.

When clicked, it retrieves the data and populates a HTML table.Now the button to Update this data into a SharePoint list is also made visible.

When "Update to SharePoint List" is clicked, the first record is displayed. Followed by a message which confirms that this record has been inserted into a SharePoint list.

Alert messages will repeat for all 5 records. Then go to the SharePoint list to confirm if the list has been updated.

The code is as below.

<HEAD>

<TITLE>GetData JSON web service </TITLE>

<script type="text/javascript" src="http://MyJSSite.com/sites/BasicJS/Lib/jquery-1.3.2.min.js"></script>
<script type=text/javascript src="http://MyJSSite.com/sites/BasicJS/Lib/jquery.SPServices-0.5.6.min.js"></SCRIPT>

<SCRIPT type=text/javascript>
var JsonData = "http://test.basic.com//%8766987%7D/%7BA561528C?format=daas-JSON";
function JSONFunction()
{
  var fullurl = JsonData + '&callback=?';
  alert("The JSON URL IS :: " + fullurl);

$.getJSON(fullurl,'',function(data)
   {
   //alert("Inside function-data");
   var receivedData = data.entries;
   alert("Length is :: " + receivedData.length.toString());
   for (var i = 0; i < receivedData.length; i++)
   {
    var linktitle = receivedData[i]['LinkTitle'].toString();
    var type = receivedData[i]['Activity_Type'].toString();
    var edate = receivedData[i]['End_Date'].toString();
    AddRowToTable(i.toString(),linktitle,type,edate);
   }
   document.getElementById('myJsonDataTable').style.visibility = "visible";
   document.getElementById('SpInsertButton').style.visibility = "visible";

   });
}

function AddRowToTable(num,linktitle,type,edate)
{
     $("#myJsonDataTable").append("<tr align='middle'>" +
    "<td align='left'>"+num+"</td>" +
                                "<td align='left'>"+linktitle+"</td>" +
     "<td align='left'>"+type+"</td>" +
    "<td align='left'>"+edate+"</td>" +     "</tr>");

}

<table id="myJsonDataTable" border =1 width="70%" style="visibility:hidden">
<tr align='left' bgcolor="lightBlue">
<td><B>Num</B></td>
<td><B>Title</B></td>
<td><B>Type</B></td>
<td><B>End Date</B></td>
</tr>
</table>

<button id="SpInsertButton" onclick="UpdateSharepointFunction()" style="visibility:hidden">Update into SharePoint List</button>

</BODY>
</HTML>

Step 7: While inserting into SharePoint custom list, this code again retrieves data from JSON to use the latest data.

Step 8: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Step 9: Refer this post to see the data extracted from GeoPlugin JSON Web Service using a Content Editor Web Part.

Leave your comments below.

Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

No comments: