Finding and manipulating SharePoint Controls in Page Layouts

Introduction

Recently I have been working on a project where we needed to create page layouts in SharePoint. SharePoint provides you the possibility to include page fields into page layouts. A very common way to include these fields  is to use snippets that you could automatically create by using the Snippet Gallery. In this post I will provide some mind-blowing tips and tricks about customization of Page Layouts in SharePoint.

Snippets

Based on the type of a field the snippet gallery creates the snippet for a control like User Picker, Input Field, Date Picker etc.…

By including the snippet into your Page Layout SharePoint automatically renders the component for you. Example of a Textfield snippet:


<div class="page-title-abbreviation col-lg-6 col-md-6 col-sm-12 col-xs-12">

<!--CS: Start Page Field: Short titel Snippet--><!--SPM:<%@Register Tagprefix="PageFieldTextField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

<!--MS:<PageFieldTextField:TextField runat="server" CssClass="ms-spellcheck-false form-control" InputFieldLabel="Verkorte titel * (max. 64 tekens)" FieldName="32e1216e-7abd-4197-98c6-9eb7f022583b" ID="page_title_abbreviation">-->

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->

<!--PE: End of READ-ONLY PREVIEW--><!--ME:</PageFieldTextField:TextField>--><!--CE: End Page Field: Verkorte titel Snippet-->

</div>

Problem

This all works fine, except when you like to apply your own custom styling, manipulate values, validation and behavior. The problem starts where SharePoint renders its own control id. For example, the Id provided in the snippet was: page_title_abbreviation and SharePoint renders: ctl00_PlaceHolderMain_ctl00 _page_title_abbreviation_ctl00_TextField.

Example of a rendered control:


<div class="ms-formfieldvaluecontainer"><span dir="none">

<input name="ctl00$PlaceHolderMain$ctl00$page_title_abbreviation$ctl00$TextField"

type="text" value="aaa" maxlength="64" id="ctl00_PlaceHolderMain_ctl00 _page_title_abbreviation_ctl00_TextField"

title="Shorte titel Required Field" class="ms-spellcheck-false form-control" required="" minlength="1"><br>

</span></div>

I have been spending a lot of time trying to understand this mechanism and how to deal with this situation. In the next paragraph I will explain ways which worked out for me and I hope you also find them useful for your case:

Solution

First the styling issue. How to apply you own styling? Well, this is quite simple to solve, just add CssClass=”yourCustomCssClass” and use your Css for further Styling. Luckily SharePoint doesn’t ruin the CSS class name.
Second the problem of how to access your control in JavaScript?  With a little bit help of JQuery this is also possible. I wrote some JS functions which might be handy to use:


//Finds input containg id
my.getInputWithId = function (id) {

if (id === undefined || id === null || id.length === 0) {

throw new Error('id is null');

}

var input = $("input[id*='" + id + "']");

if (input.length === 0) {

throw new Error('Input not found for id: ' + id);

}

return input;

}

//Finds select control containg id
my.getSelectWithId = function (id) {

if (id === undefined || id === null || id.length === 0) {

throw new Error('id is null');

}

var select = $("select[id*='" + id + "']");

if (select.length === 0) {

throw new Error('select not found for id: ' + id);

}

return select;

}

//Finds input containg id
my.getTextareaWithId = function (id) {

if (id === undefined || id === null || id.length === 0) {

throw new Error('id is null');

}

var input = $("textarea[id*='" + id + "']");

if (input.length === 0) {

throw new Error('textarea not found for id: ' + id);

}

return input;

}

//Finds link containg id
function getLinkWithId(id) {

if (id === undefined || id === null || id.length === 0) {

throw new Error('id is null');

}
var input = $("a[id*='" + id + "']");

if (input.length === 0) {

throw new Error('link not found for id: ' + id);

}
return input;
}

When controls are accessed in JavaScript, it is quite easy to manipulate values, custom validation and behavior. These issues are out of scope of this blog post, but contact me if you need any help.

Conclusion and remarks

SharePoint doesn’t always make it easy to create custom page layouts, but with some tricks and common sense you will be able to create you almost customized page.

Above some examples are given how this can be achieved. However, this tricks do not always work for all controls. For instance, if you are dealing with composed SharePoint component like SharePoint Time Picker, where SharePoint renders multiple input controls having the same pattern Id. In this case JQuery selector returns a list of found components, where you need to do some more tricks to get the right one.

The other downside of explained solutions is that a dramatic SharePoint update might break your page layout. So the general advice is to prevent as much as possible customization of page layouts, unless you really need to.

Ok folks, this was it. Please do not forget to leave comments and share your thoughts and good ideas with us!

Leave a Reply

Your email address will not be published. Required fields are marked *