Omówienie układu formularza danych w aplikacjach kanwy

Łatwo projektuj atrakcyjne i efektywne formularze podczas tworzenia aplikacji kanwy w usłudze Power Apps. Rozważmy na przykład ten podstawowy formularz rejestrowania zamówień sprzedaży:

W tym samouczku omówimy kroki tworzenia tego formularza. Przyjrzymy się również niektórym zaawansowanym tematom, takim jak dynamiczne określanie rozmiaru pól w celu wypełnienia dostępnego miejsca.

Zanim zaczniesz

Jeśli dopiero zaczynasz korzystać z usługi Power Apps (lub masz tylko automatycznie wygenerowane aplikacje), przed rozpoczęciem pracy z tym artykułem warto skompilować aplikację od podstaw . Tworząc aplikację od podstaw, zapoznasz się z wymaganymi pojęciami, takimi jak dodawanie źródeł danych i kontrolek, które zostały wymienione, ale nie wyjaśniono w tym artykule.

Ten artykuł jest napisany tak, jakby masz źródło danych o nazwie Zamówienie sprzedaży i zawiera pola w poprzedniej grafice. Jeśli masz usługę Power Apps na użytkownika, licencję na aplikację lub licencję próbną oraz uprawnienia administratora systemu lub konfiguratora systemu, możesz utworzyć tabelę w usłudze Microsoft Dataverse i dodać podobne pola.

Dodawanie galerii

1. Utwórz aplikację tabletu od podstaw i dodaj źródło danych.

   Wszystkie elementy omówione w tym artykule dotyczą również układów telefonów, ale aplikacje na telefon często mają tylko jedną kolumnę pionową.

2. Dodaj pionową kontrolkę Galeria i ustaw jej właściwość Items na "Zamówienie sprzedaży".

   (opcjonalnie) Aby dopasować przykłady w tym samouczku, zmień układ galerii, aby wyświetlić tylko tytuł i podtytuł.

   

3. W galerii kliknij lub naciśnij pozycję SO004.

   

   Ten rekord zostanie wyświetlony w formularzu, który zostanie skompilowany, wykonując kroki opisane w dalszej części tego artykułu.

Dodawanie paska tytułu

1. Dodaj pusty ekran, na którym zostanie umieszczony formularz.

   Poza tym samouczkiem możesz umieścić kontrolki Galeria i Formularz edycji na tym samym ekranie, ale będziesz mieć więcej miejsca do pracy, jeśli umieścisz je na oddzielnych ekranach.

2. W górnej części nowego ekranu dodaj kontrolkę Etykieta i ustaw jej właściwość Text na następujące wyrażenie:
   "Zamówienie sprzedaży" & Gallery1.Selected.SalesOrderId

   Etykieta zawiera numer zamówienia sprzedaży rekordu wybranego w galerii.

3. (opcjonalnie) Sformatuj etykietę w następujący sposób:

   1. Ustaw jej właściwość Align na Środkowe.

   2. Ustaw właściwość Size na 20.

   3. Ustaw jej właściwość Fill na Navy.

   4. Ustaw właściwość Color na Biały.

   5. Ustaw jej właściwość Width na Parent.Width.

   6. Ustaw jej właściwości X i Y na wartość 0.

      

Dodawanie formularza

1. Dodaj kontrolkę Formularz edycji , a następnie przenieś ją i zmień jej rozmiar, aby wypełnić ekran pod etykietą.

   W następnym kroku połączysz kontrolkę formularza ze źródłem danych Zamówienie sprzedaży przy użyciu okienka po prawej stronie, a nie paska formuły. Jeśli używasz paska formuły, formularz nie będzie domyślnie wyświetlać żadnych pól. Zawsze możesz wyświetlić dowolne pola, wybierając jedno lub więcej pól wyboru w okienku po prawej stronie.

2. W okienku po prawej stronie kliknij lub naciśnij strzałkę w dół obok pozycji Nie wybrano źródła danych, a następnie kliknij lub naciśnij pozycję Zamówienie sprzedaży.

   Domyślny zestaw pól ze źródła danych Zamówienie sprzedaży będzie wyświetlany w prostym układzie z trzema kolumnami. Jednak wiele z nich będzie pustych, a ich osadzenie w położeniu docelowym może zająć trochę czasu.

3. Ustaw właściwość Item formularza na Gallery1.Selected.

   Formularz zawiera rekord wybrany w galerii, ale domyślny zestaw pól może nie być zgodny z tym, co chcesz w produkcie końcowym.

4. W okienku po prawej stronie ukryj każde z tych pól, usuwając zaznaczenie pola wyboru:

   • Identyfikator zamówienia sprzedaży
   • Rachunek
   • Sprzedawca
   • Kontakt z kontem

5. Przenieś pole Stan zamówienia, przesuwając je w lewo, a następnie upuść je po drugiej stronie pola Referencja zamówienia zakupu klienta.

   Ekran powinien wyglądać podobnie do tego przykładu:

   

Wybieranie karty danych

Każde wyświetlone pole ma odpowiednią kartę danych w formularzu. Ta karta zawiera zestaw kontrolek dla tytułu pola, pola wejściowego, gwiazdki (która pojawia się, jeśli pole jest wymagane) i komunikat o błędzie weryfikacji.

Możesz również wybrać karty bezpośrednio w formularzu. Po wybraniu karty, nad nią pojawi się czarny podpis.

Rozmieszczanie kart w kolumnach

Domyślnie formularze w aplikacjach dla tabletów mają trzy kolumny, a w aplikacjach na telefon jeden. Można określić nie tylko liczbę kolumn, które ma formularz, ale także określić, czy wszystkie karty powinny mieścić się w obramowaniach kolumn.

Na poniższej ilustracji liczba kolumn na formularzu została zmieniona z trzech na cztery po zaznaczeniu pola wyboru Przyciągaj do kolumn. Karty w formularzu zostały rozmieszczone automatycznie w celu dopasowania do nowego układu.

Zmienianie rozmiaru kart w wielu kolumnach

W zależności od danych na każdej karcie możesz chcieć, aby niektóre karty mieściły się w jednej kolumnie i innych kartach, aby obejmowały wiele kolumn. Jeśli karta zawiera więcej danych niż chcesz pokazać w jednej kolumnie, możesz poszerzyć kartę, wybierając ją, a następnie przeciągając uchwyt chwytania po lewej lub prawej krawędzi pola wyboru. Podczas przemieszczania uchwytu karta będzie „przyciągana” do krawędzi kolumn.

Aby projekt był bardziej elastyczny, ale zachować pewną strukturę, można zwiększyć liczbę kolumn do 12. Dzięki tej zmianie można łatwo skonfigurować każdą kartę tak, aby obejmowała całą formę, połowę formularza, jedną trzecią, jedną czwartą, jedną szóstą i tak dalej. Zobaczmy to w akcji.

1. W okienku po prawej stronie ustaw liczbę kolumn w formularzu na 12.

   

   Na formularzu nie widać zmian, ale podczas przeciągania lewego lub prawego uchwytu dostępnych jest więcej punktów przyciągania.

2. Zwiększ szerokość karty Data zamówienia, przeciągając jej uchwyt o jeden punkt przyciągania w prawo.

   Karta obejmuje cztery z 12 kolumn formularza (lub 1/3 formularza), a nie tylko trzy z 12 kolumn formularza (lub 1/4 formularza). Za każdym razem, gdy zwiększasz szerokość karty o jeden punkt przypięcia, karta zajmuje dodatkowe 1/12 powierzchni formularza.

   

3. Powtórz poprzedni krok z kartami stan zamówienia i referencją zamówienia klienta.

   

4. Zmień rozmiar kart Nazwa i Opis , aby przyjmować sześć kolumn (lub 1/2) formularza.

5. Rozciągnij dwa pierwsze wiersze adresu dostawy w całości na formularzu:

Wszystko gotowe. Utworzyliśmy formularz zawierający kolumny o różnych rozmiarach w poszczególnych wierszach:

Manipulowanie kontrolkami na karcie

Adres dostawy zawiera kilka informacji, które chcemy wizualnie zgrupować dla użytkownika. Każde pole pozostanie na własnej karcie danych, ale możemy manipulować kontrolkami na karcie, aby dopasować je do siebie.

1. Wybierz kartę Pierwszy wiersz adresu dostawy, wybierz etykietę na tej karcie, a następnie usuń pierwsze trzy wyrazy z tekstu.

   

2. Wybierz kartę Drugi wiersz adresu dostawy, wybierz etykietę na tej karcie, a następnie usuń cały jej tekst.

   Być może myślisz, że wystarczy usunąć kontrolkę etykiety. W wielu przypadkach takie działanie faktycznie pozwala uzyskać oczekiwany efekt. Jednak formuły mogą zależeć od obecności kontrolki. Bezpieczniejsze podejście polega na usunięciu tekstu lub ustawieniu właściwości Visible kontrolki na false.

   

3. Na tej samej karcie przenieś pole wprowadzania tekstu na etykietę, aby zmniejszyć odstęp między pierwszym i drugim wierszem adresu.

   Wysokość karty zmniejsza się, gdy jego zawartość zajmuje mniej miejsca.

   

Teraz zwróćmy uwagę na trzeci wiersz adresu. Podobnie jak w przypadku tego, co właśnie zrobiliśmy, skróćmy tekst każdej etykiety dla tych kart i ustawmy pole Wprowadzanie tekstu na prawo od każdej etykiety. Poniżej przedstawiono kroki karty Stan :

Step	Description	Wynik
1	Wybierz kartę Stan, tak aby uwidocznić jej uchwyty.
2	Wybierz etykietę na tej karcie, tak aby uwidocznić jej uchwyty.
3	Umieść kursor po prawej stronie tekstu, a następnie usuń fragment, którego nie potrzebujemy.
4	Za pomocą uchwytów na krawędziach bocznych dostosuj rozmiar kontrolki etykiety do rozmiaru nowego tekstu.
5	Wybierz kontrolkę wprowadzania tekstu na tej karcie.
6	Za pomocą bocznych uchwytów, dostosuj kontrolkę do wprowadzania tekstu do żądanego rozmiaru.
7	Przeciągnij do góry pole wprowadzania tekstu i na prawo od kontrolki etykiety.
Nasze modyfikacje karty Stan są teraz kompletne.

Wynik dla pełnego trzeciego wiersza adresu:

Właściwości wielu kart są ustawiane dynamicznie podczas ich wyświetlania. Na przykład kontrolka Wpisywanie tekstu, której zmieniliśmy rozmiar i przenieśliśmy wyżej, miała właściwość Width opartą na szerokości elementu nadrzędnego. Podczas przenoszenia lub zmieniania rozmiaru kontrolki te formuły dynamiczne są zastępowane wartościami statycznymi. Jeśli chcesz, możesz przywrócić formuły dynamiczne za pomocą paska formuły.

Wyłączanie przyciągania do kolumn

Czasami potrzebujesz bardziej precyzyjnej kontroli niż standardowe 12 kolumn. W takich przypadkach można wyłączyć opcję Przyciąganie do kolumn , a następnie ręcznie umieścić karty. W formularzu będzie kontynuowane przyciąganie do 12 kolumn, ale aby zmienić jego rozmiar lub położenie, można również przytrzymać wciśnięty klawisz Alt lub Ctrl+Shift. Więcej informacji można znaleźć w sekcji dotyczącej skrótów klawiaturowych związanych z zachowaniem alternatywnym.

W naszym przykładzie cztery składniki tworzące trzeci wiersz adresu mają dokładnie taką samą szerokość. Ale może to nie być najlepszy układ, ponieważ nazwy miast są dłuższe niż skróty stanów, a pole Wprowadzanie tekstu dla krajów/regionów jest krótkie ze względu na długość etykiety. Aby zoptymalizować to miejsce, wyłącz opcję Przyciąganie do kolumn w okienku po prawej stronie, a następnie przytrzymaj klawisze Alt lub Ctrl+Shift podczas zmiany rozmiaru i położenia tych kart.

Po starannym pozycjonowaniu wynik ma odpowiednie rozmiary dla każdego pola, a nawet odstępy w poziomie między polami:

Podsumowując, jakie są różnice, gdy Przyciąganie do kolumn jest włączone w porównaniu do wyłączonego?

Ustaw szerokość i wysokość

Podobnie jak w przypadku wszystkich elementów w usłudze Power Apps, układ formularza podlega właściwościom kontrolek karty. Zgodnie z opisem można zmienić wartości tych właściwości, przeciągając kontrolki do różnych lokalizacji lub przeciągając uchwyty do zmiany rozmiaru kontrolek. Jednak odkryjesz sytuacje, w których chcesz lepiej zrozumieć i manipulować tymi właściwościami, zwłaszcza podczas tworzenia formularzy dynamicznych za pomocą formuł.

Układ podstawowy: X, Y i Szerokość

Właściwości X i Y kontrolują położenie kart. W przypadku umieszczenia kontrolek na kanwie podstawowej właściwości te odpowiadają położeniu bezwzględnemu. W formularzu te właściwości mają inne znaczenie:

• X: Kolejność w wierszu.
• Y: Numer wiersza.

Podobnie jak w przypadku kontrolek na kanwie, właściwość Width określa minimalną szerokość karty (więcej informacji na temat minimalnego aspektu za chwilę).

Przyjrzyjmy się właściwościom X, Y i Width kart w naszej formie:

Przepełnienie wierszy

Co się stanie, jeśli karty będą zbyt szerokie, aby pomieścić się w wierszu? Zwykle nie musisz martwić się o tę możliwość. Po ustawieniu przyciągania do kolumn te trzy właściwości zostaną automatycznie dostosowane tak, aby wszystko pasowało do wierszy bez przepełniania.

Jednak przy wyłączonej opcji Przyciągaj do kolumn albo w przypadku użycia formuły dla właściwości Width jednej lub kilku kart może wystąpić przepełnienie wiersza. W takim przypadku karty będą automatycznie się zawijać, tworząc kolejny rząd. Na przykład ręcznie zmienimy właściwość Width karty Odwołanie do zamówienia zakupu klienta (pierwszy wiersz, trzeci element) na wartość 500:

Trzy karty w górnym rzędzie nie mieszczą się już w poziomie, więc utworzono kolejny rząd, aby pomieścić nadmiar. Współrzędna Y dla wszystkich tych kart jest nadal taka sama na 0, a karty Nazwa i Opis nadal mają wartość Y z 1. Karty, które mają różne wartości Y , nie są scalane między wierszami.

Tego zachowania można użyć do utworzenia w pełni dynamicznego układu, w którym rozmieszczanie kart uwzględnia porządek na osi Z, a karty zajmują maksymalną ilość dostępnego miejsca przed ich zawinięciem do następnego wiersza. Aby osiągnąć ten efekt, nadaj wszystkim kartom tę samą wartość Y i użyj wartości X dla kolejności kart.

Wypełnianie przestrzeni: WidthFit

Przepełnienie w ostatnim przykładzie spowodowało utworzenie spacji po karcie Stan zamówienia , która była drugą kartą w pierwszym wierszu. Możemy ręcznie dostosować właściwości Width dwóch pozostałych kart, aby wypełnić to miejsce, ale takie podejście jest żmudne.

Alternatywnie użyj właściwości WidthFit . Jeśli ta właściwość ma wartość true dla co najmniej jednej karty z rzędu, pozostałe miejsce w wierszu zostanie równomiernie podzielone między nimi. Jak wspomniano wcześniej, właściwość Width karty określa jej minimalną szerokość, którą można faktycznie zwiększyć. Ta właściwość nigdy nie spowoduje zmniejszenia karty, tylko ją rozwinie.

Jeśli ustawimy wartość WidthFit na wartość true na karcie Stan zamówienia , wypełnia ona dostępne miejsce, podczas gdy pierwsza karta pozostaje niezmieniona:

Jeśli ustawimy również WidthFit na true na karcie Data zamówienia, obie karty będą równomiernie dzielić dostępne miejsce:

Uchwyty na tych kartach uwzględniają dodatkową szerokość zapewnianą przez widthFit, a nie minimalną szerokość zapewnianą przez właściwość Width . Manipulowanie właściwością Width przy włączonej właściwości WidthFit może być mylące; możesz wyłączyć tę funkcję, wprowadzić zmiany w obszarze Szerokość, a następnie włączyć ją ponownie.

Kiedy może być przydatne narzędzie WidthFit ? Jeśli masz pole, które jest używane tylko w niektórych sytuacjach, możesz ustawić jej właściwość Visible na wartość false, a pozostałe karty w wierszu automatycznie wypełnią wokół niego miejsce. Możesz użyć formuły, która pokazuje pole tylko wtedy, gdy inne pole ma określoną wartość.

W tym miejscu ustawimy właściwość Visible pola Stan zamówienia na statyczną wartość false:

Po usunięciu drugiej karty trzecia karta może teraz powrócić do tego samego wiersza co pierwsza karta. Właściwość WidthFit pierwszej karty jest wciąż ustawiona na wartość true, więc karta ta zajmuje całe dostępne miejsce.

Ponieważ stan Zamówienia jest niewidoczny, nie można go wybrać tak łatwo na kanwie. Można jednak wybrać dowolną kontrolkę, widoczną lub nie, na hierarchicznej liście kontrolek po lewej stronie ekranu.

Wysokość

Właściwość Height określa wysokość każdej karty. Karty mają właściwość, która jest odpowiednikiem właściwości WidthFit dla właściwości Height i zawsze ma wartość true. Załóżmy, że właściwość HeightFit istnieje, ale nie poszukaj jej w produkcie, ponieważ taka właściwość nie jest jeszcze uwidoczniona.

Nie można wyłączyć tego zachowania, więc zmiana wysokości kart może być trudna. Wysokość wszystkich kart w wierszu wydaje się równa wysokości najwyższej karty. Spójrzmy na poniższy wiersz:

Która karta decyduje o wysokości wiersza? Na poprzedniej ilustracji wybrano kartę Total amount i pojawia się jako wysoka, ale jej właściwość Height jest ustawiona na 80 (taką samą jak wysokość pierwszego rzędu). Aby zmniejszyć wysokość wiersza, musisz zmniejszyć wysokość najwyższej karty w tym wierszu, a nie możesz zidentyfikować najwyższej karty bez przejrzenia właściwości wysokości każdej karty.

AutoHeight

Karta może być również wyższa niż oczekiwano, jeśli zawiera kontrolkę, dla której właściwość AutoHeight jest ustawiona na wartość true. Na przykład wiele kart zawiera etykietę, która wyświetla komunikat o błędzie, jeśli wartość pola powoduje problem z walidacją.

W przypadku braku tekstu do wyświetlenia (braku błędu) wysokość etykiety jest ustawiana na zero. Gdybyś nie wiedział lepiej, nie wiedziałbyś, że to tam jest, tak właśnie powinno być.

Lista widoczna po lewej stronie ekranu zawiera kontrolkę etykiety ErrorMessage1. Podczas aktualizowania aplikacji możesz wybrać tę kontrolkę, aby nadać jej wysokość i pokazać uchwyty chwytania, za pomocą których można ustawić i określić rozmiar kontrolki. "A" w niebieskim polu wskazuje, że kontrolka ma ustawioną wartość AutoHeight na true:

Właściwość Text tej kontrolki jest ustawiona na Parent.Error, która służy do uzyskiwania dynamicznych informacji o błędach na podstawie reguł walidacji. W celach ilustracyjnych ustawimy statycznie właściwość Text tej kontrolki, która zwiększy jej wysokość (i, według rozszerzenia, wysokość karty), aby pomieścić długość tekstu:

Wydłużymy nieco komunikat o błędzie, co spowoduje dalsze zwiększenie rozmiaru kontrolki i karty. Ogólna wysokość wiersza się zwiększa przy zachowaniu wyrównania w pionie między kartami: