4

Hello i got some trouble displaying some icons inside a column using CSR, what it should do is to check for the contents inside a document set and if the content is equal to a content type and add a corresponding icon.

for this im returning a div with a custom class based on the id of the element so when i query the info i need it will update the content using this unique class.

But is not appending the content inside the div, the code inside the conditions seem to works, the query is getting the right data, but in the list the content is not being added, and the field remains blank!

Any help?? thanks!!

Example idea

Prototipe

CSR Code

 var listName = 'listName';
 var docSetUrlBase = 
  '/path/to/site/_layouts/15/DocSetHome.aspx?id=';


 (function() {
   var item = '';
   var documentContext = {};
   documentContext.Templates = {};
   documentContext.Templates.Fields = {
    "DocIcon": { "View": function(ctx) { return '<a href="' + docSetUrlBase 
   + ctx.CurrentItem.FileRef + '" target="_blank">' + cumplimiento(ctx) + '</a>'}}
};

documentContext.ListTemplateType = 101;

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(documentContext);

})();


function cumplimiento(ctx) {
  var folderPath = ctx.CurrentItem.FileLeafRef;
  var id = ctx.CurrentItem.ID;
  var title = ctx.CurrentItem.Title;

  getItems(folderPath)
  .then(function(itemData) {
    console.log(itemData);

    for (var i = 0; i < itemData.length; i++) {
        var contentTypeId = itemData[i].ListItemAllFields.ContentTypeId;
        var id = itemData[i].ListItemAllFields.Id;


        if (contentTypeId == '0x010100BC518CBCA7403542BF454A841A7C617C0033D81DB44D6A174481029C297ECADA81') {
            console.log(itemData[i].Name);
            console.log(contentTypeId);
            $('a.' + 'id-' + id).append('<img class="icon-acta" src="../SiteAssets/icon1.svg" alt="Acta" title="Acta de constultor: ' + itemData[i].Name + '"/>');
            $('.spinner').delay(3000).fadeOut(300);

        }
        if (contentTypeId == '0x01010200559801707304394B9B71C1722E74B93900D43E57E10A8E244194F6A6ADBF0B454E') {
          console.log(itemData[i].Name);
          console.log(contentTypeId);
            $('a.' + 'id-' + id).append('<img class="icon-evidencia" src="../SiteAssets/icon2.svg" alt="Evidencia" title="Evidencia: ' + itemData[i].Name + '"/>');
        }
    }
});

return '<div class="estado-incentivo ' + 'id-' + id + '"><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>';
}

 function getItems(folderName) {
   return 
   $pnp.sp.web.getFolderByServerRelativeUrl(
    _spPageContextInfo.webServerRelativeUrl + 
   '/libraryFolderName' + '/' + folderName)
    .files.expand('ListItemAllFields')
    .get();
 }
1

There could be a better solution for your problem, but in one of my previous projects where we had to use REST API call in CSR, we had to make the ajax call synchronous.

Can you try and modify the below code and check :

function cumplimiento(ctx) {
  var folderPath = ctx.CurrentItem.FileLeafRef;
  var id = ctx.CurrentItem.ID;
  var title = ctx.CurrentItem.Title;

  $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/GetFolderByServerRelativeUrl(" + _spPageContextInfo.webServerRelativeUrl + "/libraryFolderName/" + folderName +")/Files?$expand=ListItemAllFields",
        async: false,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            // parse the results 
            var itemData = data.d.results;

            for (var i = 0; i < itemData.length; i++) {
                var contentTypeId = itemData[i].ListItemAllFields.ContentTypeId;
                var id = itemData[i].ListItemAllFields.Id;

                if (contentTypeId == '0x010100BC518CBCA7403542BF454A841A7C617C0033D81DB44D6A174481029C297ECADA81') {
                    console.log(itemData[i].Name);
                    console.log(contentTypeId);
                    $('a.' + 'id-' + id).append('<img class="icon-acta" src="../SiteAssets/icon1.svg" alt="Acta" title="Acta de constultor: ' + itemData[i].Name + '"/>');
                    $('.spinner').delay(3000).fadeOut(300);

                }
                if (contentTypeId == '0x01010200559801707304394B9B71C1722E74B93900D43E57E10A8E244194F6A6ADBF0B454E') {
                  console.log(itemData[i].Name);
                  console.log(contentTypeId);
                    $('a.' + 'id-' + id).append('<img class="icon-evidencia" src="../SiteAssets/icon2.svg" alt="Evidencia" title="Evidencia: ' + itemData[i].Name + '"/>');
                }
            }
        },
        error: function (data) {    
            console.log("An error has occured " + data);
        }
    });

    return '<div class="estado-incentivo ' + 'id-' + id + '"><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>';
}
  • its the same result with this, its like just the append is not working or something, all the other code inside the conditions works :S – Juansei Jul 28 '17 at 11:44
1

I finally didnt find the proper solution, i ended creating a new list with the same columns and views, and then it worked properly, both codes works in this question are okay, i suspect the problem was within the list view or something.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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