sharepoint
Rendering lato client SharePoint 2013
Ricerca…
introduzione
Cambia il collegamento ipertestuale di campi / colonne all'interno della visualizzazione elenco utilizzando CSR
L'esempio seguente mostra come modificare il collegamento ipertestuale per il campo " ID " e " Titolo (LinkTitle) " all'interno della visualizzazione elenco utilizzando CSR.
Passaggio 1: crea un file JS e incolla sotto il codice
(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');
})();
Passaggio 2: Vai alle proprietà della web part della Visualizzazione elenco e aggiungi il riferimento JS Link a questo file js appena creato (ad esempio ~ sitecollection / SiteAssets / CSRCodeFile.js)
(Nota: indica il tuo JSlink solo in questo formato. "~ Sitecollection / YourJSfFilePath".)
Passaggio 3: Appy and Done
Nascondi colonna dalla visualizzazione elenco di SharePoint utilizzando CSR.
Questo esempio mostra come nascondere un campo "Data" dalla visualizzazione elenco di SharePoint utilizzando 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');
})();
Applicare le convalide su Nuovo / Modifica modulo oggetto utilizzando CSR
Supponiamo di avere un elenco di SharePoint e ha quattro campi vale. Titolo, Nome completo, Email, Numero di cellulare ecc. Ora se vuoi applicare la convalida personalizzata nel modulo Nuovo / Modifica elemento, puoi farlo facilmente con il codice CSR. Il sotto menzionato può convalidare le seguenti condizioni nei moduli:
- Valori vuoti nei campi
- Verifica formato ID email con espressione regolare
- Formato numero di cellulare Controllare con espressione regolare
- Il campo Nome completo non deve contenere valori numerici
Passaggio: 1 Creare un file JS, ad esempio CSRValidations.js
e copia incolla seguendo il codice nel file 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>";
}
Passaggio: 2 Apri il modulo Nuovo elemento nel browser. Modifica la pagina e modifica la web part.
Passaggio: 3 Nelle proprietà delle partizioni Web, Vai a Varie -> Collegamento JS -> incollare il percorso del file js (ad esempio ~ sitecollection / SiteAssets / CSRValidations.js)
Passaggio: 4 Salvare le proprietà e la pagina della web part.
Cambia il nome visualizzato della colonna nella visualizzazione elenco utilizzando CSR
Vi sono casi in cui è necessario modificare il nome visualizzato della colonna in una visualizzazione elenco
ad esempio, il nome della colonna visualizzato nella vista è "IsApprovalNeeded" e si desidera visualizzare come "È necessaria l'approvazione?".
Ovviamente puoi cambiare il nome visualizzato di una colonna cambiando il titolo della colonna nelle impostazioni dell'elenco, ma se vuoi mantenerlo come è nelle impostazioni dell'elenco e modificarlo solo nell'anteprima della pagina, puoi farlo usando CSR (lato client-rendering).
Ecco il codice ...
(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');
})();