Jaa

Näytä, lajittele ja suodata tietoja kaaviosovellusgalleriassa

  • Artikkeli

Luo valikoima, jonka avulla voit näyttää kuvia ja tekstiä useista tuotteista, ja lajittele ja suodata näitä tietoja.

Power Appsissa voit valikoiman avulla näyttää useita liittyviä kohteita samalla tavalla kuin luettelossa. Valikoimissa esittelet kätevästi tuotteiden tietoja, kuten nimiä ja hintoja. Tässä ohjeaiheessa luomme valikoiman ja lajittelemme ja suodatamme sen tietoja Excel-tyyppisten funktioiden avulla. Lisäksi, kun kohde on valittuna, sen ympärillä näkyy reuna.

Huomautus

Tässä ohjeaiheessa käytetään tablettisovellusta. Voit käyttää puhelinsovellusta, mutta joudut muuttamaan joidenkin ohjausobjektien kokoa.

Edellytykset

  • Rekisteröidy Power Appsiin ja kirjaudu sisään käyttäen juuri luomiasi tunnistetietoja.
  • Luo tablettisovellus mallista, tiedoista tai tyhjästä.
  • Lue, miten ohjausobjekti määritetään.
  • Näissä vaiheissa käytetään CreateFirstApp-sovellusta mallisyötetietoina, jotka sisältävät .jpg-kuvia. Zip-tiedosto sisältää XML-tiedoston, joka voidaan muuntaa Excel-muotoon. Muussa tapauksessa Power Apps lukee .zip-tiedostojen tiedostot automaattisesti ja tuo sitten tiedot onnistuneesti. Voit ladata ja käyttää mallitietoja tai tuoda omasi.

  1. Luo valikoima nimeltä Inventory mallitietoja käyttäen. Tähän kuuluvat seuraavat vaiheet:

    1. Valitse Lisää-välilehdestä Ohjausobjektit ja valitse sitten Tuo:

      Lisää ohjausobjekti

    2. Määritä tuontiohjausobjektin OnSelect-ominaisuudeksi seuraava kaava:
      Collect(Inventory, Import1.Data)

      OnSelect-ominaisuus

    3. Avaa Windowsin Resurssienhallinta valitsemalla Tuo tiedot -painike. Valitse CreateFirstApp.zip ja sitten Avaa.

    4. Valitse Tiedosto-valikosta Kokoelmat. Inventory-kokoelma näytetään, ja se sisältää tuomasi tiedot:

      Tiedosto - kokoelmat

      Olemme nyt luoneet Inventory-kokoelman, joka sisältää viiden tuotteen tietoja, kuten mallikuvan, tuotteen nimen ja kappaleiden määrän varastossa.

      Huomautus

      Tuontiohjausobjektilla tuodaan Excel-tyyppisiä tietoja ja luodaan kokoelma. Tuontiohjausobjekti tuo tiedot, kun luot ja esikatselet sovellusta. Tuontiohjausobjekti ei tällä hetkellä tuo tietoja, kun sovellus julkaistaan.

  2. Palaa suunnittelijatyökaluun valitsemalla taaksepäin osoittava nuoli.

  3. Napsauta tai napauta Lisää-välilehdessä Valikoima ja sitten Vaaka-valikoima.

    Galleria - vaakasuuntainen

  4. Napsauta tai napauta oikeanpuoleisessa ruudussa vaihtoehtoa, jossa otsikko ja alaotsikko peittävät grafiikan:

    Asettelu

  5. Määritä valikoiman Items-ominaisuudeksi Inventory:

    Gallerian asettelu

  6. Anna valikoimalle uusi nimi ProductGallery ja siirrä valikoimaa siten, että se ei peitä muita ohjausobjekteja. Muuta valikoiman kokoa siten, että siinä näkyy kolme tuotetta:

    Gallerian nimeäminen uudelleen

  7. Valitse valikoiman ensimmäisen kohteen alaosassa oleva selite:

    Sovellus, jossa on galleria

    Huomautus

    Kun muutat minkä tahansa valikoiman ensimmäistä kohdetta, muutat automaattisesti valikoiman kaikkia muita kohteita.

  8. Määritä selitteen Text-ominaisuudeksi seuraava lauseke:
    ThisItem.UnitsInStock

    Tämän jälkeen selite näyttää kappaleiden lukumäärän varastossa kullekin tuotteelle:

Kunkin tuotteen varasto

Huomautus

Yläselitteen Text-ominaisuudeksi tulee oletusarvoisesti ThisItem.ProductName. Voit muuttaa sen joksikin muuksi kohteeksi kokoelmassa. Jos kokoelmassa on esimerkiksi kentät ProductDescription tai Price, voit määrittää selitteeksi ThisItem.ProductDescription tai ThisItem.Price.

Näissä vaiheissa toimme kokoelmaan .jpg-kuvia sisältäviä tietoja. Sitten lisäsimme valikoiman, jossa näkyvät nämä tiedot, ja määritimme selitteen, joka ilmoittaa kunkin tuotteen varastossa olevan määrän.

  1. Valitse mikä tahansa valikoiman kohde paitsi ensimmäinen. Muokkauskuvake tulee näkyviin (vasemmassa yläkulmassa). Valitse muokkauskuvake:
    Muokkaa

  2. Valitse Lisää-välilehdestä Muodot ja valitse sitten suorakulmio. Täytetty sininen suorakulmio tulee näkyviin valikoiman jokaisen kohteen kohdalle.

  3. Valitse Aloitus-välilehdestä Täyttö ja sitten Ei täyttöä.

  4. Valitse Reunus, Reunan tyyli ja sitten yhtenäinen viiva.

  5. Valitse Reunus uudelleen ja aseta paksuudeksi 3. Muuta suorakulmion kokoa niin, että se ympäröi valikoiman kohteen. Valikoiman kohteissa on nyt sininen reunaviiva, joka näyttää seuraavanlaiselta:
    Valitse reunaviiva

  6. Valitse Muoto-välilehdessä Näkyvissä ja kirjoita sitten kaavariville seuraava kaava:

    If(ThisItem.IsSelected, true)

    Sininen suorakulmio ympäröi nykyisen valinnan valikoimassa. Vahvista, että suorakulmio näkyy jokaisen valitsemasi kohteen ympärillä valitsemalla muutamia valikoiman kohteita. Muista, että voit myös avata esikatselun Esikatselu-painike ja tarkastaa ja testata tuloksen.

Vihje

Valitse suorakulmio, valitse sitten Aloitus-välilehdessä Järjestä uudelleen ja lopuksi Lähetä taustalle. Tämän toiminnon avulla voit valita valikoiman kohteen ilman, että reunus peittää mitään.

Näissä vaiheissa lisäsimme reunuksen valikoiman nykyisen valinnan ympärille.

Näissä vaiheissa lajittelemme valikoiman kohteet nousevassa ja laskevassa järjestyksessä. Lisäksi lisäämme liukusäätimen, jolla suodatetaan valitsemiasi varastossa olevia valikoiman kohteita.

Lajittelu nousevassa tai laskevassa järjestyksessä

  1. Valitse mikä tahansa valikoiman kohde paitsi ensimmäinen.

  2. Items-ominaisuutena on tällä hetkellä Inventory (kokoelmasi nimi). Muuta se seuraavaksi:

    Sort(Inventory, ProductName)

    Kun teet näin, valikoiman kohteet lajitellaan nousevassa järjestyksessä tuotteen nimen mukaan: Galleria järjestetty

    Kokeile laskevaa järjestystä. Määritä valikoiman Items-ominaisuudeksi seuraava kaava:

    Sort(Inventory, ProductName, Descending)

  1. Lisää liukusäädin (Lisää-välilehti > Ohjausobjektit), anna sille uusi nimi StockFilter ja siirrä se valikoiman alle.

  2. Määritä liukusäädin niin, että käyttäjät eivät voi määrittää sitä varastossa olevien kohteiden lukumäärän ulkopuolelle:

    1. Valitse Sisältö-välilehdestä Pienin ja kirjoita sitten seuraava lauseke:
      Min(Inventory, UnitsInStock)
    2. Valitse Sisältö-välilehdestä Suurin ja kirjoita sitten seuraava lauseke:
      Max(Inventory, UnitsInStock)

  3. Valitse mikä tahansa valikoiman kohde paitsi ensimmäinen. Määritä valikoiman Items-ominaisuudeksi seuraava lauseke:
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. Aseta esikatselussa liukusäädin arvoon, joka on valikoiman suurimman ja pienimmän määrän välissä. Kun säädät liukusäädintä, valikoimassa näkyvät vain ne tuotteet, joita on valitsemaasi arvoa vähemmän:
    Esiversiovalikoima ja liukusäätimen arvo

Lisätään seuraavaksi suodatin:

  1. Palaa takaisin suunnittelutyökaluun.
  2. Valitse Lisää-välilehdessä Teksti, valitse Syöteteksti ja anna uudelle ohjausobjektille uusi nimi NameFilter. Siirrä Teksti-ohjausobjekti liukusäätimen alle.
  3. Määritä valikoiman Items-ominaisuudeksi seuraava lauseke:
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. Aseta esikatselussa liukusäädin arvoon 30 ja kirjoita kirjain g Tekstisyöte-ohjausobjektiin. Näyttöön tulee valikoiman ainoa tuote, jota on varastossa alle 30 kappaletta ja jonka nimessä on g-kirjain:
    Esiversioliukusäädin 30:llä

Vinkkejä

  • Voit milloin tahansa valita esiversiopainikkeen (Esiversiopainike-kuva), kun haluat nähdä luomasi ja testata sen.
  • Voit muuttaa ohjausobjektien kokoa ja siirrellä niitä napsauttamalla ja vetämällä, kun suunnittelet sovellustasi.
  • Sulje esikatseluikkuna painamalla ESC-näppäintä tai valitsemalla X-merkki.
  • Kun käytät valikoimaa, valitse sen ensimmäinen kohde, kun haluat tehdä muutoksia kaikkiin valikoiman kohteisiin. Valitse ensimmäinen kohde, kun haluat lisätä esimerkiksi reunan kaikkiin valikoiman kohteisiin.
  • Voit päivittää valikoiman ominaisuuksia valitsemalla minkä tahansa valikoiman kohteen paitsi ensimmäisen. Valitse esimerkiksi toinen kohde, kun haluat päivittää Items- tai ShowScrollbar-ominaisuuksia, jotka koskevat valikoimaa (ei valikoiman kohteita).

Mitä olet oppinut

Tässä aiheessa:

  • Loimme kokoelman, toimme .jpg-kuvia sisältäviä tietoja kokoelmaan ja näytimme valikoiman tiedot.
  • Määritimme valikoiman kunkin kuvan alapuolelle selitteen, joka ilmoittaa kyseisen kohteen kappalemäärän varastossa.
  • Lisäsimme reunuksen valitun kohteen ympärille.
  • Lajittelimme kohteet tuotteen nimen mukaan nousevassa ja laskevassa järjestyksessä.
  • Lisäsimme liukusäätimen ja Syöteteksti-ohjausobjektin, jolla suodatimme tuotteita niiden varastossa olevan lukumäärän ja tuotteen nimen mukaan.

Huomautus

Voitko kertoa meille dokumentaatiota koskevan kielimäärityksesi? Vastaa lyhyeen kyselyyn. (Huomaa, että tämä kysely on englanninkielinen.)

Kyselyyn vastaaminen kestää noin seitsemän minuuttia. Henkilökohtaisia tietoja ei kerätä (tietosuojatiedot).