Een pagina genereren met natuurlijke taal

Gebruik natuurlijke taal om een generatieve pagina te bouwen die is gemaakt met behulp van AI. Generatieve pagina's zijn een AI-gestuurde ervaring die is ontworpen om uw app-ontwerpproces in modelgestuurde apps te vereenvoudigen, versnellen en verbeteren. Door te communiceren met de app-agent, maakt u volledig functionele pagina's in uw modelgestuurde apps door te beschrijven wat u nodig hebt in natuurlijke taal en door op te geven welke Microsoft Dataverse tabellen moeten worden verwezen. U kunt zelfs een afbeelding toevoegen van hoe de pagina eruitziet.

Nadat u de pagina hebt beschreven, worden uw vereisten en specificaties verwerkt en wordt op intelligente wijze React-code verwerkt die zowel de front-end gebruikerservaring omvat door de juiste onderdelen te selecteren en de beste indeling en de bijbehorende bedrijfslogica te bepalen. Via een interactieve, gesprekservaring ervaring kunt u het ontwerp van de pagina in realtime verfijnen, waarbij u elementen, indeling en functionaliteit aanpast zodat ze perfect aansluiten bij uw visie.

Ontwikkelingsbenaderingen

U kunt generatieve pagina's maken met behulp van twee benaderingen:

• Power Apps (make.powerapps.com): Zoals beschreven in dit artikel, kunnen makers generatieve pagina's rechtstreeks in de browser maken en herhalen met behulp van een conversationele UI-ervaring. Beschikbaar in de Verenigde Staten, Groot-Brittannië, Australië en Singapore.
• Hulpprogramma's voor het genereren van AI-code: ontwikkelaars die liever werken met lokale ontwikkelhulpprogramma's en directe toegang tot TypeScript- en React-code kunnen externe hulpprogramma's zoals Claude Code gebruiken om generatieve pagina's lokaal te ontwikkelen met een code-first benadering en cli-gebaseerde implementatie. Wereldwijd beschikbaar op openbare clouds. Meer informatie: Generatieve pagina's maken en bewerken met hulpprogramma's voor het genereren van AI-code

Vereiste voorwaarden

• De Power Platform-omgeving moet zich in een van de volgende regio's bevinden: Verenigde Staten, Groot-Brittannië, Australië of Singapore.

Een generatieve pagina maken in modelgestuurde apps

1. Aanmelden bij Power Apps.

2. Open een modelgestuurde app voor bewerking.

3. Selecteer in de app-ontwerper de optie Een pagina toevoegen>Een pagina beschrijven.

   Er wordt een generatieve pagina-ervaring op een volledige pagina geopend.

4. Typ in het tekstvak een beschrijving van het type pagina dat u wilt maken. Voeg functionele vereisten en eventueel eventuele UX-specificaties toe. U kunt bijvoorbeeld Maak een pagina waarop accountrecords worden weergegeven als een galerie met kaarten met een modern uiterlijk. Voeg bovenaan de naam en de afbeelding van de entiteit toe, evenals de website, het e-mailadres en het telefoonnummer. Maak de galerie schuifbaar met behulp van gegevens uit de tabel Account. Als u wilt dat de pagina ondersteuning biedt voor meerdere talen, volgt u de richtlijnen in Het lokaliseren van een generatieve pagina.

5. Voeg naar wens tabellen en afbeeldingen toe door Gegevens toevoegen>Tabel toevoegen te selecteren. U kunt maximaal zes Dataverse-tabellen koppelen. In de schermopname is de accounttabel toegevoegd.

6. Upload desgewenst een of meer afbeeldingen om de gebruikersinterface van de gegenereerde pagina te begeleiden door de afbeelding> Gegevensbijvoegen te selecteren. Dit kan een ruwe schets op een servet zijn of een afbeelding met een hogere resolutie. De afbeelding kan de structuur of indeling van de hele pagina vertegenwoordigen die u wilt maken, of het kan visuele elementen zijn voor een bepaalde sectie of een bepaald onderdeel dat u wilt nabootsen.

   Opmerking

   Als u wilt dat de gegenereerde pagina een bepaalde afbeelding weergeeft zonder de afbeelding aan de prompt toe te voegen, kunt u (1) de afbeelding opnemen in een gerelateerde Datatable-tabel en de agent de afbeelding daar laten ophalen, (2) de afbeelding openbaar hosten en de agent de URL geven, of (3) de afbeelding toevoegen als een webresource en de agent de URL hiervan geven.

7. U kunt eventueel het hulpprogramma Afbeeldingen opnemen (preview) in- of uitschakelen, zodat de agent afbeeldingen uit een gecureerde, veilige bibliotheek van 25.000 stockafbeeldingen kan gebruiken om gebruiksvoorbeelden te ondersteunen, zoals standaardafbeeldingen/tijdelijke aanduidingen, decoratieve achtergronden, statische inhoudsblokken en uitgebreidere lege of foutstatussen.

8. Kies eventueel het AI-model dat u wilt gebruiken om de pagina te genereren.

   Opmerking

   GPT-4.1 is momenteel het enige beschikbare model voor generatieve pagina's.

9. Wanneer u klaar bent met het beschrijven van de pagina, selecteert u Pagina genereren.

De agent begint een multistep-buildproces dat u in realtime kunt observeren:

• Gedachtenstreaming: De agent beschrijft eerst de interpretatie van uw prompt en geeft een opsomming van vereisten, veronderstellingen en een uitvoeringsplan.
• Codegeneratie: Vervolgens wordt de onderliggende code voor uw pagina geschreven op basis van het plan.
• Transpilatie: De gegenereerde code wordt vervolgens getranspileerd om compatibiliteit en juiste rendering te garanderen.
• Uiteindelijke weergave: Ten slotte wordt de voltooide gebruikerservaring weergegeven.

Als de gebruikerservaring niet aan het einde van dit proces wordt weergegeven, kunt u deze bekijken door het tabblad Voorbeeld te selecteren.

De gegenereerde code bekijken, itereren en publiceren

Nadat u de pagina hebt gegenereerd, hebt u verschillende opties om deze te verfijnen en te voltooien:

1. De gegenereerde code weergeven en bewerken Selecteer het tabblad Code om de code weer te geven die is gegenereerd door de app-agent.

   U kunt de uitvoer op twee manieren verfijnen:

   • Chat iteratief met de app-agent om fouten op te lossen, de indeling aan te passen of functionaliteit toe te voegen.
   • Bewerk de code handmatig door Bewerken te selecteren op het tabblad Code. Nadat u enkele wijzigingen hebt aangebracht, kunt u Opslaan selecteren om uw wijzigingen door te voeren als een nieuwe iteratie of Annuleren om uw wijzigingen te negeren.

   Meer informatie over de dataApi-objectmethoden die worden gebruikt voor gegevensbewerkingen

2. Iteraties vergelijken Nadat u twee of meer iteraties met de agent hebt voltooid, kunt u Vergelijken selecteren op het tabblad Code om een codeverschil tussen de huidige en vorige iteratie weer te geven.

   Opmerking

   Deze mogelijkheid is momenteel alleen beschikbaar vanaf de tweede iteratie in de huidige sessie.

3. Een schermopname bijvoegen voor snelzoekgids Selecteer in de chat-ervaring de optie Toevoegen>toevoegen om een schermopname van de huidige preview op te nemen met uw volgende interactie met de app-agent. Een schermafbeelding is handig om de visuals van de pagina aan te passen. U kunt ook andere afbeeldingen toevoegen om de visuals van de hele pagina of een bepaald deel van de pagina te verfijnen.

4. Controleren op toegankelijkheidsproblemen (nieuw) Na elke iteratie van het genereren van code scant de toegankelijkheidsassistent onder aan het scherm de gegenereerde code die deze beoordeelt met betrekking tot toegankelijkheid. U kunt een statusupdate op hoog niveau rechtstreeks op het scherm zien en ervoor kiezen om de gedetailleerde resultaten in een deelvenster te openen. Selecteer Automatisch herstellen om eventuele schendingen rechtstreeks door te geven aan de agent, zodat deze automatisch kan worden opgelost.

5. Opslaan en publiceren Selecteer Opslaan in de opdrachtbalk om te voorkomen dat de voortgang op de pagina verloren gaat. Wanneer u tevreden bent met uw pagina, selecteert u Opslaan en publiceren om alle wijzigingen die in behandeling zijn voor de app te publiceren, inclusief eventuele generatieve pagina's.

Algemene taken met generatieve pagina's

In deze sectie worden veelvoorkomende scenario's en taken behandeld wanneer u werkt met generatieve pagina's in uw modelgestuurde apps.

Een pagina instellen om invoerparameters te accepteren

Generatieve pagina's kunnen de invoerparameters recordIdentityNameaccepteren en data deze in staat stellen contextuele gegevens te ontvangen wanneer ze naartoe worden genavigeerd. Als u een pagina wilt configureren voor het accepteren van parameters, beschrijft u wat de pagina moet accepteren in uw prompt en wordt de initialisatiecode automatisch door de agent verbonden. Voorbeeld:

Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.

Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.

Ga naar een generatieve pagina

U kunt programmatisch naar een generatieve pagina navigeren door Xrm.Navigation.navigateToinvoerparameters door te geven als de doelpagina is ingesteld om deze te ontvangen. Zie Navigeren naar en van een generatieve pagina met behulp van client-API voor voorbeelden en volledige API-details.

Specifieke afbeeldingen op een pagina gebruiken

Er zijn drie benaderingen voor het gebruik van specifieke afbeeldingen in uw generatieve pagina's.

Afbeeldingen opslaan in een Dataverse-tabel

Neem de afbeelding op in een Dataverse-tabel waarnaar wordt verwezen door uw generatieve pagina en geef de agent de opdracht om de afbeelding daar op te halen. Wanneer u de pagina maakt, laat u de agent weten hoe u de juiste afbeelding uit de tabel kunt ophalen.

Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.

Extern afbeeldingen hosten en refereren via URL

Host uw afbeeldingen op een externe server of CDN (content delivery network) en geef de agent de URL naar de afbeelding.

Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.

Afbeeldingen toevoegen als webresources

Upload de afbeelding als een webresource in uw oplossing en verwijs ernaar door de URL van de webresource:

1. Voeg de afbeelding toe als een webresource in uw oplossing.
2. Noteer de naam van de webresource (bijvoorbeeld new_/images/banner.png).
3. Verwijs ernaar in uw prompt of code met behulp van de URL-indeling van de webresource die hier wordt beschreven:

Use the banner image from web resource new_/images/banner.png as the page header background.

Generatieve pagina's toevoegen aan oplossingen

Generatieve pagina's zijn oplossingsbewust en kunnen worden toegevoegd aan een oplossing (via een app) om het verplaatsen tussen omgevingen te vergemakkelijken. Ga als volgt te werk om een generatieve pagina aan een oplossing toe te voegen:

1. Voeg de app met uw generatieve pagina's toe aan een oplossing
   • Selecteer in Power Apps Solutions in het linkernavigatievenster en open de gewenste oplossing.
   • Selecteer Bestaande > App > Model-driven app toevoegen.
   • Selecteer de app die de generatieve pagina's bevat.
2. De oplossing exporteren (als beheerd of onbeheerd)
   • Zorg ervoor dat de sitemap van de app is opgenomen in de oplossing. Als dat niet het geval is, moet deze worden aangevraagd tijdens afhankelijkheidscontroles.
   • Generatieve pagina's (weergegeven als UX Agent Project rijen) worden ook aangevraagd op basis van hun afhankelijkheid van de sitemap.

Na het exporteren kunt u de app en generatieve pagina's importeren in een andere omgeving. Wanneer het wordt geopend in de designer in de doelomgeving, zijn alleen de eerste prompt en de gepubliceerde code beschikbaar. Het volledige agentengesprek wordt niet met de pagina overgedragen.

Een generatieve pagina lokaliseren

Als u een generatieve pagina wilt lokaliseren, moet u ervoor zorgen dat uw prompt de volgende items behandelt:

• Geef uw talen op. Vertel de agent welke talen u wilt ondersteunen op de pagina, idealiter taalnaam en LCID.
• Vertaalde tekst aanvragen. Vraag de agent om een vertaalwoordenlijst te maken voor alle door de gebruiker zichtbare labels en tekst op de pagina voor elke taal.
• Schakel RTL-ondersteuning in. Als uw omgeving een RTL-taal zoals Arabisch of Hebreeuws bevat, vraagt u de agent om de juiste ondersteuning voor de indeling van rechts naar links te implementeren.
• Regionale opmaak gebruiken. Vraag de agent om datums, getallen en valuta's op te maken met behulp van de voorkeuren van elke gebruiker op basis van hun Dataverse-gebruikersinstellingen, in plaats van vastgelegde notaties of landinstellingencodes te gebruiken.

Voor gedetailleerde implementatierichtlijnen en codepatronen gaat u naar de lokalisatie-instructies in de opslagplaats voor Power Platform Skills.

Beperkingen

Dit zijn de huidige beperkingen van generatieve pagina's:

• Uw pagina kan alleen verbinding maken met Dataverse-tabellen (maximaal 6 voor één pagina). Er kunnen geen andere gegevensbronnen worden gebruikt.
• Uw prompt mag maximaal 50.000 tekens bevatten.
• Wanneer u generatieve pagina's maakt in Power Apps (make.powerapps.com), is alleen Amerikaans Engels een ondersteunde prompttaal.
• Samenwerking wordt niet ondersteund. Zorg ervoor dat er altijd maar één maker tegelijk aan een generatieve pagina werkt om onbedoelde conflicten te voorkomen.
• Alleen deze gegevenstypen worden ondersteund:
  • Keuze
  • Valuta
  • Klant
  • Datum en tijd
  • Alleen datum
  • Decimaal getal
  • Drijvendekommagetal
  • Afbeelding
  • Lookup
  • Tekst met meerdere regels
  • Toestand
  • Statusreden
  • Tekst
  • Geheel getal
  • Ja/nee
  • Unieke id

Veelgestelde vragen

Kan ik beginnen met het ontwerpen van mijn app in Planontwerper en vervolgens generatieve pagina's gebruiken?

Ja, hoewel er momenteel geen directe integratie is tussen plannen en generatieve pagina's, kunt u plannen gebruiken om uw tabellen en apps te definiëren en vervolgens over te schakelen naar de ontwerpfunctie voor modelgestuurde apps om gewenste generatieve pagina's te maken.

Zijn er extra kosten of credits nodig om generatieve pagina's te gebruiken?

Nee, de gebruikerservaring voor generatieve pagina's (en plannen) vereist geen extra AI- of berichttegoeden.

Welk soort afbeeldingen zijn het meest geschikt om de UI-generatie te begeleiden?

Het hangt af van je doel. Als u precies weet hoe u wilt dat de uiteindelijke pagina eruitziet, zijn duidelijke en gedetailleerde schetsen of draadframes (of hand getekend of digitaal) het meest effectief. Als u alleen een algemeen concept hebt en de agent de details wilt laten invullen, kunnen snelle whiteboardtekeningen of zelfs servettekeningen goed werken.

Kan ik generatieve pagina's gebruiken met canvas-apps of andere app-typen?

Nee, generatieve pagina's worden momenteel alleen ondersteund in modelgestuurde apps.

Is er een manier om een generatieve pagina te hergebruiken of te klonen in verschillende omgevingen?

Ja, generatieve pagina-elementen zijn oplossingsgerichte elementen die kunnen worden verplaatst tussen omgevingen. Alleen de laatst gepubliceerde versie van de code en de eerste prompt worden onderhouden met de oplossing; de volledige revisiegeschiedenis blijft aanwezig in de oorspronkelijke omgeving.

Kan ik de gegenereerde code handmatig bewerken?

Ja. U kunt de gegenereerde code handmatig bewerken door Bewerken te selecteren op het tabblad Code . Uw wijzigingen worden opgeslagen als een nieuwe iteratie. Selecteer Annuleren om uw bewerkingen te annuleren als u ervoor kiest deze niet te behouden.

Wordt de code gegenereerd door generatieve pagina's die gegarandeerd gereed zijn voor productie en voldoet aan de normen van mijn organisatie?

Nee Hoewel de agent een best-effort poging doet om hoogwaardige, productieklare code te produceren met aanbevolen procedures voor toegankelijkheid en beveiliging, is het uw verantwoordelijkheid om de uitvoer te valideren. Controleer altijd de gegenereerde code om ervoor te zorgen dat deze overeenkomt met de standaarden, beleidsregels en nalevingsvereisten van uw organisatie.

Hoe geef ik feedback over de functie?

De beste manier om feedback te geven op generatieve pagina's is door de duim omhoog/omlaag-knoppen in de chatervaring te gebruiken die na elke iteratie beschikbaar zijn. Wij raden u ook sterk aan om Ja te selecteren bij Relevante inhoudsvoorbeelden en aanvullende logbestanden delen zodat we eventuele problemen die u met de functie bent tegengekomen, kunnen opsporen of proberen te reproduceren.

Wat moet ik doen als generatieve pagina's niet zijn ingeschakeld in mijn omgeving?

Controleer of uw omgeving zich in een van de ondersteunde regio's bevindt voor de Power Apps maker studio-ervaring: Verenigde Staten, Groot-Brittannië, Australië of Singapore. Als uw regio niet wordt vermeld, kunt u nog steeds generatieve pagina's maken en bewerken met behulp van hulpprogramma's voor het genereren van AI-code, die wereldwijd beschikbaar zijn in openbare clouds. Meer informatie: Generatieve pagina's maken en bewerken met hulpprogramma's voor het genereren van AI-code

Gerelateerde artikelen

• Generatieve pagina's maken en bewerken met hulpprogramma's voor het genereren van AI-code
• Veelgestelde vragen over generatieve pagina's in modelgestuurde apps
• Juridische voorwaarden