Come personalizzare i “Live Tiles” menu su
SharePoint 2013
Autore: Igor Macori, http://www.macori.it
Oltre alle classiche vie di personalizzazione dei componenti di navigazione (Global navigation, Top link bar,
Quick launch), SharePoint 2013 introduce un nuovo elemento che offre la possibilità di costruire
un’efficace ed intuitiva navigazione verso elementi in evidenza del sito SharePoint. Il tutto combinando
un aspetto simile a quello che gli utenti sono ormai abituati a trovare sullo Start Screen di Windows 8,
attraverso l’utilizzo dei “Live Tiles”.
Sto parlando di un nuovo modello di lista, che offre una speciale visualizzazione degli elementi per “Tiles”, e
che è presente sia su SharePoint Foundation 2013 che su SharePoint Server 2013.
Partendo da un modello di sito Team Site, il contenuto di default creato insieme al nuovo sito prevede già la
presenza di una lista di questo tipo, già collocata in home page:
I prerequisiti
Per prima cosa, soprattutto se non sei partito dalla creazione del sito partendo dal modello Team Site, devi
verificare, attraverso i Site settings (Impostazioni sito), che la Site feature (Caratteristiche sito) denominata
Team collaboration lists (Elenchi di collaborazione team) sia tra quelle attive (viceversa dovrai attivarla).
La creazione della lista “contenitore”
Una volta verificati i prerequisiti, dovrai creare la lista “contenitore”, ossia l’elenco che conterrà le voci dei
tuoi elementi di navigazione.
Crea una nuova App, scegliendo il comando Add an App (aggiungi un’app) dal menu azioni dell’utente,
partendo naturalmente dal modello Promoted links:
Il nome del template di lista è “Promoted links”, tradotto poco felicemente in italiano “Collegamenti alzati
di livello”…
Nel mio esempio scelgo di creare la nuova lista con il nome “TilesMenu”, ma ovviamente scegli il nome che
preferisci:
Il nuovo contenitore creato sarà ovviamente inizialmente vuoto, ma potrai iniziare subito avviare il
caricamento delle tue voci di navigazione.
Hai a disposizione due visualizzazioni:


All Promoted Links, che ti permette di gestire l’inserimento e la modifica dei contenuti
Tiles, che sarà la visualizzazione a disposizione dell’utente finale per la navigazione
Partendo dalla prima visualizzazione prova ad inserire un nuovo elemento:
In maniera intuitiva potrai inserire il Titolo della voce e tutti gli atri attributi. Se ad esempio stai creando il
Tile che fungerà da scorciatoia di accesso alla library dei Documenti, potrai definire i seguenti elementi:
Campo
Title
Background image
Description
Link Location
Launch Behavior
Order
Valore o descrizione
Documenti condivisi
Qui puoi definire l’URL di un’icona o immagine utile
a rendere ancor più intuitivo il significato del tile
Inserisci qui una testo descrittivo che fornisca
istruzioni o spiegazioni all’utente (ad es. “Accedi ai
documenti aziendali, dove troverai gli ultimi file
condivisi con i colleghi”)
Inserisci qui l’URL di destinazione, ossia la pagina
dove desideri portare l’utente che farà clic sul Tile
Definisci quale comportamento di navigatore
subirà l’utente, se aprirà la nuova pagina sulla
stessa scheda del browser o su una nuova scheda.
Una volta che avrai più voci nel tuo Tile menu, sarà
importante e utile scegliere l’ordine di
visualizzazione dei diversi Tiles
Arricchire Il Tile menu con immagini Metro-style
Per arricchire il mio Tile menu ho creato delle immagini “metro style” attraverso il software Metro Studio 2
(disponibile anche in versione gratuita su http://www.syncfusion.com/downloads/metrostudio).
Ovviamente puoi scegliere di usare una qualsiasi immagine .
Io ho ad esempio creato alcune immagini significative, le ho esportate da Metro Studio 2 come file
immagine e li ho caricati nella Site Assets library del mio sito SharePoint.
Una volta completato il caricamento delle tue voci di menu, prova a cambiare visualizzazione passando alla
visualizzazione Tiles. Scorrendo con il puntatore del mouse sul tile vedrai apparire il testo descrittivo:
Collocare il Tile Menu in Home Page
Sei quasi arrivato al traguardo. Spostati sulla pagine dove desideri inserire il tuo Tile Menu, come ad
esempio la home page del sito, e scegli il comando Edit page (Modifica pagina) dal menu azioni dell’utente.
Posiziona il cursore nel punto dove desidero collocare i Live Tile e scegli Web Part dl Ribbon Inserisci, fino
ad individuare la Web Part corrispondente al tuo elenco LiveTiles, confermando il tutto con il pulsante Add
(Aggiungi):
Avrai così inserito la Web Part (che di default già sarà impostata per utilizzare la visualizzazione Tiles), e
potrai eventualmente scegliere di nascondere o modificare il titolo della Web Part accedendo alle proprietà
della stessa Web Part:
Salva le modifiche della pagina con il pulsante Save (Salva) dal Ribbon, ed ecco che il gioco è fatto!