Capítol 3: Crear un prototip amb poc codi

Nota

El capítol 2 feia referència a l'aplicació mòbil utilitzada pels tècnics i enginyers de camp i l'aplicació d'escriptori utilitzada pel personal local. Els capítols següents se centren en el disseny, la implementació i el desplegament de les aplicacions mòbils integrades al Power Apps. Les aplicacions d'escriptori es deixen com un exercici per al lector.

Kiana és escèptica sobre les solucions de codi baix i Power Apps. No obstant això, Kiana i Maria decideixen crear una aplicació junts per ajudar els tècnics de camp a comprovar l'inventari (i demanar peces, si cal), consultar la base de coneixement i comprovar la seva propera cita mentre estan fora de l'oficina en trucades de servei. La Kiana i la Maria preveuen utilitzar aquesta experiència per explorar com afegir controls i utilitzar fórmules al Power Apps.

Tot i que construir un prototip inicial de codi baix sol ser una tasca de desenvolupador ciutadà, Kiana decideix prestar atenció al procés per entendre com es construeix l'aplicació. La Kiana necessita aquesta informació per ajudar la Maria a integrar les fonts de dades del món real, les API web i altres serveis necessaris a l'aplicació.

Ítem 1: administració de l'inventari de camp

L'objectiu inicial de la Maria és crear una aplicació de llenç on es visualitzi una llista de les peces i que permeti a l'usuarisi visualitzar els detalls de qualsevol peça. Finalment, l'usuarisi també hauria de poder demanar una peça; tanmateix, aquesta versió inicial de l'aplicació serà simplement un prototip i encara no es connectarà al back end. Després d'obtenir comentaris de Caleb, el tècnic de camp principal, Maria treballarà amb Kiana en la integració de l'aplicació canvas amb el sistema d'inventari que s'executa a les instal·lacions.

La Maria està molt familiaritzada amb el sistema de gestió d'inventaris existent i entén la informació que conté. La Maria comença creant un llibre de treball de l'Excel que conté taules amb dades simulades amb detalls d'algunes parts d'exemple. Els camps de la taula són ID, Nom, CategoryID , Preu , Visió general , NumberInStock iImatge (un URL que fa referència a una imatge de la peça). Aquest llibre de treball es pot utilitzar per crear i provar l'aplicació de llenç per assegurar-se que mostra les dades necessàries correctament. La Maria emmagatzema aquest llibre de treball en un OneDrive compte amb el nom BoilerParts.xlsx.

Nota

Podeu trobar una còpia d'aquest llibre de treball a la carpeta Actius del repositori Git d'aquesta guia.

Full de càlcul de les peces de la caldera, amb una llista de les peces amb les columnes Id, Name, CategoryId, Price, Overview, NumberInStock i Image

Si sou un dissenyador de base de dades relacional, veureu que el llibre de treball de l'Excel presenta una visualització desnormalitzada de les dades. Per exemple, en una base de dades relacional,CategoryID probablement seria un identificador numèric que fa referència a una taula independent que conté els detalls de la categoria, inclòs el nom.

Nota

Actualment, els URL de la columna Imatge són només marcadors de posició. A l'aplicació completada, aquestes adreces URL se substituiran per les adreces dels fitxers d'imatge reals.

Seguiu aquests passos per crear l'aplicació amb el Power Apps.

  1. Inicieu la sessió a Power Apps.

  2. A la pàgina d'inici , a Comença a partir de dades, seleccioneu Excel Online.

    Pàgina inicial del Power Apps Studio

  3. A la pàgina Connexions , seleccioneu OneDrive per a Empresa i, a continuació, seleccioneu Crea.

    Connexió nova al OneDrive

  4. A la OneDrive pàgina Per a empreses , seleccioneu el fitxer BoilerParts.xlsx .

    Connectar al llibre de treball de l'Excel.

  5. Seleccioneu la taula al fitxer de l'Excel (la Maria va crear la taula amb el nom per defecte,Taula1 ) i, a continuació, seleccioneu Connecta.

    Connectar a la taula de l'Excel.

  6. Espereu mentre el Power Apps genera l'aplicació.

    Generar l'aplicació.

  7. Quan s'hagi generat l'aplicació, veureu la pantalla Navegar , que mostra els camps CategoryID, ID i Image de cada fila de la taula de parts del llibre de treball.

    Peces mostrades a la pantalla de navegació

  8. Els camps que es visualitzen actualment no són gaire útils per ajudar un enginyer a seleccionar un producte. A la subfinestra que mostra la pantalla Navega , seleccioneu l'etiqueta Intercanviador de calor a la primera fila de dades. A la barra de fórmules, seleccioneu la propietat Text a la llista desplegable. Canvieu el valor d'aquesta propietat a ThisItem.Name. El text del primer camp de cada fila canviarà per mostrar el nom de la peça.

    Nota

    A la imatge següent, l'etiqueta de l'intercanviador de calor que es mostrava originalment al formulari ha canviat al nom del producte,3.5 W/S Heater.

    Substituir el text per un control d'etiqueta.

  9. Repetiu el pas anterior per a les etiquetes ID i Imatge . Canvieu la propietat Text del camp ID a CategoryID i la propietat Text del camp Image a Visió general. La pantalla Navega ara hauria de semblar la següent imatge, que és més probable que un enginyer de camp trobi útil per seleccionar peces.

    Llista d'elements que mostren el nom d'una peça, la categoria en què es troba i una descripció general.

  10. La funció de cerca de la pantalla Navega per defecte utilitza els camps que es van seleccionar inicialment quan es va generar la pantalla, en aquest cas, CategoryID, ID i Image. Els resultats s'ordenen per CategoryID. Té sentit canviar-ho als camps Nom, CategoryID i Visió general , amb els resultats ordenats per Nom. Seleccioneu el control BrowseGallery1 a la subfinestra Visualització d'arbre . A la llista desplegable de la part esquerra de la barra de fórmules, seleccioneu la propietat Elements . Arrossegueu la vora inferior de la barra de fórmules cap avall per tal que la fórmula estigui completament visible. La fórmula conté l'expressió següent:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))

    Ordenar i cercar els camps.

  11. Canvieu l'expressió de cerca per fer referència als camps Nom, CategoryID i Visió general mitjançant la fórmula següent:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

  12. El títol de la capçalera del formulari no és útil i el tema per defecte no coincideix amb la imatge corporativa de VanArsdel. A la pantalla Navega , seleccioneu l'etiqueta Taula1 i, a la barra de fórmules , canvieu la propietat Text de l'etiqueta a "Explora les parts" (incloeu les cometes dobles al valor).

  13. A la barra d'eines, seleccioneu Tema (potser haureu d'expandir la barra d'eines per mostrar més elements) i, a continuació, seleccioneu el tema Bosc . Els colors i l'estil de la pantalla Navega canviaran per adaptar-se al tema.

    Seleccionar el tema.

Fer que la pantalla Detalls sigui més útil

Heu creat l'aplicació bàsica i heu modificat la pantalla Navega per mostrar camps que un enginyer pot utilitzar per identificar una peça. L'aplicació també conté una pantalla de detalls , que mostra tota la informació d'una peça seleccionada. Els camps d'aquesta pantalla no es visualitzen actualment en una seqüència lògica, per tant, els heu de reorganitzar. També podeu suprimir el camp ID d'aquesta pantalla, perquè aquesta informació és irrellevant per a un enginyer.

  1. A la subfinestra Visualització d'arbre , desplaceu-vos cap avall i seleccioneu DetailScreen1 . Aquesta pantalla mostra detalls sobre la part que un usuari selecciona a la pantalla Navega .

    Pantalla de detalls de les peces

  2. A la capçalera de la pantalla Detalls de la subfinestra central, seleccioneu l'etiqueta Taula1 . A la subfinestra dreta, a la pestanya Propietats , canvieu la propietat Text a Detalls de lapeça.

    Nota

    En molts casos, podeu obtenir els mateixos resultats utilitzant la barra de fórmules com a subfinestra Propietats . Tanmateix, algunes propietats només estan disponibles a través de la subfinestra Propietats .

    Modificar la capçalera de la pantalla de navegació de les peces.

  3. A la subfinestra Visualització d'arbre , a DetailScreen1 , seleccioneuDetailForm1 . A la subfinestra dreta, a la pestanya Propietats , seleccioneu Edita els camps al costat de Camps. A la subfinestra central, seleccioneu i arrossegueu els camps per tal que es visualitzin en l'ordre següent, de superior a inferior:

    • Nom
    • CategoryID
    • Informació general
    • Preu
    • NumberInStock
    • Image
    • ID

    Organitzar els camps a la pantalla de detalls.

  4. Seleccioneu el camp ID , seleccioneu els punts suspensius que apareixen a la part dreta del camp i, a continuació, seleccioneu Suprimeix al menú desplegable que apareix. Aquesta acció suprimeix el camp ID del formulari.

    Suprimir el camp ID del formulari.

  5. Al panell Vista d'arbre , a DetailForm1, seleccioneu CategoryID_DataCard1. Aquest element és un control DataCard que mostra el nom d'un camp (anomenat clau) i el seu valor.

    Control de la targeta de dades CategoryID

    Al panell dret, a la pestanya Avançat , seleccioneu Desbloqueja per canviar les propietats. A la secció Dades , canvieu el camp NomMostrat a "Categoria" (incloeu-hi les cometes).

    Nota

    Igual que amb la pestanya Propietats , moltes de les propietats de la pestanya Avançat també són accessibles a través de la barra de fórmules. Per definir aquestes propietats, podeu utilitzar la barra de fórmules si ho preferiu.

    Modificar el nom de visualització del camp de detalls CategoryID.

  6. Repetiu el pas anterior per canviar la clau de NumberInStock_DataCard1 a "Number in Stock" (incloent-hi les cometes).

  7. Cal ajustar el format del camp *Preu* per mostrar les dades com a valor de moneda. Al panell Vista d'arbre , a DetailForm1, a Price_DataCard1, seleccioneu DataCardValue7. Aquest és el camp que mostra el valor del camp Preu . A la subfinestra DataCardValue7 de la dreta, a la pestanya Avançat , canvieu la propietat Text a Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Format de preu com a moneda

    L'expressió Parent.Default fa referència a l'element de dades al qual està vinculat el control principal (la DataCard); en aquest cas, la columna Price . La funció Text reformata aquest valor utilitzant el format especificat com a segon argument; en aquest exemple, aquesta és la moneda local amb dos decimals.

  8. La targeta de dades d'imatge hauria de mostrar una imatge de la part en lloc de l'adreça URL del fitxer d'imatge. Al panell Vista d'arbre , a DetailForm1, a Image_DataCard1, seleccioneu DataCardValue3 i, a continuació, seleccioneu Suprimeix per suprimir aquest control.

  9. Seleccioneu Card_de_dades_d'imatge1. Al panell esquerre, seleccioneu + Insereix. Al panell Insereix , expandeix Suport i, a continuació, selecciona Imatge.

    Substituir una adreça URL d'imatge per una imatge.

  10. Torneu al panell de la vista d'arbre i verifiqueu que el control de text Image1 s'hagi afegit al control Image_DataCard1 .

    Verificar que s'hagi afegit el control d'imatge.

  11. Al panell Vista d'arbre , seleccioneu Image_DataCard1. Al panell dret, a la pestanya Avançat , canvieu Alçada a 500, per deixar prou espai perquè es mostri una imatge.

    Definir l'alçada de la targeta de dades de la imatge.

  12. Al panell Vista d'arbre , seleccioneu Imatge1. Definiu les propietats següents:

    • Imatge: Parent.Default
    • PosicióImatge: PosicióImatge.Ajust
    • Amplada: 550
    • Alçada: 550

    Nota

    Actualment, la imatge que es visualitza està buida perquè l'adreça URL del llibre de treball de l'Excel només és un contenidor. Resoldreu aquest problema i cercareu una adreça URL real quan l'aplicació s'enllaça amb una API web en un capítol posterior.

L'aplicació també conté una pantalla d'edició , que permet a l'usuari canviar la informació d'una part. Un enginyer no hauria de poder canviar els detalls d'una peça, crear peces noves o suprimir peces del catàleg.

  1. A la subfinestra Visualització d'arbre , seleccioneu EditScreen1. Seleccioneu el botó de punts suspensius i, a continuació, seleccioneu Suprimeix per suprimir aquesta pantalla.

    Suprimir la pantalla d'edició.

  2. A la subfinestra Visualització d'arbre , seleccioneu DetailsScreen1 . Observeu que el Power Apps Studio mostra un missatge d'error per a aquesta pantalla. Aquest error es produeix perquè DetailsScreen1 conté expressions que fan referència a la pantalla EditScreen1 , que ja no existeix.

  3. A la capçalera de DetailsScreen1 , seleccioneu la icona de llapis (IconEdit1). La propietat OnSelect d'aquest control conté l'expressió EditForm(EditForm1); Navega(EditScreen1, ScreenTransition.None). Quan se selecciona la icona Edita , aquesta expressió s'executa i intenta moure's a la pantalla EditScreen1 .

    Editar la propietat OnSelect.

  4. A la subfinestra Visualització d'arbre , seleccioneu IconEdit1 i, a continuació, seleccioneuSuprimeix . Aquesta icona ja no és necessària.

  5. Seleccioneu IconDelete1 i, a continuació, seleccioneu Suprimeix. Aquesta icona s'utilitza per suprimir la part actual i tampoc és necessària.

    Suprimir les icones de supressió i d'edició.

  6. Observeu que el text Detalls de la peça ha desaparegut de la capçalera de la pantalla i Power Apps Studio mostra un missatge d'error. Això ha passat perquè l'amplada del control d'etiqueta que mostra el text és calculada. A la subfinestra Visualització d'arbre , seleccioneu LblAppName2 . Examineu la propietat Width . El valor d'aquesta propietat és el resultat de l'expressió Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    El control LblAppName2 mostra un error d'amplada.

  7. Canvieu l'expressió de la propietat Width a Parent.Width - Self.X. L'error hauria de desaparèixer i el text Detalls de la peça hauria de tornar a aparèixer a la capçalera de la pantalla.

  8. A la subfinestra Visualització d'arbre , seleccioneu BrowseScreen1 . Aquesta pantalla també mostrarà un missatge d'error. La + icona de la barra d'eines (IconNewItem1) permet a l'usuari afegir una peça nova. La propietat OnSelect d'aquesta icona fa referència a la pantalla EditScreen1 .

    Una icona d'element nou mostra un error.

  9. Seleccioneu IconNewItem1 i, a continuació, seleccioneu Suprimeix. Com abans, el text de la capçalera de la pantalla desapareix i es mostrarà un missatge d'error i per la mateixa raó.

  10. A la subfinestra Visualització d'arbre , a BrowseScreen1 , seleccioneuLblAppName1 . Modifiqueu l'expressió de la propietat Width suprimint la referència a IconNewItem1.Width. La nova expressió hauria de ser Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Canviar l'amplada de l'etiqueta.

  11. Encara hi ha un problema a la capçalera. Tot i que el text Navega per parts ha tornat a aparèixer, es mostra un error i les icones d'actualització i ordenació estan al lloc equivocat. A la subfinestra Visualització d'arbre , seleccioneu IconaOrdenaCap avall1 . Cerqueu la propietat X per a aquest control. Aquesta propietat determina la posició horitzontal de la icona de la capçalera. Actualment es calcula en funció de l'amplada del control IconNewItem1 .

    Error de la icona d'ordenació

  12. Canvieu l'expressió de la propietat X a Parent.Width - Self.Width.

  13. A la subfinestra Visualització d'arbre , seleccioneu IconRefresh1. Canvieu l'expressió de la propietat X a Parent.Width - IconSortUpDown1.Width - Self.Width. Tots els errors haurien de desaparèixer.

Desar i provar l'aplicació

Ara podeu desar i provar l'aplicació.

  1. Seleccioneu Desa el fitxer>com a.

  2. A Desa com, seleccioneu El núvol, introduïu el nom VanArsdelApp i, a continuació, seleccioneu Desa.

    Desa l'aplicació.

  3. Seleccioneu la fletxa enrere per tornar a la pantalla d'inici .

    Tornar a la pantalla d'inici.

  4. Seleccioneu F5 per previsualitzar l'aplicació. A la pàgina Explora les peces , seleccioneu el claudàtor d'angle dret (>) a la dreta de qualsevol peça. Apareix la pantalla Detalls de la peça.

    Execució inicial de l'aplicació

  5. Seleccioneu el claudàtor d'angle esquerre (<) a la capçalera de la pantalla Detalls per tornar a la pantalla Navega .

  6. A la pantalla Explora les peces , introduïu text al quadre Cerca . A mesura que escriviu, els elements es filtraran per mostrar només aquells que tinguin text coincident als camps Nom, ID de categoria o Visió general .

    Cercar a la pantalla de navegació de les peces.

  7. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

Ítem 2: Knowledge Base de camp

Per accedir a la Knowledge Base, la Maria i en Caleb (el tècnic) visualitzen una interfície simple on l'usuarisi introdueix un terme de cerca i l'aplicació mostra tots els articles de la Knowledge Base que esmenten el terme. La Maria sap que aquest procés implicarà l'Azure Cognitive Search, però no necessita, ni tan sols vol, entendre com funciona. Per tant, Maria decideix només proporcionar la interfície d'usuari bàsica i treballar amb Kiana més tard per afegir la funcionalitat real.

Maria decideix crear una nova pantalla basada en la plantilla de llista disponible a Power Apps Studio.

  1. A la barra d'eines de la pantalla d'inici Power Apps Studio , seleccioneu Pantalla nova i, a continuació, seleccioneu Llista.

    La plantilla Llista

  2. A la capçalera de la pantalla, seleccioneu l'etiqueta que mostra el text [Títol]. Canvieu la propietat Text a "Consulta" (incloeu les cometes).

    Modificar el text de la capçalera de la pantalla de consulta.

  3. A la capçalera de la pantalla, seleccioneu el signe més (+) i, a continuació, seleccioneu Suprimeix. La + icona està pensada per permetre a l'usuari afegir més elements a la llista. La Knowledge Base és només de consulta i, per tant, aquesta característica no es necessita.

    Suprimir la icona +.

    Observeu que la supressió d'aquesta icona provoca un error a la capçalera a causa de la manera com es calculen la ubicació i l'amplada dels altres elements. També ho podeu fer amb la pantalla d'administració d'inventari i la solució és la mateixa que s'indica als passos següents.

  4. A la subfinestra Visualització d'arbre , desplaceu-vos cap avall fins a la secció Pantalla1 i seleccioneu LblAppName3 . Canvieu la propietat Width a la fórmula Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Modificar l'amplada de la capçalera de la pantalla de consulta.

  5. A la subfinestra Visualització d'arbre , seleccioneu IconaOrdenaCap avall2 . Modifiqueu la propietat X a la fórmula Parent.Width - IconSortUpDown2.Width.

  6. A la subfinestra Visualització d'arbre , seleccioneu IconRefresh2 . Modifiqueu la propietat X a Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. S'haurien de resoldre tots els errors de la pantalla.

  7. Seleccioneu Desa el fitxer>.

  8. Al quadre Nota de versió , introduïu el text S'ha afegit la interfície d'usuari de la Knowledge Base i seleccioneuDesa.

  9. Torneu a la pantalla d'inici i seleccioneu F5 per previsualitzar la pantalla nova. S'hauria d'assemblar a la imatge següent.

    La pantalla de consulta s'està executant.

    Tingueu en compte que si seleccioneu la icona > al costat de qualsevol de les entrades fictícies, la funcionalitat de detalls no funciona actualment. Ho veurem més tard quan integreu la Cerca cognitiva de l'Azure a l'aplicació.

  10. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

Ítem 3: Planificació i notes de camp

La Maria treballa amb en Malik, el recepcionista de l'oficina, per dissenyar la interfície de la planificació de camp i les cites que forma part de l'aplicació. En Malik proporciona un llibre de treball de l'Excel amb algunes dades d'exemple que la Maria pot utilitzar per crear la pantalla de les cites. El llibre de treball conté una taula amb les columnes següents:

  • ID (ID de la cita)
  • Identificador de client (un identificador únic per al client)
  • Nom del client
  • Adreça del client
  • Detalls del problema (descripció del text del problema que està tenint el client)
  • Número de contacte
  • Estat
  • Data de la cita
  • Hora de la cita
  • Notes (una descripció de text amb les notes afegides per l'enginyer)
  • Imatge (fotografia de l'aparell, ja sigui en condicions de funcionament després de la reparació o com a foto complementària de les notes de l'enginyer)

Llibre de treball de les cites

Nota

Com amb les dades d'administració de l'inventari de camp, aquest llibre presenta una visualització desnormalitzada de les dades. Al sistema de cites existent, aquestes dades s'emmagatzemen en taules independents que contenen dades de cita i dades de client.

La Maria emmagatzema aquest fitxer en un OneDrive compte amb el nom Appointments.xlsx. Recordant que anteriorment s'utilitzava el nom per defecte de la taula al llibre de treball i s'havia de canviar el títol en les diferents pantalles que es van generar, la Maria canvia el nom de la taula del llibre de treball a Cites.

Nota

Aquest llibre de treball està disponible a la carpeta Assets del repositori Git per a aquesta guia.

La Maria vol crear la secció de cites de l'aplicació directament des del fitxer Excel. Maria decideix seguir un enfocament similar al de la funcionalitat de gestió d'inventaris de camp, excepte que aquesta vegada l'enginyer podrà crear i editar cites.

La Maria decideix crear les pantalles de cites inicialment com una aplicació independent. D'aquesta manera, Maria pot utilitzar Power Apps Studio per generar gran part de l'aplicació automàticament. El Power Apps Studio actualment no us permet generar pantalles addicionals a partir d'una connexió de dades en una aplicació existent. Després de crear i provar les pantalles, la Maria les copiarà a l'inventari de camp i a l'aplicació de la base de coneixement.

Nota

Un enfocament alternatiu és afegir la taula Cites al fitxer Excel com a segona font de dades a l'aplicació existent i, a continuació, crear a mà les pantalles per a les cites. La Maria va optar per generar les noves pantalles a partir del llibre de treball i copiar les pantalles. Actualment, Maria està més familiaritzada amb els conceptes de copiar i enganxar que amb la creació de pantalles manualment, i anirà aprendent a crear pantalles des de zero a mesura que avanci el procés de creació d'aquesta aplicació.

Per crear l'aplicació de cites

  1. A la barra de Power Apps Studio menús, seleccioneu Fitxer.

    Menú Fitxer

  2. A la subfinestra esquerra, seleccioneu Crea. A la subfinestra principal, seleccioneu el OneDrive quadre Per a Empreses - Disposició del telèfon.

    Creeu una nova aplicació.

  3. A la subfinestra Connexions , seleccioneu Appointments.xlsx.

    Nova aplicació del llibre de treball de les cites

  4. Al fitxer de l'Excel, seleccioneu la taula Cites i, a continuació, seleccioneu Connecta.

    Seleccionar la taula de cites.

  5. Espereu mentre es genera l'aplicació. Quan aparegui la nova aplicació, contindrà una pantalla de navegació , una pantalla de detalls i una pantalla d'edició , utilitzant el tema predeterminat.

    L'aplicació de cites generada

  6. A la subfinestra Visualització d'arbre , a la secció BrowseScreen1 a BrowseGallery1 , seleccioneuImatge1 i, a continuació, seleccioneuSuprimeix . La pantalla Navega només ha d'enumerar les cites, no les imatges associades amb elles.

    Suprimir el control d'imatge.

    Tingueu en compte que l'eliminació del control Image1 provoca diversos errors a la pantalla perquè l'amplada i la ubicació del control Title1 fan referència al control Image . Solucionareu aquests problemes al pas següent.

  7. A la subfinestra Visualització d'arbre a BrowseGallery1 , seleccioneuTítol1 . Canvieu el valor de la propietat X a 16. Canvieu la fórmula de la propietat Width a Parent.TemplateWidth - 104. S'haurien de resoldre els errors de la pantalla.

  8. A la subfinestra Visualització d'arbre , a BrowseGallery1 , seleccioneuCos1. Aquest control mostra actualment els detalls de telèfon de contacte del client. Canvieu el valor de la propietat Text a ThisItem.'Customer Name' (incloeu les cometes simples).

    Canviar el control Body1 pel nom del client.

    Els detalls del nom de la pantalla Navega ara mostren el nom del client.

  9. A la subfinestra Visualització d'arbre , seleccioneu ExploraGaleria1 . Amb la barra de fórmules, examineu l'expressió de la propietat Items . El control cerca cites mitjançant la data, l'hora i el número de contacte de la cita. Canvieu aquesta fórmula per cercar el nom del client en lloc del número de contacte:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).

    Fixeu-vos que les cites es facin per data i hora (els dos primers camps que es visualitzen).

  10. A la subfinestra Visualització d'arbre , suprimiu IconNewItem1 . Només el personal de les oficines pot reservar cites noves per a enginyers i tècnics. Observeu que aquesta acció produeix errors al formulari perquè l'amplada i la posició d'altres controls de la capçalera fan referència a la icona que acaba de suprimir.

  11. A la subfinestra Visualització d'arbre , seleccioneu LblAppName1 . Canvieu la fórmula de la propietat Width . a Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. A la subfinestra Visualització d'arbre , seleccioneu IconRefresh1. Canvieu el valor de la propietat X a Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. A la subfinestra Visualització d'arbre , seleccioneu iconaOrdenaCap avall1 . Canvieu el valor de la propietat X a Parent.Width - Self.Width.

  14. A la subfinestra Visualització d'arbre , seleccioneu BrowseScreen1 i, a continuació, seleccioneu el botó de punts suspensius (...). Al menú desplegable que apareix, seleccioneu Canvia el nom i canvieu el nom de la pantalla a BrowseAppointments.

    Canviar el nom de la pantalla de navegació.

  15. Utilitzant la mateixa tècnica, canvieu el nom del control BrowseGallery1 a BrowseAppointmentsGallery.

Això completa la pantalla Navega .

Per crear la pantalla de detalls

Ara podeu centrar la vostra atenció en la pantalla Detalls .

  1. A la subfinestra Visualització d'arbre , desplaceu-vos cap avall fins a la secció DetailsScreen1 . Podeu veure que els detalls es presenten en ordre alfabètic per noms de camp i que algunes dades útils, com ara el camp Notes , no es mostren en absolut.

    Disposició de la pantalla de detalls de les cites

  2. A la subfinestra Visualització d'arbre , seleccioneu DetailForm1 . A la subfinestra dreta de la pestanya Propietats , seleccioneu Edita els camps al costat de Camps. A la subfinestra central, seleccioneu cadascun dels camps següents i, a continuació, seleccioneu Suprimeix:

    • Data de la cita
    • Hora de la cita
    • Id. de client
    • ID

  3. Seleccioneu + Afegeix camp i afegiu els camps següents:

    • Notes
    • Detalls del problema
    • Estat

    Afegir camps a la pantalla de detalls.

  4. Arrossegueu cada camp per tal que es mostri en l'ordre següent, des de dalt a cap:

    • Nom del client
    • Adreça del client
    • Número de contacte
    • Detalls del problema
    • Estat
    • Notes
    • Image

  5. A la subfinestra Visualització d'arbre , seleccioneu Notes_DataCard1. Canvieu la propietat Height a 320.

    Modificar la mida del camp de notes.

  6. A la subfinestra Visualització d'arbre , suprimiu IconDelete1 . Els enginyers no haurien de poder suprimir les cites del sistema.

  7. Seleccioneu LblAppName2 i canvieu la propietat Width a Parent.Width - Self.X - IconEdit1.Width.

  8. Utilitzant la tècnica descrita anteriorment, canvieu el nom de DetailsScreen1 a AppointmentDetails.

Per editar la pantalla Edita

L'última pantalla a mirar, de moment, és la pantalla d'edició .

  1. A la subfinestra Visualització d'arbre , seleccioneu EditScreen1.

  2. A la subfinestra Visualització d'arbre , a la secció EditScreen1 , seleccioneu EditForm1 . A la subfinestra dreta, a la pestanya Propietats , seleccioneu Edita els camps al costat de Camps.

  3. Elimineu els camps següents:

    • Adreça del client
    • ID
    • Id. de client
    • Data de la cita
    • Hora de la cita

  4. Afegiu els camps següents:

    • Detalls del problema
    • Estat
    • Notes

  5. Arrossegueu cada camp per tal que es mostri en l'ordre següent, des de dalt a cap:

    • Nom del contacte
    • Número de client
    • Detalls del problema
    • Estat
    • Notes
    • Image

  6. Seleccioneu el camp Nom del client i expandiu-lo per veure'n les propietats. Canvieu el tipus de control a Visualitza el text . Aquest canvi fa que el control sigui només de lectura; és útil veure el nom del client a la pantalla d'edició , però un enginyer no hauria de poder canviar-lo.

    Establir que el nom del client sigui només de lectura.

  7. Seleccioneu el camp Número de contacte i expandiu-lo per veure'n les propietats. Canvieu el tipus de control a Visualitza el text . Aquest camp també hauria de ser només de lectura.

  8. Seleccioneu el camp Notes , expandiu-lo i canvieu el tipus de control a Edita text de diverses línies. Aquesta configuració permet a l'enginyer afegir notes detallades que poden espaiar diverses línies.

  9. Seleccioneu el camp Estat , expandiu-lo i canvieu el tipus de control a Valors permesos.

  10. A la subfinestra Visualització d'arbre , seleccioneu Status_DataCard5. A la subfinestra dreta, a la pestanya Propietats , seleccioneu Desbloqueja per canviar les propietats. Desplaceu-vos cap avall fins a la propietat AllowedValues i canvieu el text a ["Fix", "Parts ordenades", "No resolt"] (incloeu els claudàtors). L'enginyer de camp només pot establir l'estat en un d'aquests valors definits.

    Definir els valors d'estat permesos.

  11. A la subfinestra Visualització d'arbre, canvieu el nom de EditScreen1 com a EditAppointment.

Ara podeu desar i provar l'aplicació.

  1. Seleccioneu Desa el fitxer>com a.

  2. A Desa com, seleccioneu El núvol, introduïu el nom VanArsdelAppointments i, a continuació, seleccioneu Desa.

  3. Seleccioneu la fletxa enrere a la Power Apps Studio barra d'eines per tornar a la pantalla d'inici .

  4. Seleccioneu F5 per previsualitzar l'aplicació. A la pàgina Cites , seleccioneu la icona > que hi ha al costat de qualsevol cita. Hauria d'aparèixer la pantalla Detalls de la cita. A la capçalera, seleccioneu Edita per actualitzar la cita. Verifiqueu el següent:

    • Els camps Nom de client i Número de contacte són només de lectura.
    • El camp Estat es limita als valors de la llista desplegable.
    • Podeu introduir notes que tinguin diverses línies.
    • Podeu carregar un fitxer d'imatge al camp d'imatge.

    Nota

    Una millora que afegireu més endavant us permetrà fer una foto amb el telèfon des de l'aplicació i afegir-la al camp d'imatge.

    L'aplicació de cites s'està executant.

Combinar les pantalles en una única aplicació

Maria ha creat dues aplicacions, però vol combinar-les en una sola aplicació. Per fer-ho, la Maria copia les pantalles de l'aplicació de cites a l'aplicació de gestió d'inventari de camp i base de coneixement, de la següent manera:

  1. Obriu una finestra del navegador nova i inicieu sessió al Power Apps Studio amb els detalls del compte.

  2. A la subfinestra esquerra, seleccioneu Aplicacions, seleccioneu VanArdselApp i, a continuació, seleccioneu Edita.

    Obrir l'aplicació VanArsdel.

  3. A la barra d'eines, seleccioneu Pantalla nova i, a continuació, seleccioneu En blanc. Aquesta acció afegirà una pantalla nova a l'aplicació en la qual copiareu els controls de la pantalla Navega per a l'aplicació VanArsdelAppointments .

    Afegir una pantalla en blanc.

  4. La nova pantalla s'anomenarà Screen2. A la subfinestra Visualització d'arbre, canvieu-ne el nom com a BrowseAppointments .

  5. Repetiu el pas anterior dues vegades més, per afegir dues pantalles en blanc més (Pantalla3 i Pantalla4).

  6. Canvieu el nom de Screen3 com a AppointmentDetails i canvieu el nom de Screen4 com a EditAppointment.

  7. A la barra d'eines esquerra de Power Apps Studio, seleccioneu la icona Dades . A la subfinestra Dades , seleccioneu Afegeix dades. A la llista desplegable Seleccioneu una font de dades, al camp Cerca , introduïu OneDrive i seleccioneu OneDrive per a Empresa.

    Seleccionar la font de dades.

  8. Seleccioneu el fitxer Appointments.xlsx de l'Excel , seleccioneu la taula Cites i, a continuació, seleccioneu Connecta .

  9. Canvieu a la finestra del navegador que mostra l'aplicació VanArsdelAppointments .

  10. A la barra d'eines, seleccioneu Tema (potser haureu d'expandir la barra d'eines per mostrar més elements) i, a continuació, seleccioneu el tema Bosc . Aquest és el mateix tema utilitzat per l'aplicació VanArsdel .

  11. A la barra d'eines esquerra, seleccioneu la icona Visualització d'arbre , seleccioneu la pantalla ExploraCites i, a continuació, seleccioneu Ctrl+A . Aquesta acció selecciona tots els controls de la pantalla.

  12. Seleccioneu Ctrl+C per copiar aquests controls al porta-retalls.

  13. Torneu a la finestra del navegador que mostra l'aplicació VanArsdelApp .

  14. A la barra d'eines esquerra, seleccioneu la icona Visualització d'arbre i, a continuació, seleccioneu la pantalla ExploraCites.

  15. Seleccioneu Ctrl+V per enganxar els controls a la pantalla.

    Nota

    De vegades, la capçalera de pantalla es mostra lleugerament massa avall. Per solucionar aquest problema, seleccioneu els controls IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 i RectQuickActionBar1_1 a la subfinestra Visualització d'arbre (manteniu premuda la tecla Maj mentre feu clic per seleccionar més d'un control alhora) i, a continuació, utilitzeu les tecles del ratolí o de fletxa per moure'ls cap amunt a la subfinestra de visualització de disseny.

  16. Torneu a la finestra del navegador que mostra l'aplicació VanArsdelAppointments i, a continuació, seleccioneu i copieu els controls de la pantalla AppointmentDetails al porta-retalls ( Ctrl+Aseguit de Ctrl+C ).

  17. Torneu a la finestra del navegador que mostra l'aplicació VanArsdelApp , seleccioneu la pantalla AppointmentDetails i, a continuació, enganxeu els controls (Ctrl+V). Ajusteu la posició dels controls a la capçalera de la pantalla, si cal.

    Nota

    Veureu un error a la capçalera de la pantalla AppointmentDetails . Aquest error es produeix perquè la pantalla fa referència als controls de la pantalla EditAppointment , que encara no s'han copiat. Els passos següents haurien de resoldre aquest error.

  18. Torneu a la finestra del navegador que mostra l'aplicació VanArsdelAppointments i, a continuació, seleccioneu i copieu els controls de la pantalla EditAppointment al porta-retalls.

  19. Torneu a la finestra del navegador que mostra l'aplicació VanArsdelApp , seleccioneu la pantalla EditAppointment i enganxeu els controls. Una altra vegada, si cal, moveu els controls a la capçalera de pantalla.

  20. A la subfinestra Visualització d'arbre , seleccioneu la pantalla AppointmentDetails i verifiqueu que l'error indicat anteriorment ha desaparegut.

  21. A la subfinestra Visualització d'arbre , seleccioneu la pantalla BrowseScreen1 . Canvieu el nom d'aquesta pantalla com a BrowseParts.

  22. Canvieu el nom de la pantalla DetailsScreen1 com a PartDetails.

  23. Canvieu el nom de la pantalla Pantalla1 com a Base de coneixement.

    Nota

    És una bona pràctica canviar el nom de les pantalles per reflectir la seva funció en comptes d'utilitzar els noms per defecte generats pel Power Apps Studio, especialment si una aplicació conté diverses pantalles. Això pot ajudar a evitar la confondre's més endavant si un altre desenvolupador modifica l'aplicació.

Afegir una pantalla inicial a l'aplicació

L'última etapa és afegir una pantalla d'inici a l'aplicació. La pantalla d'inici permetrà a l'enginyer moure's entre les diferents parts de l'aplicació (gestió d'inventaris, base de coneixement i cites).

  1. A l'aplicació VanArsdelApp de la barra d'eines, seleccioneu Pantalla nova i, a continuació, seleccioneu En blanc.

  2. A la subfinestra Visualització d'arbre, canvieu el nom de Pantalla2 a Inici.

  3. A la barra d'eines, seleccioneu Insereix. A la llista de controls, expandiu Contingut multimèdia i seleccioneu Imatge. El control s'afegirà a la pantalla.

    Afegir un control d'imatge a la pantalla d'inici.

  4. Establiu la posició X del control a 16 i la posició Y a 22. Canvieu l'amplada a 605 i l'alçada a 127. Canvieu la posició de la imatge a Emplena .

    Definir la mida i la posició de la imatge.

  5. A la pestanya Propietats , a la llista desplegable Imatge , seleccioneu + Afegeix un fitxer d'imatge i, a continuació, carregueu la imatge VanArsdelLogo.png al control.

    Nota

    El fitxer d'imatge està disponible a la carpeta Assets del repositori Git per a aquesta guia.

    Afegir un logotip a la imatge.

  6. A la llista de controls, afegiu quatre controls d'etiqueta de text al formulari i col·loqueu-los de manera que s'apilin sota el logotip de VanArsdel.

    Afegir controls d'etiqueta de text.

  7. Seleccioneu el control d'etiqueta de text més alt. A la subfinestra dreta, a la pestanya Propietats , definiu la propietat Text com a Cita següent. Establiu la mida de la lletra a 30 i utilitzeu el selector de color per establir el color de la lletra en verd (perquè coincideixi amb el logotip).

    Definir el color del tipus de lletra.

  8. Seleccioneu el segon control Etiqueta de text. Canvieu el valor de la propietat Text a First(Appointments).' Nom del client' (incloeu les cometes). Aquesta fórmula recupera el nom del client de la primera fila de la taula de cites.

    Mostrar el nom del client.

    Nota

    Actualment, aquesta fórmula actua com a contenidor. Més endavant, modificareu l'etiqueta per recuperar la cita següent per a l'enginyer, en comptes de mostrar-la sempre.

  9. Seleccioneu el tercer control Etiqueta de text i definiu la propietat Text com a First(Appointments)." Data de la cita'.

  10. Definiu la propietat Text del quart control d'etiqueta a First(Appointments).' Hora de la cita'. Definiu la propietat Mida del tipus de lletra a 30.

  11. A la llista de controls, afegiu un control Rectangle . Definiu les propietats següents per a aquest control:

    • Mode de visualització: Visualitza
    • X: 0
    • Y: 632
    • Amplada: 635
    • Alçada: 1

    Aquest control actua com a separador visual enmig de la pantalla.

  12. Afegiu tres controls de botó a la pantalla, disposats verticalment i espaiats uniformement per sota del separador. Definiu la propietat Text del botó superior a Cites, la propietat Text del botó central a Parts i la propietat Text del botó inferior a Knowledgebase.

    Botons de la pantalla d'inici

  13. Seleccioneu el botó Cites . Canvieu l'expressió de l'acció OnSelect a la fórmula Navigate(BrowseAppointments, ScreenTransition.Fade). Aquesta acció canvia la visualització a la pantalla de cites quan l'usuarisi selecciona el botó.

    Botó de cites

  14. Definiu l'acció OnSelect del botó Parts a Navega(BrowseParts, ScreenTransition.Fade) .

  15. Definiu l'acció OnSelect del botó Knowledge base a Navega(Knowledgebase, ScreenTransition.Fade) .

A més de navegar des de la pantalla d'inici a les altres pantalles del sistema, les pantalles Cites , Peces i Basede coneixement necessiten una manera de permetre que l'usuari torni a la pantalla d'inici . La Maria decideix afegir botons enrere a aquestes pantalles.

  1. A la subfinestra Visualització d'arbre , seleccioneu la pantalla ExploraParts .

  2. Seleccioneu el control RectQuickActionBar1 per donar-li el focus.

  3. Seleccioneu el menú Insereix i seleccioneu Afegeix icona. Moveu la icona a l'esquerra del control RectQuickActionBar1 . Tingueu en compte que la icona enfosquirà part de l'etiqueta Navega per parts .

    Afegir una icona.

  4. Al menú Visualització d'arbre , canvieu el nom del nou control d'icones a IconReturn1 .

  5. Canvieu la fórmula de l'acció OnSelect a l'expressió Back(ScreenTransition.Fade). La funció Enrere fa que l'usuari vagi a la pantalla anterior que ha visitat.

  6. A la pestanya Propietats , canvieu la propietat Icona a Esquerra. <

  7. A la capçalera de la pantalla, seleccioneu l'etiqueta Explora les peces . Canvieu la propietat X a IconReturn1.Width + 20. L'etiqueta Navega per peces ja no s'ha d'ocultar parcialment.

    Desplaçar l'etiqueta de navegació de les peces.

  8. Seguint el procés descrit als passos 16 a 22, afegiu una icona anomenada IconReturn2 al control RectQuickActionBar3 a la pantalla de la Knowledge Base .

  9. De la mateixa manera, afegiu una icona anomenada IconReturn3 al control RectQuickActionBar1_1 a la pantalla BrowseAppointments .

  10. A la subfinestra Visualització d'arbre , seleccioneu l'objecte App . Canvieu la propietat StartScreen a l'expressió Home. Això garanteix que la pantalla d'inici es mostri cada vegada que s'iniciï l'aplicació:

    Definir la fórmula OnStart de l'aplicació.

    Nota

    Si no especifiqueu quina pantalla voleu mostrar quan s'iniciï l'aplicació, s'utilitzarà la pantalla que apareix a la part superior de la subfinestra de la vista d'arbre . Per moure una pantalla a l'inici de la llista, feu clic amb el botó dret a la pantalla a la subfinestra de visualització d'arbre i seleccioneu Mou cap amunt fins que estigui a la part superior.

Finalment, podeu provar l'aplicació.

  1. Seleccioneu Desa el fitxer>. Al quadre Notes de versió , introduïu Versió completa amb la pantalla d'inici i, a continuació, seleccioneuDesa .

  2. Seleccioneu la fletxa enrere per tornar a la pantalla d'inici i, a continuació, seleccioneu F5 per executar l'aplicació.

  3. Verifiqueu que es mostri la pantalla d'inici de l'aplicació.

  4. Seleccioneu Cites. Hauria d'aparèixer la pantalla de les cites.

  5. Seleccioneu la fletxa enrere per tornar a la pantalla d'inici .

  6. Seleccioneu Peces. Hauria d'aparèixer el navegador de peces.

  7. Seleccioneu la fletxa enrere per tornar a la pantalla d'inici .

  8. Seleccioneu Base de coneixement. Hauria d'aparèixer la pantalla de consulta de la Knowledge Base.

  9. Seleccioneu la fletxa enrere per tornar a la pantalla d'inici .

  10. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

L'aplicació de prototip s'ha completat.

Anterior Següent...

  • Last updated on