Oefening: een gegevensbron toevoegen aan de canvas-app en functionele pagina's ontwerpen

Voltooid

In Power Apps kunt u uw gegevens verbinden met een al bestaande toepassing of met een toepassing die u helemaal opnieuw bouwt. Uw app kan verbinding maken met SharePoint, Microsoft Dataverse, Salesforce, OneDrive of een andere gegevensbron.

We gebruiken SharePoint als primaire gegevensbron voor deze toepassing. U kunt verbinding maken met de SharePoint-site om automatisch een app te genereren op basis van een aangepaste lijst, een verbinding te maken voordat u gegevens toevoegt aan een bestaande app of een volledig nieuwe app bouwen.

Een site SharePoint-maken

  1. Meld u aan bij de SharePoint-portal met de referenties van uw Microsoft-organisatie.

  2. Selecteer + Site maken op de startpagina van SharePoint om de SharePoint-site te maken.

    Schermopname van het maken van een site op de startpagina van SharePoint.

  3. Op de startpagina van SharePoint vindt u de volgende informatie:

    • Kies het sitetype; de keuze is communicatiesite of teamsite. Selecteer Communicatiesite.

    • Voer een geschikte naam in voor de site; Bijvoorbeeld Easy Sales.

    • Voeg indien nodig de beschrijving van de site toe (optioneel).

    • Selecteer de gewenste taal in de vervolgkeuzelijst.

  4. Selecteer Voltooien om een SharePoint-site te maken voor het laden van uw gegevens.

    Schermopname van het bijwerken van sitegegevens.

Een moderne SharePoint-site wordt binnen enkele seconden gemaakt en klaar voor gebruik. U kunt nu een lijst, documentbibliotheek, pagina enzovoort maken op de zojuist gemaakte site.

Notitie

Als u teamsite hebt geselecteerd, wordt er ook een Microsoft 365-groep gemaakt.

SharePoint-lijst maken

Een SharePoint-lijst verzamelt gegevens met een bepaalde structuur, vergelijkbaar met een tabel, spreadsheet of eenvoudige database. Het kan veel verschillende soorten informatie bevatten, zoals getallen, tekst, bijlagen en zelfs afbeeldingen.

Voor onze Easy Sales-toepassing maken we een lijst met details van alle productcategorieën: Banken, Stoelen, Tafels en Tapijten.

  1. Selecteer op de zojuist gemaakte SharePoint-site onder de naam Easy Sales de vervolgkeuzelijst + Nieuw en selecteer vervolgens Lijst om uw SharePoint-lijst te maken.

    Schermopname van het selecteren van de lijst.

  2. Selecteer in het venster Een lijst maken de optie Lege lijst om een volledig nieuwe SharePoint-lijst te maken.

    Schermopname van het selecteren van lege lijst.

  3. Configureer het deelvenster Maken als volgt:

    • Voer een geschikte naam in voor de lijst; Bijvoorbeeld Easy Sales.

    • Vul indien nodig de beschrijving in (optioneel).

    • Laat het selectievakje Weergeven in sitenavigatie ingeschakeld.

    • Selecteer Maken.

      Schermopname van het deelvenster Maken.

Gegevens toevoegen aan uw SharePoint-lijst

Zodra de lijst is gemaakt, is het tijd om de gegevens toe te voegen. Hier betekent 'data' de details van een bepaald product. De productdetails bevatten de volgende informatie: Naam, Afbeelding, Prijs, Dimensies, Gewicht, Kleur, Primair Materiaal, Gebied, Hoogte en 3D-model/afbeelding van het product dat moet worden weergegeven in mixed reality.

  1. Selecteer + Kolom toevoegen in de gemaakte lijst easy sales om een kolom van een specifiek type toe te voegen. In de onderstaande lijst ziet u de kolommen die moeten worden gemaakt, met hun namen en typen in deze indeling: Naam van het kolomtype.

    • Naam: Één regel tekst
    • ImageLink: één regel tekst
    • Prijs: Één regel tekst
    • Dimensies: Één regel tekst
    • Gewicht: Één regel tekst
    • Kleur: één regel tekst
    • PrimaryMaterial: Één regel tekst
    • Hoogte: getal
    • Diepte: getal
    • Breedte: getal
    • Prijs/cm2: getal
    • ProductCategory: Één regel tekst
    • FileType: één regel tekst

    Selecteer het kolomtype in de vervolgkeuzelijst; Selecteer bijvoorbeeld Één regel tekst.

    Schermopname van het selecteren van één regel tekst.

    Voer de details van de kolom in op het tabblad Kolom maken en selecteer Opslaan.

    Schermopname van Het maken van een kolom.

    Herhaal dezelfde procedure voor de rest van de kolommen in de voorgaande lijst.

    Notitie

    Nadat u een SharePoint-lijst hebt gemaakt, wordt een standaardkolom Titel gemaakt die u kunt wijzigen als Naam.

  2. Zodra we de kolommen hebben toegevoegd, moeten we de werkelijke gegevens onder deze kolommen toevoegen. Begin met het toevoegen van gegevens aan kolommen door de aangepaste map met alle productdetails voor alle vier de lijsten te downloaden. Als u toegang wilt krijgen tot de gegevens, selecteert u de volgende koppeling, selecteert u de knop Meer bestandsacties (...) rechtsboven op de pagina en selecteert u Downloaden.

    Aangepaste Power Apps-map

  3. Selecteer + Nieuw om een item toe te voegen en vul vervolgens de vereiste gegevens in zoals opgegeven in het gedownloade Excel-bestand . Selecteer Opslaan om de ingevoerde gegevens op te slaan.

    Schermopname van het selecteren van Nieuw of Bewerken in de rasterweergave om een nieuw item toe te voegen.

    Notitie

    Met de rasterweergave kunt u informatie vrijelijk toevoegen aan verschillende rijen of kolommen.

  4. Begin met het toevoegen van uw gegevens in hun respectieve kolommen, zoals wordt weergegeven in de afbeelding:

    Schermopname van sharepoint-lijst met toegevoegde details

    Notitie

    Als u zelf afbeeldingen wilt opnemen, kunt u de koppelingen naar afbeeldingen toevoegen die beschikbaar zijn op internet onder de kolom ImageLink . U kunt de afbeeldingskoppelingen ophalen door met de rechtermuisknop te klikken en de optie Afbeeldingsadres kopiëren te selecteren.

    Notitie

    U hebt de waarden voor hoogte, diepte en breedte niet nodig voor de categorielijst Tapijt . Deze productcategorie neemt de oppervlaktewaarde in beslag die wordt gemeten tijdens de meting in MR-sessie en geeft de prijs van het tapijt op na de berekende oppervlakte. We hebben echter de kolom Prijs/cm2 toegevoegd om het berekeningsproces te ondersteunen.

Verbinding maken

Nu alle vereiste gegevens voor de toepassing zijn opgeslagen in de SharePoint-lijst, maken we een verbinding in Power Apps. Zodra de verbinding tot stand is gebracht, hebt u eenvoudig toegang tot de SharePoint-gegevens via de toepassing.

  1. Als u een verbinding wilt maken, meldt u zich aan bij Power Apps en selecteert u Verbinding maken ies in de linkernavigatiebalk. Selecteer vervolgens + Nieuwe verbinding in de linkerbovenhoek.

  2. Selecteer SharePoint. We selecteren SharePoint omdat we de vereiste gegevens hebben opgeslagen in SharePoint-lijsten .

    Schermopname van het selecteren van Sharepoint.

  3. Als u verbinding wilt maken met SharePoint Online, selecteert u Verbinding maken rechtstreeks (cloudservices) en selecteert u Maken en geeft u, indien hierom wordt gevraagd, referenties op.

    Schermopname van het selecteren van Maken.

  4. De verbinding wordt gemaakt en u kunt een volledig nieuwe app bouwen.

    Notitie

    Zelfs als de verbinding is gemaakt, kunt u nog steeds gegevens toevoegen, bewerken en verwijderen die zijn opgeslagen in uw SharePoint-lijst. Alle wijzigingen worden doorgevoerd in de toepassing via de verbinding.

Laten we beginnen met het bouwen van de Easy Sales-toepassing op basis van de SharePoint-gegevens en vervolgens gegevens uit andere bronnen toevoegen, indien gewenst. Door deze procedure te volgen, kunt u enkele hoofdpagina's van de toepassing ontwerpen. U leert bijvoorbeeld hoe u een welkomstscherm, productpagina en productlijstpagina ontwerpt. We hebben ook toegang tot gegevens die zijn opgeslagen in de SharePoint-lijst via het beheer van de Power Apps-galerie.

Een lege app openen

  1. Ga naar de startpagina van Power Apps en selecteer Vervolgens Maken in het menu links. Selecteer Lege app en selecteer vervolgens Maken onder Lege canvas-app.

    Schermopname van het selecteren van een canvas-app leeg.

  2. Geef een naam op voor uw app; Bijvoorbeeld Easy Sales. Selecteer Telefoon en selecteer vervolgens Maken.

    Schermopname van het opgeven van de app-naam en het selecteren van maken.

    Power Apps Studio maakt een lege app voor telefoons.

    Notitie

    Hoewel u een volledig nieuwe app voor verschillende apparaten kunt ontwerpen, is dit onderwerp gericht op het ontwerpen van een app voor telefoons.

  3. Selecteer Overslaan in het dialoogvenster Welkom bij Power Apps Studio.

    Schermopname van het selecteren van de optie Overslaan.

Verbinding maken met gegevens

Als u gegevens in uw Power App wilt opnemen, moet u verbinding maken met de gegevens via de connectors in uw toepassing. Omdat we alle gegevens in een SharePoint-lijst hebben opgeslagen, selecteren we SharePoint als een van de connectors.

  1. Selecteer aan de linkerkant van Power Apps Studio de optie Gegevens .

  2. Nadat u het deelvenster Gegevens hebt geopend, selecteert u de knop Gegevens toevoegen om verbinding te maken met de gegevens.

  3. Vouw in het venster Een gegevensbron selecteren de sectie Verbinding maken ors uit en selecteer de SharePoint-optie.

    Schermopname van het selecteren van de optie Gegevens en SharePoint toevoegen.

  4. In de vorige oefening hebben we al een verbinding gemaakt. Selecteer de gemaakte verbinding om de gegevens toe te voegen aan uw toepassing. Selecteer de SharePoint-site die is gemaakt onder de naam Easy Sales.

    Schermopname van het selecteren van Easy Sales.

  5. Nadat u de SharePoint-site Easy Sales hebt geselecteerd, worden alle lijsten weergegeven die op die site zijn gemaakt. Selecteer vervolgens de SharePoint-lijst die is gemaakt met betrekking tot de toepassing en klik op Verbinding maken.

    Schermopname van het selecteren van de lijst.

  6. Alle vereiste gegevens zijn verbonden en klaar voor gebruik in de toepassing. U kunt nu beginnen met het bouwen van de toepassing.

Het welkomstscherm maken

  1. Selecteer de optie Structuurweergave links van Power Apps Studio. U moet al een leeg scherm hebben in Power Apps Studio; Als dat niet het probleem is, selecteert u op het tabblad Start de pijl-omlaag naast Nieuw scherm waarmee de lijst met schermtypen wordt geopend. Selecteer vervolgens Leeg om een leeg scherm te maken.

    Schermopname van het maken van een nieuw scherm.

  2. Wijzig de naam van het scherm in het welkomstscherm door het pictogram met drie puntjes (...) naast de schermnaam te selecteren en de optie Naam wijzigen te selecteren.

    Schermopname van het wijzigen van de naam van het scherm.

  3. Selecteer het zojuist gemaakte scherm om de eigenschappen te wijzigen op het tabblad Eigenschappen aan de rechterkant van het scherm.

  4. Selecteer de vervolgkeuzelijst naast de eigenschap Achtergrondafbeelding om een afbeelding aan het scherm toe te voegen. Selecteer + Een afbeeldingsbestand toevoegen om het gedownloade logobestand te selecteren.

    Schermopname van het toevoegen van het eenvoudige verkooplogo.

  5. Stel de afbeeldingspositie in op Passend zodat de volledige afbeelding in de opgegeven grootte past. Met de optie Aanpassen wordt de afbeelding proportioneel geschaald en wordt de afbeelding niet bijgesneden.

    Schermopname van het toevoegen van het Easy Sales-logo aan het welkomstscherm.

  6. Vouw op het tabblad Invoegen de vervolgkeuzelijst Invoer uit en selecteer Timer. Sleep vervolgens de knop op het scherm en plaats deze op de gewenste locatie.

    Schermopname van het toevoegen van de timer.

  7. Als u sommige timereigenschappen wilt bewerken, kunt u de vervolgkeuzelijst Eigenschap in de linkerbovenhoek gebruiken of het deelvenster Eigenschappen gebruiken. Stel de volgende eigenschappen in:

    • AutoStart: true

    • Duur: 2000

    • Zichtbaar: onwaar

      Schermopname van het bijwerken van de eigenschappen van de timer.

      Notitie

      De duur wordt standaard gemeten in milliseconden. Sinds 1 seconde = 1000 milliseconden voeren we 2000 in als de waarde voor de duur.

  8. We willen dat het welkomstscherm slechts twee seconden zichtbaar is en vervolgens naar de startpagina gaat. Maak een leeg scherm zoals we in de vorige stap hebben gedaan en wijzig de naam ervan als startpagina. Selecteer later de timerknop die is toegevoegd aan het welkomstscherm en configureer de eigenschap OnTimerEnd . Vervang false door de volgende inhoud:

    Navigate('Home Page',ScreenTransition.Fade)
    

    Schermopname van het configureren van de eigenschap OnTimerEnd.

  9. Sla uw toepassing op door te navigeren naar Bestand>opslaan. Selecteer vervolgens de optie De cloud en selecteer Opslaan.

De startpagina maken

  1. Selecteer de startpagina die u eerder hebt gemaakt. Als u vier knoppen wilt invoegen, gaat u naar het tabblad Invoegen en selecteert u de optie Knop om knoppen aan het scherm toe te voegen. Pas de grootte en positie van deze knoppen naar behoefte aan. Wijzig de namen als respectievelijk Sofas_button, Chairs_button, Tables_button en Carpets_button.

    Schermopname van het toevoegen van knoppen.

  2. Wijzig de weergavetekst van de knoppen om productcategorieën aan te geven, zoals Banken, Stoelen, Tafels en Tapijten.

    Schermopname van het bewerken van weergavetekst.

  3. We gebruiken deze knoppen om naar de lijst met producten onder verschillende categorieën te navigeren. Hiervoor moeten we de producten uit de SharePoint-lijst filteren op basis van productcategorie. Maak twee nieuwe lege schermen en geef ze de naam Producten en Tapijten.

    Schermopname van het toevoegen van nieuwe schermen.

  4. Selecteer de zojuist gemaakte knop Sofas_button en configureer de eigenschap OnSelect . Nadat u de knop hebt geselecteerd, moeten we naar de productlijstpagina gaan die in de vorige stap is gemaakt. Vervang de false door de volgende code:

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

    Schermopname van navigatie van bankenpagina's

    Notitie

    De id is een contextvariabele met een bepaalde toegewezen waarde. Deze waarde wordt doorgegeven aan de doelpagina die wordt vermeld in de functie Navigate . Met de waarde die aan de variabele is toegewezen, worden de producten gefilterd op basis van productcategorie.

  5. Herhaal dezelfde procedure voor de andere drie knoppen. Zorg er opnieuw voor dat u de juiste schermnamen opgeeft in de functie Navigate . Als u bijvoorbeeld de eigenschap OnSelect van de knoppen Stoelen, Tabellen en Tapijten wilt configureren, gebruikt u de functie Navigate als volgt:

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

    Tip

    Als u de voortgang wilt opslaan, selecteert u het tabblad Bestand bovenaan en selecteert u de optie Opslaan . U kunt ook Ctrl+S gebruiken om uw voortgang op te slaan.

    Notitie

    De standaardsyntaxis van de functie Navigate is: Navigate(Screen [, Transition [, UpdateContextRecord]])

    • Scherm: vereist. Het scherm dat moet worden weergegeven.
    • Overgang: Optioneel. De visuele overgang die moet worden gebruikt tussen het huidige scherm en het volgende scherm. De standaardwaarde is None.
    • UpdateContextRecord: Optioneel. Een record die de naam bevat van ten minste één kolom en een waarde voor elke kolom. Deze record werkt de contextvariabelen van het nieuwe scherm bij alsof het is doorgegeven aan de functie UpdateContext.

    Tip

    U kunt uw toepassing testen door op de F5-toets op het toetsenbord te drukken of op de knop Afspelen in de rechterbovenhoek van Power Apps Studio te klikken.

Nu we de productcategorieën hebben toegevoegd, wordt de lijst met producten onder elke categorie weergegeven. In Power Apps gebruiken we galeriebeheer om een record met gegevens weer te geven.

  1. Selecteer in het scherm Producten op het tabblad Invoegen de optie Galerie>verticaal om het besturingselement Galerie toe te voegen aan het scherm.

    Schermopname van het toevoegen van galerie

  2. Wijzig de naam in Gallery_products. Configureer op het tabblad Eigenschappen van het linkerdeelvenster de eigenschap Items als volgt:

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

    Schermopname van het verbinden van SharePoint

    We filteren de producten die zijn opgeslagen in de SharePoint-lijst op basis van de productcategorie. De contextvariabelen worden gebruikt voor het filterproces.

  3. Configureer de eigenschap Galerievelden> in het deelvenster Eigenschappen door Bewerken te selecteren:

    • Wijs de prijs toe aan de kop Ondertitel1 .

    • Wijs de titel toe aan de kop Titel1.

      Schermopname van het configureren van velden op de pagina Producten

    Wanneer u de voorgaande velden toewijst, ziet u dat gegevens worden weergegeven in uw galerie.

  4. Pas de grootte van de Gallery_products naar behoefte aan. Als u de ImageLink wilt toevoegen aan de kop Image1 , selecteert u de afbeelding in de galerie en configureert u de eigenschap Afbeelding op het tabblad Eigenschap door deze regel code toe te voegen:

    ThisItem.ImageLink
    

    Schermopname van het configureren van de afbeeldingseigenschap op de productpagina

  5. Nu gaan we een label boven aan het scherm invoegen door de optie Label te selecteren. Pas vervolgens de positie, kleur en tekstweergave aan, zoals wordt weergegeven in de afbeelding:

    Schermopname van het toevoegen van een label op de pagina producten

  6. Voeg een pictogram Vorige toe boven het eerder toegevoegde label , zodat de gebruiker indien nodig naar de startpagina kan navigeren. Als u het pictogram Vorige wilt toevoegen, vouwt u de vervolgkeuzelijst Pictogrammen uit en selecteert u het pictogram Vorige .

    Schermopname van het toevoegen van het pictogram Terug op de startpagina

  7. Plaats het pictogram Vorige correct en wijzig indien nodig de weergavekleur. Configureer de eigenschap OnSelect door het volgende toe te voegen:

    Navigate('Home Page',ScreenTransition.Cover)
    

    Schermopname van het configureren van de eigenschap OnSelect

  8. Volg dezelfde procedure voor de pagina Tapijten . Configureer de eigenschap Items van de galerie die op de pagina Tapijten is toegevoegd op de volgende manier:

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

    Schermopname van het volgen van dezelfde procedure voor de pagina tapijten

    Tip

    Als u de voortgang wilt opslaan, selecteert u het tabblad Bestand bovenaan en selecteert u de optie Opslaan . U kunt ook Ctrl+S gebruiken om uw voortgang op te slaan.

Nadat u de voorgaande stappen hebt geïmplementeerd, moet uw toepassing er als volgt uitzien. De toepassing bevat een uitstekend welkomstscherm, een startpagina en een productinventaris om door producten te bladeren.

toepassingsdemo na verbinding te maken met een gegevensbron.