Tuesday, July 23, 2013

SharePoint 2010 - Simple Cascading Lookup with SPServices

A new post on that excellent tool that is SPServices, the jQuery framework / EcmaScript for SharePoint!

A simple scenario: we have two lists of data, for example, Countries and Companies for Countries, and a list which has two columns Lookup, Country and Company.
We want to be able to use the first Lookup, Country, to filter second, Company, showing Companies for the selected Country.

We create the list Nations, with only the Title field.




Now let's create Companies with Title (Company Name) and Country (lookup list to the Nations).



Now, let's create a list CustomList1 that has the two columns Country and Company, respectively lookup of Nations and Companies.

We modify the NewForm.aspx and EditForm.aspx form by entering the following code, making sure to load the SiteAssets. Js file we need:

jquery.SPServices-0.7.2.min.js (download here)
jquery-1.8.2.min.js (tested with this version)

Here's the code to insert in both forms (new and edit):

<script type="text/javascript" src="../../SiteAssets/js/jquery-1.8.2.min.js"> </ script>
<script type="text/javascript" src="../../SiteAssets/js/jquery.SPServices-0.7.2.min.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
  $ (). SPServices.SPCascadeDropdowns ({
    relationshipList: "Company", // ​​Display Name of List of the second Lookup
    relationshipListParentColumn: "Country", // ​​Static Name of column of the list for the first Lookup
    relationshipListChildColumn: "Title", // ​​Static Name of the column of the second Lookup (Company Name)
    // CAMLQuery: "<Eq> <FieldRef Name='Status'/> <Value Type='Text'> Active </ Value> </ Eq>", // ​​Any query to filter the results on the second Lookup
    parentColumn: "Country", // ​​Display Name of the column as written in the New or Edit form of CustomList1
    childColumn: "Company", // ​​Display Name of the column as written in the New or Edit form of CustomList1
    simpleChild: true // change the display of the second Lookup in simple dropdown
  });
});
</ Script>

So, opening a form, for example, new item:


The second dropdown is blank, and if we select the Country:

We filter the entries in the second dropdown:


Of course, we can add code to do cascading on a third lookup.

The only caution is that the script have the column names displayed in the form : if you change this label or, simply, using a multilingual site, you need to go to edit the script.

And it's possible to call all in one .js (perhaps in the master page...) in order to make the changes only once and not have to change both forms..

SharePoint 2010 - Semplice Cascading Lookup con SPServices

Ancora un post su quell'ottimo strumento che è SPServices, il framework jQuery/Ecmascript per SharePoint!

Uno scenario semplice: abbiamo due liste di anagrafiche, ad esempio, Nazioni e Aziende per Nazioni, e una lista che ha le due colonne Lookup, Nazione e Azienda.
Vogliamo poter utilizzare la prima Lookup, Nazione, per filtrare la seconda, Azienda, per le sole Aziende per il Paese selezionato.

Creiamo la lista Nazioni, con il solo campo Title.




Ora creiamo la lista Aziende con Title (Nome Azienda) e Nazione (lookup verso la lista Nazioni).



Ora, creiamo una lista CustomList1 che abbia le due colonne Nazione e Azienda, rispettivamente lookup di Nazioni e Aziende.

Modifichiamo i form NewForm.aspx e EditForm.aspx, inserendo il codice che segue, avendo cura di caricare in SiteAssets i file .js di cui abbiamo bisogno:

jquery.SPServices-0.7.2.min.js (download qui)
jquery-1.8.2.min.js (testato con questa versione)

Ecco il codice da inserire in entrambi i form (new e edit):

<script type="text/javascript" src="../../SiteAssets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../SiteAssets/js/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Società",  //Display Name della Lista della seconda Lookup
    relationshipListParentColumn: "Nazione", //Static Name della colonna della Lista per la prima Lookup
    relationshipListChildColumn: "Title", //Static Name della colonna della seconda Lookup (Nome Azienda)
    //CAMLQuery: "<Eq><FieldRef Name='Status'/><Value Type='Text'>Active</Value></Eq>",   //Eventuale query per filtrare i risultati sulla seconda Lookup
    parentColumn: "Nazione", //Display Name della colonna come scritta nel form New o Edit di CustomList1
    childColumn: "Azienda", //Display Name della colonna come scritta nel form New o Edit di CustomList1
    simpleChild: true //modifica la visualizzazione della seconda Lookup in semplice dropdown
  });
});
</script>

Quindi, aprendo un form, ad esempio, nuovo elemento:


La seconda tendina rimane vuota, mentre se selezioniamo la Nazione:

Abbiamo il filtro sulle voci della seconda tendina:


Ovviamente, possiamo aggiungere altro codice per andare a mettere in cascata una terza lookup.

L'unica accortezza è che gli script portano il nome visualizzato nel form delle colonne: se si cambia questa etichetta o, banalmente, si utilizza un sito multilingua, bisogna andare a modificare gli script.

E' possibile richiamare tutto in un .js (magari nella master page) in modo da fare le modifiche solo una volta e non dover modificare entrambi i form.


Wednesday, July 3, 2013

SharePoint 2010 - Cambiare immagini e layout del Search Box

Abbiamo avuto qualche difficoltà nel dover cambiare il layout, le immagini o il css del box di Ricerca in un Sito SharePoint.
Il problema principale è nella modifica delle immagini: ad esempio, del bottone di ricerca, la lente di ingrandimento.

In SharePoint, viene recuperata tramite il posizionamento di una immagine unica (fgpng.png), contenente tutte le icone, utilizzando le proprietà di Top, Left sull'immagine.
Modificare questo png con tutte le icone non è consigliabile, perché cambierebbe su tutti i Siti della farm.
Inoltre, la lente è proprio una immagine, definitia senza classe css, per cui non è possibile intervenire solo con il foglio di stile.

Abbiamo trovato questa soluzione, un piccolo trucco, che ha funzionato egregiamente!

Sovrascriviamo le classi che definiscono l'immagine del bottone di ricerca e definiamo la nuova immagine per il link del bottone:

.ms-sbgo a  {
   background-image:url("/_layouts/images/myboxsearch/lente.png");
   background-position:4px 5px;
   background-repeat: no-repeat;
   /* ecc ecc */
}

E ora, nascondiamo l'immagine, sempre con il css:

.ms-sbgo > a > img{  
    visibility: hidden;
    height: 24px;
    width: 32px;
    padding:0;
}

Il risultato è che vedremo solo la nostra icona sul bottone e non quella di sistema!


Lo stesso trucco si può utilizzare con successo anche per :
  • Icone del Calendario (prev, next)
  • Separatori delle Breadcrumbs