How to consume SP REST using only JavaScript\CSS\HTML5 (from CRM, outside Sharepoint, same AD)

Question

How do I do to consume a REST DataSet using only something like JQuery?

For example, if I have the items in a list\library and retrieve them as follows:

https://[sharepoint]/_api/web/GetFolderByServerRelativeUrl('/Shared%20Documents')?$expand=Files

I want to display the files on an HTML/jQuery grid.

Also, what is the best JavaScript/HTML5 way to create an upload form to upload a file to that list?

Answer 1

In the question, you have mentioned a REST API endpoint. It seems to me that your environment SharePoint 2013. So SharePoint Add-ins can solve your purpose.

Also have a look on following GitHub Repository for some useful samples.

https://github.com/OfficeDev

Answer 2

To retrieve data from SharePoint using REST you can use below link as reference:

http://www.codeproject.com/Articles/990131/CRUD-Operation-to-List-Using-SharePoint-Rest-API

To display data in Tabular Format, You can go with jQuery DataTable. You just need to pass JSON format data from Rest API to jQuery DataTable.

https://www.datatables.net/

For Example:

<table id="Table_Div" class="display">
<thead>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
</tfoot>
</table>
<Script>
var call = $.ajax({
    url: Url + "_api/Web/Lists/GetByTitle('ListName')/Items",
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    }
});
$.when(callProject).done(function(data) {
    $('#Table_Div').DataTable({
        "destroy": true,
        "data": data.d.results,
        "columns": [{
            "data": "Column1"
        }, {
            "data": "Column2"
        }]
    });
});
</Script>