sharepoint
Рендеринг на стороне клиента SharePoint 2013

Вступление

Изменение гиперссылки полей / столбцов внутри списка с использованием CSR

В следующем примере показано, как изменить гиперссылку для поля « ID » и « Заголовок (LinkTitle) » внутри списка, используя CSR.

Шаг 1: Создайте JS-файл и вставьте ниже кода

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

})();

Шаг 2: Свойства веб-части GoTo в представлении «Список» и добавьте ссылку JS Link в этот вновь созданный файл js (например, ~ sitecollection / SiteAssets / CSRCodeFile.js)

(Примечание. Обратитесь к своему JSlink только в этом формате. ~ Sitecollection / YourJSfFilePath ".)

Шаг 3: Appy и Done

Скрыть столбец из списка SharePoint, используя CSR.

В этом примере показано, как скрыть поле «Дата» в представлении списка SharePoint с помощью 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');

})();

Применить валидации в форме New / Edit Item Form, используя CSR

Предположим, у нас есть список SharePoint, и у него есть четыре поля: Title, Full Name, Email, Mobile Number и т. Д. Теперь, если вы хотите применить специальную проверку в форме New / Edit Item, вы можете легко сделать это с помощью кода CSR. Приведенные ниже могут подтвердить следующие условия в формах:

• Пустые значения в полях
• Проверка формата идентификатора электронной почты с регулярным выражением
• Формат мобильного номера Проверка с регулярным выражением
• Поле Full Name не должно содержать числовые значения

Шаг: 1 Создайте JS-файл, скажем CSRValidations.js и скопируйте вставку следующий код в 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>"; 
    } 

Шаг: 2 Откройте форму «Новый элемент» в браузере. Отредактируйте страницу и отредактируйте веб-часть.

Шаг 3 В свойствах веб-части перейдите в раздел Разное -> JS link -> вставьте путь к вашему js-файлу (например, ~ sitecollection / SiteAssets / CSRValidations.js)

Шаг: 4 Сохраните свойства и страницу веб-части.

Изменить отображаемое имя столбца в виде списка с помощью CSR

Бывают случаи, когда вам нужно изменить отображаемое имя столбца в виде списка

например, имя столбца, отображаемое в представлении «IsApprovalNeeded», и вы хотите выглядеть как «Требуется ли одобрение?».

Вы можете, конечно, изменить отображаемое имя столбца, изменив заголовок столбца в настройках списка, но если вы хотите сохранить его так, как он есть в настройках списка, и изменить его только на предварительном просмотре страницы, вы можете сделать это, используя CSR (Client-Side-Rendering).

Вот код ...

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

})();