0

Trying to learn CSR. My first try looks like this:

(function (){
    //init
    var inCtx = {};
    inCtx.Templates = {};

    inCtx.Templates.Item = ItemOverride;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(inCtx);

    function ItemOverride(itemCtx){
        var result = "";
        result += "<h3>";
        result += itemCtx.CurrentItem.Title;
        result += "</h3>";
        return result;
    }

})();

Result is looking good, but the thead row is now under my items. What should i do? I would like to keep it over the items...

0

My advice for is to use Cisar for chrome what was developed by Andrey Markeev. It's really helpfull and quick tool. There are his first, second and third articles about CSR.

What about your question, i think you need to override Fields templates for your list. Thanks to it, you can edit list view style by fields in items.

Example with Cisar:

// The file has been created, saved into "/Style Library/"
// and attached to the XLV via JSLink property.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function getBaseHtml(ctx) {
    return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
  }

  function init() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      // OnPreRender: function(ctx) { },

      Templates: {

      //     View: function(ctx) { return ""; },
      //     Header: function(ctx) { return ""; },
      //     Body: function(ctx) { return ""; },
      //     Group: function(ctx) { return ""; },
      //     Item: function(ctx) { return ""; },
            Fields: {
              "ErrorText": {
                   View: function(ctx) { return ctx.CurrentItem["ErrorText"] + "this is CSR example"; },
                   EditForm: function(ctx) { return ""; },
                   DisplayForm: function(ctx) { return ""; },
                   NewForm: function(ctx) { return ""; }
               }
           },
      //     Footer: function(ctx) { return ""; }

      },

      // OnPostRender: function(ctx) { },

      ListTemplateType: 10001

    });
  }

  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/CsrFields.js"), init);
  init();

});
1
  • Cisar for chrome isn't working for me. I informed the developer, tool looks great on screenshoots. Thank for the links, They did help me. – dev.Manderson Aug 17 '16 at 6:55

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.