Oefening: een gegevensbron toevoegen aan de canvas-app en functionele pagina's ontwerpen
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
Meld u aan bij de SharePoint-portal met de referenties van uw Microsoft-organisatie.
Selecteer + Site maken op de startpagina van SharePoint om de SharePoint-site te maken.
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.
Selecteer Voltooien om een SharePoint-site te maken voor het laden van uw gegevens.
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.
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.
Selecteer in het venster Een lijst maken de optie Lege lijst om een volledig nieuwe SharePoint-lijst te maken.
Configureer het deelvenster Maken als volgt:
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.
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.
Voer de details van de kolom in op het tabblad Kolom maken en selecteer Opslaan.
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.
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.
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.
Notitie
Met de rasterweergave kunt u informatie vrijelijk toevoegen aan verschillende rijen of kolommen.
Begin met het toevoegen van uw gegevens in hun respectieve kolommen, zoals wordt weergegeven in de afbeelding:
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.
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.
Selecteer SharePoint. We selecteren SharePoint omdat we de vereiste gegevens hebben opgeslagen in SharePoint-lijsten .
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.
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
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.
Geef een naam op voor uw app; Bijvoorbeeld Easy Sales. Selecteer Telefoon en selecteer vervolgens 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.
Selecteer Overslaan in het dialoogvenster Welkom bij Power Apps Studio.
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.
Selecteer aan de linkerkant van Power Apps Studio de optie Gegevens .
Nadat u het deelvenster Gegevens hebt geopend, selecteert u de knop Gegevens toevoegen om verbinding te maken met de gegevens.
Vouw in het venster Een gegevensbron selecteren de sectie Verbinding maken ors uit en selecteer de SharePoint-optie.
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.
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.
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
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.
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.
Selecteer het zojuist gemaakte scherm om de eigenschappen te wijzigen op het tabblad Eigenschappen aan de rechterkant van het scherm.
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.
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.
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.
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:
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)
Sla uw toepassing op door te navigeren naar Bestand>opslaan. Selecteer vervolgens de optie De cloud en selecteer Opslaan.
De startpagina maken
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.
Wijzig de weergavetekst van de knoppen om productcategorieën aan te geven, zoals Banken, Stoelen, Tafels en Tapijten.
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.
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});
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.
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.
Galeriebeheer gebruiken
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.
Selecteer in het scherm Producten op het tabblad Invoegen de optie Galerie>verticaal om het besturingselement Galerie toe te voegen aan het scherm.
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")))
We filteren de producten die zijn opgeslagen in de SharePoint-lijst op basis van de productcategorie. De contextvariabelen worden gebruikt voor het filterproces.
Configureer de eigenschap Galerievelden> in het deelvenster Eigenschappen door Bewerken te selecteren:
Wanneer u de voorgaande velden toewijst, ziet u dat gegevens worden weergegeven in uw galerie.
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
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:
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 .
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)
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")
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.