Get SharePoint Data with javascript from html file

Question

Hi guys I want to do the following:

I have written a javascript code in a .html file. From that I want to access SharePoint Data with COM. So this is my code:

<html> <head> <script 
    src="MicrosoftAjax.js" 
    type="text/javascript"> </script> <script 
    type="text/javascript" 
    src="sp.runtime.js"> </script> <script 
    type="text/javascript" 
    src="sp.js"> </script>

<script 
    type="text/javascript" 
    src="init.js"> </script>


<script language="JavaScript">  function SPZugriff () {

  var clientContext = new SP.ClientContext('https://mycompany.sharepoint.com/sites/Test/');   var webSites = clientContext.web;   clientContext.load(webSites);   clientContext.executeQueryAsync( Function.createDelegate(this, this.successHandler), Function.createDelegate(this, this.errorHandler));

    function successHandler() {   alert(webSites.title);   }

    function errorHandler() {
        alert ("failed");
    }
      }


</script> </head>

<body> <input type="button" name="clickme" value="Absenden" onclick="SPZugriff();"> </body>

</html>

I've uploaded the .html file and the .js files to my documentlibrary. But when I start the .html file (for example via explorer view) and click on the button I get the following error message:

Uncaught Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null. Parameter name: clientObject Error.create @ MicrosoftAjax.js:5Error.argumentNull @ MicrosoftAjax.js:5SP.ClientRuntimeContext.load @ sp.runtime.js:2SPZugriff @ Abfrage.html:29onclick @ Abfrage.html:49

Does anybody know, why this is happening?

I am not sure about error but can try ' var web = clientContext.get_web(); ' — Bhaskar Dhone
– Bhaskar Dhone, Commented Aug 6, 2015 at 12:56
Are able to access data from list ? Debug at see at which line you are getting error. — Bhaskar Dhone
– Bhaskar Dhone, Commented Aug 6, 2015 at 13:06
I feel your context is null ,add below where you are loading clientcontext and check <code> if (clientContext === null) { alert('Client Context Not Loaded'); } </Code> — Bhaskar Dhone
– Bhaskar Dhone, Commented Aug 6, 2015 at 13:19
What do you mean by you started the html file ? So you are referencing the SP Javascript files outside Sharepoint Page? — Arvi
– Arvi, Commented Aug 6, 2015 at 13:26

Shivendra Patel · Accepted Answer · 2015-08-07 11:36:09Z

Try adding external SharePoint JavaScript file,

<script src='//cdn.jsdelivr.net/sharepointplus/3.0.10/sharepointplus.min.js' type='text/javascript'></script>

or You can use SharePoint JavaScript itself.

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItemsFromView);
function getItemsFromView()
{
var context = new SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle('ListName');
    var view = list.get_views().getByTitle('ViewName');
    context.load(view);

    context.executeQueryAsync(
        function(sender, args) {YourFunctionOnSuccess()},
        function(sender, args) {YourFunctionOnError()}
    );
}

It is working for me.

And its done!!

This is updated one follow the steps. 1. Save this script below in text file and save in document library. 2. Add content editor webpart in page and paste the path of script file in .

save the page. And don't forget to add your listname in place of'ListName'.

Hope it is helpful.

 <span style='margin-left:5px;'>Events And Announcements</span>
<div  style='width:98%; float:left;margin-top:10px;margin-bottom:50px;'>
<ul class="event-list" id="Announcements">
</ul>
</div>
<script src='https://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'></script>
<script src='//cdn.jsdelivr.net/sharepointplus/3.0.10/sharepointplus.min.js' type='text/javascript'></script>
<style>
 .event-list {
        margin: 0;
        padding: 0;
    }

        .event-list li {
            list-style: none;
            float: left;
            border-left: solid 8px #efefef;
            width: 95%;
            position: relative;
            height: 56px;
            box-shadow: 0px 1px #e0e0e0;
            cursor: pointer;
        }

            .event-list li:hover {
                border-left: solid 8px #0d9dd2;
            }

    .column-listview {
        float: left;
        padding-left: 10px;
    }

    .event-list li h5 {
        color: #595b5a;
        font-size: 16px;
        margin: 0;
        padding: 0;
        float: left;
        padding-top: 10px;
    }

    .event-list li h6 {
        color: #a3a3a3;
        font-size: 12px;
        float: left;
        margin: 0;
        padding-top: 10px;
        padding: 0;
        clear: left;
    }
    .event-list li:hover .calendar-list {
        background-color: #0d9dd2;
    }

    .event-list li:hover .calendar-list-date {
        color: #fff;
    }

    .event-list li:hover .calendar-list-time {
        color: #fff;
    }

    ul.event-list > li:first-child{
border-top: 1px solid #efefef!important; 

}
ul.event-list > li{
border-right: 1px solid #efefef!important;
    width: 100%!important;
    min-height:56px!important;
    height:100%!important;
}
.ms-webpart-chrome-vertical{
display:block!important;
}
.ms-rtestate-field p, p.ms-rteElement-P {
    margin: 0px 0px 0px 0px!important;
    line-height: 1.6;
}
</style>
<script language='javascript' type='text/javascript'>


SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItemsFromView);
function getItemsFromView()
{
var context = new SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle('ListName');
    var view = list.get_views().getByTitle('All Items');
    context.load(view);

    context.executeQueryAsync(
        function(sender, args) {ExecuteMyFunctionOnLoad("<View><Query>" + view.get_viewQuery() + "</Query></View>")},
        function(sender, args) {alert("error: " + args.get_message());}
    );
}


function ExecuteMyFunctionOnLoad(queryText){

var clientContext =  new SP.ClientContext.get_current();

  var oList = clientContext.get_web().get_lists().getByTitle('ListName');
    var view = oList.get_views().getByTitle("All Items");
    var oWeb = clientContext.get_web(); 
    var camlQuery = new SP.CamlQuery();    
    camlQuery.set_viewXml(queryText);   
    this.collListItem = oList.getItems(camlQuery);   
    clientContext.load(collListItem,'Include(Title, Author, Id)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));      

}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var AnnouncementsList = document.getElementById('Announcements');
    var listItemEnumerator = collListItem.getEnumerator();
    var count =0;
    while (listItemEnumerator.moveNext()) {      
    var oListItem = listItemEnumerator.get_current();      
    var Start= "";
    var End = "";
    var Author = oListItem.get_item("Author").get_lookupValue();//.split('#')[1]
      var listItemId = oListItem.get_id() ;
      var text = oListItem.get_item('Title');   
                if (text.length) {                   
                    $("#Announcements").append("<li><span class='column-listview'><h5>" + text + "</h5><h6> By:" + Author + " | Start Date " + Start + " & End Date " + End + " </h6></span></li>");
                   }
           count =count+1;
    }
    if(count==0){
 $("#Announcements").append( '<li> <span style="margin-left:10px;color: #999 ; width:98%;float:left; line-height: 14px;margin-top: 18px">No records found</span></li>' );
 }
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}</script>

@Aquen i just updated the answer, please put as it is after changing list name. It will work i tested it. — Shivendra Patel
– Shivendra Patel, Commented Aug 7, 2015 at 11:38
Ah ok now I've found out what the problem was. I've made a mistake with the content editor/path thing. Now it's working, thanks! — Aquen
– Aquen, Commented Aug 10, 2015 at 7:34
@aquen if you found this useful and it resolved your problem, you can upvote this solution. Thanks!! — Shivendra Patel
– Shivendra Patel, Commented Aug 10, 2015 at 8:03

Ankur · Accepted Answer · 2015-08-06 17:40:17Z

0

it seems context is null try to execute delay like this

<script type="text/javascript">
    SP.SOD.executeFunc('sp.js','SP.ClientContext',getFunction);
    function getFunction()
    {
            // Get the current client context                   
    }
</script>

Try something like this

answered Aug 6, 2015 at 17:40

Ankur

1531 silver badge7 bronze badges

Add a comment |

Aquen · Accepted Answer · 2015-08-07 06:10:23Z

At first: Thanks for so many answers! :-)

@MrAvind: I've uploaded the .html file and the "sp.js", "sp.runtime.js", "MicrosoftAjax.js" to a document library. Then I click "open in explorer" and double click on the .html file.

@sekhar & Ankur: Ok I followed your instructions and copied your code:

    function SPZugriff () {
SP.SOD.executeFunc('sp.js','SP.Clientcontext',function(){
  var context = new SP.ClientContext.get_current(); 
  var web = context.get_web(); 
  context.load(web);
   context.executeQueryAsync(function(){
   alert('Title: '+web.get_title())
  },function(s,a){alert(a.get_message())})
})

}

But now I get the following message: "Uncaught TypeError: Cannot read property 'executeFunc' of undefined"

Do I have to import something?

Shekar Reddy · Accepted Answer · 2015-08-07 16:39:29Z

0

in your code, remove

var webSites = clientContext.web;

it is

 var webSites = clientContext.get_web();

and enclose the code in SP.SOD.executeFunc as Ankur mentioned

the simpler way is

SP.SOD.executeFunc('sp.js','SP.Clientcontext',function(){
  var context = new SP.ClientContext('https://mycompany.sharepoint.com/sites/Test/');// SP.ClientContext.get_current() if creating for current site
  var web = context.get_web(); 
  context.load(web);
  context.executeQueryAsync(function(){
   alert('Title: '+web.get_title())
  },function(s,a){alert(a.get_message())})
})

edited Aug 7, 2015 at 16:39

answered Aug 6, 2015 at 18:37

Shekar Reddy

1,79314 silver badges26 bronze badges

Add a comment |

Ankur · Accepted Answer · 2015-11-21 10:21:01Z

0

As I don't have privilege to comment hence another answer. try calling your code like below

$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(MyCustomFunction, "sp.js"); });

function MyCustomFunction()
{
}

answered Nov 21, 2015 at 10:21

Ankur

1531 silver badge7 bronze badges

Add a comment |

Stack Exchange Network

Get SharePoint Data with javascript from html file

5 Answers 5

Your Answer

Hot Network Questions

Get SharePoint Data with javascript from html file

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions