Seznam jako kontextové menu v SharePoint

Autor: Zdeněk Havel, Head Solution Architect, Business Developement, Konica Minolta IT Solutions Czech

SharePoint umožňuje snadno publikovat příspěvky, ale dospělý redakční systém to opravdu není. Třeba taková běžná věc, kontextově se chovající seznam odkazů, který je centrálně spravován, ten ve výchozím výčtu komponent nenajdete. Jak takové menu vytvořit pomocí seznamu a JSON formátování?

S kolegy jsme připravovali školicí portál, kam měla být nahrána výuková videa z různých tematických okruhů. Například videa pro práci s MS Teams, další byla sada pro práci s OneDrive. V každém okruhu existovalo několik stránek, které na sebe navzájem odkazovaly pomocí menu po pravé straně stránky.

Realizace školicího portálu vypadala triviálně. V SharePoint vytvořit web a připravit šablonu příspěvku, kde bude sekce pro nadpis, textový obsah, video a po pravé straně umístit komponentu Odkazy. Nový příspěvek uživatel vytvoří na základě šablony, vyplní nadpis, vloží doprovodný text, video a do sekce odkazů zadá odkazy na existující příspěvky v sadě. Pak pokračuje dalším příspěvkem, opět vloží nadpis, doprovodný text, video a do Odkazů vyplní odkazy na ostatní články v sadě.

Už při vkládání druhého příspěvku zjistíte, že komponenta Odkazy nesdílí jednotný seznam napříč stránkami a ani neumí automaticky přidávat další odkazy na nové stránky. Při použití komponenty Odkazy pro kontextové menu nezbývá tedy nic jiného, než po přidání každého dalšího příspěvku do sady ručně upravit odkazy na všech již existujících příspěvcích. A to nemluvím o úpravách pořadí odkazů v menu, přejmenování odkazu, změně ikony apod.

Jak vytvořit kontextové menu, spravované centrálně za pomoci seznamu, si ukážeme v následujících krocích.

Příprava seznamu na SharePoint

Na domovské stránce SharePoint webu nebo na stránce obsahu webu vyberte Nové > Seznam. 

Z nabízených šablon vyberte Prázdný seznam.

Po otevření seznamu do něj přidejte sloupce, které budete potřebovat. 

Při jejich tvorbě dodržujte přesně níže uvedené názvy a typy, jinak nebude formátování zobrazení správně fungovat. Všechny sloupce, až na Area, musí být nastaveny jako povinné.

• Hyperlink – Hyprelinkový odkaz nebo obrázek. Do sloupce budeme vkládat odkaz na stránku.
• Area – Volba s podporou výběru více hodnot. Slouží pro filtraci souvisejících položek.
• IconName – Jeden řádek textu. Do sloupce se vkládá název ikony, kterou chceme u odkazu zobrazit. Seznam ikon a jejich názvů naleznete na stránce Office UI Fabric Icons
• Order – Číslo s omezením na celá čísla větší než 0. Umožňuje setřídit odkazy podle vlastního uvážení.

Poté, co vložíte všechny sloupce, by měl formulář pro vložení nového záznamu do seznamu vypadat následovně.

Tvorba zobrazení

Posledním a nejdůležitějším krokem je vytvoření zobrazení pro každou z možností, které jste vložili do volby Area. Východiskem bude zobrazení s názvem „Všechny položky“.

Nejdříve aplikujte na zobrazení filtr a tím zajistíte, že zobrazení bude obsahovat pouze položky, které mají ve sloupci Area hodnotu např. „Teams-Zaciname“.

Pak seznam setřídíte podle sloupce Order.

Takto upravené zobrazení si uložte pod názvem (v našem případě) „Teams-Zaciname“.

Aby menu vypadalo pěkně, aplikujte na něj formátování. Nejdříve otevřete dialog pro úpravu formátu aktuálního zobrazení.

V nově otevřeném dialogu je potřeba kliknout na Rozšířený režim. Tím se přepnete do editace pomocí JSON definic.

Do pole pro JSON definici místo původního formátování vložíme následující definici:

{

 „$schema“: „https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json“,

 „hideColumnHeader“: true,

 „hideSelection“: true,

 „rowFormatter“: {

   „elmType“: „div“,

   „attributes“: {

     „class“: „ms-fontColor-neutralDark ms-fontColor-themePrimary–hover“

   },

   „style“: {

     „font-size“: „16px“,

     „height“: „100%“

   },

   „children“: [

     {

       „elmType“: „span“,

       „attributes“: {

         „iconName“: „[$IconName]“

       }

     },

     {

       „elmType“: „a“,

       „attributes“: {

         „href“: „[$Hyperlink]“

       },

       „txtContent“: „[$Title]“,

       „style“: {

         „padding-left“: „15px“,

         „padding-top“: „10px“,

         „padding-bottom“: „10px“,

         „text-decoration“: „none“

       }

     }

   ]

 }

}

Po uložení bude pohled vypadat následovně.

Přidání na stránku

Do šablony místo komponenty Odkazy vložíme komponentu Seznam. V té vyberte nově vytvořený seznam.

Pomocí funkce „Upravit webovou část“ otevřete nastavení zobrazení seznamu.

V dialogu, který se otevře, vyberete odpovídající upravené zobrazení a zapnete volby „Skrýt panel příkazů“ a „Skrýt tlačítko Zobrazit vše“. Po uložení se aplikuje zvolený pohled a prostou editací textu nad seznamem, upravíte nadpis menu.

Moderní zobrazení a prvky formátování v SharePoint občas nahánějí hrůzu. Ale netřeba se bát. Stačí se inspirovat hotovým řešením, se kterým si trochu pohrajete. Inspiraci můžete hledat třeba na stránkách GitHub – pnp/List-Formatting: List Formatting Samples for use in SharePoint and Microsoft Lists.

Příjemnou zábavu. A budete-li potřebovat pomoci v oblasti Microsoft 365, neváhejte se na nás obrátit.