Mika A.

Sharepoint - Add a custom class in Survey body

May 21, 2015

I have recently worked in a Sharepoint project to add customizations to the Survey application. Designs and UX was changed using CSS and JS injection and I found it difficult to find the right selector for CSS and Javascript. I looked arround the internet to find some idea and I finally found a way to add a class to a page when it belongs to a survey. The solutions uses the JSOM to load the current list and find it’s base template. The base template for survey is 102. I can then easily check if the list has this base template ID and then add a class to the body tag. Here is the sample code :

// Check if page is from a survey list
function getIsQuizPage() {
 context = new SP.ClientContext.get_current();
 web = context.get_web();
 listColl = web.get_lists();
 list = listColl.getById(_spPageContextInfo.pageListId);
 context.executeQueryAsync(Function.createDelegate(this, this.onQueryIsQuizzSucceeded), Function.createDelegate(this, this.onQueryIsQuizzFailed));

// Success Callback
function onQueryIsQuizzSucceeded() {
 // If list is survey, add survey class
 if (list.get_baseTemplate() == '102') {

// Error Callback
function onQueryIsQuizzFailed(sender, args) {
 alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());

Now I can create an dozen of Survey and easily identify them with the body.survey selector. I hope this will help!!

Written by @mikaoelitiana who lives and works in Paris, building useful things with React, Typescript and more.Follow me on Twitter or Github