1

I have to fetch data using javascript client object model and for that i have to use Sharepoint Designer 2010 only i have searched on google and there i got solution only by adding code in visual web part. So can any tell me how i can use javascript client object mode to retrieve data in sharepoint designer 2010?

4 Answers 4

2

Here take a look at this. I completely deleted my original answer. Now below make sure in your script type that it is just like below.

    <script type="text/ecmascript" src="/_layouts/SP.Core.js" />
     <script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
       <script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

      <script language="ecmascript" type="text/ecmascript">

      function onQuerySucceeded(sender, args) {
          alert('Title: ' + this.oWebsite.get_title() + ' Decription: ' +   this.oWebsite.get_description());
      }

      function onQueryFailed(sender, args) {
          alert('request failed ' + args.get_message() + '\n' +    args.get_stackTrace());
      }

      function retrieveWebSite() {
          var clientContext = new SP.ClientContext.get_current();
          this.oWebsite = clientContext.get_web();
          clientContext.load(this.oWebsite);
          clientContext.executeQueryAsync(Function.createDelegate(this,   this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
      }
  </script>

Make sure you have the libraries loaded. Look here

http://msdn.microsoft.com/en-us/library/ee535709.aspx

http://msdn.microsoft.com/en-us/library/hh185009.aspx

First link is how to setup your application page the second link is how to perform a simple list lookup function.

5
  • Make sure that you add your scripts in the HeadPlacement content holder Oct 8, 2012 at 13:26
  • do i compulsory have use this way.....can't i use javascript client object model??
    – Stark
    Oct 8, 2012 at 13:36
  • Check the updated answer Oct 8, 2012 at 13:51
  • i hate tried the js code but when i put try catch in the function i got the error :- Object doesn't support this action
    – Stark
    Oct 9, 2012 at 12:44
  • If you notice the script type is not javascript i is ecma scripting thats why you may be getting Object doesn't suppot this action. Also open the page using IE and hit F12 to make sure you don't have any syntax errors. Oct 9, 2012 at 13:07
2

Think of the visual web part as a container. You can implement this code in a couple different ways using only SPD:

  1. Open the page in advanced mode in SPD and enter the script just as you would a plain old web page. I would put the script inside the PlaceHolderMain control as SharePoint is a little picky about where to put javascript.

  2. Put the script in a content editor web part right in the web interface.

  3. (recommended) Create a separate javascript file for your code. Reference it in a script tag either on your page, or on the master page.

3
  • BTW I share your frustration with the visual web part examples. I mean who in the real world deploys a user control to the farm just to add in some javascript? Oct 8, 2012 at 17:39
  • i have tried as per your suggestion but i am not getting any result...even created function is not called after putting the COM code...so can you please provide an example for little more guidance
    – Stark
    Oct 9, 2012 at 6:08
  • Joseph Surgeon has already done that. Look at the second link he posted. Oct 9, 2012 at 14:52
1
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />

<script type="text/ecmascript">
ExecuteOrDelayUntilScriptLoaded(createList, "sp.js");
    function createList() {
        var clientContext = new SP.ClientContext.get_current();
        var oWebsite = clientContext.get_web();

        var listCreationInfo = new SP.ListCreationInformation();
        listCreationInfo.set_title('CustomList'); // list name
        listCreationInfo.set_description('description'); // list description
        listCreationInfo.set_templateType(SP.ListTemplateType.genericList); //list type

        oWebsite.get_lists().add(listCreationInfo);

        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded),// when success
            Function.createDelegate(this, this.onQueryFailed) // when failed
            );
    }
    function onQuerySucceeded() {
        alert("List Created");
    }

    function onQueryFailed(sender, args) {
        alert("List Failed");
    }

</script>
3
  • Can you please add some text to this answer, telling us what the scrit does? :) Mar 14, 2014 at 8:01
  • Well, yes the answer may be no good but that is not up to me in my role as a moderator to decide. That is up to you by using the downvote or upvote buttons @SPArchaeologist. Mar 14, 2014 at 10:19
  • nope, it seems that it was all in my head. I could swear the question actually said "to retrieve data from a list". Must have been a brain mix - I am currently reading documentation about list use with rest/ecmascript.... Sorry @utkarsh, please disregard my (now deleted) comment above.
    – SPArcheon
    Mar 14, 2014 at 10:24
0

Working code for ecmascript just add the content place holder ..through web part than. click on edit this webpart than make sure that u have selected the content place holder and click on edit source..and it should be empty if you have selected any other web part it will show you some div etc... so make sure that you have selected the content place holder..and just copy the below code there...

and if you want to change the list name..than u can change it here listCreationInfo.set_title('CustomList');

Steps: 1. add a page in sharepoint site. 2. add a web part(content place holder) 3. click on edit this web part 4. now click on edit source make sure..(Add web content is clicked) it will show you the dotted line that your content editor is selected.(you can check it by clicking on select button on a format toolbar(right side) it will show you which box is selected. 5. click on Edit Source. 6.Copy the code. 7. Happy Coding :)

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
 <script type="text/javascript" src="/_layouts/15/sp.js"></script>??

 <script type="text/ecmascript">
     ExecuteOrDelayUntilScriptLoaded(createList, "sp.js");
     function createList() {
     var clientContext = new SP.ClientContext.get_current();
     var oWebsite = clientContext.get_web();

    var listCreationInfo = new SP.ListCreationInformation();
    listCreationInfo.set_title('CustomList'); // list name
    listCreationInfo.set_description('description'); // list description
    listCreationInfo.set_templateType(SP.ListTemplateType.genericList); //list type

    oWebsite.get_lists().add(listCreationInfo);

    clientContext.executeQueryAsync(
     Function.createDelegate(this, this.onQuerySucceeded),// when success
     Function.createDelegate(this, this.onQueryFailed) // when failed
     );
}
function onQuerySucceeded() {
    alert("List Created");
}

function onQueryFailed(sender, args) {
    alert("List Failed");
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.