Customize your SharePoint Classic Forms without InfoPath

Back in August of 2013 I released a script that allowed you to totally change the way your default SharePoint Forms look by creating a simple template out of HTML and CSS.

Easy Custom Layouts for Default SharePoint Forms

This was a great solution for people that didn’t need a full blown forms solution for SharePoint like the awesome free tool StratusForm.

Since then I’ve had a few requests to enhance the script and I wanted to update it and make it easier to use. Based on those updates I’ve updated the script to allow users to move the save and cancel buttons to within their template, and to also display an error message if there is an error on submit. The error message comes in handy if you are creating a form wizard or a tabbed form and there is an error for one of the fields that’s not currently visible. 

Documentation

First of all, if you created an HTML Template with the previous solution, it will still work. When creating an HTML template you need create placeholders for where you want your SharePoint form fields to display in your HTML template.  Those placeholders need to be a span with a class of “hillbillyForm” and also contain an attribute called “data-displayName” were the value of that attribute is the display name of the field that should be in that place holder.  For example, in order to create a template for the Title field and make it appear as a header your HTML might look like:

<h1><span class="hillbillyForm" data-displayName="Title"></span></h1>

Watch the video below and look at the source code for more examples.

The only change you need to make to any forms created with the previous script would be to make sure you reference the new script and then execute the HillbillyTemplate function as shown in the examples and video.

$().HillbillyTemplate();

There are now a couple of parameters you can pass into this function. If you want to pop up an error message if there is an error on form submission you can set the parameter “genericAlert” to true.  It is false by default.  You can also specify the text of the error message by passing it in the parameter “alertErrorText” as shown below:

$().HillbillyTemplate({

      genericAlert: true,

      alertErrorText: "Form errors exist. Please fix form errors and try again"

});

Finally, you can now put the Save and Cancel buttons into your templates by using the following placeholders in your HTML:

<span class="hillbillyFormSave"></span>

<span class="hillbillyFormCancel"></span>

Confused? Check out the video and hopefully it will make sense. 

Source Code

You can download the source code from GitHub at https://github.com/mrackley/HillbillyTemplate

The source code contains an example Template that takes an out of the box Task list and puts it into a jQueryUI Accordion. so if you wanted to get started immediately you can use it “As-Is” with a Task List and follow along with the video below.

image

Video

As always, here’s a video walking you through the process.

Hope you enjoy the updated script!

2 comments

  1. Pingback: Hybrid SharePoint Is a Destination; Cloud vs. Data Center; Customize SharePoint Classic Forms

Leave Comment

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