Mostrar mensagens com a etiqueta filter dropdown. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta filter dropdown. Mostrar todas as mensagens

sexta-feira, 6 de maio de 2016

Sharepoint 2013 Dropdown list populated from another sharepoint list

This is my solution to dynamically fill a filter dropdown list based on another sharepoint list field

1- Define a folder to place javascript files. I used the following path:
"~sitecollection/_catalogs/masterpage/Display Templates/"

2- Upload the following files to the location you defined on step 1. Use the import files button on your sharepoint designer.



File 1: the jquery library.
File 2: the jquery SP Service library. 
File 3: The custom code for the dropdown list

3 - Use the designer to edit the default list form for New Item (in this case nx.aspx)

4 - Add the following references to forms design. 

<SharePoint:ScriptLink ID="jquery" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/jquery-1.12.3.js"/>

<SharePoint:ScriptLink ID="spservices" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/jquery.SPServices-2014.02.js"/>
 

<SharePoint:ScriptLink ID="trsp" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/CostumDropdown.js"/>

Note that you should update the path if you uploaded the scripts into a different path.


 A good place for you to drop this lines of code is before the form table. Search for <Sharepoint:FormField and FieldName=the first field of your form. Paste the lines before the first <tr> as shown above.

5 - Identify the html element id of the field you wish to apply your dropdown list



6 - Using the Sharepoint designer Edit the custom javascript (file 3 uploaded on step 2).

$(document).ready(function(){
    add_dropdown("lista1", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos",  "Company" );
});


You only need to update the entry parameters for add_dropdown function:
1 - Name of the list (must be different for each dropdown)
2 - Element id you have reached in step 5.
3 - URL where the source of your dropdown list is.
4 - Name of the sharepoint list
5 - Name of the field on the source list


To add a new dropdown just copy the call for the function
$(document).ready(function(){
    add_dropdown("lista1", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos",  "Company" );


    add_dropdown("lista2", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos",  "Phone" );

});



And your set to go.