Generera en sida med naturligt språk

Använd naturligt språk för att skapa en generativ sida som skapas med hjälp av AI. Generativa sidor är en AI-driven upplevelse som är utformad för att förenkla, påskynda och förbättra din appdesignprocess i modellbaserad app. Genom att interagera med appagenten skapar du fullständigt funktionella sidor i dina modelldrivna appar genom att beskriva vad du behöver på naturligt språk och ange vilka Microsoft Dataverse tabeller som ska refereras till. Du kan till och med bifoga en bild av hur du vill att sidan ska se ut.

När du har beskrivit sidan bearbetar systemet sedan dina krav och specifikationer och genererar intelligent React-kod som täcker både front-end-användarupplevelsen genom att välja rätt komponenter och bestämma den bästa layouten och motsvarande affärslogik. Genom en interaktiv konversationsupplevelse kan du förfina siddesignen i realtid och justera element, layout och funktionalitet så att den perfekt matchar din vision.

Utvecklingsmetoder

Du kan skapa generativa sidor med två metoder:

  • Power Apps (make.powerapps.com): Enligt beskrivningen i den här artikeln kan skapare skapa och iterera på generativa sidor direkt i webbläsaren med hjälp av en konversationsgränssnittsupplevelse. Finns i United States, Storbritannien, Australien och Singapore.
  • VERKTYG för AI-kodgenerering: Utvecklare som föredrar att arbeta med lokala utvecklingsverktyg och direkt åtkomst till TypeScript- och React-kod kan använda externa verktyg som Claude Code för att utveckla generativa sidor lokalt med en kod-första-metod och CLI-baserad distribution. Tillgänglig över hela världen i offentliga moln. Mer information: Skapa och redigera generativa sidor med AI-kodgenereringsverktyg

Förutsättningar

  • Power Platform-miljön måste finnas i någon av följande regioner: United States, Storbritannien, Australien eller Singapore.

Skapa en generativ sida i modellbaserade appar

  1. Logga in på Power Apps.

  2. Öppna en modellbaserad app för redigering.

  3. I appdesignern väljer du Lägg till en sida>Beskriv en sida.

    En generativ upplevelse i helsidesformat öppnas.

  4. I textrutan skriver du en beskrivning av den typ av sida som du vill skapa. Inkludera funktionskrav och eventuellt eventuella UX-specifikationer. Du kan till exempel ange Skapa en sida som visar kontoposter som ett galleri med kort med ett modernt utseende och känsla. Inkludera namn, entitetsbild högst upp och webbplats, e-post, telefonnummer. Gör galleriet rullningsbart med hjälp av data från Kontotabellen. Om du vill att sidan ska ha stöd för flera språk följer du anvisningarna på Localize a generative page (Lokalisera en generativ sida).

  5. Lägg till tabeller och bilder efter behov genom att välja Lägg till data>Lägg till data. Du kan länka upp till sex Dataverse-tabeller. I skärmbilden läggs kontotabellen till. Lägg till en tabell på den generativa sidan

  6. Du kan också ladda upp en eller flera bilder för att vägleda användargränssnittet för din genererade sida genom att välja Lägg till data>Bifoga bild. Detta kan vara en enkel skiss på en servett eller en bild med högre upplösning. Bilden kan representera strukturen eller layouten för hela sidan som du vill skapa eller det kan vara visuella objekt för ett visst avsnitt eller en viss komponent som du vill efterlikna.

    Anteckning

    Om du vill att den genererade sidan ska visa en viss bild kan du (1) inkludera bilden i en refererad Datatable-tabell och låta agenten hämta bilden därifrån, (2) vara värd för bilden offentligt och ge agenten URL:en, eller (3) lägga till bilden som en webbresurs och ge agenten URL:en för webbresursen.

  7. Du kan också aktivera eller inaktivera verktyget Inkludera bilder (förhandsversion) så att agenten kan använda bilder från ett kuraterat, säkert bibliotek med 25 000 stockbilder som stöd för användningsfall som standardbilder/platshållarbilder, dekorativa bakgrunder, statiska innehållsblock och rikare tomma eller feltillstånd. Inkludera bildverktyg för att lägga till en bild från ett bibliotek med lagerbilder

  8. Du kan också välja den AI-modell som du vill använda för att generera sidan. Välj den AI-modell som du vill använda för att generera din sida

    Anteckning

    GPT-4.1 är för närvarande den enda tillgängliga modellen för generativa sidor.

  9. När du är klar med att beskriva sidan väljer du Generera sida.

Agenten påbörjar en byggprocess i flera steg som du kan observera i realtid:

  • Tankeströmning: Agenten inleder med att beskriva sin tolkning av din uppmaning, inklusive listade krav, antaganden och en genomförandeplan.
  • Kodgenerering: Därefter skrivs den underliggande koden för din sida baserat på planen.
  • Transpilering: Den genererade koden överförs sedan för att säkerställa kompatibilitet och korrekt återgivning.
  • Slutlig återgivning: Slutligen visas den slutförda användarupplevelsen.

Om användarupplevelsen inte visas i slutet av den här processen kan du visa den genom att välja fliken Förhandsversion .

En användarupplevelse med genererad sida

Visa den genererade koden, iterera och publicera

När du har genererat sidan har du flera alternativ för att förfina och slutföra den:

  1. Visa och redigera den genererade koden Välj fliken Kod för att visa koden som genereras av appagenten. Visa den generativa sidkoden och iterera på designen

    Du kan förfina utdata på två sätt:

    • Iterativt chatta med appagenten för att åtgärda fel, justera layouten eller lägga till funktioner.
    • Redigera koden manuellt genom att välja Redigera på fliken Kod. När du har gjort några ändringar kan du välja Spara för att checka in ändringarna som en ny iteration eller Avbryt om du vill ignorera ändringarna.

    Lär dig mer om dataApi-objektmetoder som används för dataåtgärder

  2. Jämför iterationer När du har slutfört två eller flera iterationer med agenten kan du välja Jämför på fliken Kod för att visa ett koddiff mellan den aktuella och föregående iterationen.

    Anteckning

    Den här funktionen är för närvarande endast tillgänglig från och med den andra iterationen i den aktuella sessionen.

  3. Bifoga en skärmbild för snabbreferens I chattmiljön väljer du Bifoga>lägg till skärmbild för att ta med en skärmbild av den aktuella förhandsversionen med din nästa interaktion med appagenten. En skärmbild är användbar för att justera de visuella objekten på sidan. Du kan också bifoga andra bilder för att förfina de visuella objekten på hela sidan eller en viss del av sidan.

  4. Sök efter hjälpmedelsproblem (ny) Efter varje iteration av kodgenereringen genomsöker Hjälpmedelsassistenten längst ned på skärmen den genererade koden som utvärderar den med avseende på tillgänglighet. Du kan se en statusuppdatering på hög nivå direkt på skärmen och kan välja att öppna de detaljerade resultaten i en panel. Välj Automatisk korrigering för att skicka eventuella överträdelser direkt till agenten för att försöka lösa problemet automatiskt.

  5. Spara och publicera I kommandofältet väljer du Spara för att undvika att förlora förloppet på sidan. När du är nöjd med sidan väljer du Spara och Publicera för att publicera alla väntande ändringar för appen, inklusive eventuella generativa sidor.

Viktigt!

Agenten gör ett bästa försök att generera komplett, produktionsklar kod, inklusive överväganden för metodtips för tillgänglighet och säkerhet, men du är ytterst ansvarig för att verifiera koden. Se till att den genererade koden uppfyller organisationens standarder och efterlevnadskrav.

Vanliga uppgifter med generativa sidor

Det här avsnittet beskriver vanliga scenarier och uppgifter när du arbetar med generativa sidor i dina modelldrivna appar.

Konfigurera en sida för att acceptera indataparametrar

Generativa sidor kan acceptera indataparametrarna recordId, entityNameoch data göra det möjligt för dem att ta emot kontextuella data när de navigeras till. Om du vill konfigurera en sida för att acceptera parametrar beskriver du vad sidan ska acceptera i prompten och agenten kopplar automatiskt initieringskoden. Som exempel:

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.

Gå till en generativ sida

Du kan navigera till en generativ sida programmatiskt med hjälp av Xrm.Navigation.navigateTooch skicka indataparametrar om målsidan har konfigurerats för att ta emot dem. Exempel och fullständig API-information finns i Navigera till och från en generativ sida med klient-API.

Använda specifika bilder på en sida

Det finns tre metoder för att använda specifika bilder på dina generativa sidor.

Lagra avbildningar i en Dataverse-tabell

Inkludera bilden i en Dataverse-tabell som refereras till av din generativa sida och instruera agenten att hämta avbildningen därifrån. När du skapar din sida ska du tala om för agenten hur du får rätt bild från tabellen.

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.

Hosta bilder externt och referera via URL

Värdhantera dina avbildningar på en extern server eller ett nätverk för innehållsleverans (CDN) och ange agentens URL till avbildningen:

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

Lägga till avbildningar som webbresurser

Ladda upp avbildningen som en webbresurs i din lösning och referera till den via webbresursens URL:

  1. Lägg till avbildningen som en webbresurs i din lösning.
  2. Observera webbresursnamnet (till exempel new_/images/banner.png).
  3. Referera till den i din prompt eller kod med hjälp av webbresursens URL-format som beskrivs här:
Use the banner image from web resource new_/images/banner.png as the page header background.

Lägga till generativa sidor i lösningar

Generativa sidor är lösningsmedvetna och kan läggas till i en lösning (via en app) för att underlätta flyttning mellan miljöer. Gör följande för att lägga till en generativ sida i en lösning:

Viktigt!

Om din generativa sida skapades under förhandsgranskningsfasen måste du läsa in den generativa sidan i modellappdesignern för att initiera en engångsmigrering till den nya lösningsmedvetna datamodellen. När sidan läses in i designern ser du förloppsmeddelandet "Uppgradera sidan". Stäng inte fönstret förrän migreringen har slutförts.

  1. Lägg till appen som innehåller dina generativa sidor i en lösning
    • I Power Apps väljer du Solutions i det vänstra navigeringsfönstret och öppnar önskad lösning.
    • Välj Lägg till befintlig > Appmodellstyrd > app.
    • Välj den app som innehåller de generativa sidorna.
  2. Exportera lösningen (som administrerad eller ohanterad)
    • Se till att appwebbplatskartan ingår i lösningen. Om inte, bör det begäras under beroendekontroller.
    • Generativa sidor (visas som UX Agent Project rader) begärs också baserat på deras beroende av webbplatskartan.

Anteckning

Kontrollera dessa objekt om inga generativa sidor begärs under beroendekontroller:

  • Sidor som skapas under förhandsversionen visas bara om de har migrerats. Läs in dem i designern för att utlösa migrering.
  • Om webbplatskartan ingår i lösningen och dina generativa sidor har migrerats kan du försöka göra en mindre ändring i webbplatskartan, till exempel ändra ordning på eller byta namn på en sida, publicera om appen och sedan försöka exportera igen.

Efter exporten kan du importera appen och generativa sidor till en annan miljö. När den öppnas i designern i målmiljön är endast den första prompten och den publicerade koden tillgänglig. Den fullständiga agentkonversationen överförs inte med sidan.

Lokalisera en generativ sida

Om du vill lokalisera en generativ sida kontrollerar du att din fråga omfattar följande objekt:

  • Ange dina språk. Tala om för agenten vilka språk du vill att sidan ska stödja, helst språknamn och LCID.
  • Begär översatt text. Be agenten att skapa en översättningsordlista för alla användar synliga etiketter och text på sidan för varje språk.
  • Aktivera RTL-stöd. Om din miljö innehåller ett RTL-språk som arabiska eller hebreiska ber du agenten att implementera lämpligt stöd för höger-till-vänster-layout.
  • Använd regional formatering. Be agenten att formatera datum, siffror och valuta med hjälp av varje användares inställningar från sina Dataverse-användarinställningar i stället för att använda hårdkodade format eller språkkoder.

Detaljerad implementeringsvägledning och kodmönster finns i lokaliseringsinstruktionerna på lagringsplatsen för Power Platform Skills.

Anteckning

Webbplatskartaposten för en generativ sida är inte lokaliserad som standard. Platskartans lokalisering måste hanteras separat i appdesignern.

Begränsningar

Det här är de nuvarande begränsningarna för generativa sidor:

  • Sidan kan ansluta till endast Dataverse-tabeller (upp till 6 för en enskild sida). Inga andra datakällor kan användas.
  • Din fråga kan innehålla högst 50 000 tecken.
  • När du skapar generativa sidor i Power Apps (make.powerapps.com) är endast amerikansk engelska ett frågande språk som stöds.
  • Samarbete stöds inte. Se till att endast en utvecklare arbetar med en generativ sida i taget för att undvika oavsiktliga konflikter.
  • Endast dessa datatyper stöds:
    • Alternativ
    • Currency
    • Customer
    • Datum och tid
    • Endast datum
    • Decimaltal
    • Flyttalsnummer
    • Image
    • Sökning
    • Flerradig text
    • Tillstånd
    • Tillståndorsak
    • Text
    • Heltal
    • Ja/Nej
    • Unik identifierare

Vanliga frågor

Kan jag börja designa min app i plandesignern och sedan använda generativa sidor?

Ja, även om det för närvarande inte finns någon direkt integrering mellan planer och generativa sidor kan du använda planer för att definiera tabeller och appar och sedan växla till den modelldrivna appdesignern för att skapa önskade generativa sidor.

Behövs det några extra avgifter eller krediter för att använda generativa sidor?

Nej, skaparupplevelsen för generativa sidor (och planer) kräver inga ytterligare AI- eller meddelandekrediter.

Vilken typ av bilder fungerar bäst för att vägleda UI-genereringen?

Det beror på ditt mål. Om du vet exakt hur du vill att den sista sidan ska se ut är tydliga och detaljerade skisser eller trådramar (oavsett om de är handritade eller digitala) mest effektiva. Om du bara har ett allmänt koncept och vill att agenten ska fylla i detaljerna kan snabba whiteboardskisser eller till och med servettritningar fungera bra.

Kan jag använda generativa sidor med arbetsyteappar eller andra typer av appar?

Nej, generativa sidor stöds för närvarande endast i modellbaserade appar.

Finns det något sätt att återanvända eller klona en generativ sida i olika miljöer?

Ja, generativa sidor är lösningsmedvetna element som kan flyttas mellan miljöer. Endast den senast publicerade versionen av koden och den första prompten underhålls med lösningen. den fullständiga revisionshistoriken finns kvar i den ursprungliga miljön.

Kan jag redigera den genererade koden manuellt?

Ja. Du kan redigera den genererade koden manuellt genom att välja Redigera på fliken Kod . Dina ändringar sparas som en ny iteration. Välj Avbryt om du vill avbryta redigeringarna om du väljer att inte behålla dem.

Är koden som genereras av generativa sidor garanterad att vara produktionsklar och kompatibel med min organisations standarder?

Nr. Agenten gör ett bästa försök att skapa högkvalitativ, produktionsklar kod med metodtips för tillgänglighet och säkerhet i åtanke, men det är ditt ansvar att verifiera utdata. Granska alltid den genererade koden så att den överensstämmer med organisationens standarder, principer och efterlevnadskrav.

Hur ger jag feedback om funktionen?

Det bästa sättet att ge feedback på generativa sidor är att använda tummen upp/ned-knapparna i chattupplevelsen som är tillgängliga efter varje iteration. Vi rekommenderar också starkt att du väljer Ja på Dela relevanta innehållsexempel och ytterligare loggfiler så att vi kan felsöka eller försöka återskapa eventuella problem som du har stött på med funktionen.

Vad gör jag om generativa sidor inte är aktiverade i min miljö?

Bekräfta att din miljö finns i en av de regioner som stöds för Power Apps Maker Studio-upplevelsen: United States, Storbritannien, Australien eller Singapore. Om din region inte visas kan du fortfarande skapa och redigera generativa sidor med ai-kodgenereringsverktyg, som är tillgängliga över hela världen i offentliga moln. Mer information: Skapa och redigera generativa sidor med AI-kodgenereringsverktyg

  • Last updated on