sharepoint
Clientseitige Wiedergabe von SharePoint 2013

Einführung

Ändern Sie den Hyperlink von Feldern / Spalten in der Listenansicht mithilfe von CSR

Das folgende Beispiel zeigt, wie Sie den Hyperlink für das Feld " ID " und " Titel (LinkTitle) " in der Listenansicht mithilfe von CSR ändern .

Schritt 1: Erstellen Sie eine JS-Datei und fügen Sie den folgenden Code ein

(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');

})();

Schritt 2: Gehen Sie zu den Webpart-Eigenschaften der Listenansicht und fügen Sie der neu erstellten js-Datei eine JS-Link-Referenz hinzu (z. B. ~ sitecollection / SiteAssets / CSRCodeFile.js).

(Hinweis: Verweisen Sie Ihren JSlink nur in diesem Format. "~ Sitecollection / YourJSfFilePath".)

Schritt 3: Appy und Fertig

Spalte mithilfe der CSR aus der SharePoint-Listenansicht ausblenden.

In diesem Beispiel wird veranschaulicht, wie ein Feld "Datum" mithilfe der CSR aus der SharePoint-Listenansicht ausgeblendet wird.

(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');

})();

Gültigkeitsprüfungen im Formular "Neu" / "Formular bearbeiten" mit CSR anwenden

Angenommen, wir haben eine SharePoint-Liste und vier Felder, nämlich. Titel, vollständiger Name, E-Mail-Adresse, Handynummer usw. Wenn Sie nun die benutzerdefinierte Validierung im Formular "Neues Element / Element bearbeiten" anwenden möchten, können Sie dies ganz einfach mit CSR-Code tun. Das Folgende kann die folgenden Bedingungen in Formularen bestätigen:

• Leere Werte in Feldern
• E-Mail-ID-Formatprüfung mit regulärem Ausdruck
• Handy-Nummernformat Überprüfen Sie den regulären Ausdruck
• Das Feld für den vollständigen Namen darf keine numerischen Werte enthalten

Schritt: 1 Erstellen Sie eine JS-Datei, sagen Sie CSRValidations.js und kopieren Sie den folgenden Code in die JS-Datei

        (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>"; 
    } 

Schritt: 2 Öffnen Sie das neue Elementformular im Browser. Seite bearbeiten und Webpart bearbeiten.

Schritt: 3 Gehen Sie in den Eigenschaften des Webparts zu Verschiedenes -> JS-Link -> fügen Sie den Pfad Ihrer js-Datei ein (zB ~ sitecollection / SiteAssets / CSRValidations.js)

Schritt: 4 Speichern Sie die Webpart-Eigenschaften und die Seite.

Ändern Sie den Anzeigenamen der Spalte in der Listenansicht mithilfe von CSR

Es gibt Fälle, in denen Sie den Anzeigenamen der Spalte in einer Listenansicht ändern müssen

ZB ist der in der Ansicht angezeigte Spaltenname "IsApprovalNeeded" und Sie möchten als "Ist eine Genehmigung erforderlich?" angezeigt werden.

Sie können den Anzeigenamen einer Spalte natürlich ändern, indem Sie den Spaltentitel in den Listeneinstellungen ändern. Wenn Sie jedoch den Spaltennamen in den Listeneinstellungen beibehalten und ihn nur in der Seitenvorschau ändern möchten, können Sie dies tun CSR (Client-Side-Rendering).

Hier ist der 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');

})();