sharepoint
SharePoint 2013 Client Side Rendering
Zoeken…
Invoering
Wijzig de hyperlink van velden / kolommen in de lijstweergave met CSR
Het onderstaande voorbeeld laat zien hoe u de hyperlink voor het veld " ID " en " Titel (LinkTitle) " in de lijstweergave kunt wijzigen met CSR.
Stap 1: Maak een JS-bestand en plak onderstaande 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');
})();
Stap 2: Ga naar webonderdeeleigenschappen van Lijstweergave en voeg JS Link-referentie toe aan dit nieuw gemaakte js-bestand (bijv. ~ Sitecollection / SiteAssets / CSRCodeFile.js)
(Opmerking: raadpleeg uw JSlink alleen in dit formaat. "~ Sitecollection / YourJSfFilePath".)
Stap 3: Appy en klaar
Kolom verbergen in SharePoint-lijstweergave met CSR.
In dit voorbeeld wordt getoond hoe u een veld "Datum" kunt verbergen voor de SharePoint-lijstweergave met 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');
})();
Pas validaties toe op nieuw / bewerk itemformulier met CSR
Stel dat we een SharePoint-lijst hebben en deze heeft vier velden namelijk. Titel, volledige naam, e-mailadres, mobiel nummer enz. Als u nu aangepaste validatie wilt toepassen in het formulier Nieuw / Bewerk item, kunt u dit eenvoudig doen met CSR-code. Het onderstaande kan de volgende voorwaarden in formulieren valideren:
- Lege waarden in velden
- E-mail id-indeling controleren met reguliere expressie
- Formaat mobiel nummer Controleer met reguliere expressie
- Het veld Volledige naam mag geen numerieke waarden bevatten
Stap: 1 Maak een JS-bestand, zeg CSRValidations.js
en kopieer en plak de volgende code in het JS-bestand
(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>";
}
Stap: 2 Open nieuw itemformulier in browser. Pagina bewerken en webonderdeel bewerken.
Stap: 3 Ga in Webonderdeeleigenschappen naar Diversen -> JS-link -> plak het pad van uw js-bestand (bijv. ~ Sitecollection / SiteAssets / CSRValidations.js)
Stap: 4 Webeigenschappen en pagina opslaan.
Wijzig de kolomweergavenaam in de lijstweergave met CSR
Er zijn gevallen waarin u de weergavenaam van de kolom in een lijstweergave moet wijzigen
Kolomnaam die in de weergave wordt weergegeven, is bijvoorbeeld "IsApprovalNeeded" en u wilt worden weergegeven als "Is goedkeuring vereist?".
U kunt natuurlijk de weergavenaam van een kolom wijzigen door de kolomtitel in lijstinstellingen te wijzigen, maar als u deze wilt behouden zoals deze in de lijstinstellingen staat en alleen op het paginavoorbeeld wijzigt, kunt u dit doen met behulp van CSR (Client-Side-Rendering).
Hier is de 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');
})();