Tworzenie galerii szczegółów w aplikacji kanwy

Artykuł
03/15/2023

Postępuj zgodnie z instrukcjami krok po kroku, aby utworzyć galerię szczegółów w aplikacji kanwy w celu zarządzania fikcyjnymi danymi w bazie danych Northwind Traders. Ta temat jest częścią szeregu wyjaśniającej sposób tworzenia aplikacji biznesowej na relacyjnych danych w Microsoft Dataverse. Aby uzyskać najlepsze wyniki, w tej kolejności należy zapoznać się z następującymi tematami:

Tworzenie galerii zamówień.
Tworzenie formularza podsumowania.
Utwórz galerię szczegółów (ten temat).

Definicje obszarów ekranu.

Wymagania wstępne

Przed uruchomieniem tej temat należy zainstalować bazę danych zgodnie z wcześniejszymi instrukcjami w tej temat. Następnie należy utworzyć galerię zamówień i formularz podsumowania albo otworzyć aplikację Northwind Orders (Kanwa) — Rozpocznij część 3, która już zawiera galerię i ten formularz.

Utwórz następny pasek tytułu

U górnej części ekranu wybierz kontrolkę Etykiety, która działa jako pasek tytułu, skopiuj ją, naciskając klawisze CTRL + C, a następnie wklej, wciskając klawisze CTRL + V:
Zmień rozmiar i przenieś kopię, tak aby była widoczna tylko w formularzu podsumowanie.
Usuń tekst z kopii, korzystając z jednego z następujących sposobów:
- Kliknij dwukrotnie tekst, aby go zaznaczyć, a następnie naciśnij klawisz Delete.
- Ustaw właściwość Tekst kontrolki etykiety na pusty ciąg ("").

Dodawanie galerii

Wstaw kontrolkę Galeria z Pustym pionowym układem:

Nowa galeria, która pokaże szczegóły zamówienia, pojawi się w lewym górnym rogu.
Zamknij wyskakujące okno dialogowe źródło danych, a następnie zmień rozmiar i przenieś galerię szczegółów do dolnego prawego narożnika pod nowym paskiem tytułu:
Ustaw właściwość Elementy galerii szczegółów za pomocą tej formuły:
```
Gallery1.Selected.'Order Details'
```
Jeśli zostanie wyświetlony komunikat o błędzie, należy upewnić się, że w galerii zamówień znajduje się nazwa Gallery1 (w okienku Widoku drzewa w pobliżu lewej krawędzi). Jeśli w galerii znajduje się inna nazwa, zmień nazwę na Gallery1.

Dwie galerie zostały już połączone. Gdy użytkownik wybierze zamówienie w galerii zamówień, ten wybór zidentyfikuje rekord w tabeli Zamówienia. Jeśli to zamówienie zawiera jedną lub więcej pozycji, rekord w tabeli Zamówienia jest połączony z jednym lub większą liczby rekordami w tabeli Szczegółów zamówienia, a dane z tych rekordów będą wyświetlane w galerii szczegółów. To zachowanie odzwierciedla relację jeden-do-wielu utworzoną dla użytkownika między tabelami Zamówienia i Szczegóły zamówienia. Określona formuła „przegląda” jako relację przy użyciu zapisu kropkowego:

Pokazywanie nazw produktów

W galerii szczegółów wybierz Dodaj element z zakładki Wstawianie, aby wybrać szablon galerii:

Upewnij się, że zamiast galerii został wybrany szablon galerii. Pole ograniczenia powinno znajdować się nieco wewnątrz granicy galerii i prawdopodobnie krótsza niż wysokość galerii. Po wstawieniu kontrolek do tego szablonu są one powtarzane dla każdego elementu w galerii.
Na karcie Wstawianie wstaw etykietę do galerii szczegółów.

Etykieta powinna zostać wyświetlona w galerii; Jeśli nie, należy ponowić próbę, a następnie pamiętać o wybraniu szablonu galerii, zanim użytkownik wstawi etykietę.
Ustaw właściwość Tekst nowej etykiety na następującą formułę:
```
ThisItem.Product.'Product Name'
```
Jeśli nie zostanie wyświetlony żaden tekst, wybierz strzałkę odpowiadającą Zamówienie 0901 u dołu galerii zamówień.
Zmień rozmiar etykiety tak, aby był wyświetlany pełny tekst:

To wyrażenie pochodzi z rekordu w tabeli Szczegóły zamówienia. Rekord jest przechowywany w ThisItem w tabeli Zamów produkty w relacji wiele-do-jednego:

Wyodrębniona jest kolumna Nazwa produktu (i inne kolumny, które mają być właśnie użyj):

Pokazywanie obrazów produktów

Na karcie IWstawianie wstaw kontrolkę Obraz do galerii szczegółów:
Zmień rozmiar i przesuń obraz i etykietę obok siebie.

Napiwek

Aby uzyskać precyzyjną kontrolę nad rozmiarem i położeniem kontrolki, zacznij zmieniać jej rozmiar lub przesuwać bez naciskania klawisza Alt, a następnie kontynuuj zmianę rozmiaru lub przesuń kontrolkę, przytrzymując klawisz Alt:
Dla właściwości Obraz obrazu ustaw następującą formułę:
```
ThisItem.Product.Picture
```
Ponownie wyrażenie odnosi się do produktu powiązanego z tym szczegółem zamówienia i wyodrębnia pole Zdjęcie do wyświetlenia.
Zmniejsz wysokość szablonu galerii, tak aby była widoczna więcej niż jedna liczba rekordów Szczegółów zamówienia:

Pokaż ilość i koszt produktu

Na karcie Wstawianie wstaw następną etykietę w galerii szczegółów, a następnie zmień rozmiar i przenieś nową etykietę na prawo od informacji o produkcie.
Ustaw właściwość Tekst nowej etykiety na następujące wyrażenie:
```
ThisItem.Quantity
```
Ta formuła wyciąga informacje bezpośrednio z tabeli Szczegóły zamówienia (nie jest wymagana relacja).
Na karcie Strona główna zmień wyrównanie tej kontrolki na Prawo:
Na karcie Wstawianie wstaw następną etykietę w galerii szczegółów, a następnie zmień rozmiar i przenieś nową etykietę na prawo od etykiety ilości.
Ustaw właściwość Tekst nowej etykiety na następującą formułę:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Jeśli nie zostanie podany znacznik języka ([$-en-US]), zostanie on dodany w programie na podstawie języka i regionu użytkownika. Jeśli jest używany inny znacznik języka, należy usunąć $ po nawiasie kwadratowym (]), a następnie dodać symbol waluty w tym miejscu.
Na karcie Strona główna zmień wyrównanie tej kontrolki na Prawo:
Na karcie Wstawianie wstaw następną kontrolkę etykiety w galerii szczegółów, a następnie zmień rozmiar i przenieś nową etykietę na prawo od informacji o cenie jednostkowej.
Ustaw właściwość Tekst nowej etykiety na następującą formułę:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Ponownie, jeśli nie zostanie podany znacznik języka ([$-en-US]), zostanie on dodany w programie na podstawie języka i regionu użytkownika. Jeśli znacznik jest inny, zamiast niego należy użyć symbolu waluty zamiast $ po nawiasie kwadratowym zamykającym (]).
Na karcie Strona główna zmień wyrównanie tej kontrolki na Prawo:

Na razie skończyłeś dodawać kontrolki do galerii szczegółów.
W okienku Widoku drzewa wybierz opcję Screen1, aby mieć pewność, że galeria szczegółów nie jest już zaznaczona.

Dodawanie tekstu do nowego paska tytułu

Na karcie Wstawianie wstaw następną etykietę na ekran:
Zmień rozmiar i przenieś nową etykietę nad zdjęciami produktów na drugim pasku tytułu, a następnie zmień kolor tekstu na biały na karcie Strona główna.
Kliknij dwukrotnie tekst etykiety, a następnie wpisz Produkt:
Skopiuj i wklej etykietę produktu, a następnie zmień rozmiar i przenieś ją nad kolumnę z ilością.
Kliknij dwukrotnie tekst nowej etykiety, a następnie wpisz Ilość:
Skopiuj i wklej etykietę ilości, a następnie zmień rozmiar i przenieś ją nad kolumnę z ceną jednostkową.
Kliknij dwukrotnie tekst nowej etykiety, a następnie wpisz Cena jednostkowa:
Skopiuj i wklej etykietę ceny jednostkowej, a następnie zmień rozmiar i przenieś ją nad kolumnę z rozszerzoną ceną.
Kliknij dwukrotnie tekst nowej etykiety, a następnie wpisz Rozszerzona:

Wyświetlanie sum zamówień

Zmniejsz wysokość galerii szczegółów, aby zapewnić miejsce na sumy zamówień u dołu ekranu:
Skopiuj i wklej pasek tytułu w środku ekranu, a następnie przesuń kopię na dół ekranu:
Skopiuj i wklej etykietę produktu ze środkowego paska tytułu, a następnie przenieś ją na dolny pasek tytułu po lewej stronie kolumny Ilość.
Kliknij dwukrotnie tekst nowej etykiety, a następnie wpisz ten tekst:
Sumy zamówień:
Skopiuj i wklej etykietę sum zamówień, a następnie zmień rozmiar i przenieś kopię na prawo od etykiety podsumowań zamówień.
Ustaw właściwość Tekst nowej etykiety na następującą formułę:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Ta formuła wskazuje na ostrzeżenie delegacji, ale można je zignorować, ponieważ żadne zamówienie nie może zawierać więcej niż 500 produktów.
Na karcie Strona główna ustaw wyrównanie tekstu nowej etykiety jako Prawe:
Skopiuj i wklej kontrolkę etykiety, a następnie zmień rozmiar i przenieś kopię w kolumnie Rozszerzone.
Ustaw właściwość Tekst kopii na następującą formułę:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Ta formuła wskazuje na ostrzeżenie delegacji, ale można je zignorować, ponieważ żadne zamówienie nie może zawierać więcej niż 500 produktów.

Dodaj miejsce na nowe szczegóły

W dowolnej galerii można wyświetlać dane, ale nie można ich aktualizować ani dodawać rekordów. W galerii szczegółów dodasz obszar, w którym użytkownik może skonfigurować rekord w tabeli Szczegóły zamówienia i wstawić ten rekord do zamówienia.

Zmniejsz wysokość galerii szczegółów, aby zrobić miejsce na jednym elemencie w tej galerii.

W tym miejscu dodasz kontrolki, tak aby użytkownik mógł dodać szczegółowe informacje o zamówieniu:
Na karcie Wstawianie wstaw etykietę, a następnie zmień rozmiar i przenieś ją pod galerię szczegółów.
Kliknij dwukrotnie tekst nowej etykiety, a następnie wciśnij Delete:
Na karcie Strona główna ustaw kolor Wypełnienia nowej etykiety jako LightBlue:

Wybierz produkt

Na karcie Wstaw wybierz Kontrolki > Pole kombi:

Kontrolka Pola kombi zostanie wyświetlona w lewym górnym rogu.
W wyskakującym oknie dialogowym wybierz źródło danych Produkty zamówione.
Na karcie Właściwości pola kombi wybierz pozycję Edytuj (obok Pola), aby otworzyć okienko Dane. Upewnij się, że Tekst podstawowy i SearchField mają ustawioną wartość nwind_productname.

Nazwę logiczną określa się, ponieważ w okienku Dane w tym przypadku nie są obsługiwane nazwy wyświetlane:
Zamknij okienko Dane.
Na karcie Właściwości znajdującej się blisko prawej krawędzi okna przewiń w dół opcję Zezwalaj na wiele zaznaczeń i upewnij się, że opcja Zezwalaj na wyszukiwanie jest włączona:
Zmień rozmiar pola kombi i przenieś je do obszaru jasnoniebieskiego, a następnie w obszarze kolumny Nazwa produktu w galerii szczegółów:

W tym polu kombi użytkownik określi rekord w tabeli Produkt dla rekordu Szczegóły zamówienia, który zostanie utworzyć aplikacja.
Trzymając wciśnięty klawisz Alt, wybierz strzałkę w dół pola kombi.

Napiwek

Trzymając naciśnięty klawisz Alt, można interakcyjnie pracować z kontrolkami w Power Apps Studio bez uruchamiania trybu podglądu.
Z wyświetlonej listy produktów wybierz produkt:

Dodaj obraz produktu

Na karcie Wstaw wybierz Multimedia > Obraz:

Kontrolka Obraz zostanie wyświetlona w lewym górnym rogu:
Zmień rozmiar obrazu i przenieś go do obszaru jasnoniebieskiego pod innymi obrazami produktów i obok pola kombi.
Ustaw właściwość Obrazu obrazu na:
```
ComboBox1.Selected.Picture
```
Używasz tej samej sztuczki, którą użyłeś do wyświetlenia zdjęcia pracownika w formularzu podsumowania. Właściwość Wybrana pola kombi zwraca cały wybrany przez użytkownika element, w tym pole Obraz.

Dodawanie pola Ilości

Na karcie Wstaw wybierz Tekst > Wprowadzanie tekstu:

Kontrolka Wprowadzanie tekstu zostanie wyświetlona w lewym górnym rogu:
Zmień rozmiar pola wprowadzania tekstu i przenieś je na prawo od pola kombi, pod kolumną ilości w galerii szczegółów:

Przy użyciu tego pola wprowadzania tekstu użytkownik będzie określać pole Ilość w rekordzie Szczegóły zamówienia.
Ustaw właściwość Domyślną kontrolki na "":
Na karcie Strona główna ustaw wyrównanie tekstu tej kontrolki na Prawo:

Pokaż jednostkę i ceny dodatkowe

Na karcie Wstawianie wstaw kontrolkę Etykiety:

Etykieta zostanie wyświetlona w lewym górnym rogu ekranu:
Zmień rozmiar etykiety i przenieś ją na prawo od kontrolki wprowadzania tekstu oraz właściwość Tekst etykiety ustaw na tę formułę:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Ten formant przedstawia Cennik z tabeli Zamów produkty. Ta wartość spowoduje określenie pola Cena jednostkowa w rekordzie Szczegóły zamówienia.

Uwaga

W tym scenariuszu wartość jest tylko do odczytu, ale w innych scenariuszach użytkownik aplikacji może ją zmodyfikować. W takim przypadku należy użyć kontrolki Wprowadzania tekstu i ustawić jej właściwość Domyślną na wartość Cena katalogowa.
Na karcie Strona główna ustaw wyrównanie etykiety cen katalogowych na Prawo:
Skopiuj i wklej etykietę cen katalogowych, a następnie zmień rozmiar i przenieś kopię na prawo od etykiety cen katalogowych.
Ustaw właściwość Tekst nowej etykiety na następującą formułę:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
W tej kontrolce jest wyświetlana cena rozszerzona w zależności od ilości podanej przez użytkownika aplikacji i cennika produktu, który został wybrany przez użytkownika aplikacji. Jest to wyłącznie informacja dla użytkownika aplikacji.
Kliknij dwukrotnie kontrolkę wprowadzania tekstu dla ilości, a następnie wpisz liczbę.

Etykieta ceny Rozszerzonej powoduje wyświetlenie nowej wartości w następujących postaciach:

Dodaj ikonę Dodaj

Na karcie Wstaw wybierz Ikony > Dodaj:

Ikona zostanie wyświetlona w lewym górnym rogu ekranu.
Zmień rozmiar i przenieś tę ikonę na prawą krawędź obszaru jasnoniebieskiego, a następnie ustaw właściwość OnSelect na tę formułę:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
Generalnie funkcja Patch aktualizuje i tworzy rekordy, a określone argumenty w tej formule określają dokładne zmiany wprowadzone w funkcji.
- Pierwszy argument określa źródło danych (w tym przypadku tabela Szczegóły zamówienia), w którym funkcja będzie aktualizować lub tworzyć rekord.
- Drugi argument określa, że funkcja utworzy rekord z wartościami domyślnymi dla tabeli Szczegóły zamówienia, chyba że w trzecim argumencie określono inaczej.
- Trzeci argument określa, że cztery kolumny nowego rekordu będą zawierać wartości wprowadzone przez użytkownika.
  - Kolumna Zamówienie będzie zawierać numer kolejności, wybranej przez użytkownika w galerii zamówień.
  - Kolumna Produkt będzie zawierać nazwę produktu, który został wybrany przez użytkownika w polu kombi, w którym są wyświetlane produkty.
  - Kolumna Ilość będzie zawierać wartość określoną przez użytkownika w polu wprowadzania tekstu.
  - Kolumna Cena jednostkowa będzie zawierać informacje o cenie katalogowej produktu, który został wybrany przez użytkownika w tym zamówieniu.
Uwaga

Możesz tworzyć formuły korzystające z danych z dowolnej kolumny (w tabeli Produkty zamówień) dla dowolnego produktu wybranego przez użytkownika aplikacji w polu kombi, które pokazuje produkty. Gdy użytkownik wybierze rekord w tabeli Zamów produkty, nie tylko nazwa produktu pojawi się w tym polu rozwijanym, ale także cena jednostkowa produktu pojawi się na etykiecie. Każda wartość wyszukiwania w aplikacji kanwy odwołuje się do całego rekordu, a nie tylko do klucza podstawowego.

Funkcja Odśwież pozwala zagwarantować, że tabela Zamówienia odzwierciedla rekord właśnie dodany do tabeli Szczegóły zamówienia. Funkcja Reset powoduje wyczyszczenie danych dotyczących produktu, ilości i ceny jednostkowej, dzięki czemu użytkownik może łatwiej tworzyć kolejne szczegóły zamówień dla tego samego zamówienia.
Naciśnij klawisz F5 i wybierz ikonę Dodaj.

W zamówieniu są odzwierciedlone określone przez użytkownika informacje:
(opcjonalne) Dodanie kolejnego elementu do zamówienia.
Naciśnij klawisz ESC, aby zamknąć tryb podglądu.

Usuwanie szczegółów zamówienia

W środku ekranu wybierz szablon galerii szczegółów:
Na karcie Wstaw wybierz Ikony > Kosz:

Ikona Kosza zostanie wyświetlona w lewym górnym rogu szablonu galerii.
Zmień rozmiar i przenieś tę ikonę Kosza na prawą stronę szablonu szczegółów galerii, a następnie ustaw właściwość OnSelect na tę formułę:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
W chwili pisania tego tekstu nie można usunąć rekordu bezpośrednio z relacji, więc funkcja Usuń usuwa rekord bezpośrednio z powiązanej tabeli. ThisItem określa rekord do usunięcia, pobrany z tego samego rekordu w galerii szczegółów, w której pojawia się ikona Kosza.

Operacja korzysta z danych w pamięci podręcznej, więc funkcja Odśwież powiadamia tabelę Zamówienia, że aplikacja zmieniła jedną z powiązanych z nią tabel.
Naciśnij klawisz F5, aby otworzyć tryb podglądu, a następnie wybierz ikonę Kosza obok każdego rekordu Szczegóły zamówienia, który chcesz usunąć w zamówieniu.
Spróbuj dodać i usunąć różne szczegóły zamówienia z zamówień:

Podsumowanie

Podsumowując, została dodana kolejna galeria, która pokazuje szczegóły zamówienia oraz kontrolki dodające i usuwające szczegóły zamówienia w aplikacji. Te elementy zostały użyte:

Druga kontrolka galerii połączona z galerią zamówień za pomocą relacji jeden do wielu: Gallery2.Items = Gallery1.Selected.'Order Details'
Relacja wiele do jednego między tabelą Szczegóły zamówienia a tabelą Produkt zamówienia: ThisItem.Product.'Product Name' i ThisItem.Product.Picture
Funkcja Wyboru umożliwiająca uzyskanie listy produktów: Choices( 'Order Details'.Product' )
Właściwość Wybrana pola kombi jako kompletny rekord pokrewny wiele do jednego: ComboBox1.Selected.Picture oraz ComboBox1.Selected.'List Price'
Funkcja Patch do tworzenia rekordu Szczegółów zamówienia: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Funkcja Remove do usuwania rekordu Szczegółów zamówienia: Remove( 'Order Details', ThisItem )

Ta seria tematów była krótkim przewodnikiem po używaniu relacji i wyborów Dataverse w aplikacji kanwy do celów edukacyjnych. Przed wydaniem dowolnej aplikacji do produkcji należy rozważyć sprawdzenie poprawności w terenie, obsługę błędów i wiele innych czynników.

Uwaga

Czy możesz poinformować nas o preferencjach dotyczących języka dokumentacji? Wypełnij krótką ankietę. (zauważ, że ta ankieta jest po angielsku)

Ankieta zajmie około siedmiu minut. Nie są zbierane żadne dane osobowe (oświadczenie o ochronie prywatności).

Share via