Capítol 3: Crear un prototip amb poc codi

Nota

Al capítol 2 es feia referència a l'aplicació mòbil utilitzada pels tècnics i enginyers de camp i l'aplicació d'escriptori utilitzada pel personal de l'oficina. 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.

La Kiana no confia en les solucions de codi baix i el Power Apps, però ella i la Maria decideixen crear una aplicació conjuntament per ajudar els tècnics de camp a comprovar l'inventari (i demanar peces, si cal), consultar la Knowledge Base i comprovar la seva propera cita mentre estan fora de l'oficina atenent 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 crear un prototip inicial de poc codi normalment és una tasca de ciutadà desenvolupador, la Kiana decideix parar atenció al procés per assegurar-se que comprèn com s'estructura l'aplicació. Necessita aquesta informació per ajudar la Maria a integrar les fonts de dades reals, 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'usuari visualitzar els detalls de qualsevol peça. Finalment, l'usuari 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 els comentaris de Caleb, el tècnic de camp principal; la Maria treballarà amb la Kiana per integrar l'aplicació de llenç en el sistema d'inventari que s'executa localment.

La Maria està molt familiaritzada amb el sistema de gestió d'inventaris existent i entén la informació que conté. Per començar, crea un llibre de treball de l'Excel que conté taules amb dades de simulacre i detalls per a algunes peces d'exemple. Els camps de la taula són ID, Name, CategoryID, Price, Overview, NumberInStock i Image (adreça URL que fa referència a una imatge de la peça). Pot utilitzar aquest llibre de treball per crear i provar l'aplicació de llenç i assegurar-se que mostra les dades necessàries correctament. Emmagatzema aquest llibre al seu compte de OneDrive amb el nom BoilerParts.xlsx.

Nota

Podeu trobar una còpia d'aquest llibre 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 seria probablement un identificador numèric que fa referència a una taula independent que conté els detalls de la categoria, incloent-hi el nom.

Nota

Les adreces URL de la columna Image actualment són només contenidors. 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 inicial, a Comença a partir de les dades, seleccioneu Excel Online.

    Pàgina inicial del Power Apps Studio

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

    Connexió nova al OneDrive

  4. A la pàgina OneDrive for Business, 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 Table1) 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 l'aplicació s'hagi generat, veureu la pantalla Navega, on es visualitzen els camps CategoryID, ID i Image de cada fila de la taula de peces del llibre.

    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 Heat Exchanger 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 per 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 Heat Exchanger s'ha canviat pel nom del producte mostrat inicialment al formulari, 3.5 W/S Heater.

    Substituir el text per un control d'etiqueta.

  9. Repetiu el pas anterior per a les etiquetes ID i Image. Canvieu la propietat Text del camp ID per CategoryID i la propietat Text del camp Image per Informació general. Ara, la pantalla Navega hauria de tenir l'aspecte de la imatge següent, la qual é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 característica de cerca de la pantalla Navega pren per defecte els camps que inicialment es van seleccionar quan es va generar la pantalla; en aquest cas, CategoryID, ID i Image. Els resultats s'ordenen per CategoryID. Té sentit canviar aquest nom pels camps Name, CategoryID i Overview, 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 Informació 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 Table1 i, a la barra de fórmules, canvieu la propietat Text de l'etiqueta per "Navega per les peces" (podeu incloure les cometes dobles al valor).

  13. A la barra d'eines, seleccioneu Tema (pot ser que hàgiu d'expandir la barra d'eines per visualitzar més elements) i, a continuació, seleccioneu el tema Bosc. Els colors i l'estil de la pantalla Navega canviaran per coincidir amb el 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 visualitzar els camps que un enginyer pot utilitzar per identificar una peça. L'aplicació també conté una pantalla Detalls, on es 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. En aquesta pantalla es visualitzen detalls sobre la peça que l'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 Table1. A la subfinestra dreta, a la pestanya Propietats, canvieu la propietat Text per Detalls de la peça.

    Nota

    En molts casos, podeu aconseguir els mateixos resultats mitjançant la barra de fórmules que amb la 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, seleccioneu DetailForm1. 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 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. A la subfinestra Visualització d'arbre, a DetailForm1, seleccioneu CategoryID_DataCard1. Aquest element és un control DataCard que visualitza el nom d'un camp (anomenat clau) i el seu valor.

    Control de la targeta de dades CategoryID

    A la subfinestra dreta, a la pestanya Avançat, seleccioneu Desbloqueja per canviar les propietats. A la secció Dades, canvieu el camp DisplayName per "Categoria" (incloeu les cometes).

    Nota

    Com passa amb la pestanya Propietats, moltes de les propietats de la pestanya Avançat també estan 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 la targeta de dades NumberInStock_DataCard1 per "Número en estoc" (incloeu les cometes).

  7. Heu d'ajustar el format del camp Preu per visualitzar les dades com un valor de moneda. A la subfinestra Visualització 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 per 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 (DataCard); en aquest cas, la columna Preu. La funció Text torna a formatar aquest valor utilitzant el format especificat com a segon argument; en aquest exemple, aquesta és la moneda local amb dos posicions 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. A la subfinestra Visualització en arbre, a DetailForm1, a Image_DataCard1, seleccioneu DataCardValue3 i, a continuació, seleccioneu Suprimeix per suprimir aquest control.

  9. Seleccioneu Image_DataCard1. A la subfinestra esquerra, seleccioneu + Insereix. A la subfinestra Insereix, expandiu Suport multimèdia i, a continuació, seleccioneu Imatge.

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

  10. Torneu a la subfinestra Visualització en 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. A la subfinestra Visualització d'arbre, seleccioneu Image_DataCard1. A la subfinestra dreta, a la pestanya Avançat, canvieu l'alçada per 500 per permetre l'espai suficient per visualitzar una imatge.

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

  12. A la subfinestra Visualització d'arbre, seleccioneu Image1. Definiu les propietats següents:

    • Imatge: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Width: 550
    • Height: 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 Edita, que permet a un usuari canviar la informació d'una peça. 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);Navigate(EditScreen1, ScreenTransition.None). Quan se selecciona la icona Edita, aquesta expressió s'executa i intenta desplaçar-se a la pantalla EditScreen1.

    Editar la propietat OnSelect.

  4. A la subfinestra Visualització en arbre, seleccioneu IconEdit1 i, a continuació, seleccioneu Suprimeix. 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 de detalls de la peça ha desaparegut de la capçalera de pantalla i, en comptes d'això, el 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 Amplada. 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 Amplada per Parent.Width - Self.X. L'error hauria de desaparèixer i el text Detalls de la peça hauria d'aparèixer a la capçalera de 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 per a 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, seleccioneu LblAppName1. Modifiqueu l'expressió de la propietat Amplada 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 les peces s'ha tornat a explorar, s'està visualitzant un error i les icones d'actualització i ordenació apareixen en un lloc erroni. A la subfinestra Visualització d'arbre, seleccioneu IconSortUpDown1. Cerqueu la propietat X d'aquest control. Aquesta propietat determina la posició horitzontal de la icona de la capçalera. Actualment es calcula segons l'amplada del control IconNewItem1.

    Error de la icona d'ordenació

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

  13. A la subfinestra Visualització d'arbre, seleccioneu IconRefresh1. Canvieu l'expressió de la propietat X per 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 Fitxer > Anomena i desa.

  2. A Anomena i desa, 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 obtenir una visualització prèvia de l'aplicació. A la pàgina Navega per les peces, seleccioneu la fletxa dreta (>) a la dreta de qualsevol peça. Apareix la pantalla Detalls de la peça.

    Execució inicial de l'aplicació

  5. Seleccioneu la fletxa esquerra (<) a la capçalera de la pantalla Detalls per tornar a la pantalla Navega.

  6. A la pantalla Navega per les peces, introduïu text al quadre de cerca. A mida que escriviu, els elements es filtraran només per mostrar aquells que tenen text coincident als camps Nom, CategoryID o Informació 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'usuari 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à la Cerca cognitiva de l'Azure, però no necessita ni vol comprendre'n el funcionament. Per tant, la Maria decideix proporcionar només la interfície d'usuari bàsica. Treballarà amb la Kiana més endavant per afegir la funcionalitat real.

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

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

    La plantilla Llista

  2. A la capçalera de pantalla, seleccioneu l'etiqueta que visualitza el text [Title]. Canvieu la propietat Text per "Consulta" (incloeu les cometes).

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

  3. A la capçalera de pantalla, seleccioneu el signe de més (+) i, a continuació, seleccioneu Suprimeix. La icona + està dissenyada 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 a la secció Screen1 i seleccioneu LblAppName3. Canvieu la propietat Amplada per 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 IconSortUpDown2. 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 per Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. S'haurien de resoldre tots els errors de la pantalla.

  7. Seleccioneu Fitxer > Desa.

  8. Al quadre Nota de la versió, introduïu el text IU de Knowledge Base afegida i, a continuació, seleccioneu Desa.

  9. Torneu a la pantalla inicial i seleccioneu F5 per obtenir una visualització prèvia de 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 de disseny, 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 al seu compte de OneDrive amb el nom Appointment.xlsx. Recordant que prèviament va utilitzar el nom per defecte de la taula al llibre i que havia de canviar el títol a les diferents pantalles generades, canvia el nom de la taula del llibre per Cites.

Nota

Aquest llibre està disponible a la carpeta Actius del repositori Git d'aquesta guia.

La Maria vol crear la secció de cites de l'aplicació directament des del fitxer Excel. Decideix seguir un mètode similar al de la funcionalitat de gestió de l'inventari de camp, tret que en aquesta ocasió l'enginyer podrà crear i editar cites.

La Maria decideix crear les pantalles de cites inicialment com una aplicació independent. D'aquesta manera, pot utilitzar el 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. Quan la Maria crea i prova les pantalles, les copiarà a l'inventari de camp i a l'aplicació de la Knowledge Base.

Nota

Una alternativa és afegir la taula de cites al fitxer de l'Excel com un segon font de dades a l'aplicació existent i, a continuació, presentar les pantalles per a les cites. Va optar per generar les noves pantalles del llibre i copiar les pantalles; actualment està més familiaritzada amb els conceptes de copiar i enganxar que crear pantalles manualment, tot i que ella aprendrà a generar pantalles des de zero a partir del procés de creació d'aquesta aplicació.

Per crear l'aplicació de cites

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

    Menú Fitxer

  2. A la subfinestra esquerra, seleccioneu Crea. A la subfinestra principal, seleccioneu el quadre OneDrive for Business- disposició de 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 Excel, seleccioneu la taula Cites i, a continuació, seleccioneu Connecta.

    Seleccionar la taula de cites.

  5. Espereu mentre es genera l'aplicació. Quan aparegui l'aplicació nova, inclourà una pantalla Navega, una pantalla Detalls i una pantalla Edita, amb el tema per defecte.

    L'aplicació de cites generada

  6. A la subfinestra Visualització en arbre, a la secció Browsescreen1, a BrowseGallery1, seleccioneu Image1 i, a continuació, seleccioneu Suprimeix. La pantalla Navega només hauria de llistar cites, no cap imatge associada amb elles.

    Suprimir el control d'imatge.

    Observeu que la supressió del control Image1 provoca diversos errors a la pantalla perquè les amplades i la ubicació del control Títol1 controlen ambdós referència al control d'imatge. Solucionareu aquests problemes al pas següent.

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

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

    Canviar el control Body1 pel nom del client.

    Ara, els detalls del nom de la pantalla Navega mostren el nom del client.

  9. A la subfinestra Visualització d'arbre, seleccioneu BrowseGallery1. Utilitzeu la barra de fórmules, examineu l'expressió a la propietat Elements. 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 Amplada. per Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

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

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

  14. A la subfinestra Visualització en arbre, seleccioneu Browsescreen1 i, a continuació, seleccioneu el botó de tres punts (...). Al menú desplegable que apareix, seleccioneu Canvia el nom i canvieu el nom de la pantalla per BrowseAppointments.

    Canviar el nom de la pantalla de navegació.

  15. Mitjançant la mateixa tècnica, canvieu el nom del control BrowseControl1 per BrowseAppointmentsGallery.

Això completa la pantalla Navega.

Per crear la pantalla de detalls

Ara podeu canviar l'atenció a 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 alguna informació útil, com ara el camp Notes, no es visualitza.

    Disposició de la pantalla de detalls de les cites

  2. A la subfinestra Visualització d'arbre, seleccioneu DetailForm1. A la subfinestra dreta, a 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 Alçada per 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 per Parent.Width - Self.X - IconEdit1.Width.

  8. Mitjançant la tècnica descrita abans, canvieu el nom de DetailsScreen1 per AppointmentDetails.

Per editar la pantalla Edita

La pantalla final que voleu veure ara és la pantalla Edita.

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

  2. A la subfinestra Visualització en 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 de client i expandiu-lo per visualitzar-ne les propietats. Canvieu el tipus de control per Text de visualització. Aquest canvi fa que el control sigui només de lectura; és útil veure el nom del client a la pantalla Edita, però un enginyer no el podrà canviar.

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

  7. Seleccioneu el camp Número de contacte i expandiu-lo per visualitzar-ne les propietats. Canvieu el tipus de control per Text de visualització. Aquest camp també hauria de ser només de lectura.

  8. Seleccioneu el camp Notes, expandiu-lo i canvieu el tipus de control per Editar el text multilínia. 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 per 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 per ["Fixed", "Parts Ordered", "Unresolved"] (incloeu les cometes). L'enginyer de camp només pot definir l'estat com un d'aquests valors definits.

    Definir els valors d'estat permesos.

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

Ara podeu desar i provar l'aplicació.

  1. Seleccioneu Fitxer > Anomena i desa.

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

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

  4. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. A la pàgina Cites, seleccioneu la icona > del costat de qualsevol cita. Apareixerà 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ó

La Maria ha creat dues aplicacions, però vol combinar-les en una única aplicació. Per fer-ho, copia les pantalles de l'aplicació de cites a l'aplicació de gestió d'inventaris de camp i a l'aplicació knowledge Base, 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 Nova pantalla 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 pantalla nova s'anomena Screen2. A la subfinestra Visualització d'arbre, canvieu el nom per BrowseAppointments.

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

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

  7. A la barra d'eines esquerra del 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, a continuació, seleccioneu OneDrive for Business.

    Seleccionar la font de dades.

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

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

  10. A la barra d'eines, seleccioneu Tema (pot ser que hàgiu d'expandir la barra d'eines per visualitzar més elements) i, a continuació, seleccioneu el tema Bosc. Aquest és el mateix tema que utilitza l'aplicació VanArsdel.

  11. A la barra d'eines esquerra, seleccioneu la icona de visualització d'arbre, seleccioneu la pantalla BrowseAppointments 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 de visualització d'arbre i, a continuació, seleccioneu la pantalla BrowseAppointments.

  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 de visualització d'arbre (manteniu premut Maj mentre feu clic per seleccionar més d'un control alhora) i, a continuació, utilitzeu les tecles del ratolí o de fletxa per desplaçar-los 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 a la pantalla AppointmentDetails al porta-retalls (Ctrl+A seguit 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'ha 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 a la pantalla EditAppointment al porta-retalls.

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

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

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

  22. Canvieu el nom de la pantalla DetailsScreen1 per PartDetails.

  23. Canvieu el nom de la pantalla Screen1 per KnowledgeBase.

    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ó

La fase final és afegir una pantalla d'inici a l'aplicació. La pantalla inicial permetrà a l'enginyer desplaçar-se entre les diferents parts de l'aplicació (administració d'inventari, Knowledge Base 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 Screen2 per Home.

  3. A la barra d'eines, seleccioneu Insereix. A la llista de controls, expandiu Mitjans i, a continuació, seleccioneu Imatge. El control s'afegirà a la pantalla.

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

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

    Definir la mida i la posició de la imatge.

  5. Mentre encara es mostra 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 de la imatge està disponible a la carpeta Actius del repositori Git d'aquesta guia.

    Afegir un logotip a la imatge.

  6. Des de 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 superior. A la subfinestra dreta, a la pestanya Propietats, definiu la propietat Text en Cita següent. Definiu la mida del tipus de lletra en 30 i utilitzeu el selector de colors per definir el color verd per al tipus de lletra (per fer-lo coincidir amb el logotip).

    Definir el color del tipus de lletra.

  8. Seleccioneu el segon control d'etiqueta de text. Canvieu el valor de la propietat Text per First(Appointments).''CustomerName' (incloeu les cometes simples). 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 d'etiqueta de text i definiu la propietat Text en First(Appointments).'Appointment Date.

  10. Definiu la propietat Text del quart control d'etiqueta en First(Appointments).'Appointment Time. Definiu la propietat Cos de lletra en 30.

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

    • Mode de visualització: Visualització
    • X: 0
    • Y: 632
    • Width: 635
    • Height: 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 de manera uniforme per sota del separador. Definiu la propietat Text per al botó superior en Cites, la propietat Text del botó central en Peces i la propietat Text del botó inferior en KnowledgeBase.

    Botons de la pantalla d'inici

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

    Botó de cites

  14. Definiu l'acció OnSelect per al botó Peces en Navigate(BrowseParts, ScreenTransition.Fade).

  15. Definiu l'acció OnSelect per al botó Knowledgebase en Navigate(Knowledgebase, ScreenTransition.Fade).

A banda d'anar des de la pantalla d'inici a les altres pantalles del sistema, les pantalles Cites, Peces i KnowledgeBase necessiten una manera de permetre a l'usuari tornar a la pantalla d'inici. La Maria decideix afegir botons enrere a aquestes pantalles.

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

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

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

    Afegir una icona.

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

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

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

  7. A la capçalera de la pantalla, seleccioneu l'etiqueta Navega per les peces. Canvieu el valor de la propietat X per IconReturn1.Width + 20. L'etiqueta Navega per les peces ja no hauria d'estar parcialment enfosquida.

    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 KnowledgeBase.

  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 de l'acció OnStart per l'expressió Navigate(Home, ScreenTransition.Fade). Aquesta acció garanteix que es mostri la pantalla d'inici cada vegada que s'iniciï l'aplicació:

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

    Nota

    Si no especifiqueu quina pantalla es mostrarà quan s'inicia l'aplicació, s'utilitzarà la pantalla que apareix a la part superior de la subfinestra de visualització d'arbre. Per desplaçar una pantalla a l'inici de la llista, feu clic amb el botó dret a la pantalla de la subfinestra de visualització d'arbre i seleccioneu Desplaça amunt fins que es trobi a la part superior.

Finalment, podeu provar l'aplicació.

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

  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 mostrarà 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 KnowledgeBase. 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.