Vytvoření motivu pro portál

Při sestavování portálů s možnostmi portálu pro aplikaci Microsoft Dynamics 365 budete používat front-end rámce Bootstrap. Díky ekosystému Bootstrap lze tyto portály rychle a snadno přizpůsobovat tak, aby vyhovovaly vaší organizaci.

Implementace šablon portálu pomocí rozhraní Bootstrap

Bootstrap je front-end rámec, který zahrnuje šablony stylů CSS a komponenty jazyka JavaScript pro běžné prvky rozhraní pro webové aplikace. Obsahuje styly pro navigační prvky, formuláře, tlačítka a rychlý systém rozložení mřížky, což umožňuje rozložení webu dynamicky se přizpůsobit zařízením s různou velikostí obrazovky, jako jsou telefony a tablety. Pomocí systému rozvržení Bootstrap je možné vyvinout jediný web, který nabízí odpovídající rozhraní pro všechna zařízení, která může zákazník používat.

Šablony obsažené v portálech aplikace Dynamics 365 jsou implementovány pomocí standardních komponent Bootstrap, s minimem dalších vlastních stylů. Takže při implementaci šablony můžete využít výhod možností vlastního nastavení Bootstrap. Můžete rychle přizpůsobit motiv (písma, barvy a tak dále) takovým způsobem, aby se výsledek konzistentně aplikoval napříč portálem.

Vlastní nastavení Bootstrap

Bootstrap podporuje vlastní nastavení pomocí sady proměnných. Některé nebo všechny tyto proměnné lze nastavit na vlastní hodnoty a potom stáhnout vlastní verzi Bootstrap kompilovanou na základě těchto hodnot.

Výhodou proměnných Bootstrap je to, že nediktují styl jednoho prvku. Všechny styly v rámci vycházejí a odvozují se od těchto hodnot. Zvažte například proměnnou @font-size-base. Tato hodnota určuje velikost, kterou Bootstrap přiřazuje normálnímu textu. Bootstrap však tuto proměnnou používá také k označení velikosti písma pro nadpisy a další prvky. Velikost prvku h1 může být definována jako 300 procent velikosti @font-size-base. Nastavením této jediné proměnné tak můžete jednotným způsobem řídit celý typografický rozsah portálu. Podobně proměnná @link-color určuje barvu hypertextových odkazů. Po přiřazení barvy této hodnotě nadefinuje Bootstrap barvu při ukázání na odkazy jako tmavší o 15 procent oproti vlastní hodnotě.

Standardní způsob, jak vytvořit vlastní verzi Bootstrap, je přes oficiální web Bootstrap. Nicméně vzhledem k popularitě Bootstrap, vzniklo pro tento účel rovněž mnoho webů jiných společností. Tyto weby mohou poskytovat rozhraní pro snadnější vlastní nastavení Bootstrap nebo mohou poskytnout předem navržené verze Bootstrap ke stažení. Oficiální web pro úpravy Bootstrap poskytuje více informací o vlastním nastavení Bootstrap. Web bude vždy nejaktuálnější, ale aktuálně neobsahuje některé funkce uživatelského rozhraní (UI), jako je výběr barev a dynamický náhled.

Když stáhnete upravenou verzi Bootstrap, obsahuje následující adresářovou strukturu.

css/ |-- bootstrap.min.css img/
|-- glyphicons-halflings-white.png |-- glyphicons-halflings.png js/ |-- bootstrap.min.js

Nebo – podle typu použité aplikace úpravce – může obsahovat pouze bootstrap.min.css. Bez ohledu na to je bootstrap.min.css soubor, který obsahuje vlastní nastavení. Ostatní soubory jsou stejné pro všechny vlastní verze Bootstrap a jsou již součástí vašeho portálu aplikace Dynamics 365.

Použití vlastního motivu Bootstrap na váš web

Jakmile máte vlastní soubor bootstrap.min.css, můžete jej použít na svůj portál jedním ze dvou způsobů. Pokud jste vývojář a chcete pracovat přímo se zdrojovým kódem vaší aplikace, můžete přepsat verzi souboru bootstrap.min.css obsaženou ve zdroji aplikace vlastní verzí. Ve většině případů se však doporučuje použít svůj vlastní motiv Bootstrap bez úpravy kódu webu tak, že jej uložíte jako webový soubor do systému pro správu obsahu na portálu aplikace Dynamics 365.

  1. Přihlaste se ke své aplikaci jako uživatel s oprávněními pro správu obsahu. Další informace: Konfigurace webových rolí pro portál PRM.
  2. Přejděte na Domovskou stránku vaší aplikace.
  3. Vyberte Podřízené položky > Upravit tento soubor (tlačítko tužky a papíru) pro bootstrap.min.css z panelu nástrojů pro úpravy obsahu (nachází se v pravém horním rohu okna prohlížeče).
  4. Vyberte váš vlastní soubor bootstrap.min.css pomocí pole Nahrát soubor v zobrazeném dialogu Upravit tento soubor.
  5. Ujistěte se, že je pole Částečná adresa URL nastaveno na bootstrap.min.css. Tato hodnota určuje rámci portálu aplikace Dynamics 365, že má použít vlastní verzi Bootstrap namísto zahrnuté výchozí verze.
  6. Také je možné zaškrtnout políčko Skryto v mapě webu (ve výchozím nastavení zaškrtnuto), aby se tento soubor nezobrazoval uživatelům v prvcích navigace na webu.
  7. Uložte soubor.
  8. Aktualizujte svoji stránku a přizpůsobené styly se okamžitě objeví.

Níže uvedený snímek obrazovky je příklad upravené verze Bootstrap použité na komunitním portálu:

Použití vlastního motivu bootstrap na váš web

Další možnosti úpravy motivů portálu

Kromě vlastní verze Bootstrap portály aplikace Dynamics 365 podporují ukládání vlastních souborů CSS do systému pro správu obsahu. To vám umožňuje použít na portál další styly, aniž byste museli nasazovat novou verzi do jeho kódu. Postupujte podle kroků popsaných dříve pro ukládání vlastních souborů CSS Bootstrap, s použitím souboru obsahujícího vlastní šablony stylů CSS, a poté zvolte pro tento webový soubor novou Částečnou adresu URL. Pokud položka Částečná adresa URL končí na .css, portály aplikace Dynamics 365 ji rozpoznají a použijí ji na váš web.

Spolu s upravenou verzi Bootstrap můžete pomocí systému pro úpravu obsahu přidat vlastní logo a značku do záhlaví portálů. S těmito jednoduchými, ale výkonnými možnostmi jste jen několik minut od toho, aby vaše aplikace portálu Dynamics 365 odrážely vaši značku.

Viz také

Kontakt s komunitami pomocí komunitního portálu
Konfigurace portálu Dynamics 365