Comparteix a través de

Crear una aplicació de llenç a partir d'una imatge

El viatge de creació d'aplicacions normalment implica una fase de disseny per planificar com hauria de ser l'aplicació. Tant si el disseny es basa en un formulari en paper existent, un dibuix de pissarra o una imatge d'una aplicació heretada, pot trigar molt de temps a crear l'aplicació des de zero.

Creeu una aplicació a partir d'un disseny visual i connecteu-la a les dades mitjançant uns senzills passos guiats.

Nota

  • L'estil dels components de l'aplicació, com ara els tipus de lletra i els colors, es basa en el tema Office Blue a Power Apps.
  • Si voleu que es conservin els estils de disseny exactes quan creeu l'aplicació, considereu la possibilitat de crear una aplicació de llenç des de Figma.
  • Power Apps no conserva les imatges que proporcioneu. Els fitxers penjats només es processen en memòria per generar l'aplicació.

Requisits previs

  • Una llicència del Power Apps. Si no teniu llicència Power Apps, podeu registrar-vos gratuïtament.
  • Si utilitzeu la vostra pròpia imatge, l'extensió del fitxer d'imatge ha de ser .jpg o .png i la mida del fitxer no ha de ser superior a 4 MB.
  • La imatge ha de contenir un formulari d'una pàgina clarament llegible amb un color de fons clar. Per a un resultat excel·lent, editeu la imatge per tal que té un fons blanc i de contrast alt.

Permet crear una aplicació

  1. Inicieu la sessió a Power Apps.

  2. A la pantalla d'inici, seleccioneu Comença amb un disseny de pàgina.

  3. Seleccioneu Una imatge o Figma un fitxer>Comença des d'una imatge.

  4. Reviseu els exemples d'imatges i suggeriments recomanats. Per tenir la millor experiència, assegureu-vos que la imatge s'adhereix a aquestes recomanacions. Un cop hàgiu acabat, seleccioneu Següent.

  5. Introduïu un nom per a l'aplicació

  6. Puja la teva imatge. Si no teniu una imatge preparada, seleccioneu Comença amb una imatge d'exemple i trieu una de les imatges d'exemple disponibles.

    Nota

    Quan utilitzeu la vostra pròpia imatge, assegureu-vos que compleixi els requisits d'imatge esmentats a Requisits d'imatge.

    Per exemple, a continuació es mostren dues imatges d'exemple amb qualitats acceptables i innacceptables:

    Qualitat acceptable Qualitat inacceptable
    Exemple d'imatge dibuixada a mà amb qualitat acceptable. Exemple d'imatge dibuixada a mà amb una qualitat inacceptable.

  7. En funció de les dimensions de la imatge, el format (tauleta o telèfon) se selecciona automàticament. Per a un resultat excel·lent, us recomanem que conserveu el format suggerit. L'ús del format suggerit garanteix la coincidència més propera entre la imatge d'entrada i l'aplicació final. Seleccioneu Següent.

    Proporcioneu el nom de la imatge, el tipus d'imatge i el disseny.

  8. La imatge s'etiqueta automàticament en funció dels components identificats. Per exemple, a la imatge d'exemple següent, el quadre que diu "Introduïu el vostre nom" s'ha identificat com a control d'entrada de text.

    Podeu traçar una etiqueta nova seleccionant i arrossegant per seleccionar la regió que abasta el component. A continuació, trieu el tipus de component amb el qual voleu associar l'etiqueta nova.

    Per fer edicions en una etiqueta existent o per suprimir-la, seleccioneu l'etiqueta. A continuació, podeu assignar un component diferent per a l'etiqueta o ajustar les mètriques de l'etiqueta arrossegant les cantonades per canviar la mida. Si voleu suprimir l'etiqueta, seleccioneu Suprimeix l'etiqueta.

    Dissenyeu components per a l'aplicació seleccionant etiquetes o creant-ne una de nova i, a continuació, escollint el control d'etiqueta.

    Propina

    Seleccioneu la pestanya Guia a la part dreta de la pantalla per obtenir més informació sobre els diferents tipus de components i com etiquetar-los amb precisió.

    Després d'haver revisat les etiquetes i assegurar-vos que cada component està etiquetat correctament, seleccioneu Següent.

  9. Configurar dades. Per obtenir la millor experiència, us recomanem que connecteu l'aplicació a una font de dades seleccionant Connecta't a una Dataverse taula. Si trieu aquesta opció i seleccioneu Següent, se us guiarà per seleccionar una taula existent Dataverse i assignar els camps de la imatge a les columnes d'aquesta taula o crear una taula Dataverse nova i afegir-hi columnes basades en els camps de formulari de la imatge. L'aplicació conté un component de formulari connectat a la taula Dataverse .

    Si no vols connectar-te Dataverse, selecciona Omet això de moment. Si trieu aquesta opció i seleccioneu Crea, l'aplicació es crea tal qual, la qual cosa significa que els components que heu etiquetat al pas anterior es generen directament. No es col·loquen en un component de formulari i l'aplicació no està connectada a les dades.

    Trieu connectar-vos o Dataverse continuar sense crear una taula ara.

    Si decidiu ometre la connexió Dataverse, seleccioneu Crea i l'aplicació es crearà per a vosaltres. Més endavant, podeu afegir connexions de dades a l'aplicació per connectar-la amb les vostres dades.

    Nota

    L'opció de connectar-se a una Dataverse taula es desactivarà si no la teniu Dataverse al vostre entorn.

  10. Si heu triat connectar-vos a una Dataverse taula i heu seleccionat crear una taula nova o una taula existent, ara podeu editar els detalls de la taula i la columna. Cada etiqueta correspon a una columna de dades basada en els camps de formulari identificats a la imatge.

    Seleccioneu una etiqueta per modificar les propietats de la columna, com ara Nom de visualització, Nom iTipus de dades. Per suprimir una columna existent, seleccioneu l'etiqueta i, a continuació, seleccioneu Suprimeix la columna.

    Dissenyeu la taula, canvieu les columnes i les seves propietats.

    Per afegir una columna de dades, podeu fer-ho des de l'etiqueta nova i definir-ne les propietats. Quan etiqueteu columnes, gairebé sempre dibuixareu una etiqueta al voltant de dos objectes: una etiqueta i alguna cosa en què l'usuari introduirà dades, com ara una entrada de text.

    Propina

    Seleccioneu Propietats de la taula a la part dreta de la pantalla per veure i editar les propietats de la taula nova.

    En seleccionar Següent, podreu revisar l'estructura de la taula i la columna.

    Reviseu i confirmeu l'estructura de l'esquema de taula i columna.

    Un cop hàgiu completat la revisió, seleccioneu Crea per crear l'aplicació. La creació de l'aplicació pot trigar un minut o dos.

  11. Un cop creada l'aplicació, s'obre la nova aplicació perquè Power Apps Studio puguis continuar creant-la i personalitzant-la.

    L'aplicació s'ha creat i obert Power Apps Studio perquè la personalitzeu.

    Si trieu de crear una taula nova a Dataverse, el formulari es connectarà automàticament a la taula nova.

    La taula s'ha creat i afegit a l'aplicació.

  12. Continueu creant i personalitzant l'aplicació afegint més components o modificant les propietats de l'estil.

    A continuació es descriuen alguns dels passos següents habituals per portar l'aplicació al següent nivell:

    1. Afegiu una pantalla nova anomenada Pantalla2 a l'aplicació i una galeria per mostrar els registres. Definiu la font de dades de la galeria a la nova taula de Dataverse.
    2. A la pantalla que conté el formulari, afegiu un botó (si encara no en teniu) per enviar les dades del formulari. Definiu la fórmula de la propietat OnSelect a SubmitForm(Form1).
    3. Seleccioneu el formulari i, a continuació, seleccioneu la pestanya Avançat a la part dreta de la pantalla i definiu la propietat OnSuccess a Navigate(Screen2). D'aquesta manera, quan les dades del formulari s'han enviat correctament, l'aplicació navegarà a la pantalla que conté la galeria per visualitzar els registres.
    4. Seleccioneu Reprodueix a la part superior dreta de la pantalla per previsualitzar l'aplicació. Empleneu el formulari i seleccioneu Envia per enviar el formulari. El registre nou apareixerà a la pantalla de la galeria.

  13. Deseu i publiqueu l'aplicació.

Requisits d'imatge

  • La imatge que voleu penjar ha de tenir l'extensió de fitxer .jpg o .png. Si teniu una imatge de disseny amb una altra extensió de fitxer, deseu el fitxer d'imatge amb una extensió de fitxer .jpg o .png per utilitzar-lo amb aquesta funció.
  • El mida de l'imatge ha de tenir menys de 4 MB.
  • Si utilitzeu captures de pantalla o esbossos digitals, modifiqueu el fons a un color clar i pur si no hi ha blanc disponible.
  • Si esteu fent una foto, utilitzeu un contrast superior o feu que sigui més clara. Assegureu-vos que la part que voleu etiquetar sigui clara i brillant.
  • Si feu una foto amb una càmera o un telèfon, utilitzeu un contrast superior per afavorir els fons clars. Utilitzeu qualsevol aplicació d'edició de fotos disponible per editar el contrast de la imatge.
  • Si utilitzeu imatges dibuixades a mà, proveu d'utilitzar un bloc de dibuix blanc sense cap línia.

Limitacions

Consulteu també