SharePoint - Display Templates - Accessing the Client Context Object

Question

SharePoint - Display Templates - Accessing the Client Context Object

3.4k Views Asked by LaLaLottie At 21 October 2024 at 23:24

So I'm creating display templates for SharePoint and I'm having trouble getting the context as I'll need it for accessing different lists and their items, etc. One way to do it that I've seen while searching is this:

var context = Srch.ScriptApplicationManager.get_clientRuntimeContext();

The problem is I don't know how to access the contents from this object. Everytime I'm getting an error that the context is undefined or empty or I print out it's literal function. In other programs (not display templates), I would just use:

var context = new ClientContext();

or

var context = new SP.ClientContext();

or some variant, but in this case, I can't find any documentation or examples of using the first. Just (mostly) blogs saying you can use it to get the context.

The code I have is mostly commented out for now. I'm just trying to figure out this context right now. Thanks in advance.

Edit:

This is the whole (item display template) file:

<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>

    <title>Marketing Page Item Template</title>

    <!--[if gte mso 9]><xml>
    <mso:CustomDocumentProperties>
    <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
    <mso:MasterPageDescription msdt:dt="string">This is the item display template for the Marketing Page tasks.  This will organize list/items under its practice.</mso:MasterPageDescription>
    <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
    <mso:TargetControlType msdt:dt="string">;#SearchResults;#;#Content Web Parts;#</mso:TargetControlType>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    <mso:ManagedPropertyMapping msdt:dt="string">'Title'{Title}:'Title','Assigned To'{Assigned To}:'AssignedTo','Due Date'{Due Date}:'DueDateOWSDATE;DueDate','URL'{URL}:'URL'</mso:ManagedPropertyMapping msdt:dt="string">
    </mso:CustomDocumentProperties>
    </xml><![endif]-->

</head>
<body>
    <div>
        <!--#_


        var siteURL = _spPageContextInfo.siteAbsoluteUrl;
        var title = $getItemValue(ctx, "Title");
        var assignedTo = $getItemValue(ctx, "Assigned To");
        var dueDate = $getItemValue(ctx, "Due Date");
        var listUrl = $getItemValue(ctx, "URL");


        SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {

            var context = Srch.ScriptApplicationManager.get_clientRuntimeContext();

            var reqCtx = SP.RequestContext.getCurrent(context);
            var web = reqCtx.get_web();

            var pagesListId = SP.PageContextInfo.get_pageListId();
            var list = web.get_lists().getById(pagesListId);
            var items = list.getItems(SP.CamlQuery.createAllItemsQuery());

            context.load(items);

            context.executeQueryAsync(
               function(){
                   items.get_data().forEach(function(item){
                       console.log(item.get_item('FileRef')); 
                   });
               },
            function(sender,args){
              console.log(args.get_message()); 
            });
        });


        _#-->

            <li>

                <div style="background-color: honeydew; margin: 5px; padding: 5px;">

                <!--#_
                    if (!title.isEmpty)
                    {
                _#-->

                    <h3 style="color: coral;">Title: _#= $htmlEncode(title) =#_</h3>
                    <!--<p>_#= $htmlEncode(ctx.CurrentItem.Title) =#_</p>-->

                    <p>URL: _#= $htmlEncode(listUrl) =#_</p>
                    <p>URL: _#= $htmlEncode(typeof reqCtx) =#_</p>


                <!--#_
                    }

                    if (!assignedTo.isEmpty)
                    {
                _#-->

                        <p style="color: goldenrod;">Assigned To: _#= $htmlEncode(assignedTo) =#_</p>
                        <!--<p>_#= $htmlEncode(ctx.CurrentItem.AssignedTo) =#_</p>-->

                <!--#_
                    }

                    else
                    {
                _#-->

                        <p>There is no assigned person!</p>

                <!--#_
                    }

                    if (!dueDate.isEmpty)
                    {
                _#-->

                        <p style="color: rosybrown;">Due Date: _#= $htmlEncode(dueDate) =#_</p>
                        <!--<p>_#= $htmlEncode(ctx.CurrentItem.DueDateOWSDATE) =#_</p>-->

                <!--#_
                    }

                    else
                    {
                _#-->

                            <p>There is no due date!</p>

                <!--#_
                    }
                _#-->

             </div>

            </li>
    </div>
</body>
</html>

Original Q&A

There are 1 best solutions below

**Vadim Gremyachev** · Accepted Answer

Srch.ScriptApplicationManager.get_clientRuntimeContext function returns SP.ClientRuntimeContext object which represents the runtime context for accessing data from and invoking methods on remote objects

The following example demonstrates how to retrieve list items and print page urls in display template:

var context = Srch.ScriptApplicationManager.get_clientRuntimeContext();

var reqCtx = SP.RequestContext.getCurrent(context);
var web = reqCtx.get_web();

var pagesListId = SP.PageContextInfo.get_pageListId(); //Pages List Id
var list = web.get_lists().getById(pagesListId);
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
context.load(items);
context.executeQueryAsync(
   function(){
       items.get_data().forEach(function(item){
           console.log(item.get_item('FileRef')); 
       });
   },
   function(sender,args){
      console.log(args.get_message()); 
   });

To ensure SP.ClientRuntimeContext object is loaded you could utilize SP.SOD.executeFunc function, for example:

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {

    var context = Srch.ScriptApplicationManager.get_clientRuntimeContext();

    //the remaining code goes here...


});

Option 2. Using SP.ClientContext class

The following example demonstrates how to utilize SP.ClientContext class in display template:

 SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {

        var context = SP.ClientContext.get_current();
        var web = context.get_web();

        var pagesListId = SP.PageContextInfo.get_pageListId();
        var list = web.get_lists().getById(pagesListId);
        var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
        context.load(items);

        context.executeQueryAsync(
           function(){
               items.get_data().forEach(function(item){
                   console.log(item.get_item('FileRef')); 
               });
           },
        function(sender,args){
          console.log(args.get_message()); 
        });
 });

SharePoint - Display Templates - Accessing the Client Context Object

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SHAREPOINT

Related Questions in DISPLAY-TEMPLATES

Trending Questions

Popular # Hahtags

Popular Questions