Comprendre la disposició dels formularis de dades per a les aplicacions de llenç
Creeu fàcilment un formulari atractiu i eficient quan creeu una aplicació del llenç al Power Apps. Per exemple, considereu aquest formulari bàsic per al registres de les comandes de vendes:
En aquest tutorial, veurem els passos per crear aquest formulari. També veurem alguns temes més avançats, com ara dimensionar els camps dinàmics per tal d'emplenar l'espai disponible.
Abans de començar
Si sou nou al Power Apps (o només heu generat aplicacions automàticament), haureu de crear una aplicació des de zero abans de submergir-vos en aquest article. En crear una aplicació des de zero, us familiaritzareu amb els conceptes necessaris, com ara afegir fonts de dades i controls, que s'esmenten però que no s'expliquen en aquest article.
Aquest article s'ha escrit com si teniu una font de dades anomenada Comanda de vendes i que conté els camps del gràfic anterior. Si teniu un Power Apps per usuari, per aplicació o llicència de prova i permisos d'administrador del sistema o personalitzador del sistema, podeu crear una taula al Microsoft Dataverse i afegir camps similars.
Afegir una galeria
Creeu una aplicació per a tauletes des de zero i afegiu la font de dades.
Tot el que es descriu en aquest article també s'aplica a les disposicions de telèfon, però les aplicacions per a telèfons sovint només tenen una columna vertical.
Afegiu un control de galeria vertical i definiu la propietat Elements a "Comanda de vendes".
(opcional) Per tal que coincideixi amb els exemples d'aquest tutorial, canvieu la disposició de la galeria per mostrar només Títol i subtítol.
A la galeria , feu clic o toqueu SO004.
Aquest registre apareixerà al formulari que creeu seguint els passos següents més endavant en aquest article.
Afegir una barra de títol
Afegiu una pantalla en blanc on posareu el formulari.
Fora d'aquest tutorial, podeu posar els controls Galeria i Edita el formulari a la mateixa pantalla, però tindreu més espai per treballar si els poseu en pantalles independents.
A la part superior de la pantalla nova, afegiu un control d'etiqueta i definiu la propietat Text en aquesta expressió:
"Comanda de vendes" & Gallery1.Selected.SalesOrderIdL'etiqueta mostra el número de comanda de vendes del registre que heu seleccionat a la galeria.
(opcional) Doneu format a l'etiqueta de la següent manera:
Definiu la propietat Alinea a Centre.
Definiu la propietat Mida a 20.
Definiu la propietat Emplena a Blau marí.
Definiu la propietat Color a Blanc.
Definiu la propietat Amplada a Parent.Width.
Definiu les propietats X i Y a 0.
Afegir un formulari
Afegiu un control Edita el formulari i, a continuació, desplaceu-lo i canvieu-ne la mida per omplir la pantalla a sota de l'etiqueta.
Al pas següent, connectareu el control de formulari a la font de dades Comanda de vendes mitjançant la subfinestra de la dreta, no la barra de fórmules. Si utilitzeu la barra de fórmules, el formulari no mostrarà cap camp per defecte. Sempre podeu mostrar tots els camps que vulgueu seleccionant una o diverses caselles de selecció a la subfinestra de la dreta.
A la subfinestra dreta, feu clic o toqueu la fletxa avall al costat de Cap font de dades seleccionada i, a continuació, feu clic o toqueu Comanda de vendes.
Un conjunt de camps per defecte de la font de dades Comanda de vendes apareixerà en un disseny senzill i de tres columnes. No obstant això, moltes estan en blanc i poden tardar un moment en col·locar-se a les posicions finals.
Definiu la propietat Element del formulari en Gallery1.Selected.
El formulari mostra el registre que heu seleccionat a la galeria, però pot ser que el conjunt per defecte de camps no coincideixi amb el que voleu per al producte final.
A la subfinestra de la dreta, amagueu cadascun d'aquests camps desmarcant la casella de selecció:
- ID de comanda de venda
- Compte
- Comercial
- Contacte del compte
Moveu el camp Estat de la comanda arrossegant-lo cap a l'esquerra i deixant-lo anar a l'altre costat del camp Referència de la comanda de compra del client.
La vostra pantalla s'hauria d'assemblar a aquest exemple:
Seleccioneu una targeta de dades
Cada camp que es mostra té una targeta de dades corresponent al formulari. Aquesta targeta inclou un conjunt de controls per al títol del camp, un quadre d'entrada, una estrella (que apareix si el camp és obligatori) i un missatge d'error de validació.
També podeu seleccionar targetes directament al formulari. Quan se selecciona una targeta, apareix una llegenda negra a sobre.
Nota
Per suprimir una targeta (no només amagar-la), seleccioneu-la i, a continuació, premeu Suprimeix.
Organitzar targetes en columnes
Per defecte, els formularis de les aplicacions per a tauletes tenen tres columnes i en les aplicacions per a telèfons en tenen una. Podeu especificar no només quantes columnes té un formulari sinó també si totes les targetes haurien d'encaixar dins de les vores de la columna.
En aquest gràfic, el nombre de columnes del formulari s'ha canviat de tres a quatre amb la casella de selecció Ajusta a les columnes seleccionada. Les targetes del formulari s'han arranjat automàticament per adaptar-les a la nova disposició.
Redimensionar targetes en diverses columnes
Segons les dades de cada targeta, pot ser que vulgueu que s'ajustin a una única columna i altres targetes que s'estenguin en diverses columnes. Si una targeta conté més dades de les que voleu que es mostrin en una sola columna, podeu ampliar la targeta seleccionant-la i, a continuació, arrossegant-la a la vora esquerra o dreta del quadre de selecció. Mentre l'arrossegueu, la targeta s'ajustarà als límits de la columna.
Per fer que el disseny sigui més flexible però mantenir una mica d'estructura, podeu augmentar el nombre de columnes a 12. Amb aquest canvi, podeu configurar fàcilment cada targeta per abastar tot el formulari, la meitat del formulari, un terç, un quart, un sisè i així successivament. Vegem això en acció.
A la subfinestra dreta, definiu el nombre de columnes del formulari a 12.
El formulari no canvia visiblement, però té més punts d'ajustament a mesura que arrossegueu el control de l'esquerra o de la dreta.
Augmenteu l'amplada de la targeta Data de la comanda arrossegant el control a la dreta un punt d'ajustament a la dreta.
La targeta abasta quatre de les 12 columnes del formulari (o 1/3 del formulari), en comptes de només tres de les 12 columnes del formulari (o 1/4 del formulari). Cada vegada que augmenteu l'amplada d'una targeta en un punt d'ajustament, la targeta té 1/12 addicional del formulari.
Repetiu el pas anterior amb les targetes Estat de la comanda i Referència de la comanda de compra del client.
Canvieu la mida de les targetes Nom i Descripció per ocupar sis columnes (o 1/2) del formulari.
Feu que les dues primeres línies de l'adreça d'enviament s'estirin totalment en el formulari:
Tot finalitzat. Tenim el nostre formulari desitjat, barrejant files amb diferents nombres de columnes:
Manipular els controls d'una targeta
L'adreça de lliurament inclou diversos fragments d'informació que volem agrupar visualment per a l'usuari. Cada camp es mantindrà en la seva pròpia targeta de dades, però podem manipular els controls dins de la targeta per fer que encaixin millor junts.
Seleccioneu la targeta Primera línia de l'adreça de l'enviament, seleccioneu l'etiqueta dins d'aquesta targeta i, a continuació, suprimiu les tres primeres paraules del text.
Seleccioneu la targeta Segona línia de l'adreça de l'enviament, seleccioneu l'etiqueta dins d'aquesta targeta i, a continuació, suprimiu-ne tot el text.
Pot ser que sigui temptador suprimir el control d'etiqueta i, en molts casos, funcionarà bé. Però pot ser que les fórmules depenguin que el control estigui present. L'enfocament més segur és suprimir el text o definir la propietat Visible del control en fals.
A la mateixa targeta, moveu el quadre d'entrada de text per sobre de l'etiqueta per reduir l'espai entre la primera i la segona línia de l'adreça.
L'alçada de la targeta es redueix quan el seu contingut ocupa menys espai.
Ara posarem la nostra atenció en la tercera línia de l'adreça. De la mateixa manera, escurçarem el text de cada etiqueta d'aquestes targetes i ordenarem el quadre d'entrada de text que hi ha a la dreta de cada etiqueta. Aquests són els passos per a la targeta Estat:
| Pas | Descripció | Resultat |
|---|---|---|
| 1 | Seleccioneu la targeta Estat de manera que els controls apareguin al voltant. |  |
| 2 | Seleccioneu l'etiqueta de la targeta de manera que els controls apareguin al voltant. |  |
| 3 | Col·loqueu el cursor a la dreta del text i, a continuació, suprimiu la part que no necessitem. |  |
| 4 | Utilitzant els controls dels costats, redimensioneu el control de l'etiqueta per adaptar-lo a la nova mida del text. |  |
| 5 | Seleccioneu el control d'entrada de text dins d'aquesta targeta. |  |
| 6 | Utilitzant els controls dels costats, redimensioneu el control d'entrada de text per adaptar-lo a la mida que vulgueu. |  |
| 7 | Arrossegueu cap amunt el quadre d'entrada de text i a la dreta del control de l'etiqueta i, a continuació, deixeu anar el quadre d'entrada de text. |  |
| Les nostres modificacions a la targeta Estat ja s'han completat. |  |
Resultat per a la tercera línia de direcció completa:
Moltes de les targetes comencen amb fórmules dinàmiques per a les seves propietats. Per exemple, el control d'entrada de text que hem redimensionat i mogut a dalt tenia una propietat Amplada basada en l'amplada del seu element principal. Quan moveu o canvieu la mida d'un control, aquestes fórmules dinàmiques se substitueixen per valors estàtics. Si voleu, podeu restaurar les fórmules dinàmiques mitjançant la barra de fórmules.
Desactivar Ajusta a la columna
De vegades, us interessarà un control més precís que el que les 12 columnes estàndard poden proporcionar. Per a aquests casos, podeu desactivar Ajusta a les columnes i, a continuació, col·locar targetes manualment. El formulari continuarà ajustant-se a 12 columnes, però també podeu mantenir premudes les tecles Alt o Ctrl+Maj després d'iniciar un redimensionament o canvi de posició per substituir els punts d'ajustament. Per obtenir més informació, vegeu les dreceres de teclat de comportament alternatiu.
En el nostre exemple, els quatre components que componen la tercera línia de l'adreça tenen exactament la mateixa amplada. Però aquesta podria no ser la millor disposició, ja que els noms de ciutat són més llargs que les abreviatures de l'estat, i el quadre d'entrada de text per als països/regions és curt a causa de la longitud de la seva etiqueta. Per optimitzar aquest espai, desactiveu Ajusta a les columnes a la dreta de la subfinestra i després manteniu premuda la tecla Alt o Ctrl+Maj després de començar a redimensionar i col·locar aquestes targetes.
Després d'un posicionament amb cura, el resultat té mides adequades per a cada camp i, fins i tot, espaiat horitzontal entre camps:
En resum, quines diferències hi ha quan Ajusta a les columnes està activat i desactivat?
| Comportament | Ajusta a les columnes activat | Ajusta a les columnes desactivat |
|---|---|---|
| El canvia de mida s'ajusta a | Nombre de columnes que seleccioneu: 1, 2, 3, 4, 6 o 12 |
12 columnes |
| L'ajustament del redimensionament es pot substituir | No | Sí, amb les tecles Alt o Ctrl+Maj després d'iniciar el redimensionament |
| Les targetes canvien de disposició automàticament entre files (més informació sobre això més endavant) | Sí | No |
Definir l'amplada i l'alçada
Com tot al Power Apps, la disposició del formulari es regeix per les propietats dels controls de la targeta. Com ja s'ha descrit, podeu canviar els valors d'aquestes propietats arrossegant controls a diferents ubicacions o arrossegant controls de redimensionament per canviar la mida dels controls. Però descobrireu situacions en què voldreu comprendre i manipular aquestes propietats de manera més precisa, especialment quan feu formularis dinàmics amb fórmules.
Disposició bàsica: X, Y i amplada
Les propietats X i Y controlen la posició de les targetes. Quan treballem amb controls directament al llenç, aquestes propietats proporcionen una posició absoluta. En un formulari, aquestes propietats tenen un significat diferent:
- X: ordre dins d'una fila.
- Y: número de fila.
La propietat Amplada especifica l'amplada mínima de la targeta (més informació sobre l'aspecte mínim en un moment), similar als controls del llenç.
Donem una ullada a les propietats X, Y i Amplada de les targetes del nostre formulari:
Files que es desborden
Què passa si les targetes d'una fila són massa amples per adaptar-se a aquella fila? Normalment no us heu de preocupar per aquesta possibilitat. Amb Ajusta a les columnes activat, aquestes tres propietats s'ajustaran automàticament de manera que tot encaixi molt bé dins de les files sense desbordar-se.
Però amb Ajusta a les columnes desactivat o una amplada basada en fórmules en una o diverses targetes, es pot produir un desbordament d'una fila. En aquest cas, les targetes s'ajusten automàticament de manera que, de fet, es crearà una altra fila. Per exemple, canviarem manualment la propietat Amplada de la nostra targeta Referència de la comanda de compra del client (primera fila, tercer element) a 500:
Les tres targetes de la fila superior ja no encaixen horitzontalment i s'ha creat una altra fila per ajustar el sobreeiximent. La coordenada Y per a totes aquestes targetes segueix sent la mateixa a 0, i les targetes Nom i Descripció encara tenen una Y d'1. Les targetes que tenen diferents valors d'Y no es fusionen entre files.
Podeu utilitzar aquest comportament per crear un disseny totalment dinàmic, en què les targetes es col·loquin en funció d'un ordre Z, omplint el màxim possible abans de passar a la següent fila. Per aconseguir aquest efecte, doneu a totes les targetes el mateix valor Y i, i utilitzeu X per a l'ordre de les targetes.
Emplenar espais: WidthFit
El sobreeiximent del darrer exemple ha creat un espai després de la targeta Estat de la comanda, que era la segona targeta a la primera fila. Podríem ajustar manualment les propietats Amplada de les dues targetes restants per omplir aquest espai, però aquest enfocament és tediós.
Com a alternativa, utilitzeu la propietat WidthFit. Si aquesta propietat es defineix com a certa per a una o més targetes seguides, la resta d'espai de la fila es dividirà uniformement entre elles. Aquest comportament és la raó per la qual hem dit abans que la propietat Amplada d'una targeta és un mínim i que el que es veu pot ser més ampli. Aquesta propietat no provocarà que una targeta es redueixi, només s'expandeixi.
Si definim WidthFit a cert a la targeta Estat de la comanda, omple l'espai disponible, mentre que la primera targeta es manté sense canvis:
Si també definim WidthFit a cert per a la targeta Data de la comanda, ambdues targetes dividiran uniformement l'espai disponible:
Els controls d'arrossegament en aquestes targetes tenen en compte l'amplada extra proporcionada per WidthFit, no l'amplada mínima proporcionada per la propietat de Amplada. Pot ser confús manipular la propietat de Amplada mentre WidthFit està activat; potser voldreu desactivar-lo, fer canvis a Amplada i, a continuació, tornar-ho a activar.
Quan pot ser útil WidthFit? Si teniu un camp que només s'utilitza en determinades situacions, podeu definir la propietat Visible en fals, i les altres targetes de la fila ompliran automàticament l'espai que hi ha al voltant. Pot ser que vulgueu utilitzar una fórmula que mostri un camp només quan un altre camp tingui un valor concret.
Aquí, definim la propietat Visible del camp Estat de la comanda a un fals estàtic:
Amb la segona targeta suprimida de manera efectiva, la tercera targeta ara pot tornar a la mateixa fila que la primera targeta. La primera targeta encara té WidthFit definit com a cert, de manera que s'expandeix per omplir l'espai disponible.
Com que Estat de la comanda és invisible, no es pot seleccionar fàcilment en el llenç. No obstant, podeu seleccionar qualsevol control, visible o no, a la llista jeràrquica de controls a la part esquerra de la pantalla.
Alçada
La propietat Alçada governa l'alçada de cada targeta. Les targetes tenen l'equivalent de WidthFit per a Alçada i sempre es defineix com a cert. Imagineu que existeix una propietat HeightFit, però no la cerqueu en el producte perquè aquesta propietat encara no està exposada.
No podeu desactivar aquest comportament, de manera que el canvi d'alçada de les targetes pot ser un repte. Totes les targetes dins d'una fila tenen la mateixa alçada que la targeta més alta. Podeu pensar en una fila així:
Quina targeta augmenta l'alçada de la fila? Al gràfic anterior, la targeta de Import total se selecciona i sembla alta, però la seva propietat Alçada es defineix com a 80 (el mateix que l'alçada de la primera fila). Per reduir l'alçada d'una fila, heu de reduir l'alçada de la targeta més alta en aquesta fila i no podeu identificar la targeta més alta sense revisar la propietat Alçada de cada targeta.
AutoHeight
Una targeta també podria ser més alta del que espereu si conté un control per al qual la propietat AutoHeight es defineix com a certa. Per exemple, moltes targetes contenen una etiqueta que mostra un missatge d'error si el valor d'un camp provoca un problema de validació.
Sense cap text per mostrar (cap error), l'etiqueta es redueix a zero alçada. Si no ho sabéssiu, no sabríeu que és allà, i això és com hauria de ser:
A la part esquerra de la pantalla, la llista de controls mostra ErrorMessage1, que és el nostre control d'etiquetes. A mesura que actualitzeu una aplicació, podeu seleccionar aquest control per donar-li una mica d'alçada i mostrar controls d'arrossegament amb els quals podeu posicionar i dimensionar el control. La "A" en un quadre blau indica que el control té AutoHeight definit com a cert:
La propietat Text d'aquest control està definida com a Parent.Error, que s'utilitza per obtenir informació d'error dinàmica basant-se en regles de validació. Per a propòsits d'il·lustració, definim estàticament la propietat Text d'aquest control, que augmentarà la seva alçada (i, per extensió, l'alçada de la targeta) per acomodar la longitud del text:
Fem que el missatge d'error sigui una mica més llarg, i novament el control i la targeta creixen per acomodar-s'hi. La fila creix globalment en alçada i manté l'alineació vertical entre les targetes:
Nota
Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)
Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).
Comentaris
Properament: al llarg del 2024 eliminarem gradualment GitHub Issues com a mecanisme de retroalimentació del contingut i el substituirem per un nou sistema de retroalimentació. Per obtenir més informació, consulteu: https://aka.ms/ContentUserFeedback.
Envieu i consulteu els comentaris de