Kangassovelluksen luominen projektien hallitsemista varten

  • Artikkeli

Huomautus

Tämä artikkeli on osa opetusohjelmasarjaa Power Appsin, Power Automaten sekä Power BI ja SharePoint Onlinen käytöstä. Varmista, että luet sarjan esittelyn, jotta saat paremman käsityksen kokonaiskuvasta, sekä aiheeseen liittyvät ladattavat tiedostot.

Tässä tehtävässä rakennamme kangassovelluksen alusta alkaen. Tämä sovellus sallii käyttäjän määrittää esimiehen projekteihin ja päivittää projektin tietoja. Näkyviin tulee joitakin samoja ohjausobjekteja ja kaavoja, joita näimme ensimmäisessä sovelluksessa, mutta tällä kertaa rakennamme enemmän sovellusta itse. Prosessi on monimutkaisempi, mutta opit lisää, joten uskomme, että tämä kannattaa.

Nopea Power Apps Studion yleiskatsaus

Power Apps Studiossa on kolme ruutua ja valintanauha, joiden avulla sovellusten luominen on samankaltaista kuin diapinon tekeminen PowerPointissa:

  1. Vasen siirtymispalkki, jossa näkyy sovelluksen kaikkien näyttöjen ja ohjausobjektien hierarkkinen näkymä, sekä näyttöjen pikkukuvat
  2. Keskimmäinen ruutu, joka sisältää sovelluksen näytön, jossa työskennellään
  3. Oikea ruutu, jossa määritetään asetuksia, kuten asettelu ja tietolähteet
  4. Avattava Ominaisuus-luettelo, jossa valitaan ominaisuudet, joihin kaavat vaikuttavat
  5. Kaavarivi, johon lisätään kaavoja (kuten Excelissä), jotka vaikuttavat sovelluksen toimintaan
  6. Valintanauha, jossa lisätään ohjausobjekteja ja mukautetaan suunnitteluelementtejä

Power Apps Studio.

Vaihe 1: Luo näytöt

Aloitetaan sitten sovelluksen rakentaminen.

Sovelluksen luominen

Luo tyhjä pohjaan perustuva sovellus, jolla on Puhelin-asettelu ja nimenä Projektin hallintasovellus.

Lisää neljä näyttöä sovellukseen

Tässä vaiheessa luomme neljä tyhjää näyttöä sovellukselle. Käytämme erilaisia näytön asetteluja näytön tarkoituksen mukaan. Lisäämme elementtejä näihin näyttöihin myöhemmissä vaiheissa.

Näyttö Tarkoitus
SelectTask Avausnäyttö; siirry muihin näyttöihin
AssignManager Määritä esimies hyväksyttyyn projektiin
ViewProjects Näytä luettelo projekteista sekä yhteenvetotietoja
UpdateDetails Näytä ja päivitä projektin tiedot

  1. Napsauta tai napauta Aloitus-välilehdessä ensin NewScreen ja sen jälkeen Vieritettävissä oleva näyttö.

    Vieritettävissä oleva näyttö.

  2. Anna näytölle uusi nimi SelectTask.

    Nimeä näyttö uudelleen.

  3. Luo ja nimeä muita näyttöjä uudelleen:

    1. Napsauta tai napauta NewScreen ja sen jälkeen Vieritettävissä oleva näyttö. Anna näytölle uusi nimi AssignManager.
    2. Napsauta tai napauta NewScreen ja sen jälkeen Luettelonäyttö. Anna näytölle uusi nimi ViewProjects.
    3. Napsauta tai napauta NewScreen ja sen jälkeen Lomakenäyttö. Anna näytölle uusi nimi UpdateDetails.

  4. Valitse Screen1:n vieressä kolme pistettä (. . .) ja napsauta tai napauta Poista.

    Näytön poistaminen.

Sovelluksen pitäisi nyt näyttää samalta kuin seuraavassa kuvassa.

Kaikki sovelluksen näytöt.

Vaihe 2: Yhdistä Microsoft-luetteloiden avulla luotuun luetteloon

Tässä vaiheessa yhdistämme Projektitiedot -luetteloon. Käytämme vain yhtä luetteloa tässä sovelluksessa, mutta voit helposti yhdistää molempiin, jos haluat laajentaa sovellusta.

  1. Napsauta tai napauta vasemmassa siirtymispalkissa kohtaa SelectTask.

  2. Napsauta tai napauta oikean ruudun kohtaa Lisää tietolähde.

    Yhdistä tietoihin.

  3. Napsauta tai napauta Uusi yhteys.

    Uusi yhteys.

  4. Valitse SharePoint.

    SharePoint-yhteys.

  5. Valitse Yhdistä suoraan (pilvipalvelut) ja napsauta tai napauta Luo.

    Yhdistä suoraan (pilvipalvelut).

  6. Kirjoita SharePoint URL-osoite ja napsauta tai napauta Siirry.

    SharePointin URL yhteydelle.

  7. Valitse Projektitiedot-luettelo ja napauta tai napsauta sitten Yhdistä.

    Valitse Projektitiedot-luettelo.

    Tietolähteet-välilehti oikeanpuoleisessa ruudussa näyttää nyt luomasi yhteyden.

    Tietolähteet-välilehti.

Vaihe 3: Rakenna SelectTask-näyttö

Tässä vaiheessa kerromme tavan, jolla voit siirtyä sovelluksen muihin näyttöihin, työskennellessäsi joidenkin Power Appsin tarjoamien ohjausobjektien, kaavojen ja muotoiluasetusten kanssa.

Päivitä otsikko ja lisää esittelyteksti

  1. Napsauta tai napauta vasemmassa siirtymispalkissa SelectTask-näyttöä.

  2. Valitse keskimmäisessä ruudussa oletusarvo [Otsikko] ja päivitä sitten kaavarivillä Teksti-ominaisuuden arvoksi ”Contoso Project Management”.

    Teksti-ominaisuus kaavarivillä.

  3. Valitse Lisää-välilehti, napsauta tai napauta Nimi ja vedä sitten otsikko alas yläpalkin alapuolelle.

    Selitteen lisääminen.

  4. Määritä seuraavat nimen ominaisuudet kaavarivillä:

    • Väri-ominaisuus = DarkGray

    • Koko-ominaisuus = 18

    • Teksti-ominaisuus = ”Napsauta tai napauta tehtävää ja jatka...”

      Päivitä nimiteksti.

Lisää kaksi siirtymispainiketta

  1. Napsauta tai napauta Lisää-välilehdessä Painike ja vedä sitten painike nimen alapuolelle.

    Lisää-painike.

  2. Määritä seuraavat painikkeen ominaisuudet kaavarivillä:

    • OnSelect-ominaisuus = Navigate(AssignManager, Fade). Kun suoritat sovelluksen ja napsautat tätä painiketta, siirryt sovelluksen seuraavaan näyttöön himmennettyjen siirtymien kautta.

    • Teksti-ominaisuus = "Assign Manager"

  3. Muuta painikkeen kokoa tekstille sopivaksi.

    Muuta kokoa -painike.

  4. Lisää toinen painike, jossa on seuraavat ominaisuudet:

    • OnSelect-ominaisuus = Navigate(ViewProjects, Fade).

    • Teksti-ominaisuus = "Update Details"

      Päivitä-painikkeen teksti.

      Huomautus

      Painikkeessa on nimi Päivitä tiedot, mutta siirrymme ensin ViewProjects-näyttöön valitsemaan päivitettävän projektin.

Suorita sovellus

Sovelluksella ei voi vielä tehdä paljoakaan, mutta voit suorittaa sen halutessasi:

  1. Napsauta tai napauta SelectTask-näyttöä (sovellus käynnistyy valitusta näytöstä esikatselutilassa Power Apps Studiossa).

  2. Napsauta tai napauta Suorita sovellus -kuvaketta. oikeassa yläkulmassa suorittaaksesi sovelluksen.

  3. Napsauta tai napauta jotakin painiketta, jotta voit siirtyä toiseen näyttöön.

  4. Napsauta tai napauta Sulje sovelluksen esikatselu -kuvake. oikeassa yläkulmassa sulkeaksesi sovelluksen.

Vaihe 4: Rakenna AssignManager-näyttö

Tässä vaiheessa käytämme valikoimaa näyttämään kaikki projektit, jotka on hyväksytty, mutta joilla ei vielä ole esimiestä. Lisäämme muita ohjausobjekteja, jotta voit määrittää esimiehen.

Huomautus

Luomme sovellukseen myöhemmin sivun, jossa voit muokata projektin kaikkia kenttiä (mukaan lukien esimiehen kenttää), mutta mielestämme olisi siistiä rakentaa myös tällainen näyttö.

  1. Tallenna tähän mennessä tekemäsi muutokset.

  2. Napsauta tai napauta vasemmassa siirtymispalkissa AssignManager-näyttöä.

Päivitä otsikko ja lisää esittelyteksti

  1. Muuta kohdan [Otsikko] arvoksi Assign Manager.

  2. Lisää nimi käyttäen seuraavia ominaisuuksia:

    • Väri-ominaisuus = DarkGray

    • Koko-ominaisuus = 18

    • Teksti-ominaisuus = "Select a project, then assign a manager"

      Määritä esimies -asettelu.

Lisää takaisin-nuoli, jolla palataan SelectTask-näyttöön

  1. Napsauta tai napauta näytön yläreunassa olevaa sinistä palkkia.

  2. Napsauta tai napauta Lisää-välilehdestä Kuvakkeet ja napsauta tai napauta sitten Vasen.

    Lisää vasen nuoli.

  3. Siirrä nuoli sinisen palkin vasemmalle puolelle ja määritä seuraavat ominaisuudet:

    • Väri-ominaisuus = White

    • Korkeus-ominaisuus = 40

    • OnSelect-ominaisuus = Navigate(SelectTask, Fade)

    • Leveys-ominaisuus = 40

      Lisää takaisin-painike.

  1. Napsauta tai napauta Lisää-välilehdessä Valikoima ja sitten Pysty.

    Lisää pystysuuntainen valikoima.

  2. Valitse oikeanpuoleisessa ruudussa Asettelu-valikosta Otsikko, alaotsikko ja leipäteksti.

    Muuta valikoiman asettelua.

    Valikoimassa on nyt oikea asettelu, mutta siinä on yhä oletusarvoinen esimerkkiteksti. Korjataan se seuraavaksi.

    Valikoima, jossa on oletusteksti.

  3. Määritä seuraavat valikoiman ominaisuudet:

    • BorderThickness-ominaisuus = 1

    • BorderStyle-ominaisuus = Dotted

    • Kohteet-ominaisuus = Filter('Project Details', PMAssigned="Unassigned"). Vain projektit, joille ei ole määritetty esimiestä, sisältyvät valikoimaan.

      Valikoima, jossa on tekstiä luettelosta.

  4. Päivitä kentät oikeassa ruudussa vastaamaan seuraavaa luetteloa:

    • ApprovedDate

    • Tila

    • Otsikko

      Valikoima.

  5. Muuta soveltuvin osin valikoiman nimien kokoa ja poista nuoli ensimmäisestä valikoimakohteesta (emme joudu siirtymään pois tästä valikoimasta).

    Poista nuoli -kuvake.

    Näytön pitäisi nyt näyttää samalta kuin seuraavassa kuvassa.

    Muotoiltu valikoima.

Muuta kohteen väriä, jos se on valittuna

  1. Valitse valikoima ja määritä sitten TemplateFill-ominaisuuden arvoksi If (ThisItem.IsSelected=true, Orange, White).

  2. Valitse kohde valikoimassa. Näytön pitäisi nyt näyttää samalta kuin seuraavassa kuvassa.

    Valikoima, jossa on valittu kohde.

Lisää nimi, tekstisyöte ja OK-painike, joilla lähetetään esimiestehtäviä

  1. Napsauta tai napauta jotakin työstetyn valikoiman ulkopuolista kohtaa.

  2. Napsauta tai napauta Lisää-välilehdessä Nimi. Vedä nimi vasemmalle valikoiman alle. Määritä seuraavat nimen ominaisuudet:

    • Koko-ominaisuus = 20

    • Teksti-ominaisuus = "Manager:"

    Lisää esimies -otsikko.

  3. Napsauta tai napauta Lisää-välilehdestä Teksti ja sitten Tekstisyöte. Vedä tekstisyöte keskelle, valikoiman alapuolelle. Määritä seuraavat avattavan luettelon ominaisuudet:

    • Oletus-ominaisuus = ""

    • Korkeus-ominaisuus = 60

    • Koko-ominaisuus = 20

    • Leveys-ominaisuus = 250

    Lisää tekstisyöte.

  4. Napsauta tai napauta Lisää-välilehdessä Painike. Vedä painike oikealle valikoiman alle. Määritä seuraavat painikkeen ominaisuudet:

    • Korkeus-ominaisuus = 60

    • OnSelect-ominaisuus = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Katso lisätietoja kohdasta Kaavoja pintaa syvemmältä.

    • Tämä kaava päivittää Projektitiedot-luettelon asettaen arvon PMAssigned-kentälle.

    • Koko-ominaisuus = 20

    • Teksti-ominaisuus = "OK"

    • Leveys-ominaisuus = 80

    Lisää OK-painike.

Valmiin näytön pitäisi nyt näyttää samalta kuin seuraavassa kuvassa.

Valmis Määritä esimies -näyttö.

Vaihe 5: Rakenna ViewProjects-näyttö

Tässä vaiheessa muutamme valikoiman ominaisuuksia ViewProjects-näytössä. Tämä valikoima näyttää kohteita Projektitiedot-luettelosta. Valitsemme kohteen tässä näytössä ja muokkaamme sitten tietoja UpdateDetails-näytössä.

  1. Napsauta tai napauta vasemmassa siirtymispalkissa ViewProjects-näyttöä.

  2. Muuta kohdan [Otsikko] arvoksi ”Näytä projektit”.

  3. Napsauta tai napauta vasemmassa siirtymispalkissa ViewProjects-näytön kohtaa BrowserGallery1.

  4. Valitse oikeanpuoleisessa ruudussa Asettelu-valikosta Otsikko, alaotsikko ja leipäteksti.

    Muuta valikoiman asettelua.

    Valikoimassa on nyt oikea asettelu ja oletusarvoinen esimerkkiteksti.

    Galleria, jossa on oikea asettelu.

  5. Valitse päivityspainikkeen Päivitä-kuvake. ja määritä sen OnSelect-ominaisuuden arvoksi Refresh('Project Details').

  6. Valitse uuden kohteen painike Lisää uusi kuvake. ja määritä sen OnSelect-ominaisuuden arvoksi NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Lisää takaisin-nuoli, jolla palataan SelectTask-näyttöön

  1. Napsauta tai napauta vasemmassa siirtymispalkissa AssignManager-näyttöä.

  2. Valitse lisätty takaisin-nuoli ja kopioi se.

  3. Liitä nuoli ViewProjects-näyttöön ja sijoita se päivityspainikkeen vasemmalle puolelle.

    Takaisin-painike.

    Kaikki ominaisuudet tulevat sen mukana, mukaan lukien OnSelect-ominaisuuden Navigate(SelectTask, Fade).

  1. Valitse BrowseGallery1-valikoima ja määritä valikoiman Kohteet-ominaisuudeksi SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Tämä asetus määrittää valikoiman tietolähteen Projektitiedot-luetteloon ja käyttää hakemiseen ja lajitteluun Otsikko-kenttää.

  2. Valitse Tiedot-nuolikuvake. Ensimmäisessä valikoimakohteessa ja määritä OnSelect-ominaisuuden arvoksi Navigate(UpdateDetails, None).

    Näytä projektien valikoima – ensimmäinen kohde valittuna.

  3. Päivitä kentät oikeassa ruudussa vastaamaan seuraavaa luetteloa:

    • Tila

    • PMAssigned

    • Otsikko

      Galleria-kentät.

      Valmiin näytön pitäisi nyt näyttää samalta kuin seuraavassa kuvassa.

      Näytä valmis projektinäyttö.

Vaihe 6: Rakenna UpdateDetails-näyttö

Tässä vaiheessa yhdistämme muokkauslomakkeen UpdateDetails-näytössä tietolähteeseen ja teemme joitakin ominaisuus- ja kenttämuutoksia. Tässä näytössä muokkaamme tietoja projektille, jonka valitsit Näytä projektit -näytössä.

  1. Napsauta tai napauta vasemmassa siirtymispalkissa UpdateDetails-näyttöä.

  2. Muuta [Otsikko]-arvoksi ”Päivitä tiedot”.

  3. Napsauta tai napauta vasemmassa siirtymispalkissa UpdateDetails-näytön alla olevaa kohtaa EditForm1.

  4. Määritä lomakkeelle seuraavat ominaisuudet:

    • DataSource-ominaisuus = 'Project Details'

    • Kohde-ominaisuus = BrowseGallery1.Selected

  5. Kun lomake on edelleen valittuna, napsauta tai napauta oikeanpuoleisessa ruudussa olevaa seuraavien kenttien valintaruutua esitetyssä järjestyksessä:

    • Otsikko

    • PMAssigned

    • Tila

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

      Muokkaa lomakkeen kenttiä.

  6. Valitse Peruuta-painikkeen Peruuta kuvake. ja määritä sen OnSelect -ominaisuuden arvoksi ResetForm(EditForm1); Back().

  7. Valitse tallenna-painike valintamerkin tallennus -kuvake. ja tutustu OnSelect-kaavaan SubmitForm(EditForm1). Koska käytämme lomakkeen muokkausohjausobjektia, voimme käyttää Submit():ia Patch():n sijaan, kuten teimme aiemmin.

Valmiin näytön pitäisi nyt näyttää samanlaiselta kuin seuraavassa kuvassa (jos kentät ovat tyhjiä, varmista, että valitset kohteen Näytä projektit -näytössä).

Päivitä tiedot -näyttö on valmis.

Vaihe 7: Sovelluksen suorittaminen

Nyt kun sovellus on valmis, suorita se, niin näet, miten se toimii. Lisäämme linkin sovellukseen SharePoint-sivustoon. Pystyt suorittamaan sovelluksen selaimessa, mutta joudut ehkä jakamaan sovelluksen, jotta muut käyttäjät voivat käyttää sitä. Lisätietoja on kohdassa Jaa sovelluksesi.

  1. Napsauta tai napauta Office 365 -sovelluskäynnistimessä Power Apps.

    Power Apps Office 365:n sovelluksen käynnistysohjelmassa.

  2. Napsauta tai napauta Power Appsissa Projektinhallinta-sovelluksen kolmea pistettä (...) ja sitten Avaa.

    Valitse projektinhallintasovellus.

  3. Kopioi sovelluksen osoite (URL) selaimeen.

    Kopioi sovelluksen URL-osoite.

  4. Napsauta tai napauta SharePointissa MUOKKAA LINKKEJÄ.

    SharePoint-sivustolinkkien muokkaaminen.

  5. Napsauta tai napauta kohtaa (+)-linkki.

    Lisää sovelluslinkki SharePoint-sivustoon.

  6. Kirjoita ”Projektinhallintasovellus” ja liitä osoitteeseen sovellukselle.

    Linkin ominaisuuksien muokkaaminen.

  7. Napsauta tai napauta OK ja sen jälkeen Tallenna.

    Tallenna linkin muutokset.

Määritä esimies projektiin

Nyt kun olemme lisänneet sovelluksen SharePoint-sivustoon, omaksumme projektin hyväksyjän roolin: etsimme projekteja, joille ei ole määritetty esimiestä, ja määritämme esimiehen yhdelle näistä projekteista. Omaksumme sitten projektipäällikön roolin ja lisäämme joitakin tietoja projektista, joka on määritetty meille.

  1. Katsotaan ensin Projektitiedot-luetteloa SharePointissa. Kahdella projektilla on arvo Määrittämätön sarakkeessa PMAssigned. Näemme ne sovelluksessa.

    Määrittämättömät projektit luettelossa.

  2. Napsauta tai napauta linkkiä, jonka loit sovellukselle.

  3. Napsauta tai napauta ensimmäisessä näytössä Määritä esimies.

    Sovelluksen esittelynäyttö.

  4. Määritä esimies -näytössä näet kaksi määrittämätöntä projektia luettelossa. Valitse Uusi BI-ohjelmisto -projekti.

    Valikoima, jossa kohde valittu.

  5. Kirjoita Esimies-tekstisyötteeseen ”Joni Sherman” ja valitse OK.

    Luetteloon tehdään muutos, ja valikoima päivittyy, joten vain jäljellä olevat määrittämättömät projektit ovat näkyvissä.

    Esimiehen määrittäminen projektille.

  6. Siirry takaisin luetteloon ja päivitä sivu. Näet, että projektimerkintään on nyt päivitetty projektipäällikön nimi.

    Projektipäällikkö määritettynä luettelossa.

Päivitä projektin tiedot

  1. Napsauta tai napauta Takaisin-kuvake. Palataan ensimmäiseen näyttöön ja sitten Päivitä tiedot.

    Päivitä tiedot.

  2. Kirjoita Näytä projektit -näytössä hakuruutuun ”Uusi”.

    Hae sovellusvalikoimassa.

  3. Valitse Tiedot-nuolikuvake. Uudelle BI-ohjelmisto-kohteelle.

    Valikoiman kohde valittuna.

  4. Määritä seuraavat arvot Päivitä tiedot -näytössä:

    • ProjectedStartDate -kenttä = ”3/6/2017”

    • ProjectedEndDate -kenttä = ”3/24/2017”

    • ProjectedDays -kenttä = ”15”

    Päivitä kohteen tiedot.

  5. Napsauta tai napauta Valintamerkki-kuvake. ottaaksesi muutoksen käyttöön luettelossa.

  6. Sulje sovellus ja siirry takaisin luetteloon. Näet, että projektimerkintään on nyt päivitetty päivämäärä- ja päivämuutokset.

    Päivitetty luettelo.

Kaavoja pintaa syvemmältä

Tämä on toinen valinnainen osa, jossa käsitellään Power Apps-kaavoja. Ensimmäisessä tutustuimme yhteen kaavoista, joita Power Apps luo selausvalikoimalle kolmen näytön sovelluksessa. Tässä syventävässä ohjeessa tarkastelemme kaavaa, jota käytämme toisen sovelluksen AssignManager-näytössä. Tässä on kaava:

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Mitä tämä kaava tekee? Kun valitset kohteen valikoimassa ja napsautat OK-painiketta, kaava päivittää Projektitiedot-luettelon asettaen PMAssigned-sarakkeen arvoon, jonka määritit tekstisyötteessä. Kaavassa käytetään funktioita sen tehtävien suorittamiseen:

  • Patch-funktio muokkaa yhtä tai useampaa tietolähteen tietuetta.

  • LookUp-funktio etsii taulukosta ensimmäisen tietueen, joka täyttää kaavan.

Kun yhdistelet funktioita kaavaan, tapahtuu seuraavaa:

  1. Kun napsautat OK-painiketta, Patch-funktiota kutsutaan päivittämään Projektitiedot-luettelo.

  2. Patch-funktiossa LookUp-funktio tunnistaa, mikä Projektitiedot-luettelon rivi päivitetään. Se tekee tämän vertaamalla valitun valikoiman kohteen tunnusta luettelon tunnukseen. Esimerkiksi tunnus 12 tarkoittaa, että Uusi BI-ohjelmisto -merkintää täytyy päivittää.

  3. Nyt kun Patch-funktiolla on oikea tunnus, se päivittää PMAssigned-kentän arvoon kohdassa TextInput1.Text.

Seuraavat vaiheet

Tämän opetusohjelmasarjan seuraava vaihe on Power BI -raportin luominen projektien analysointia varten.

Katso myös

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).