Blog Archives

SharePoint Online, 2013 and 2016 – Display list data in grid using Rest API

Hey Everyone!

Today, in this post i will show you how can we display list data in a grid using Rest API in SharePoint Online, 2013 and 2016.
In this example, i will create a table – Cars – with 4 columns:

– Make
– Model
– Price
– Color

http://span%20style=

$(function(){
    $("#btnClick").click(function(){
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Cars')/items";
           $.ajax({
              url: requestUri,
              type: "GET",
              headers: {
                  "accept":"application/json; odata=verbose"
              },
              success: onSuccess,
              error: onError
});

  function onSuccess(data) {
     var objItems = data.d.results;
     var tableContent = '' + '' + '' + '' + '';
  
     for (var i = 0; i '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
 }
   $('#carsGrid').append(tableContent);
   }
    function onError(error) {
        alert('Error');
   }
  });
});


<input type="button" id="btnClick" value="Get All Cars"/>
CustomerPanel">
MakeModelPriceColor
' + objItems[i].Make + '' + objItems[i].Model + '' + objItems[i].Price + '' + objItems[i].Color + '
tableCars' style="width: 100%;" border="1 px">
carsGrid" style="width: 100%">
</td> </tr> </table> </div>

You just need to copy the code and past in a script editor webpart, if you press the button  – Get All Cars –  the result it’s a the following table:

Mark Model Price Color
Mercedes A180 22.000.00€ Red
Jaguar X-Type 72.000.00€ Green
Fiat 500 20.000.00€ Blue
Bmw 320d 32.000.00€ Black

If you are interested to read more, i recommend the following links:
https://msdn.microsoft.com/en-us/library/office/jj860569.aspx
https://msdn.microsoft.com/en-us/library/office/jj164022.aspx

Thanks

Fábio Carvalho
SharePoint Consultant
|create|it|

Hide Ribbon and SuitBar of SharePoint 2013 for a specifique Zone – Using JavaScript and C#

One way to hide Ribbon and SuitBar of SharePoint 2013 for a specific zone, like Internet for example – you can use Javascript + Css and run it in a UserControl.

1 – Create a simple UserControl on your solution and add it on your MasterPage.

In ASCX file of your UserControl add the following code:

<script type="text/javascript">
    function hideRibbon(){
        document.getElementById("s4-ribbonrow").style.display = "none !important";
        document.getElementById("suiteBar").style.display = "none !important";
    }
</script>

On code behind of UserControl,  you go execute the javascript function, using the following code:

Example to hide in Internet zone

using Microsoft.SharePoint.Administration;
...

protected void Page_Load(object sender, EventArgs e)
{
 if (SPContext.Current.Site.Zone == SPUrlZone.Internet)
 {
 Page.ClientScript.RegisterStartupScript(this.GetType(),"","hideRibbon();",true);
 }
}