Personalizzare la Master Page con :Gestione Progettazione (Design Manager)

Con Sharepoint 2013 sono state introdotte delle novità anche nella parte di personalizzazione della Master Page.
In aggiunta alla possibilità già presente nelle versioni precedenti, di lavorare con file .master; oggi si è aggiunta l’opzione di lavorare con un file in formato .html e di ottenere, con dei passaggi che mostrerò nell’articolo, la pagina .master equivalente.
Per fare ciò utilizzeremo la nuova feature : Gestione Progettazione (Design Manager).
Partiamo subito con un elenco delle caratteristiche (che io ritengo) principali mettendo a confronto questi due approcci :

Design Manager Custom Master Page
Richiede la Feature di Pubblicazione SI NO
Hai solo conoscenza di HTML e al CSS SI NO
Hai conoscenza sul modello di personalizzazione precedenti alla versione 2013 SI SI
Vuoi sfruttare la Feature di “Download Minimo” (MDS) delle pagine. NO SI
Lavori con la versione :Sharepoint OnPremises e O365 SI SI

La prima caratteristica che ho messo in risalto è forse la più importante o quantomeno la più limitante, essendo richiesta la caratteristica di ‘Pubblicazione’ non potremo usare questo sistema con una Farm Foundation.
Fatta questa doverosa premessa, vediamo una panoramica su questo strumento interessante.
Per prima cosa dobbiamo avere attivato la caratteristica ‘Pubblicazione Sharepoint’. Appena attivata la caratteristica avremo modo di vedere che nelle impostazioni del sito, per la sezione “Aspetto” sono visibili queste nuove opzioni:
• Pagina Master
• Modelli di sito e layout di pagina
Per prima cosa dimentichiamo l’approccio, forse noto a tutti, di partire da una copia della Master Page ‘V4’ e di personalizzarla con Sharepoint Designer, anche perché come avranno notato tutti, in Sharepoint Designer non è più disponibile il tab ‘Progettazione’. Al di là delle considerazioni personali su questa novità, l’approccio nella personalizzazione con ‘Gestione Progettazione’ è quello di ‘portare fuori’ dall’ambiente Sharepoint (e quindi S. Designer) questo tipo di attività e di lavorare con il file HTML puro e semplice. Successivamente utilizzando le opzioni della ‘Gestione Progettazione’ sarà possibile trasformare il file HTML in una pagina Master Page di Sharepoint e di modificarla aggiungendo i controlli classici ( come la casella di ricerca).

Vediamo come “step-by-step” è possibile personalizzare da zero la Master Page.

Step 1: Scegliamo un modello di layout.
Partire da zero va bene, da uno è meglio! Sono ormai disponibili diversi template basati su HTML5 & CSS3 e quindi personalmente ne scelgo uno da qui ( a puro scopo di illustrazione):
http://keen.github.io/dashboards/layouts/
Il cui sorgente si trova in :
https://github.com/keen/dashboards
Cliccando su ‘Download ZIP’ nella parte destra:

Immagine1

Scompattiamo l’archivio e navighiamo nelle cartelle fino a “Layouts” dove troviamo la cartella ‘Hero-Sidebar’ con il file ‘index.htm’.
Portiamolo fuori e prendiamo anche la cartella :assests.
Copiando file e cartella in un altro percorso dovremmo avere una situazione del genere:

Immagine2

Apriamo il file ‘index.htm’ con il nostro editor e aggiorniamo i riferimenti ai file delle risorse:

Immagine3

Aggiungiamo nella cartella :assets/img/ il nostro file ‘logo’ che useremo più avanti.

Step 2: Trasferiamo il file nella Master Page Gallery
Questo step ci fa entrare nel merito del nuovo metodo : interagisco con Sharepoint fuori da Sharepoint.
Dalle ‘Impostazioni’ selezioniamo ‘Gestione Progettazione’ e nella pagina che visualizzeremo, selezionare ‘Carica file di progettazione’ (terza voce).

Immagine4

Nella pagina delle impostazioni è visibile l’URL della master page che useremo per connettere un’unità di rete (procedura standard dipendente dal S.O. in uso) che punti alla cartella ‘catalogs\masterpage’.

Immagine5

Dopo aver connesso l’unità di rete procediamo con:
1. La creazione di una cartella nella root che conterrà file e risorse personalizzate (CMP V1).
2. Il trasferimento di tutti i file con le cartelle.
Completato il trasferimento dei nostri file passiamo al prossimo step.
Riepilogando:
La possibilità di mappare come unità di rete la cartella ‘masterPage’ di Sharepoint ci consente di lavorare con un qualunque editor, direttamente sul file ‘HTML’ senza dover conoscere per forza ‘Sharepoint Designer’.
Step 3: Convertire il file HTML in una Master Page.

Questo step è fondamentale e server per creare la “Master Page” di Sharepoint a partire dal file HTML.
Per prima cosa assicuriamoci di avere un backup dei nostri file, che nelle fasi successivi subiranno un po’ di modifiche.
Per la conversione torniamo alla ‘Gestione Progettazione’ e selezioniamo ‘Modifica Master Page’ :

Immagine6

Come si può intuire, clicchiamo sul link ‘Converti un file HTML in una….’ nella finestra di dialogo navighiamo fino alla nostra cartella e selezioniamo il file (index.html):
Notare che il file è nello stato ‘Bozza’; selezionarlo e cliccare su ‘Inserisci’.
Sharepoint farà una verifica sul formato del file e ci avviserà nel caso di problemi.

Immagine7

In caso di errori saranno segnalati e dopo aver apportato le eventuali modifiche, il file sarà convertito:

Immagine8

Clicchiamo sul nome del file per vedere l’anteprima.

Immagine9

Il file è ancora nello stato di Bozza, quindi non è visibile a tutti ma va bene così dato che prima di potere utilizzare la Master Page devono essere fatti un po’ di adeguamenti. Nella parte bassa della pagina è visibile un ‘div’ giallo che rappresenta l’area utilizzata dalle ‘Page Layout’ dovrà sarà “renderizzato” il contenuto.

Step 4: Modificare il file HTML per modificare la Master Page.
Apriamo il file ‘Index.HTML’ che si trova nella ‘Galleria delle Master Page’ :
Noteremo subito dei blocchi di commento aggiunti da Sharepoint; intorno a questi troviamo il nostro codice intatto. Apportiamo delle modifiche per portare nella parte centrale della pagina il ‘Div Giallo’; perché è lì che andranno i contenuti dei Page Layout.
Facendo riferimento a questo file, apriamo il file e selezioniamo il codice contenuto nel div con la classe : “col-sm-9”

Immagine10

Tagliamo il codice (CTRL+X) ed incolliamolo in un nuovo file (CTRL+V) con estensione ‘HTML’. Se l’editor ha aggiunto i tag standard ‘HTML’,”; etc. Cancelliamolo e lasciamo il nostro codice.
Tornando alla ‘Index.html’ e cerchiamo di spostare il ‘Div Giallo’ nel nostro ‘Div class=”col-ms9″‘.
Il ‘Div’ in oggetto.

Immagine11

Riepilogando:
Con questi passaggi abbiamo visto come operando solo sul file HTML, usando l’editor preferito, senza conoscenza dell’ambiente Sharepoint; otteniamo la Master Page equivalente.
Step 5: Usiamo i “Frammenti di codice” (Snippet)
Anche se lavoriamo sul file HTML, sappiamo bene che nella Master Page di Sharepoint esistono una serie di controlli che non possono mancare, come : la casella di ricerca. Per utilizzare lo strumento, dall’anteprima della master page, cliccare su ‘Frammenti di codice’ (Snippet):

Da qui si accede ad una pagina dove è possibile aggiungere i controlli standard come ad esempio il controllo per visualizzare il logo. Per prima cosa selezioniamo nel Ribbon in alto e come esempio selezioniamo il controllo : Logo del Sito.

Immagine12

La pagina si aggiornerà per mostrare la casella delle proprietà di questo controllo dove potremo impostare una serie di attributi. Nella gruppo:
Personalizzazione – Logo sito (SPSimpleSiteLink)
Espandiamo la sezione ‘Navigation’ e in corrispondenza dell’attributo ‘NavigateURL’ inseriamo : “~sitecollection/”

Immagine13

Nel gruppo:
Personalizzazione – Logo sito (SiteLogoImage)
Espandiamo la sezione ‘Misc’ e in corrispondenza dell’attributo ‘LogoImageUrlField’ sostituiamo il valore presente con quello che punta all’immagine che nel primo step abbiamo ‘caricato’ nella cartella ‘assets’, nel mio caso:

Immagine14

Quando abbiamo terminato di modificare anche altri attributi come ad esempio la ‘classe’, andiamo in fondo alla pagina e clicchiamo su ‘Aggiorna’. Con questa operazione avremo la versione aggiornata del sorgente HTML da copiare nel nostro file :

Immagine15

Copiamo il codice nel punto giusto nel nostro file HTML.
Riepilogando:
Da questa pagina è quindi possibile selezionare e aggiungere i controlli standard di una master page:

Immagine15

Proseguendo con questa sezione, possiamo aggiungere tutti i controlli standard di una Master Page, in modalità ‘visuale’ e semplice. Al termine delle modifiche al nostro file non ci rimane che da :

1.Pubblicare il file, diversamente in stato di bozza non sarebbe visibile agli utenti.

Immagine17

2.Impostarla come master page di default:
Impostazioni sito -> Aspetto -> Pagina Master
Nella pagina di configurazione, scegliamo se usare la nostra master page come modello solo per le pagine del sito che aggiungiamo nella raccolta su cui è attiva la caratteristica di pubblicazione:

Immagine18

O se usarla anche per le pagine di sistema.
(In questo caso lascio la default).
Ora se aggiungiamo una pagina della raccolta ‘Pagine’ e scegliamo ad esempio il modello di Pagina ‘Pagina di benvenuto’ :

Immagine19

Vedremo che per questa pagina sarà applicata la nostra Master Page!

Annunci

Informazioni su masiciliano

Analista programmatore, seguo da anni con interesse la piattaforma di collaboration 'Sharepoint'; argomento principale del blog.
Questa voce è stata pubblicata in Personalizzare la UI di Sharepoint e contrassegnata con , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...