Changes in Look up Column Behavior in SharePoint 2013

Lookup columns and dropdown columns behave differently in SharePoint 2013 when compared with their behavior in the previous versions (MOSS 2007 and SharePoint 2010).

I have created a list called "Tracker" in 3 different environments, MOSS 2007, SharePoint 2010 and SharePoint 2013, with the same set of fields and type as below.

Field Name	Field Type
Title	Single line of Text
Category	Choice
SubCategory	Lookup ( <20 options)
Account	Lookup ( >20 options)
Cluster	Lookup ( >20 options)

The following are the screenshots of the list's NewForm in the 3 environments in Internet Explorer and Google Chrome.

NewForm in MOSS 2007

Internet Explorer 8

Google Chrome



Table 1

NewForm in SharePoint 2010

Internet Explorer 8



Google Chrome



Table 2

NewForm in SharePoint 2013

Internet Explorer 8



Google Chrome



Table 3

We observe the following:

1. Any field mapping to a dropdown (choice / lookup) that is not a compulsory field, automatically has a "(None)" added to the option in all the 3 environments, MOSS 2007, SharePoint 2010 and SharePoint 2013.
   
   
2. In MOSS 2007, the behavior is different when viewed through IE and Chrome.
   
   When viewed through IE:
   
   
   • This "(None)" option was selected as the default value for those lookups with the number of choices < 20
   • This "(None)" option was not selected as the default value for those lookups with the number of choices > 20.
   • This "(None)" option was not selected as the default value for chosen dropdowns.
     
     When viewed through Google Chrome:
     
     
   • This "(None)" option was selected as the default value for those lookups with the number of choices < 20.
   • This "(None)" option was selected as the default value for those lookups with the number of choices > 20.
   • This "(None)" option was not selected as the default value for chosen dropdowns.
     
     (Refer to the Table 1 pictures.) The "Category" field is a simple choice field whereas "SubCategory", "Account" and "Cluster" are lookup columns."SubCategory" has 19 items in the lookup. "Account" and "Cluster" have > 20 items in the lookup.
     
    
3. In SharePoint 2010 and 2013, the behavior is the same for IE and Chrome. Simple lookup columns do not have this "(None)" option selected by default (although available as the first option) and the lookup field has the "(None)" option selected by default (refer to Table 2 & 3 pictures) irrespective of the number of items in the lookup choice. The "Category" field is a simple choice field whereas "SubCategory", "Account" and "Cluster" are lookup columns."SubCategory" has 19 items in the lookup. "Account" and "Cluster" have > 20 items in the lookup.
    
4. In MOSS 2007 and SharePoint 2010, when viewed through IE, there is a subtle difference in the appearance of the dropdowns representing a simple choice and a lookup field. Closely observe the dropdowns below. This difference, although subtle, provide an inconsistent look in forms.
   
   For dropdowns representing a choice and lookup column with less than 20 choices, we see dropdowns with one style; for dropdowns representing a choice and a lookup column with greater than 20 choices, we see a dropdowns with a different style.
   
   This difference has vanished in 2013 (the reason is explained a little later). All dropdowns look the same.
   
   
5. The dropdowns not only looked different, but also behaved differently in MOSS 2007 and SharePoint 2010. The dropdown representing a simple choice column (and lookup of < 20 values) allowed selecting a value by a single click of the mouse; whereas the dropdown representing a lookup column (< 20 values) worked only on a double-click. This again caused inconsistency in behavior, that was more evident than a mere UI inconsistency mentioned in the previous point. This has now vanished in SharePoint 2013 where the dropdowns (whether simple choice or a lookup column, < or > 20 options) work on a single mouse click.
   The reason for the inconsistency in look and behaviour in earlier versions was that SharePoint rendered a modified input HTML control instead of a select control when the lookup choice exceeds 20. Compare the view source for "Subcategory" and "Account". This is by design.

View Source for SubCategory

<tr>
               <td nowrap="true" valign="top" width="190px" class="ms-formlabel"><h3 class="ms-standardheader">
               <nobr>SubCategory</nobr>
        </h3></td>
               <td valign="top" class="ms-formbody">
               <!-- FieldName="SubCategory"
                        FieldInternalName="SubCategory"
                        FieldType="SPFieldLookup"
                 -->
                       <span dir="none"><select name="ctl00$m$g_22a9da09_948d_470c_b573_cb007ba0d046$ctl00$ctl05$ctl02$ctl00$ctl00$ctl04$ctl00$Lookup" id="ctl00_m_g_22a9da09_948d_470c_b573_cb007ba0d046_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_Lookup" title="SubCategory">
                                      <option selected="selected" value="0">(None)</option>
                                      <option value="14">Architecture Community</option>
                                      <option value="6">Certification Received</option>
                                      <option value="16">Consulting / Advisory</option>
                                      <option value="15">Customer Mindshare</option>
                                      <option value="18">Delivery Support</option>
                                      <option value="10">External Publication</option>
                                      <option value="12">Framework</option>
                                      <option value="8">PoC</option>
                                      <option value="17">Prosales</option>
                                      <option value="1">RFI</option>
                                      <option value="2">RFP</option>
                                      <option value="13">Showcase Your Work</option>
                                      <option value="11">Solution Accelerator</option>
                                      <option value="7">Tool</option>
                                      <option value="19">Tool positioing</option>
                                      <option value="4">Training Attended</option>
                                      <option value="3">Training Conducted</option>
                                      <option value="5">Training Facilitated</option>
                                      <option value="9">White Paper</option>
                              </select><br/></span>
               </td>
        </tr>

View Source for Account

<tr>           <td nowrap="true" valign="top" width="190px" class="ms-formlabel"><h3 class="ms-standardheader">

               <nobr>Account</nobr>

        </h3></td>

               <td valign="top" class="ms-formbody">

               <!-- FieldName="Account"

                        FieldInternalName="Account"

                        FieldType="SPFieldLookup"

                 -->

                       <span dir="none"><span style="vertical-align:middle"><input name="ctl00$m$g_22a9da09_948d_470c_b573_cb007ba0d046$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl01" type="text" value="(None)" id="ctl00_m_g_22a9da09_948d_470c_b573_cb007ba0d046_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="CoreInvoke('HandleLoseFocus')" opt="_Select" title="Account" optHid="SPAccount_Hidden" onkeypress="CoreInvoke('HandleChar')" onkeydown="CoreInvoke('HandleKey')" match="" choices="(None)|0|XX|1|afafa|2|afaf|3|afaf/afaf|4|afafaf|5|qqq qd|6|dhdhdh|7|dthdhdfhdh|8|dhdhjdhdhd |9| wtrwtwtwtw|10|BB&amp;T|11|wtwtwt|100|tmm|12|BGI|13|BMW|101|kkkk|14|llll |15|rrrrrr|16|ttttt|17|rrrrr|18|yuyuyuyu|19|qwqwqw|20|qqqqqqqqqq |21|uuuu|22|nnnnnn|23|nnnnnnrtyrtrtr|24| " onchange="CoreInvoke('HandleChange')" /><img alt="Display lookup values" onclick="CoreInvoke('ShowDropdown','ctl00_m_g_22a9da09_948d_470c_b573_cb007ba0d046_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" /></span><br/></span>

               </td>   </tr>

In SharePoint 2013, when we look at the source, it seems standardized for all types.

ViewSource in SP2013

<tr>

               <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">

               <nobr>Category</nobr>

        </h3></td>

               <td valign="top" width="350px" class="ms-formbody">

               <!-- FieldName="Category"

                        FieldInternalName="Category"

                        FieldType="SPFieldChoice"

                 -->

                       <span id='WPQ227eec66e-0386-4989-81c2-7ec37a349957Category' data-sp-control='SPFieldChoice' data-sp-options='{&quot;mode&quot;:3,&quot;source&quot;:&quot;Category&quot;}'></span>                   

               </td>

        </tr>

               <tr>

               <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">

               <nobr>SubCategory</nobr>

        </h3></td>

               <td valign="top" width="350px" class="ms-formbody">

               <!-- FieldName="SubCategory"

                        FieldInternalName="SubCategory"

                        FieldType="SPFieldLookup"

                 -->

                       <span id='WPQ227eec66e-0386-4989-81c2-7ec37a349957SubCategory' data-sp-control='SPFieldLookup' data-sp-options='{&quot;mode&quot;:3,&quot;source&quot;:&quot;SubCategory&quot;}'></span>         

               </td>

        </tr>  

               <tr>

               <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">

               <nobr>Account</nobr>

        </h3></td>

               <td valign="top" width="350px" class="ms-formbody">

               <!-- FieldName="Account"

                        FieldInternalName="Account"

                        FieldType="SPFieldLookup"

                 -->

                       <span id='WPQ227eec66e-0386-4989-81c2-7ec37a349957Account' data-sp-control='SPFieldLookup' data-sp-options='{&quot;mode&quot;:3,&quot;source&quot;:&quot;Account&quot;}'></span>                    

               </td>

        </tr>

We observe here that the HTML rendering style has changed. If we have implemented any JavaScript / jQuery customizations based on the control's id in a list form, when we migrate to SharePoint 2013, this may not work in a SharePoint 2013 environment as-is, since we see the difference in the HTML rendition.