Pages

Tuesday 23 June 2015

Easy Custom Layouts for Default SharePoint Forms

Default SharePoint forms - Everything is in one column. It seems like you ALWAYS have to scroll to get to all the fields, and less face it: They have ZERO style. You look at a SharePoint form and think.. “Yep… that’s a SharePoint form.”
I mean, just look at the default New Item form for an Issue Tracking list:
image
See what I mean?
You know what drives developers crazy? Users that want custom forms. All your data is right there out of the box. You can change the order of the fields. So what if you have to scroll? You’ve got what you need to get your job done!
But what choices do I have? I’ve lost the design view in SharePoint Designer. I REALLY don’t want to create an InfoPath form because, well.. I hate InfoPath and there’s no way I’m going to justify creating a custom form in Visual Studio because you want it  to look pretty.
There has to be an easier way! Customizing a form in SharePoint should not be that hard.

So I started thinking…

I was pretty sure I could write a script that would allow me to move the fields on the form wherever I want. I just needed a way of knowing where to put the fields.  I came up with the following solution and I was pleasantly surprised by how well it came together.  All you have to do to get this to work is:
  1. Upload the below script to your Site Assets library (I called the script “hillbillyForm.js”)
  2. Create a custom layout using HTML, CSS and instead of putting the form inputs in the layout, put a placeholder span in there (described in more detail below).  Upload this file to your Site Assets directory as well.
  3. Edit the default form by adding two Content Editor Web Parts on the page. Link the first Content Editor Web Part to your custom layout and link the other Content Editor Web Part to the “hillbillyForm.js” script.
And Viola. That’s all there was to it. Because the script moves the contents of the field’s containers it brings with it everything you need so that your rich text editors, people pickers, and other fields all work seamlessly in your custom layout.

The Script

Here’s the script I wrote that is responsible for moving the contents of the form fields into your custom layout. You don’t necessarily need to understand what it’s doing, just make sure to include it on your page.
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script> <style type="text/css"> .ms-formtable {display:none;} </style> <script type="text/javascript"> $(document).ready(function() { //loop through all the spans in the custom layout $("span.hillbillyForm").each(function() { //get the display name from the custom layout displayName = $(this).attr("data-displayName");
            displayName  = displayName.replace(/&(?!amp;)/g,'&amp;'); elem = $(this); //find the corresponding field from the default form and move it //into the custom layout $("table.ms-formtable td").each(function(){ if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){ $(this).contents().appendTo(elem); } }); }); }); </script>

The key that makes it all work

So, the key that makes this all work is that the script is looking for each “span” in your custom layout that has the class “hillbillyForm”. This special span is the placeholder for your SharePoint Form input/display field.
The script then looks for a custom attribute in this span called “data-displayName”. The value of this attribute is the DISPLAY NAME of the SharePoint Form field for which the span is a placeholder for.
Confused yet?
For example, the following span is a placeholder for the field with the Display Name “Title”:
<span class=”hillbillyForm” data-displayName=”Title”>span>
So, all you have to do is design a form using standard html, with css, and whatever you want, and put this special span where you want the field input to appear making sure to put in the correct display name for that field.
Make sense? Still fuzzy? Take a look at my example form below, where I map all the fields from my Issue Tracking list into a basic HTML table.

My Form for this example

Here’s my super basic HTML form. I’m just using an old school table that basically turns the default form into a two column form.
<h1>New Issueh1>
<table cellpadding="5" cellspacing="5" bgcolor="#FFFFCC" >
    <tr >
        <td>
            <b>Title:b><br>
            <span class="hillbillyForm" data-displayName="Title">span>
        td>
        <td>
            <b>Issue Status:b><br>
            <span class="hillbillyForm" data-displayName="Issue Status">span>
        td>
    tr>
    <tr >
        <td>
            <b>Assigned To:b><br>
            <span class="hillbillyForm" data-displayName="Assigned To">span>
        td>
        <td>
            <b>Priority:b><br>
            <span class="hillbillyForm" data-displayName="Priority">span>
        td>
    tr>
    <tr >
        <td>
            <b>Description:b><br>
            <span class="hillbillyForm" data-displayName="Description">span>
        td>
        <td valign="top">
            <b>Category:b><br>
            <span class="hillbillyForm" data-displayName="Category">span>
            <b>Alert Me:b><br>
            <span class="hillbillyForm" data-displayName="Alert Me">span>
            <b>Blame:b><br>
            <span class="hillbillyForm" data-displayName="Blame">span>
        td>
    tr>
    <tr >
        <td>
            <b>Related Issues:b><br>
            <span class="hillbillyForm" data-displayName="Related Issues">span>
        td>
        <td valign="top">
            <b>Due Date:b><br>
            <span class="hillbillyForm" data-displayName="Due Date">span>
        td>
    tr>
    <tr >
        <td>
            <b>Comments:b><br>
            <span class="hillbillyForm" data-displayName="Comments">span>
        td>
        <td valign="top">
        td>
    tr>
table>
Make sense? I just made sure to create a span for each field that I wanted to display in my custom layout.
Oh, and here’s a quick tip at no extra charge. If you don’t want a field to show up in your form, just don’t create a span for it. No error will be thrown (unless it’s a required field) and the form will still save and update just fine.
So, all I have to do is edit my default form and using Content Editor Web Parts link to my custom layout and the above script and that out of the box form magically becomes….
image
Okay… so maybe it’s not the prettiest form in the world, but at least I don’t have to scroll anymore to see all the fields. The point is, the options are totally limitless now. You can create a form template however the heck you want as long as you place the spans in the correct place for where you want the form inputs to appear. Add some CSS make it Snazzy. Make those users say “That’s SharePoint??”
Think about it, you could break up a form into multiple jQuery UI tabs, show and hide fields dynamically, give your users an incredible user experience.e Video
So, want to see step by step how it all gets put together? Just watch the following video and I’ll walk you through it.So, there you go. Not much to it. I’ve used this same script on SharePoint 2010, 2013, and in Office 365. It seems to perform very well although the script could be tweaked some to increase performance.
At this point, I haven’t written the script to move the Save and Cancel button to a different location, mainly because I was too lazy and I think they look fine at the bottom of the form. If this is a showstopper for you let me know and I’ll get to it soon.
Finally, this script works on the default New, Edit, and Display forms. So, the next time you feel the urge to crack open InfoPath for a simple form take a moment to give this method a shot, especially if you plan to promote all the fields anyway.

Friday 12 June 2015

How to Implement Cascaded Dropdown List in SharePoint List

Introduction


This article explains step by step procedure to implement cascaded dropdown list in SharePoint list.

Background


I was recently working on large list with many fields were in these fields are dependent on other list fields as well as fields has to be populated based on the selection of previous field value. SharePoint doesn’t support cascaded dropdown list field as out of the box. But this can be implemented in 3 ways. They are given below.


1.      JavaScript
2.      JQuery
3.      InfoPath Forms

In this article, I will explain how to implement cascaded dropdown list in SharePoint list using JQuery. I will be creating 3 custom lists in SharePoint 2010 site. Below steps explains how to implement cascaded dropdown list in SharePoint list.

1.      Create Countries Custom List – Parent List
2.      Create Cities Custom List – Child List
3.      Create Vacation Plans Custom List – Cascaded functionality implemented
4.      JQuery Information
5.      Add JQuery Script to NewForm.aspx and EditForm.aspx file using SharePoint Designer

Create Countries Custom List

This section explains creation of Countries custom list. This list acts as parent list and will store list of countries. Follow the below steps to create Countries custom list.

   v  Go to SharePoint 2010 site.
   
   v  Click on ‘List’ link in the Left Navigation bar. Click on ‘Create’ link. See the below image for more information.

       

   v  This will open list creation pop-up window. In the list creation pop-up window, select ‘List’ option in the Left Side and select Custom List as template.
   
   v  Enter list name as ‘Countries’ and select ‘Create’ button. See the below image for more information.



   v  After creating Countries custom list, add items to list. See the below image for more information.






Create Cities Custom List

This section explains creation of Cities custom list. This list acts as child list and will store list of cities. Follow the below steps to create Cities custom list.

  v  Go to SharePoint 2010 site.

  v  Create custom list as Cities. Follow the steps explained in Countries list creation section.

  v  Create 'Country' column with below information.

o    Column Name : Country
o    Type : Lookup
o    Require that this column contains information : Yes
o    Enforce Unique value : No
o    Get Information from : Select ‘Countries’ from dropdown list
o    In this column : Select ‘Title’ from dropdown list
o    Click OK to create Country column.

  v  Add items to Cities custom list. See the below image for more information.


Create Vacation Plans Custom List

This section explains creation of ‘Vacation Plans’ custom list. This list implements cascaded dropdown lists functionality i.e. based on selection of ‘Country’, cities will be populated to dropdown list. Follow the below steps to create ‘Vacation Plans’ custom list.

  v  Go to SharePoint 2010 site.
  
  v  Create custom list as ‘Vacation Plans’. Follow the steps explained in Countries list creation section.
  
  v  Create Country column with below information.

o    Column Name : Country
o    Type : Lookup
o    Require that this column contains information : Yes
o    Enforce Unique value : No
o    Get Information from : Select ‘Countries’ from dropdown list
o    In this column : Select ‘Title’ from dropdown list
o    Click OK to create Country column.

  v  Create City column with below information.

o    Column Name : City
o    Type : Lookup
o    Require that this column contains information : Yes
o    Enforce Unique value : No
o    Get Information from : Select ‘Cities’ from dropdown list
o    In this column : Select ‘Title’ from dropdown list
o    Click OK to create City column.



JQuery Information

To implement cascaded dropdown list, we need to download below jquery files from Jquery site.

  v  Jquery.SPServices-0.6.2.min.js
  v  Jquery-1.6.2.min.js

Upload these two files to any document library where everyone has access to it. I would suggest to upload these files to document library of top level site. See the below image for more information.


Add JQuery Script to NewForm.aspx and EditForm.aspx using SharePoint Designer 2010

Follow the below steps to add jquery scripts to NewForm.aspx and EditForm.aspx file using SharePoint Designer 2010.

  v  Open ‘Vacation Plans’ list in SharePoint Designer 2010.

  v  Open NewForm.aspx and EditForm.aspx in advanced mode. See the below image for more information.



  v  Add the below script in both NewForm.aspx and EditForm.aspx page.

Insert the script below <asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”> this tag.

See the below image for the script.



  v  Save the files and check-in.



Verification


1.      Go to ‘Vacation Plans’ list and click on ‘Add a new Item’ option.

2.      Select ‘India’ as Country. You could be able to see all Cities under India are populated to City dropdown list.