Office 365

Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

20 października, 2021 0
Podziel się:

Podczas tworzenia stron na Power Apps Portals możemy wybrać, czy chcemy przygotować własny nagłówek i stopkę strony, czy wolimy użyć rozwiązania wbudowanego. O ile w pierwszym przypadku mamy dowolność w tworzeniu layoutu, o tyle rozwiązanie wbudowane wydaje się być wygodniejsze i dostarcza pewnych benefitów, na których może nam zależeć. Możemy potrzebować wbudowanego mechanizmu z własnymi, dodatkowymi modyfikacjami, aby spełnić specyficzne wymagania klienta.

Niektóre narzędzia dostarczane są wraz z nagłówkiem wbudowanym (np. shell do pobierania tokenów). Jeśli nam na nich zależy, a jednocześnie chcemy dodać specyficzny plik CSS lub znacznik meta, którym np. skorygujemy niechciane przez klienta powiększanie elementów na iOS, to musimy ten wbudowany nagłówek zmodyfikować.

Poniżej przedstawię, w jaki sposób można dodać dodatkowy element pomiędzy znacznikami <head>…</head> takiego domyślnego nagłówka strony, bez konieczności używania mechanizmów jQuery.

Ukryte i mało znane content snippets

Power App Portals wyróżnia się szerokim wachlarzem konfiguracyjnym. Jednym z jego elementów są snippety, czyli definiowalne fragmenty tekstu, które możemy wykorzystywać wielokrotnie na różnych stronach portalu w myśl zasady DRY (ang. Don’t Repeat Yourself). Większość snippetów utworzymy sami w celu uzupełnienia naszych stron o treść lub skrypty. Istnieje jednak pewien zestaw wbudowanych fragmentów tekstu, które odgrywają określoną rolę na portalach, dając jednocześnie dodatkowe pole do konfiguracji elementów wbudowanych.

Poniżej zostaną opisane dwa z nich: Head/Bottom oraz Head/Fonts.

Uzupełnianie znaczników w sekcji <head></head>

Istnieją dwa sposoby na wstawienie znaczników w sekcji <head> z użyciem snippetów. Główna różnica pomiędzy nimi polega na umiejscowieniu zdefiniowanego tekstu. Oba sposoby mają zastosowanie w przypadku korzystania ze standardowego nagłówka strony (ustawienia Page Template).

1 use website header - Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

Ryc. 1 Włączanie standardowego nagłówka i stopki

  • Użycie snippetu Head/Bottom

Pierwszy sposób to użycie snippetu Head/Bottom. Tekst, który w nim zdefiniujemy, pojawi się na dole sekcji <head> przed znacznikiem zamykającym. Głównym przeznaczeniem tego snippetu jest definiowanie dodatkowych znaczników <meta>.
Jeśli nie widzimy takiego snippetu w aplikacji, musimy go sobie utworzyć. Aby to zrobić, należy przejść następujące kroki:

  1. Wchodzimy w naszą aplikację (model-driven).
  2. W menu wybieramy Content Snippets (sekcja Content).

    2 content snippets z menu wyroznic - Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

    Ryc. 2 Wybór sekcji Content Snippets

  3. Z górnego menu wybieramy New i wypełniamy formularz danymi jak poniżej:

    2.1new 1024x492 - Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

    Ryc. 3 Konfiguracja snippetu Head/Bottom

  4. Po zapisaniu zmian zdefiniowany tekst pojawi się w dolnej części sekcji <head>.
  • Użycie snippetu Head/Fonts

Jeżeli natomiast chcielibyśmy dodać coś wyżej w tej sekcji, możemy posłużyć się innym snippetem – Head/Fonts. Został on opracowany w celu definiowana arkuszy CSS. Teksty w nim umieszczone znajdą się nad definicją pierwszego domyślnego pliku CSS.
Podobnie jak w przypadku Head/Bottom – jeśli nie jest dostępny, musimy go utworzyć w analogiczny sposób.

3 - Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

Ryc. 4 Efekt zastosowania snippetów Head/Fonts oraz Head/Bottom w źródle strony HTML na portalu

Należy jednak pamiętać, że nie są to sekcje do wpisywania dowolnych wartości, ponieważ mechanizmy Power Apps Portals dokonują analizy znaczników HTML-a.

Poniższy efekt uzyskamy, jeśli wpiszemy <test />. Jak widać, utworzył nam się znacznik otwierający i zamykający. Gdybyśmy wpisali inny tekst – rozdzielony spacjami – mogłyby się dodatkowo utworzyć atrybuty dla tego znacznika.

4 wyroznic znaczniki test - Dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals

Ryc. 5 Efekt nieprawidłowej konfiguracji snippeta Head/Bottom

Pozostałe ukryte content snippets

Opisane powyżej snippety pomogą nam konfigurować sekcję <head> na stronie, wykorzystując template ze standardowym nagłówkiem i stopką.

Istnieje jednak szereg innych, wbudowanych content snippetów, jak na przykład:

  • links/logout – pozwala na definiowanie tekstu na standardowym przycisku singout,
  • links/login – pozwala na definiowanie tekstu na standardowym przycisku signin,
  • Account/Nav/SignIn – pozwala na definiowanie tytułu dla sign in page.

Tworząc strony w Power Apps Portals, warto mieć na uwadze istnienie content snippetów, by wykorzystać ich potencjał. Pełną listę dodatkowych snippetów znajdziecie tutaj.

Kategorie: Office 365
Paweł Dzedzej
Autor: Paweł Dzedzej
Software Engineer z wieloletnim stażem w tworzeniu aplikacji desktopowych i webowych. Sympatyk React i C#. Zwolennik podejścia, że kod powinno się oddawać w lepszym stanie, niż się go zastało. W Sii koduje, m.in. aplikacje SharePoint oraz Power Apps Portals. Prywatnie średniozaawansowany narciarz i miłośnik wędrówek po górach.

    Imię i nazwisko (wymagane)

    Adres email (wymagane)

    Temat

    Treść wiadomości

    Zostaw komentarz