Tag Archives: CSR

Introduction to Client Forms Validation in SharePoint 2013

Client side event handlers in SharePoint

In addition to server side Event Model,  SharePoint also provides client side  event handling capabilities when working with List Forms.

Let’s see briefly how it works. In List Forms pages Save button click handler triggers PreSaveItem function , PreSaveItem function is declared in forms.js:

function PreSaveItem()
{
if ("function"==typeof(PreSaveAction))
{
return PreSaveAction();
}
return true;
}

view raw
PreSaveItem.js
hosted with ❤ by GitHub

PreSaveAction function from another hand, is a user defined function that allows to override standard behavior for a Save button handler, so in terms of server side event model it is a binding mechanism.

I find this mechanism  pretty convenient for implementing custom client side validation in List Forms,  the following example demonstrates how to implement client side validation for Email field in Contacts list:

function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\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,}))$/;
return re.test(email);
}
function PreSaveAction(){
var emailBox = getFieldControl('Email','Text');
if (!validateEmail(emailBox.val())) {
var errorHtml = '<span class="ms-formvalidation"><span role="alert">Invalid email address<br></span></span>';
emailBox.after(errorHtml);
return false;
}
return true;
}
function getFieldControl(fieldName,fieldType)
{
var control = $('[id^=' + fieldName + '_][id$=' + fieldType + 'Field]');
return control;
}

view raw
PreSave.js
hosted with ❤ by GitHub

EmailValidate

Client forms validation in SharePoint 2013

In SharePoint 2013 as part of  Client-Side Rendering (CSR), there is SPClientForms.ClientValidation  namespace (clientforms.js) that contains  types and objects for performing  client side validation in List Forms. For example,

SPClientForms.ClientValidation.RequiredValidator object is intended for evaluating the value of an field control to ensure that the user enters a value (it  is invoked for a fields when SPField.Required property is set to True):

SPClientForms.ClientValidation.RequiredValidator = function() {
};
SPClientForms.ClientValidation.RequiredValidator.prototype.Validate = function(value) {
value = SPClientTemplates.Utility.Trim(value);
var hasError = value === '';
var errorMsg = hasError ? Strings.STS.L_SPClientRequiredValidatorError : '';
return new SPClientForms.ClientValidation.ValidationResult(hasError, errorMsg);
};

view raw
SPClientForms.ClientValidation.RequiredValidator.js
hosted with ❤ by GitHub

Below is provided a complete example that demonstrates how to implement  client-side validation for Email field in Contacts list:

CustomClientValidation = {};
CustomClientValidation.EmailValidator = function() {
};
CustomClientValidation.EmailValidator.prototype.Validate = function(value) {
value = SPClientTemplates.Utility.Trim(value);
var re = /^(([^<>()[\]\\.,;:\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,}))$/;
var hasError = !re.test(value);
var errorMsg = hasError ? 'Invalid email address' : '';
return new SPClientForms.ClientValidation.ValidationResult(hasError, errorMsg);
};
function EmailField_Edit(rCtx) {
if (rCtx == null)
return '';
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);
if (formCtx == null || formCtx.fieldSchema == null)
return '';
var _value = formCtx.fieldValue != null ? formCtx.fieldValue : '';
if (_value.length > 0) {
var validators = new SPClientForms.ClientValidation.ValidatorSet();
validators.RegisterValidator(new CustomClientValidation.EmailValidator());
formCtx.registerClientValidator(formCtx.fieldName, validators);
}
return SPFieldText_Edit(rCtx); //default renderer for Text field
}
(function () {
var emailFieldCtx = {};
emailFieldCtx.Templates = {};
emailFieldCtx.Templates.Fields = {
'Email': {
'NewForm': EmailField_Edit,
'EditForm': EmailField_Edit
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(emailFieldCtx);
})();

view raw
CustomClientValidation.js
hosted with ❤ by GitHub

Key points:

  • CustomClientValidation.EmailValidator object implements a custom validation  for Email field
  • since Email field is a standard Text Field,  the rendering of field control is reused, only custom validator is registered for a field (see function EmailField_Edit for a details)

Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion

Overview

We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
SharePoint 2013 introduces client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. So, let’s discuss how to create Accordion List View in SharePoint 2013 based on client-side rendering.

For demonstration purposes we will create FAQ List based on Custom List. Default view for our list  will look like this

FAQDefaultView

And our goal here to customize it in such a way list items will be displayed  in accordion as shown below

AccordionListView

Implementation

In order to simplify our solution we restrict ourselves to the creation of client side rendering template only and applying it to the existing List View. If you are interested how to build custom solution for Accordion List  please follow my post about creating Accordion List View for SharePoint 2010.

Create Custom List for FAQ

FAQ List is based on Custom List. For storing questions we will utilize Title field, for Answers we will create new field with Note type

Create  client-side rendered view for Accordion

Client-side rendered view of an FAQ list is presented below

(function () {
loadCss('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css&#39;);
function OnAccordionViewPostRender(renderCtx) {
jQuery(function() {
jQuery( "#accordionFAQ" ).accordion();
});
}
function loadCss(url){
var link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
}
function OnAccordionViewPreRender(renderCtx) {
}
function RenderAccordionViewBodyTemplate(renderCtx) {
var listData = renderCtx.ListData;
if (renderCtx.Templates.Body == '') {
return RenderViewTemplate(renderCtx);
}
var accordionHtml ='';
accordionHtml = '<div id="accordionFAQ">';
for (var idx in listData.Row) {
var listItem = listData.Row[idx];
accordionHtml += '<h3>';
accordionHtml += listItem.Title;
accordionHtml += '</h3>';
accordionHtml += '<div>';
accordionHtml += listItem.Answer;
accordionHtml += '</div>';
}
accordionHtml += '</div>';
return accordionHtml;
}
function _registerAccordionViewTemplate() {
var accordionViewContext = {};
//accordionViewContext.BaseViewID = 'Accordion';
accordionViewContext.Templates = {};
accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
accordionViewContext.OnPreRender = OnAccordionViewPreRender;
accordionViewContext.OnPostRender = OnAccordionViewPostRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionViewContext);
}
ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');
})();

view raw
AccordionViewTemplate.js
hosted with ❤ by GitHub

Customize a List View

The last step is to apply client-side rendering template to existing view. Let’s first add FAQ List instance on on page, after that  we only need to specify JSLink property value for List View

view raw
AccordionViewJSLink.xml
hosted with ❤ by GitHub

Please note that actually  three JavaScript files have been specified(the first two are jQuery libraries) for  JSLink property. All of them are stored in my case in hive, but of course they could be stored not only in file system.