{"id":31901,"date":"2025-09-10T05:00:00","date_gmt":"2025-09-10T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=31901"},"modified":"2025-08-11T14:53:27","modified_gmt":"2025-08-11T12:53:27","slug":"widok-hierarchii-w-aplikacjach-canvas","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/widok-hierarchii-w-aplikacjach-canvas\/","title":{"rendered":"Widok hierarchii w aplikacjach Canvas"},"content":{"rendered":"\n

Hierarchia danych jest wszechobecna w aplikacjach biznesowych \u2013 katalog produkt\u00f3w, struktura organizacyjna firmy oraz zarz\u0105dzanie projektami lub zadaniami cz\u0119sto wymagaj\u0105 reprezentacji wielopoziomowej. U\u017cytkownicy aplikacji potrzebuj\u0105 narz\u0119dzi pozwalaj\u0105cych na przejrzyste i intuicyjne poruszanie si\u0119 po zagnie\u017cd\u017conych strukturach. Prezentacja danych w formie czytelnego, wielopoziomowego, hierarchicznego widoku jest jednym z wi\u0119kszych wyzwa\u0144, z kt\u00f3rymi mierz\u0105 si\u0119 tw\u00f3rcy aplikacji Canvas Apps.<\/strong><\/p>\n\n\n\n

U\u017cytkownicy ko\u0144cowi oczekuj\u0105 funkcjonalnych i intuicyjnych interfejs\u00f3w, kt\u00f3re umo\u017cliwiaj\u0105 szybkie zrozumienie i nawigacj\u0119 po danych. Prezentacja informacji w formie wielopoziomowej listy mo\u017ce znacznie poprawi\u0107 czytelno\u015b\u0107 i efektywno\u015b\u0107 pracy. Hierarchia pozwala u\u017cytkownikowi lepiej zrozumie\u0107 kontekst, zale\u017cno\u015bci oraz stopie\u0144 szczeg\u00f3\u0142owo\u015bci. Niestety, Canvas Apps, pomimo mnogo\u015bci gotowych komponent\u00f3w, nie oferuje gotowego rozwi\u0105zania do elastycznej wizualizacji danych w takiej formie.<\/strong><\/p>\n\n\n\n

Powstaje zatem potrzeba tworzenia w\u0142asnych rozwi\u0105za\u0144<\/strong>, o kt\u00f3rych wi\u0119cej dowiecie si\u0119 z tego artyku\u0142u.<\/p>\n\n\n\n

Metody wizualizacji danych w postaci hierarchii<\/strong><\/h2>\n\n\n\n

Najpopularniejsz\u0105 metod\u0105 wizualizacji danych w postaci hierarchii jest wykorzystanie zagnie\u017cd\u017conych galerii. Jest to stosunkowo \u0142atwe w implementacji rozwi\u0105zanie, kt\u00f3re umo\u017cliwia prezentacj\u0119 2-poziomowej struktury danych.<\/p>\n\n\n\n

Przyk\u0142ad wykorzystania<\/strong>:<\/p>\n\n\n\n

G\u0142\u00f3wna galeria pokazuje dzia\u0142y, a w ka\u017cdym jej rekordzie znajduje si\u0119 podrz\u0119dna galeria z pracownikami danego dzia\u0142u.<\/p>\n\n\n\n

\"Galeria
Ryc. 1 Galeria zagnie\u017cd\u017cona<\/figcaption><\/figure>\n\n\n\n

\u0179r\u00f3d\u0142o danych galerii zagnie\u017cd\u017conej:<\/p>\n\n\n\n

\"\u0179r\u00f3d\u0142o<\/figure>\n\n\n\n

Uzale\u017cniaj\u0105c widoczno\u015b\u0107 zagnie\u017cd\u017conych galerii np. od warto\u015bci rekordu nadrz\u0119dnego (grupy), kt\u00f3ra aktualizowana jest po naci\u015bni\u0119ciu ikonki, mo\u017cna r\u00f3wnie\u017c w stosunkowo \u0142atwy spos\u00f3b wdro\u017cy\u0107 rozwijane\/zwijane sekcje.<\/p>\n\n\n\n

\"Sekcje
Ryc. 2 Sekcje rozwijane i zwijane<\/figcaption><\/figure>\n\n\n\n

Widoczno\u015b\u0107 galerii zagnie\u017cd\u017conej:<\/p>\n\n\n\n

\"Widoczno\u015b\u0107<\/figure>\n\n\n\n

Akcja na zaznaczeniu ikonki:<\/p>\n\n\n\n

\"Akcja<\/figure>\n\n\n\n

Rodzaj ikonki:<\/p>\n\n\n\n

\"Rodzaj<\/figure>\n\n\n\n

Z uwagi na niski poziom skomplikowania tego rozwi\u0105zania, jest ono bardzo popularne i cz\u0119sto wykorzystywane. W przypadku dwupoziomowej struktury hierarchii oraz optymalnej ilo\u015bci danych, zastosowanie tego typu wizualizacji mo\u017ce by\u0107 dobrym rozwi\u0105zaniem.<\/p>\n\n\n\n

Wady rozwi\u0105zania<\/strong><\/h3>\n\n\n\n

Trzeba jednak pami\u0119ta\u0107, \u017ce wi\u0105\u017ce si\u0119 z pewnymi ograniczeniami oraz problemami, g\u0142\u00f3wnie objawiaj\u0105cymi si\u0119 w postaci niskiej efektywno\u015bci oraz braku elastyczno\u015bci<\/strong>. Wewn\u0119trzna galeria \u0142aduje dane osobno, co znacz\u0105co wp\u0142ywa na wydajno\u015b\u0107 i szybko\u015b\u0107 dzia\u0142ania systemu. Pr\u00f3ba stworzenia dodatkowego poziomu zagnie\u017cd\u017cenia danych wy\u0142\u0105cznie spot\u0119guje ten efekt i jeszcze bardziej spowolni aplikacj\u0119.<\/p>\n\n\n\n

Kolejnym, cho\u0107 tym razem mniej oczywistym minusem tego rozwi\u0105zania jest limit wysoko\u015bci pojedynczego rekordu galerii<\/strong>. Z uwagi na to, \u017ce ka\u017cda z zagnie\u017cd\u017conych galerii wchodzi w sk\u0142ad rekord\u00f3w galerii nadrz\u0119dnej, obowi\u0105zuje j\u0105 limit wysoko\u015bci wynosz\u0105cy 5000. Nale\u017cy o tym pami\u0119ta\u0107, szczeg\u00f3lnie w przypadku wy\u015bwietlania wi\u0119kszej ilo\u015bci rekord\u00f3w z danymi.<\/p>\n\n\n\n

Widok hierarchiczny w jednej galerii<\/strong><\/h2>\n\n\n\n

Rozwi\u0105zaniem, kt\u00f3re obchodzi wi\u0119kszo\u015b\u0107 z powy\u017cej wymienionych ogranicze\u0144 i problem\u00f3w, mo\u017ce by\u0107 implementacja widoku hierarchicznego w jednej galerii przy wykorzystaniu klucza umo\u017cliwiaj\u0105cego dynamiczne filtrowanie i uk\u0142adanie danych w wielopoziomowej strukturze.<\/p>\n\n\n\n

Definiowanie kluczy<\/strong><\/h3>\n\n\n\n

Najwa\u017cniejszym elementem tworzenia tego typu widoku jest poprawne skonstruowanie klucza, na podstawie kt\u00f3rego b\u0119dzie odbywa\u0107 si\u0119 sortowanie danych w galerii. Pomocne mo\u017ce si\u0119 okaza\u0107 r\u00f3wnie\u017c zdefiniowanie stopnia zagnie\u017cd\u017cenia rekord\u00f3w z danymi w kontek\u015bcie ca\u0142ej wielopoziomowej struktury. Do budowy klucza najlepiej u\u017cy\u0107 unikalnych informacji w ramach konkretnej instancji danych. Najlepszym wyborem mo\u017ce okaza\u0107 si\u0119 GUID<\/strong>, poniewa\u017c opr\u00f3cz unikalno\u015bci ma dodatkow\u0105 zalet\u0119, kt\u00f3ra w tym przypadku jest bardzo pomocna \u2013 sta\u0142a ilo\u015b\u0107 znak\u00f3w.<\/p>\n\n\n\n

Zdefiniowanie kluczy dla poszczeg\u00f3lnych rekord\u00f3w mo\u017ce odby\u0107 si\u0119 na kilka sposob\u00f3w.<\/p>\n\n\n\n

Jednym z nich jest u\u017cycie p\u0119tli, kt\u00f3ra b\u0119dzie obraca\u0107 si\u0119 do momentu zako\u0144czenia przetwarzania wszystkich rekord\u00f3w. Poniewa\u017c w Canvas Apps nie ma wbudowanej funkcji podobnej do tych z popularnych j\u0119zyk\u00f3w programowania (np. \u2018do until\u2019 lub \u2018while\u2019 ), to obej\u015bciem tego mo\u017ce by\u0107 wykorzystanie samowyzwalaj\u0105cej si\u0119 kontrolki \u2018toggle\u2019. To sztuczka, kt\u00f3ra mo\u017ce znale\u017a\u0107 zastosowanie nie tylko w tej sytuacji<\/strong>, ale tak\u017ce w ka\u017cdej innej, gdy chcieliby\u015bmy wykorzysta\u0107 logik\u0119 dzia\u0142ania p\u0119tli wykonuj\u0105cej si\u0119 do momentu spe\u0142nienia okre\u015blonego warunku.<\/p>\n\n\n\n

Przyk\u0142ad:<\/strong><\/p>\n\n\n\n

W tabeli zada\u0144 istniej\u0105 relacje pomi\u0119dzy rekordami danych z tej samej tabeli. Tw\u00f3rcy zada\u0144 mog\u0105 zdefiniowa\u0107 w ten spos\u00f3b kolejno\u015b\u0107 ich wykonania, podzieli\u0107 je na konkretne etapy realizacji, pogrupowa\u0107 itd. Ka\u017cdy z rekord\u00f3w posiada unikalny identyfikator (GUID) zapisany w kolumnie \u2018InternalId\u2019 . W kolumnie \u2018ParentInternalId\u2019  opcjonalnie zdefiniowany mo\u017ce by\u0107 r\u00f3wnie\u017c identyfikator zadania nadrz\u0119dnego tzw. rodzica.<\/p>\n\n\n\n

To przyk\u0142ad, kt\u00f3rego charakterystyka relacji mi\u0119dzy danymi znajduje odzwierciedlenie w wielu instancjach danych i przypadkach biznesowych.<\/p>\n\n\n\n

\"Fragment
Ryc. 3 Fragment tabeli z danymi<\/figcaption><\/figure>\n\n\n\n

Z uwagi na brak zdefiniowanej konkretnej liczby poziom\u00f3w zagnie\u017cd\u017cenia danych oraz ilo\u015bci rekord\u00f3w znajduj\u0105cych si\u0119 na tych poziomach, do generacji klucza wykorzystamy kontrolk\u0119 \u2018toggle\u2019. W celu implementacji \u0142atwej i kontrolowanej akcji wyzwolenia dzia\u0142ania kodu mo\u017cna wykorzysta\u0107 zmienn\u0105, kt\u00f3r\u0105 nale\u017cy podstawi\u0107 do warto\u015bci domy\u015blnej toggla i w odpowiednim dla nas miejscu (np. \u2018OnVisible\u2019 ekranu) zdefiniowa\u0107 jej warto\u015b\u0107 na \u2018true\u2019 (wywo\u0142anie), a nast\u0119pnie na \u2018false\u2019 (dezaktywacja i oczekiwanie na kolejne wywo\u0142anie).<\/p>\n\n\n\n

Deklaracja warto\u015bci zmiennej:<\/p>\n\n\n\n

\"Deklaracja<\/figure>\n\n\n\n

Warto\u015b\u0107 domy\u015blna toggla:<\/p>\n\n\n\n

\"Warto\u015b\u0107<\/figure>\n\n\n\n

Kod, kt\u00f3ry ma si\u0119 wykona\u0107 w trakcie dzia\u0142ania toggla, nale\u017cy zdefiniowa\u0107 we w\u0142a\u015bciwo\u015bci \u2018OnCheck\u2019 kontrolki. Idea jest taka, aby zaktualizowa\u0107 warto\u015bci w kolumnach z kluczem i poziomem zagnie\u017cd\u017cenia dla ka\u017cdego rekordu.<\/p>\n\n\n\n

Sekwencja aktualizacji warto\u015bci nast\u0119powa\u0107 b\u0119dzie od najwy\u017cszego poziomu (pozycji bez zdefiniowanego rodzica), w d\u00f3\u0142 (pozycji najbardziej zagnie\u017cd\u017conych). W tym celu przy ka\u017cdym obrocie p\u0119tli tworzona jest kolekcja z danymi podlegaj\u0105cymi aktualizacji. Liczba obrot\u00f3w p\u0119tli (wywo\u0142a\u0144 kodu toggla) jest r\u00f3wna liczbie poziom\u00f3w zagnie\u017cd\u017cenia danych w ca\u0142ej strukturze hierarchii. Po tym nast\u0119puje aktualizacja warto\u015bci klucza oraz poziomu zagnie\u017cd\u017cenia.<\/p>\n\n\n\n

Warto\u015b\u0107 klucza tworzona jest z identyfikator\u00f3w rekord\u00f3w nadrz\u0119dnych, procesowanego rekordu oraz opcjonalnie z warto\u015bci umo\u017cliwiaj\u0105cej wdro\u017cenie dodatkowego sortowania (w tym przypadku data rozpocz\u0119cia). Warto\u015b\u0107 poziomu zagnie\u017cd\u017cenia to warto\u015b\u0107 liczbowa, gdzie 0 oznacza rekord niezagnie\u017cd\u017cony. Wzrost tych warto\u015bci oznacza wi\u0119kszy stopie\u0144 zagnie\u017cd\u017cenia danych.<\/p>\n\n\n\n

Na ko\u0144cu sprawdzane jest, czy nadal istniej\u0105 nieprzeprocesowane dane<\/strong> i w przypadku otrzymania odpowiedzi twierdz\u0105cej nast\u0119puje ponowna aktywacja toggla. Warto\u015b\u0107 negatywna tego warunku oznacza koniec wykonywania si\u0119 kodu.<\/strong><\/p>\n\n\n\n

Kod na aktywacji toggla:<\/p>\n\n\n\n

\"Kod<\/figure>\n\n\n\n

Opcjonalnie, w przypadku gdy istotna jest kolejno\u015b\u0107 wy\u015bwietlanych rekord\u00f3w w obr\u0119bie tej samej instancji (te sam poziom + ten sam rodzic), w trakcie definiowania klucza, mo\u017cna uwzgl\u0119dni\u0107 warto\u015b\u0107 kolumny, po kt\u00f3rej ma nast\u0105pi\u0107 sortowanie.<\/p>\n\n\n\n

Nale\u017cy jednak pami\u0119ta\u0107, \u017ce docelowe sortowanie, kt\u00f3re zostanie wdro\u017cone w galerii, jest sortowaniem alfabetycznym<\/strong>. Ma to szczeg\u00f3lne znaczenie, gdy oczekujemy sortowania po kolumnie z warto\u015bciami liczbowymi lub datami. W przypadku dat dobrym rozwi\u0105zaniem jest uwzgl\u0119dnienie odpowiedniego formatu (np. \u2018yyyy-mm-dd\u2019) \u2013 tak jak w przyk\u0142adzie powy\u017cej.<\/p>\n\n\n\n

Dane liczbowe mog\u0105 okaza\u0107 si\u0119 bardziej problematyczne, jednak dla tego typu informacji r\u00f3wnie\u017c mo\u017cna stworzy\u0107 rozwi\u0105zanie, kt\u00f3re zadzia\u0142a. Nale\u017cy jedynie oszacowa\u0107 prognozowan\u0105, maksymaln\u0105 liczb\u0119 znak\u00f3w najwi\u0119kszych warto\u015bci. W przyk\u0142adzie poni\u017cej jest to 3 (czyli maksymalna szacowana warto\u015b\u0107 to 999). Dla zachowania buforu bezpiecze\u0144stwa mo\u017cna zwi\u0119kszy\u0107 t\u0119 warto\u015b\u0107 o margines b\u0142\u0119du szacunkowego.<\/p>\n\n\n\n

\"aktualizacja\"<\/figure>\n\n\n\n

W \u017ar\u00f3dle danych galerii nale\u017cy odnie\u015b\u0107 si\u0119 do przygotowanej kolekcji oraz uwzgl\u0119dni\u0107 sortowanie alfabetyczne po kolumnie z kluczem.<\/p>\n\n\n\n

\"aktualizacja\"<\/figure>\n\n\n\n

Aby zobrazowa\u0107 poziomy zagnie\u017cd\u017cenia rekord\u00f3w w galerii, mo\u017cna np. wykorzysta\u0107 warto\u015b\u0107 z kolumny \u2018LevelInHierarchy\u2019 i uzale\u017cni\u0107 od tego odsuni\u0119cie tekstu oraz kolor t\u0142a.<\/p>\n\n\n\n

\"Poziomy
Ryc. 4 Poziomy zagnie\u017cd\u017cenia rekord\u00f3w w tabeli \u2013 wizualizacja<\/figcaption><\/figure>\n\n\n\n

Odsuni\u0119cie tekstu:<\/p>\n\n\n\n

\"Odsuni\u0119cie<\/figure>\n\n\n\n

Kolor wype\u0142nienia t\u0142a:<\/p>\n\n\n\n

\"Kolor<\/figure>\n\n\n\n
\"oferty<\/a><\/figure>\n\n\n\n

Podsumowanie<\/strong><\/h2>\n\n\n\n

Powy\u017csze rozwi\u0105zanie umo\u017cliwia wizualizacj\u0119 wielopoziomowej hierarchii danych bez konieczno\u015bci wcze\u015bniejszego okre\u015blania ilo\u015bci poziom\u00f3w. Ze wzgl\u0119du na elastyczno\u015b\u0107 mo\u017ce znale\u017a\u0107 szerokie zastosowanie w wielu scenariuszach<\/strong>. Rozwi\u0105zanie nie wyklucza r\u00f3wnie\u017c opcji implementacji rozwijanych sekcji oraz filtr\u00f3w.<\/p>\n\n\n\n

Nale\u017cy jednak pami\u0119ta\u0107, aby zadba\u0107 o intuicyjne rozr\u00f3\u017cnienie poszczeg\u00f3lnych instancji danych<\/strong>, tak by poszczeg\u00f3lne struktury hierarchiczne nie \u0142\u0105czy\u0142y si\u0119 losowo w widoku. Jest to jednak aspekt wizualny, kt\u00f3ry mo\u017cna obs\u0142u\u017cy\u0107 na wiele sposob\u00f3w, w zale\u017cno\u015bci od preferencji.<\/p>\n\n\n

\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n 5\/5 ( votes: 2) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

Hierarchia danych jest wszechobecna w aplikacjach biznesowych \u2013 katalog produkt\u00f3w, struktura organizacyjna firmy oraz zarz\u0105dzanie projektami lub zadaniami cz\u0119sto wymagaj\u0105 … Continued<\/a><\/p>\n","protected":false},"author":733,"featured_media":31938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[2858,1824,1546,1512],"class_list":["post-31901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-canvas-apps","tag-aplikacje","tag-przeglad-narzedzi","tag-poradnik"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/08\/Computer_2.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/31901"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/733"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=31901"}],"version-history":[{"count":1,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/31901\/revisions"}],"predecessor-version":[{"id":31940,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/31901\/revisions\/31940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/31938"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=31901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=31901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=31901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}