Dela via

Skapa en arbetsyteapp från en bild

Att skapa en app omfattar ofta en designfas för att planera hur appen ska se ut. Oavsett om designen bygger på ett befintligt pappersformulär, en whiteboard-ritning eller en bild på en äldre app kan det ta lång tid att bygga appen från grunden.

Skapa en app från en visuell design och anslut den till data med hjälp av några enkla, guidade steg.

Obs

  • Utseendet på komponenterna i appen, såsom teckensnitt och färger, baseras på temat Office Blue i Power Apps.
  • Om du vill att de exakta designformaten ska behållas när du skapar appen bör du överväga att skapa en arbetsyteapp från Figma.
  • Power Apps kvarstår inte bilden som du laddar upp. Den överladdade bilden bearbetas endast i minnet för att skapa appen.

Förutsättningar

  • En Power Apps-licens. Om du inte har en licens för Power Apps kan du registrera dig gratis.
  • Om du använder en egen avbildning måste bildfilstillägget vara .jpg eller .png och filstorleken får inte vara större än 4 MB.
  • Bilden måste också innehålla ett tydligt läsbart ensidesformulär med en ljus bakgrundsfärg. För bästa resultat redigerar du bilden så att den har en vit bakgrund och hög kontrast.

Skapa ett program

  1. Logga in på Power Apps.

  2. På startskärmen väljer du Börja med en siddesign.

  3. Välj En bild eller en Figma-fil>Börja från en bild.

  4. Läs exemplen på rekommenderade bilder och tips. För bästa möjliga upplevelse bör du se till att bilden följer rekommendationerna. När du är klar väljer du Nästa.

  5. Ange ett namn för programmet.

  6. Ladda upp din egen bild. Om du inte har någon bild klar väljer du Börja med en exempelbild och väljer en av de tillgängliga exempelbilderna.

    Obs

    När du använder din egen bild ska du se till att bilden uppfyller de bildkrav som anges i bildkrav.

    Här är till exempel två exempelbilder som är acceptabla och inte acceptabla:

    Godtagbar kvalitet Icke godtagbar kvalitet
    Exempel på handritad bild med godtagbar kvalitet. Exempel på handritad bild med icke godtagbar kvalitet.

  7. Beroende på bildens dimensioner väljs formatet (surfplatta eller telefon) automatiskt åt dig. För bästa resultat bör du behålla det format som föreslås. Om du använder det format som föreslås säkerställer du bästa möjliga matchning mellan inmatad bild och den slutgiltiga appen. Klicka på Nästa.

    Tillhandahåll bildnamn, bildtyp och layout.

  8. Bilden taggas automatiskt baserat på de komponenter som identifierades. I följande exempelbild identifierades rutan "Ange förnamn" som en Textinmatning-kontroll.

    Du kan rita en ny tagg genom att markera och dra för att välja den region som omfattar komponenten. Välj sedan vilken typ av komponent du vill associera den nya taggen med.

    Om du vill redigera en befintlig tagg eller ta bort den markerar du taggen. Du kan sedan tilldela en annan komponent för taggen eller justera taggens mått genom att dra och ändra storleken. Om du vill ta bort taggen väljer du Ta bort tagg.

    Utforma komponenter för appen genom att välja taggar eller skapa en ny tagg och sedan välja kontrollen tag.

    Tips!

    Välj fliken Vägledning till höger på skärmen om du vill veta mer om de olika typerna av komponenter och hur du taggar var och en.

    När du har granskat taggarna och försäkrat dig om att varje komponent har taggats korrekt väljer du Nästa.

  9. Konfigurera data. För bästa möjliga upplevelse rekommenderar vi att du ansluter din app till en datakälla genom att välja Anslut till en Dataverse-tabell. Om du väljer det här alternativet och väljer Nästa vägleds du till att antingen välja en befintlig Dataverse-tabell och mappa fälten i bilden till kolumnerna i tabellen eller skapa en ny tabell i Dataverse och lägga till kolumner baserat på formulärfälten i bilden. Din app innehåller en formulärkomponent som är ansluten till din Dataverse-tabell.

    Om du inte vill ansluta till Dataverse väljer du Hoppa över det här tills vidare. Om du väljer det här alternativet och väljer Skapa skapas din app som den är, vilket innebär att de komponenter du taggade i föregående steg genereras direkt. De placeras inte i en formulärskomponent, och din app kopplas inte till data.

    Välj att ansluta till Dataverse eller fortsätta utan att skapa en tabell just nu.

    Om du väljer att hoppa över anslutningen till Dataverse väljer du Skapa, och appen skapas åt dig. Senare kan du lägga till dataanslutningar till appen för att ansluta appen till dina data.

    Obs

    Alternativet att ansluta till en Dataverse-tabell inaktiveras om du inte har Dataverse i din miljö.

  10. Om du väljer att ansluta till en Dataverse-tabell och har valt antingen Skapa ny tabell eller en befintlig tabell kan du nu redigera tabell- och kolumninformationen. Varje tagg motsvarar en datakolumn som baseras på de formulärfält som identifierades i bilden.

    Välj en tagg om du vill ändra kolumnegenskaperna, till exempel Visningsnamn, Namn och Datatyp. Om du vill ta bort en befintlig kolumn markerar du taggen och väljer sedan Ta bort kolumn.

    Utforma tabellen, ändra kolumner och deras egenskaper.

    Du kan lägga till en datakolumn genom att rita en ny tagg och ange egenskaperna. När du taggar kolumner kommer du oftast rita en tagg runt två saker: en etikett och något som användaren ska ange data i, som en textinmatning.

    Tips!

    Välj Tabellegenskaper till höger på skärmen om du vill visa och redigera egenskaperna för den nya tabellen.

    När du har valt Nästa kan du granska tabellen och kolumnstrukturen.

    Granska och bekräfta strukturen för tabell och kolumnschema.

    När du är klar med granskningen väljer du Skapa för att skapa appen. Det kan ta några minuter att skapa appen.

  11. När appen har skapats öppnas den nya appen i Power Apps Studio så att du kan fortsätta skapa och anpassa appen.

    Appen har skapats och öppnats i Power Apps Studio för att du ska kunna anpassa den.

    Om du väljer att skapa en ny tabell i Dataverse kopplas formuläret automatiskt till den nya tabellen.

    Tabellen har skapats och lagts till i appen.

  12. Fortsätt bygga och anpassa appen genom att lägga till fler komponenter eller ändra stilegenskaperna.

    Här är några vanliga steg som du kan följa för att ta din app till nästa nivå:

    1. Lägg till en ny skärm med namnet Skärm2 i appen och ett galleri för att visa posterna. Ange datakällan i galleriet som din nya Dataverse-tabell.
    2. På skärmen som innehåller formuläret lägger du till en knapp (om du inte redan har en) för att skicka formulärsdata. Ange formeln för egenskapen OnSelect till SubmitForm(Form1).
    3. Välj formuläret, sedan fliken Avancerat till höger på skärmen och ställ in egenskapen OnSuccess till Navigate(Screen2). På så sätt navigerar appen till skärmen som innehåller galleriet för att visa posterna när formulärsdata har skickats.
    4. Välj Spela upp högst upp till höger på skärmen om du vill förhandsgranska appen. Fyll i formuläret och välj Skicka för att skicka formuläret. Den nya posten visas i galleriskärmen.

  13. Spara och publicera appen.

Bildkrav

  • Den bild du vill överföra måste ha filnamnstillägget .jpg eller .png. Om du har en designbild med ett annat filnamnstillägg sparar du bildfilen med filnamnstillägget .jpg eller .png så att du kan använda den med den här funktionen.
  • Bildstorleken måste vara mindre än 4 MB.
  • Om du använder skärmbilder eller digitala skisser ändrar du bakgrunden till en ljus, ren färg om vitt inte finns att tillgå.
  • Om du tar en bild använder du högre kontrast eller gör den mer kontrasterande. Säkerställ att delen du vill tagga är tydlig och ljus.
  • Om du tar en bild med en kamera eller telefon kan du använda högre kontrast till bakgrunder av lätt. Använd alla tillgängliga bildredigeringsappar för att redigera bildkontrast.
  • Om du använder handritade bilder, försök att använda ett vitt skissblock utan några linjer.

Begränsningar

Se även