sharepoint
Rendu côté client SharePoint 2013

Introduction

Modifier le lien hypertexte des champs / colonnes dans la vue liste à l'aide de la CSR

L'exemple ci-dessous montre comment modifier le lien hypertexte pour les champs " ID " et " Titre (LinkTitle) " dans la vue de liste à l'aide de la CSR.

Etape 1: Créez un fichier JS et collez ci-dessous le code

(function () {
    
    function registerRenderer() {
        var ctxForm = {};
        ctxForm.Templates = {};

        ctxForm.Templates = {
            Fields : {
                'LinkTitle': { //------ Change Hyperlink of LinkTitle
                    View : function (ctx) {
                        var url = String.format('{0}?ID={1}', "/sites/Lists/testlist/EditItem.aspx", ctx.CurrentItem.ID);
                        return String.format('<a href="{0}" onclick="EditItem2(event, \'{0}\');return false;">{1}</a>', url, ctx.CurrentItem.Title);
                    }
                },
                'ID' : { //------ Change Hyperlink from ID field
                    View : function (ctx) {
                        var url = String.format('{0}?ID={1}', "/IssueTracker/Lists/testlist/DisplayItem.aspx", ctx.CurrentItem.ID);
                        return String.format('<a href="{0}" onclick="EditItem2(event, \'{0}\');return false;">{1}</a>', url, ctx.CurrentItem.ID);
                    }
                },

            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();

Étape 2: GoTo propriétés de composant WebPart de View List et ajouter une référence JS Link à ce fichier js nouvellement créé (par exemple, ~ sitecollection / SiteAssets / CSRCodeFile.js)

(Remarque: reportez-vous à votre JSlink dans ce format uniquement. "~ Sitecollection / YourJSfFilePath".)

Étape 3: Appy et fait

Masquer la colonne à partir de la vue de liste SharePoint à l'aide de CSR.

Cet exemple montre comment masquer un champ "Date" à partir de la vue de liste SharePoint à l'aide de CSR.

(function () {
    
    function RemoveFields(ctx) {
        var fieldName = "Date"; // here Date is field or column name to be hide
        var header = document.querySelectorAll("[displayname=" + fieldName + "]")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
            cells[i].style.display = "none";
        }
    }

    function registerRenderer() {
        var ctxForm = {};
        ctxForm.Templates = {};
        ctxForm.OnPostRender = RemoveFields;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();

Appliquer des validations sur Nouveau / Modifier un formulaire d'élément à l'aide de CSR

Supposons que nous ayons une liste SharePoint et que celle-ci comporte quatre champs. Titre, Nom complet, Email, Numéro de mobile, etc. Maintenant, si vous souhaitez appliquer une validation personnalisée dans le formulaire Nouveau / Modifier un élément, vous pouvez facilement le faire avec le code RSE. Le ci-dessous mentionné peut valider les conditions suivantes dans des formulaires:

• Valeurs vides dans les champs
• Vérification du format d'ID de messagerie avec une expression régulière
• Format de numéro de mobile Vérifiez avec une expression régulière
• Le champ Nom complet ne doit pas contenir de valeurs numériques

Etape: 1 Créez un fichier JS, par exemple CSRValidations.js et copiez le code suivant dans le fichier JS

        (function () { 
     
        // Create object that have the context information about the field that we want to change it's output render  
        var fieldContext = {}; 
        fieldContext.Templates = {}; 
        fieldContext.Templates.Fields = { 
            // Apply the new rendering for Email field on New and Edit Forms 
            "Title": { 
                "NewForm": titleFieldTemplate, 
                "EditForm":  titleFieldTemplate
            },
            "Full_x0020_Name": { 
                "NewForm": fullNameFieldTemplate, 
                "EditForm":  fullNameFieldTemplate
            },
            "Email": { 
                "NewForm": emailFieldTemplate, 
                "EditForm":  emailFieldTemplate 
            },
            "Mobile_x0020_Phone": { 
                "NewForm": mobilePhoneFieldTemplate, 
                "EditForm":  mobilePhoneFieldTemplate
            }
        }; 
     
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext); 
     
    })(); 
     
    // This function provides the rendering logic 
    function emailFieldTemplate(ctx) { 
     
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 
     
        // Register a callback just before submit. 
        formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
            return document.getElementById('inpEmail').value; 
        }); 
     
        //Create container for various validations 
        var validators = new SPClientForms.ClientValidation.ValidatorSet(); 
        validators.RegisterValidator(new emailValidator()); 
     
        // Validation failure handler. 
        formCtx.registerValidationErrorCallback(formCtx.fieldName, emailOnError); 
     
        formCtx.registerClientValidator(formCtx.fieldName, validators); 
     
        return "<span dir='none'><input type='text' value='" + formCtx.fieldValue + "'  maxlength='255' id='inpEmail' class='ms-long'> \ <br><span id='spnEmailError' class='ms-formvalidation ms-csrformvalidation'></span></span>"; 
    } 
     
    // Custom validation object to validate email format 
    emailValidator = function () { 
        emailValidator.prototype.Validate = function (value) { 
            var isError = false; 
            var errorMessage = ""; 
     
            //Email format Regex expression 
            //var emailRejex = /\S+@\S+\.\S+/; 
            var emailRejex = /^(([^<>()[\]HYPERLINK "\\.,;:\s@\"\\.,;:\s@\"]+(\.[^<>()[\]HYPERLINK "\\.,;:\s@\"\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    
            if (value.trim() == "") { 
                isError = true; 
                errorMessage = "You must specify a value for this required field.";
            }else if (!emailRejex.test(value) && value.trim()) {
                isError = true;
                errorMessage = "Please enter valid email address";
            } 
     
            //Send error message to error callback function (emailOnError) 
            return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage); 
        }; 
    }; 
     
    // Add error message to spnError element under the input field element 
    function emailOnError(error) { 
        document.getElementById("spnEmailError").innerHTML = "<span role='alert'>" + error.errorMessage + "</span>"; 
    } 
    
    // This function provides the rendering logic 
    function titleFieldTemplate(ctx) { 
     
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        // Register a callback just before submit.             
        
        formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
            return document.getElementById('inpTitle').value; 
        }); 
     
        //Create container for various validations 
        var validators = new SPClientForms.ClientValidation.ValidatorSet(); 
        validators.RegisterValidator(new titleValidator()); 
     
        // Validation failure handler. 
        formCtx.registerValidationErrorCallback(formCtx.fieldName, titleOnError); 
     
        formCtx.registerClientValidator(formCtx.fieldName, validators); 
     
        return "<span dir='none'><input type='text' value='" + formCtx.fieldValue + "'  maxlength='255' id='inpTitle' class='ms-long'> \ <br><span id='spnTitleError' class='ms-formvalidation ms-csrformvalidation'></span></span>"; 
    } 
     
    // Custom validation object to validate title format 
    titleValidator = function () { 
        titleValidator.prototype.Validate = function (value) { 
            var isError = false; 
            var errorMessage = ""; 
    
            if (value.trim() == "") { 
                isError = true; 
                errorMessage = "You must specify a value for this required field.";
            }
     
            //Send error message to error callback function (titleOnError) 
            return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage); 
        }; 
    }; 
     
    // Add error message to spnError element under the input field element 
    function titleOnError(error) { 
        document.getElementById("spnTitleError").innerHTML = "<span role='alert'>" + error.errorMessage + "</span>"; 
    } 
    
    // This function provides the rendering logic 
    function mobilePhoneFieldTemplate(ctx) { 
     
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 
     
        // Register a callback just before submit. 
        formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
            return document.getElementById('inpMobilePhone').value; 
        }); 
     
        //Create container for various validations 
        var validators = new SPClientForms.ClientValidation.ValidatorSet(); 
        validators.RegisterValidator(new mobilePhoneValidator()); 
     
        // Validation failure handler. 
        formCtx.registerValidationErrorCallback(formCtx.fieldName, mobilePhoneOnError); 
     
        formCtx.registerClientValidator(formCtx.fieldName, validators); 
     
        return "<span dir='none'><input type='text' value='" + formCtx.fieldValue + "'  maxlength='255' id='inpMobilePhone' class='ms-long'> \ <br><span id='spnMobilePhoneError' class='ms-formvalidation ms-csrformvalidation'></span></span>"; 
    } 
     
    // Custom validation object to validate mobilePhone format 
    mobilePhoneValidator = function () { 
        mobilePhoneValidator.prototype.Validate = function (value) { 
            var isError = false; 
            var errorMessage = ""; 
     
            //MobilePhone format Regex expression 
            //var mobilePhoneRejex = /\S+@\S+\.\S+/; 
            var mobilePhoneRejex = /^[0-9]+$/;
    
            if (value.trim() == "") { 
                isError = true; 
                errorMessage = "You must specify a value for this required field.";
            }else if (!mobilePhoneRejex.test(value) && value.trim()) {
                isError = true;
                errorMessage = "Please enter valid mobile phone number";
            } 
     
            //Send error message to error callback function (mobilePhoneOnError) 
            return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage); 
        }; 
    }; 
     
    // Add error message to spnError element under the input field element 
    function mobilePhoneOnError(error) { 
        document.getElementById("spnMobilePhoneError").innerHTML = "<span role='alert'>" + error.errorMessage + "</span>"; 
    } 
    
    // This function provides the rendering logic 
    function fullNameFieldTemplate(ctx) { 
     
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 
     
        // Register a callback just before submit. 
        formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
            return document.getElementById('inpFullName').value; 
        }); 
     
        //Create container for various validations 
        var validators = new SPClientForms.ClientValidation.ValidatorSet(); 
        validators.RegisterValidator(new fullNameValidator()); 
     
        // Validation failure handler. 
        formCtx.registerValidationErrorCallback(formCtx.fieldName, fullNameOnError); 
     
        formCtx.registerClientValidator(formCtx.fieldName, validators); 
     
        return "<span dir='none'><input type='text' value='" + formCtx.fieldValue + "'  maxlength='255' id='inpFullName' class='ms-long'> \ <br><span id='spnFullNameError' class='ms-formvalidation ms-csrformvalidation'></span></span>"; 
    } 
     
    // Custom validation object to validate fullName format 
    fullNameValidator = function () { 
        fullNameValidator.prototype.Validate = function (value) { 
            var isError = false; 
            var errorMessage = ""; 
     
            //FullName format Regex expression 
            var fullNameRejex = /^[a-z ,.'-]+$/i;
    
            if (value.trim() == "") { 
                isError = true; 
                errorMessage = "You must specify a value for this required field.";
            }else if (!fullNameRejex.test(value) && value.trim()) {
                isError = true;
                errorMessage = "Please enter valid name";
            } 
     
            //Send error message to error callback function (fullNameOnError) 
            return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage); 
        }; 
    }; 
     
    // Add error message to spnError element under the input field element 
    function fullNameOnError(error) { 
        document.getElementById("spnFullNameError").innerHTML = "<span role='alert'>" + error.errorMessage + "</span>"; 
    } 

Etape: 2 Ouvrez Nouveau formulaire d'élément dans le navigateur. Modifier la page et modifier le composant WebPart.

Etape: 3 Dans les propriétés du composant WebPart, allez dans Divers -> JS link -> collez le chemin de votre fichier js (par exemple, ~ sitecollection / SiteAssets / CSRValidations.js)

Etape: 4 Enregistrez les propriétés et la page du composant WebPart.

Modifier le nom d'affichage de la colonne dans la vue liste à l'aide de CSR

Il y a des cas où vous devez changer le nom d'affichage de la colonne dans une vue de liste

Par exemple, le nom de colonne affiché dans la vue est "IsApprovalNeeded" et vous souhaitez apparaître comme "Est-ce qu'une approbation est nécessaire?".

Vous pouvez bien sûr modifier le nom d'affichage d'une colonne en modifiant le titre de la colonne dans les paramètres de liste, mais si vous souhaitez le conserver tel quel dans les paramètres de la liste et le modifier uniquement dans l'aperçu de la page, vous pouvez le faire en utilisant RSE (Rendu côté client).

Voici le code ...

(function () {    

    function preTaskFormRenderer(renderCtx) {
       modifyColumns(renderCtx);       
    }

    function modifyColumns(renderCtx)
    {
      var arrayLength= renderCtx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++)
        {
           if(renderCtx.ListSchema.Field[i].DisplayName == 'IsApprovalNeeded')
             {
               var newTitle= "Is Approval Needed?";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
         }
    }
    
    function registerRenderer()
    {
      var ctxForm = {};
      ctxForm.Templates = {};
      ctxForm.OnPreRender = preTaskFormRenderer;
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }

    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();