Harjoitus – Tietolähteen lisääminen pohjaan perustuvaan sovellukseen ja toiminnallisten sivujen suunnittelu

  • 8 minuuttia

Power Appsissa voit yhdistää tietosi jo olemassa olevaan sovellukseen tai sovellukseen, jonka olet luonut alusta alkaen. Sovelluksesi voi muodostaa yhteyden SharePointiin, Microsoft Dataverseen, Salesforceen, OneDriveen tai mihin tahansa muuhun tietolähteeseen.

Käytämme SharePointia ensisijaisena tietolähteenä tälle sovellukselle. Voit muodostaa yhteyden SharePoint-sivustoon ja luoda sovelluksen automaattisesti mukautetusta luettelosta, luoda yhteyden ennen tietojen lisäämistä olemassa olevaan sovellukseen tai luoda sovelluksen alusta alkaen.

Luo SharePoint-sivusto

  1. Kirjaudu Sisään SharePoint-portaaliin Käyttämällä Microsoft-organisaation tunnistetietojasi.

  2. Luo SharePoint-sivusto valitsemalla +Luo sivusto SharePointin aloitussivulla.

    Näyttökuva, jossa näytetään sivuston luominen SharePointin aloitussivulla.

  3. SharePointin aloitussivulta löydät seuraavat tiedot:

    • Valitse sivuston tyyppi; Vaihtoehtona on Viestintäsivusto tai Ryhmäsivusto. Valitse Viestintäsivusto.

    • Anna sivustolle sopiva nimi. esimerkiksi Easy Sales.

    • Lisää tarvittaessa Sivuston kuvaus (valinnainen).

    • Valitse haluamasi kieli avattavasta valikosta.

  4. Luo SharePoint-sivusto tietojen lataamista varten valitsemalla Valmis.

    Näyttökuva sivuston tietojen päivittämisestä.

Uusi SharePoint-sivusto luodaan ja se on valmis käytettäväksi sekunneissa. Voit nyt luoda luettelon, tiedostokirjaston, sivun ja niin edelleen juuri luomassasi sivustossa.

Huomautus

Jos valitsit Ryhmä-sivuston, myös Microsoft 365 -ryhmä luodaan.

SharePoint-luettelon luominen

SharePoint-luettelo kerää tietoja, joiden rakenne on jokin taulukon, laskentataulukon tai yksinkertaisen tietokannan kaltainen. Se voi sisältää monia erityyppisiä tietoja, kuten numeroita, tekstiä, liitteitä ja jopa kuvia.

Easy Sales -sovellukselle luomme luettelon, joka sisältää tiedot kaikista tuoteluokista: sohvat, tuolit, taulukot ja matot.

  1. Valitse juuri luodussa SharePoint-sivustossa nimellä Helppo myynti, valitse + Uusi -valikko ja luo sitten SharePoint-luettelosi valitsemalla Luettelo .

    Näyttökuva luettelon valitsemisesta.

  2. Luo SharePoint-luettelo alusta alkaen valitsemalla Luo luettelo -ikkunassa Tyhjä luettelo.

    Näyttökuva Tyhjä luettelo -vaihtoehdon valinnasta.

  3. Määritä Luo-ruutu seuraavasti:

    • Anna luettelolle sopiva nimi. esimerkiksi Easy Sales.

    • Täytä tarvittaessa kuvaus.

    • Jätä Näytä sivuston siirtymistoiminnoissa -valintaruutu valituksi.

    • Valitse Luo.

      Näyttökuva luontiruudusta.

Tietojen lisääminen SharePoint-luetteloon

Kun luettelo on luotu, on aika lisätä tiedot. Tässä "tiedot" tarkoittavat minkä tahansa tietyn tuotteen tietoja. Tuotetiedot sisältävät seuraavat tiedot: Nimi, Kuva, Hinta, Dimensiot, Paino, Väri, EnsisijainenMaterial, Alue, Korkeus ja 3D-malli/kuva tuotteesta, jota tarkastellaan yhdistetyssä todellisuudessa.

  1. Valitse luodussa Helppo myynti -luettelossa + Lisää sarake , jos haluat lisätä sarakkeen, joka on tietyntyyppinen. Alla olevassa luettelossa näkyvät sarakkeet, jotka on luotava, ja niiden nimet ja tyypit ovat tässä muodossa: Sarakkeen nimi - Saraketyyppi.

    • Nimi: Yksi tekstirivi
    • ImageLink: Yksi tekstirivi
    • Hinta: Yksi tekstirivi
    • Dimensiot: Yksi tekstirivi
    • Paino: Yksi tekstirivi
    • Väri: Yksi tekstirivi
    • PrimaryMaterial: Yksi tekstirivi
    • Korkeus: luku
    • Syvyys: luku
    • Leveys: luku
    • Hinta/cm2: Luku
    • ProductCategory: Yksi tekstirivi
    • Tiedostotyyppi: Yksi tekstirivi

    Valitse saraketyyppi avattavasta luettelosta; Valitse esimerkiksi Yksi tekstirivi.

    Näyttökuva Yksittäisen tekstirivin valinnasta.

    Anna sarakkeen tiedot Luo sarake -välilehdessä ja valitse Tallenna.

    Näyttökuva sarakkeen luomisesta.

    Toista sama menettely muiden edellä olevan luettelon sarakkeiden osalta.

    Huomautus

    Kun olet luonut SharePoint-luettelon , järjestelmä luo oletusarvoisen Otsikko-sarakkeen , jonka voit nimetä uudelleen nimellä Nimi.

  2. Kun lisäämme sarakkeet, meidän on lisättävä todelliset tiedot näihin sarakkeisiin. Aloita tietojen lisääminen sarakkeisiin lataamalla mukautettu kansio, joka sisältää kaikkien neljän luettelon kaikki tuotetiedot. Jos haluat käyttää tietoja, valitse seuraava linkki, valitse Lisää tiedostoa -toimintopainike (...) sivun oikeasta yläkulmasta ja valitse Lataa.

    Power Appsin mukautettu kansio

  3. Valitse + Uusi lisätäksesi kohteen ja täytä sitten vaaditut tiedot ladatun Excel-tiedoston ohjeiden mukaisesti. Tallenna annetut tiedot valitsemalla Tallenna .

    Näyttökuva uuden kohteen lisäämisestä Uusi- tai Muokkaa-ruudukkonäkymässä -vaihtoehdosta.

    Huomautus

    Ruudukkonäkymän avulla voit lisätä tietoja vapaasti eri riveihin tai sarakkeisiin.

  4. Aloita tietojen lisääminen niihin kuuluviin sarakkeisiin kuvan mukaisesti:

    Näyttökuva sharepoint-luettelosta, jossa on lisätty tietoja

    Huomautus

    Jos haluat sisällyttää omia kuvia, voit lisätä Internetissä käytettävissä olevien julkisten kuvien kuvalinkit ImageLink-sarakkeeseen . Saat kuvalinkit napsauttamalla hiiren kakkospainiketta ja valitsemalla Kopioi kuvan osoite -vaihtoehdon.

    Huomautus

    Matto-luokkaluettelossa ei tarvita korkeutta, syvyyttä ja leveysarvoja. Tämä tuoteluokka ottaa haltuun MR-istunnon mittayksikön aikana mitatun aluearvon ja antaa maton hinnan lasketun alueen jälkeen. Olemme kuitenkin lisänneet Price/cm2-sarakkeen laskentaprosessin helpottamiseksi.

Luo yhteys

Nyt kun kaikki sovelluksen edellyttämät tiedot on tallennettu SharePoint-luetteloon, muodostamme yhteyden Power Appsiin. Kun yhteys on muodostettu, voit helposti käyttää SharePoint-tietoja sovelluksen kautta.

  1. Aloita yhteyden luominen kirjautumalla sisään Power Appsiin ja valitsemalla vasemmassa siirtymispalkissa Yhteydet. Valitse sitten + Uusi yhteys lähellä vasenta yläkulmaa.

  2. Valitse SharePoint. Valitsemme SharePointin , koska olemme tallentaneet vaaditut tiedot SharePoint-luetteloihin .

    Näyttökuva SharePointin valitsemisesta.

  3. Jos haluat muodostaa yhteyden SharePoint Onlineen, valitse Yhdistä suoraan (pilvipalvelut) ja valitse sitten Luo, ja anna pyydettäessä tunnistetiedot.

    Näyttökuva Luo-vaihtoehdon valinnasta.

  4. Yhteys on luotu, ja voit luoda sovelluksen alusta alkaen.

    Huomautus

    Vaikka yhteys olisi luotu, voit silti lisätä, muokata ja poistaa SharePoint-luetteloon tallennettuja tietoja. Kaikki muutokset näkyvät sovelluksessa yhteyden kautta.

Aloitetaan easy sales - sovelluksen rakentaminen SharePoint-tietojen perusteella ja lisätään sitten halutessasi tietoja muista lähteistä. Tämän menettelyn avulla voit suunnitella joitakin sovelluksen pääsivuja. Opit esimerkiksi suunnittelemaan käynnistysnäytön, tuotesivun ja tuoteluettelosivun. Käsittelemme myös SharePoint-luetteloon tallennettuja tietoja Power Apps -valikoima-ohjausobjektin kautta.

Avaa tyhjä sovellus

  1. Siirry Power Apps - aloitussivulle ja valitse sitten vasemmasta valikosta Luo . Valitse Tyhjä sovellus ja valitse sitten Luo kohdassa Tyhjä pohjan sovellus.

    Näyttökuva pohjaan perustuvan sovelluksen valinnasta tyhjästä.

  2. Määritä sovelluksesi nimi. Esimerkiksi Easy-Sales. Valitse Puhelin ja valitse sitten Luo.

    Näyttökuva sovelluksen nimen määrittämisestä ja Luo-vaihtoehdon valinnasta.

    Power Apps Studio luo tyhjän sovelluksen puhelimia varten.

    Huomautus

    Vaikka voit suunnitella sovelluksen alusta alkaen eri laitteille, tässä ohjeaiheessa keskitytään sovelluksen suunnittelemiseen puhelimille.

  3. Jos Tervetuloa Power Apps Studioon -valintaikkuna avautuu, valitse Ohita.

    Näyttökuva Ohita-vaihtoehdon valinnasta.

Tietoihin yhdistäminen

Jos haluat sisällyttää tietoja Power Appiin, sinun on muodostettava yhteys tietoihin sovelluksesi liittimien kautta. Koska olemme tallentaneet kaikki tiedot SharePoint-luetteloon , valitsemme yhdeksi liittimeksi SharePointin .

  1. Valitse Power Apps Studion vasemmalla puolella Tiedot-vaihtoehto .

  2. Kun olet avannut Tiedot-ruudun , muodosta yhteys tietoihin valitsemalla Lisää tiedot -painike.

  3. Laajenna Valitse tietolähde -ikkunassa Liittimet-osio ja valitse SharePoint-vaihtoehto.

    Näyttökuva Lisää tiedot ja sharepoint -vaihtoehdon valinnasta.

  4. Edellisessä harjoituksessa loimme jo yhteyden. Lisää tiedot sovellukseesi valitsemalla luotu yhteys. Valitse SharePoint-sivusto , joka luotiin nimellä Helppo myynti.

    Näyttökuva Helpon myynnin valinnasta.

  5. Kun olet valinnut Easy Sales SharePoint -sivuston, näet kaikki kyseisellä sivustolla luodut luettelot. Valitse seuraavaksi sovelluksesta luotu SharePoint-luettelo ja valitse Yhdistä.

    Näyttökuva luettelon valitsemisesta.

  6. Kaikki vaaditut tiedot on yhdistetty ja valmiit käytettäviksi sovelluksessa. Voit nyt aloittaa sovelluksen luomisen.

Käynnistysnäytön luominen

  1. Valitse Puunäkymä-vaihtoehto Power Apps Studion vasemmasta reunasta. Power Apps Studiossa pitäisi jo olla tyhjä näyttö. Jos näin ei ole, valitse Aloitus-välilehdeltä kohdan Uusi näyttö vieressä oleva alanuoli, joka avaa näyttötyyppiluettelon. Luo tyhjä näyttö valitsemalla Tyhjä .

    Näyttökuva uuden näytön luomisesta.

  2. Anna näytölle uusi nimi Käynnistysnäyttö valitsemalla kolme pistettä -kuvake (...) näytön nimen vieressä ja valitsemalla Nimeä uudelleen -vaihtoehto.

    Näyttökuva näytön uudelleennimeämisestä.

  3. Valitse juuri luotu näyttö, jos haluat muuttaa sen ominaisuuksia näytön oikeassa reunassa olevassa Ominaisuudet-välilehdessä.

  4. Jos haluat lisätä kuvan näyttöön, valitse Taustakuva-ominaisuuden vieressä oleva avattava luettelo. Valitse + Lisää kuvatiedosto valitaksesi ladatun logotiedoston.

    Näyttökuva helpon myynnin logon lisäämisestä.

  5. Määritä kuvan sijainniksi Sovita , jotta koko kuva mahtuu määritettyyn kokoon. Sovita-asetus skaalaa kuvan suhteellisesti eikä rajaa kuvaa.

    Näyttökuva Easy Sales -logon lisäämisestä käynnistysnäyttöön.

  6. Laajenna Lisää-välilehden avattava Syöttö-valikko ja valitse Ajastin. Vedä sitten painiketta näytössä ja sijoita se mihin tahansa haluat.

    Näyttökuva ajastimen lisäämisestä.

  7. Jos haluat muokata joitakin ajastimen ominaisuuksia, voit joko käyttää avattavaa Ominaisuus-valikkoa vasemmassa yläkulmassa tai käyttää Ominaisuudet-ruutua. Määritä seuraavat ominaisuudet:

    • Automaattinen aloitus: tosi

    • Kesto: 2000

    • Näkyvissä: false

      Näyttökuva ajastimen ominaisuuksien päivittämisestä.

      Huomautus

      Oletusarvon mukaan kesto mitataan millisekunteihin. Koska yksi sekunti = 1 000 millisekuntia, syötämme keston arvoksi 2 000.

  8. Haluamme, että käynnistysnäyttö näkyy vain kahden sekunnin ajan ja siirtyy sitten aloitussivulle. Luo Tyhjä näyttö, kuten teimme edellisessä vaiheessa, ja nimeä se uudelleen aloitussivuksi. Valitse myöhemmin käynnistysnäyttöön lisätty ajastinpainike ja määritä OnTimerEnd-ominaisuus . Korvaa false seuraavalla sisällöllä:

    Navigate('Home Page',ScreenTransition.Fade)

    Näyttökuva OnTimerEnd-ominaisuuden määrittämisestä.

  9. Tallenna sovelluksesi siirtymällä kohtaan Tiedosto>Tallenna. Valitse seuraavaksi Pilvipalvelu-vaihtoehto ja valitse Tallenna.

Aloitussivun luominen

  1. Valitse aiemmin luotu aloitussivu . Jos haluat lisätä neljä painiketta, siirry Lisää-välilehteen ja valitse Painike-vaihtoehto painikkeiden lisäämiseksi näyttöön. Säädä näiden painikkeiden kokoa ja sijaintia tarpeen mukaan. Nimeä ne uudelleen Sofas_button, Chairs_button, Tables_button ja Carpets_button.

    Näyttökuva painikkeiden lisäämisestä.

  2. Muuta painikkeiden näyttöteksti ilmaisemaan tuoteluokkia , kuten sohvat, tuolit, taulukot ja matot.

    Näyttökuva näyttötekstin muokkaamisesta.

  3. Näiden painikkeiden avulla voit siirtyä eri luokkien tuoteluetteloon. Tämä edellyttää, että suodatamme tuotteet pois SharePoint-luettelosta tuoteluokan perusteella. Luo kaksi uutta Blank-näyttöä ja nimeä ne uudelleen Nimellä Tuotteet ja Matot.

    Näyttökuva uusien näyttöjen lisäämisestä.

  4. Valitse juuri luotu Sofas_button -painike ja määritä OnSelect-ominaisuus . Kun painike on valittu, sen on nostettava edellisessä vaiheessa luotu tuoteluettelosivu. Korvaa false seuraavalla koodilla:

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    Näyttökuva sohvasivulla siirtymisestä

    Huomautus

    Tunnus on kontekstimuuttuja, jolle on määritetty jokin arvo. Tämä arvo välitetään Navigate-funktiossa mainitulle kohdesivulle. Muuttujalle määritetty arvo suodattaa tuotteet tuoteluokan perusteella.

  5. Toista sama menettely kolmelle muulle painikkeelle. Varmista jälleen, että annat oikeat näyttönimet Navigate-funktiossa . Jos haluat esimerkiksi määrittää OnSelect-ominaisuudentuoleista, taulukoista ja mattoista , käytä Navigate-funktiota seuraavasti:

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    Juomaraha

    Tallenna edistymisesi valitsemalla Tiedosto-välilehti yläreunasta ja valitsemalla Tallenna-vaihtoehto . Voit tallentaa edistymisesi myös käyttämällä Ctrl + S -näppäinyhdistelmää.

    Huomautus

    Navigate-funktion oletussyntaksi on: Navigate(Screen [, Transition [, UpdateContextRecord]])

    • Screen: Pakollinen. Avattava näyttö.
    • Siirtymä: Valinnainen. Nykyisestä näytöstä uuteen siirtymisen visuaalinen efekti. Oletusarvo on Ei mitään.
    • UpdateContextRecord: Valinnainen. Tietue, joka sisältää vähintään yhden sarakkeen nimen ja arvon jokaiselle sarakkeelle. Tämä tietue päivittää uuden näytön kontekstimuuttujat, jos se välitetään UpdateContext-funktiolle.

    Juomaraha

    Voit testata sovellustasi painamalla näppäimistön F5-näppäintä tai napsauttamalla Power Apps Studion oikeassa yläkulmassa olevaa Toista-painiketta .

Nyt kun olemme lisänneet tuoteluokat, näytämme tuoteluettelon kuhunkin luokkaan kuuluvista tuotteista. Käytämme Power Appsissa Valikoima-ohjausobjektia tietotietueen näkemiseen.

  1. Valitse Tuotteet-näytönLisää-välilehdeltäValikoima>Pysty , jos haluat lisätä näyttöön Valikoima-ohjausobjektin .

    Näyttökuva valikoiman lisäämisestä

  2. Nimeä se uudelleen nimellä Gallery_products. Määritä vasemmanpuoleisen ruudun Ominaisuudet-välilehdessäKohteet-ominaisuus seuraavasti:

    If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

    Näyttökuva sharepointin yhdistämisestä

    Suodatamme SharePoint-luetteloon tallennetut tuotteettuoteluokan perusteella. Kontekstimuuttujia käytetään suodatusprosessissa.

  3. Määritä Valikoimakentät-ominaisuus>Ominaisuudet-ruudussa valitsemalla Muokkaa:

    • Määritä HintaSubtitle1-otsikkoon .

    • Määritä OtsikkoTitle1-otsikkoon .

      Näyttökuva kenttien määrittämisestä tuotteet-sivulla

    Kun määrität edellä olevat kentät, näet, miten tiedot näkyvät Valikoimassa.

  4. Säädä Gallery_products kokoa tarvittaessa. Jos haluat lisätä ImageLink-linkinImage1-otsikkoon, valitse Kuva valikoimasta ja määritä Ominaisuus-välilehden Kuva-ominaisuus lisäämällä tämä koodirivi:

    ThisItem.ImageLink

    Näyttökuva kuvaominaisuuden määrittämisestä tuotesivulla

  5. Lisätään seuraavaksi selite näytön yläreunaan valitsemalla Selite-vaihtoehto . Mukauta sitten sijaintia, väriä ja tekstin näyttöä kuvan mukaisesti:

    Näyttökuva selitteen lisäämisestä tuotteisiin -sivu

  6. Lisää Takaisin-kuvake aiemmin lisätyn selitteen päälle, jotta käyttäjä voi tarvittaessa siirtyä aloitussivulle . Jos haluat lisätä Takaisin-kuvakkeen , laajenna avattava Kuvakkeet-valikko ja valitse Takaisin-kuvake .

    Näyttökuva Takaisin-kuvakkeen lisäämisestä aloitussivulla

  7. Sijoita Takaisin-kuvake oikein ja muuta sen näytön väriä tarvittaessa. Määritä sen OnSelect-ominaisuus lisäämällä seuraavat:

    Navigate('Home Page',ScreenTransition.Cover)

    Näyttökuva OnSelect-ominaisuuden määrittämisestä

  8. Noudata samoja ohjeita Matot-sivulla . Määritä Matot-sivulle lisätyn valikoiman Items-ominaisuus seuraavasti:

    Filter('Easy Sales',ProductCategory = "Carpet")

    Näyttökuva, jossa seurataan samoja mattoja koskevaa toimintosarjaa

    Juomaraha

    Tallenna edistymisesi valitsemalla Tiedosto-välilehti yläreunasta ja valitsemalla Tallenna-vaihtoehto . Voit tallentaa edistymisesi myös käyttämällä Ctrl + S -näppäinyhdistelmää.

Kun olet toteuttaa edellä mainitut vaiheet, sovelluksesi tulee näyttää tältä. Sovellus sisältää erinomaisen käynnistysnäytön, aloitussivun ja tuoteluettelon tuotteiden selaamista varten.

sovellusesittely, kun yhteys tietolähteeseen on muodostettu.