Comentarios

Capítulo 3: Compilación dun prototipo sen apenas código

  • Artigo
  • 13 minutos de lectura

Nota

O Capítulo 2 fixo referencia á aplicación para móbil empregada polos técnicos e enxeñeiros de campo e á aplicación de escritorio utilizada polo persoal local. Os seguintes capítulos céntranse no deseño, implementación e lanzamento das aplicacións para móbiles construídas con Power Apps. As aplicacións de escritorio déixanse como un exercicio para o lector.

Kiana é escéptica coas solucións de baixo código e Power Apps, pero ela e María deciden crear unha aplicación xuntas para axudar aos técnicos de campo a comprobar o inventario (e pedir pezas, se é necesario), consultar a base de coñecemento e comprobar a súa próxima cita mentres están fóra da oficina durante as chamadas de servizo. Kiana e Maria planean usar esta experiencia para explorar como engadir controis e usar fórmulas en Power Apps.

Aínda que construír un prototipo inicial de baixo código normalmente é unha tarefa de programador cidadán, Kiana decide prestar atención ao proceso para asegurarse de que entende como se constrúe a aplicación. Necesita esta información para axudar a María a integrar as fontes de datos do mundo real, as API web e outros servizos necesarios na aplicación.

Tema 1: Xestión do inventario de campo

O obxectivo inicial de María é construír unha aplicación de lenzo que amose unha lista de pezas e permita ao usuario ver os detalles de calquera peza. Finalmente, o usuario tamén debería poder pedir unha peza; con todo, esta versión inicial da aplicación simplemente será un prototipo e aínda non estará conectada a un back-end. Despois de obter comentarios de Caleb, o técnico de campo principal, María traballará con Kiana na integración da aplicación de lenzo co sistema de inventario que se executa localmente.

María está moi familiarizada co sistema de xestión de inventario existente e comprende a información que contén. Comeza creando un libro de Excel que contén táboas que conteñen datos simulados con detalles dalgunhas pezas de mostra. Os campos da táboa son ID, Nome, ID de categoría, Prezo, Visión xeral, Núm. en stock e Imaxe (un URL que fai referencia a unha imaxe da peza). Pode usar este libro para construír e probar a aplicación de lenzo, para asegurarse de que amosa correctamente os datos requiridos. Ela garda este libro na conta de OneDrive co nome BoilerParts.xlsx.

Nota

Pode atopar unha copia deste libro no cartafol Activos no repositorio Git desta guía.

Folla de traballo de pezas da caldeira, que mostra unha lista de pezas coas columnas Id, Name, CategoryId, Price, Overview, NumberInStock e Image.

Se é un deseñador de bases de datos relacionais, notará que o libro de Excel presenta unha vista desnormalizada dos datos. Por exemplo, nunha base de datos relacional, o ID de categoría moi probablemente sería un identificador numérico que faría referencia a unha táboa separada que contería os detalles da categoría, incluído o nome.

Nota

Os URL da columna Imaxe actualmente só son marcadores de posición. Na aplicación completada, estes URL substituiranse polos enderezos dos ficheiros de imaxe reais.

Siga estes pasos para crear a aplicación con Power Apps.

  1. Inicie sesión en Power Apps.

  2. Na páxina Inicio, en Comezar a partir de datos, seleccione Excel Online.

    Páxina de inicio de Power Apps Studio.

  3. Na páxina Conexións, seleccione OneDrive for Business e, a continuación, seleccione Crear.

    Nova conexión de OneDrive.

  4. Na páxina OneDrive for Business, seleccione o ficheiro BoilerParts.xlsx.

    Conectarse ao libro de Excel.

  5. Seleccione a táboa no ficheiro de Excel (María creouna usando o nome predeterminado, Táboa1) e logo seleccione Conectar.

    Conectarse á táboa de Excel.

  6. Agarde mentres Power Apps xera a aplicación.

    Xerar a aplicación.

  7. Cando se xere a aplicación, verá a pantalla Explorar, que mostra os campos ID de categoría, ID e Imaxe de cada fila da táboa de pezas do libro.

    Partes mostradas na pantalla Examinar.

  8. Os campos que se amosan actualmente non son moi útiles para axudar a un enxeñeiro a seleccionar un produto. No panel que mostra a pantalla Explorar, seleccione a etiqueta Intercambiador de calor na primeira fila de datos. Na barra de fórmulas, seleccione a propiedade Texto da lista despregable. Cambie o valor desta propiedade a ThisItem.Name. O texto do primeiro campo de cada fila cambiará para amosar o nome da peza.

    Nota

    Na seguinte imaxe, a etiqueta Intercambiador de calor que se amosaba orixinalmente no formulario cambiou ao nome do produto, Quentador 3,5 W/S.

    Cambiar o texto do control dunha etiqueta.

  9. Repita o paso anterior para as etiquetas ID e Imaxe. Cambie a propiedade Texto do campo ID por ID de categoría e a propiedade Texto do campo Imaxe por Visión xeral. A pantalla Explorar agora debería parecerse á seguinte imaxe, que é máis probable que un enxeñeiro de campo considere útil para seleccionar pezas.

    Unha lista de elementos que mostran o nome dunha peza, a categoría na que se atopa e unha descrición xeral.

  10. A función de busca da pantalla Explorar por defecto utiliza os campos seleccionados inicialmente cando se xerou a pantalla; neste caso, ID de categoría, ID e Imaxe. Os resultados están ordenados por ID de categoría. Ten sentido cambiar isto aos campos Nome, ID de categoría e Visión xeral, cos resultados ordenados por Nome. Seleccione o control BrowseGallery1 no panel Vista en árbore. Na lista despregable á esquerda da barra de fórmulas, seleccione a propiedade Elementos. Arrastre o bordo inferior da barra de fórmulas cara abaixo para que a fórmula sexa completamente visible. A fórmula contén a seguinte expresión:

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

    Ordenar e buscar campos.

  11. Cambie a expresión Buscar para facer referencia aos campos Nome, ID de categoría e Visión xeral empregando a seguinte fórmula:

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

  12. O título da cabeceira do formulario non é útil e o tema predeterminado non coincide co aspecto corporativo de VanArsdel. Na pantalla Explorar, seleccione a etiqueta Táboa1 e na barra Fórmula, cambie a propieade Texto da etiqueta a "Buscar pezas" (inclúa as comiñas dobres no valor).

  13. Na barra de ferramentas, seleccione Tema (pode que teña que expandir a barra de ferramentas para amosar máis elementos) e logo seleccione o tema Bosque. As cores e o estilo para a pantalla Explorar cambiarán para que coincidan co tema.

    Seleccionar o tema.

Facer a pantalla Detalles máis útil

Creou a aplicación básica e modificou a pantalla Explorar para amosar campos que un enxeñeiro pode usar para identificar unha peza. A aplicación tamén contén unha pantalla de Detalles, que mostra toda a información dunha peza seleccionada. Os campos desta pantalla non se mostran actualmente nunha secuencia lóxica, polo que debería reorganizalos. Tamén pode eliminar o campo ID desta pantalla, porque esta información é irrelevante para un enxeñeiro.

  1. No panel de Vista en árbore, desprácese cara abaixo e seleccione DetailScreen1. Esta pantalla amosa detalles sobre a peza que un usuario selecciona na pantalla Explorar.

    Pantalla de detalles das pezas.

  2. Na cabeceira da pantalla Detalles no panel central, seleccione a etiqueta Táboa1. No panel dereito, no separador Propiedades, cambie a propiedade Texto a Detalles da peza.

    Nota

    En moitos casos, pode obter os mesmos resultados empregando a barra de fórmulas como o panel de Propiedades. Non obstante, algunhas propiedades só están dispoñibles a través do panel Propiedades.

    Cambiar o encabezado da pantalla Explorar pezas.

  3. No panel de Vista en árbore, en DetailScreen seleccione DetailForm1. No panel dereito, no separador Propiedades, seleccione Editar campos preto de Campos. No panel central, seleccione e arrastre os campos para que se mostren na seguinte orde, de arriba abaixo:

    • Nome
    • ID de categoría
    • Visión xeral
    • Prezo
    • Núm. en stock
    • Image
    • ID

    Organizar os campos na pantalla de detalles.

  4. Seleccione o campo ID, seleccione os puntos suspensivos que aparecen na parte dereita do campo e logo seleccione Quitar no menú despregable que aparece. Esta acción elimina o campo Identificación do formulario.

    Eliminar o campo ID do formulario.

  5. No panel de Vista en árbore, en DetailForm1 seleccione CategoryID_DataCard1. Este elemento é un control DataCard que amosa o nome dun campo (chamado a clave) e o seu valor.

    Control da tarxeta de datos de ID de categoría.

    No panel dereito, no separador Avanzado, seleccione Desbloquear para cambiar propiedades. Na sección Datos, cambie o campo Nome de visualización a "Categoría" (incluír as comiñas).

    Nota

    Como ocorre co separador Propiedades, moitas das propiedades do separador Avanzado tamén son accesibles a través da barra de fórmulas. Para definir estas propiedades, pode usar a barra de fórmulas se o prefire.

    Cambie o nome de visualización do campo de detalles de ID de categoría.

  6. Repita o paso anterior para cambiar a clave de NumberInStock_DataCard1 a "Número en stock" (incluír as comiñas).

  7. Debe axustar o formato do campo Prezo para amosar os datos como valor de moeda. No panel de Vista en árbore, en DetailForm1, en Price_DataCard1, seleccione DataCardValue7. Este é o campo que mostra o valor do campo Prezo. No panel DataCardValue7 á dereita, no separador Avanzado, cambie a propiedade Texto a Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Formatar prezo como moeda.

    A expresión Parent.Default refírese ao elemento de datos ao que o control principal (o DataCard) está vinculado; neste caso, a columna Prezo. A función Texto reformata este valor empregando o formato especificado como segundo argumento; neste exemplo, esta é a moeda local con dúas cifras decimais.

  8. A tarxeta de datos de imaxe debería amosar unha imaxe da peza en lugar do URL do ficheiro de imaxe. No panel Vista en árbore, en DetailForm1, en Image_DataCard1, seleccione DataCardValue3 e, a continuación, seleccione Eliminar para eliminar este control.

  9. Seleccione Image_DataCard1. No panel esquerdo, seleccione + Inserir. No panel Inserir, expanda Elementos multimedia e, a continuación, seleccione Imaxe.

    Substituír un URL de imaxe por unha imaxe.

  10. Volva ao panel Vista en árbore e verifique que o control de texto Imaxe1 se engadiu ao control Image_DataCard1.

    Verificar que se engadiu o control de imaxe.

  11. No panel Visualización en árbore, seleccione Image_DataCard1. No panel dereito, no separador Avanzado, cambie a Altura a 500, para permitir o espazo suficiente para que se amose unha imaxe.

    Establecer a altura da tarxeta de datos de imaxe.

  12. No panel Visualización en árbore, seleccione Imaxe1. Defina as seguintes propiedades:

    • Imaxe: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Largura: 550
    • Altura: 550

    Nota

    A imaxe mostrada está actualmente baleira porque o URL do libro de Excel é só un marcador de posición. Tratará este problema e buscará un URL real cando vincule a aplicación a unha API web nun capítulo posterior.

A aplicación tamén contén unha pantalla Editar, que permite a un usuario cambiar a información dunha peza. Un enxeñeiro non debería ser capaz de cambiar os detalles dunha peza, crear pezas novas ou eliminar pezas do catálogo.

  1. No panel Visualización en árbore, seleccione EditScreen1. Seleccione o botón de puntos suspensivos e logo seleccione Eliminar para eliminar esta pantalla.

    Eliminar a pantalla Editar.

  2. No panel Visualización en árbore, seleccione DetailsScreen1. Fíxese que Power Apps Studio amosa unha mensaxe de erro para esta pantalla. Este erro prodúcese porque DetailsScreen1 contén expresións que fan referencia á pantalla EditScreen1 pantalla, que xa non existe.

  3. Na cabeceira de DetailsScreen1, seleccione a icona de lapis (IconEdit1). A propiedade OnSelect deste control contén a expresión EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Cando a icona Editar está seleccionada, esta expresión execútase e tenta moverse á pantalla EditScreen1.

    Editar propiedade OnSelect.

  4. No panel de Vista en árbore, seleccione IconEdit1 e, a continuación, seleccione Eliminar. Esta icona xa non é necesaria.

  5. Seleccione IconDelete1 e, a continuación, seleccione Eliminar. Esta icona úsase para eliminar a peza actual e tampouco é necesaria.

    Eliminar as iconas de eliminación e edición.

  6. Teña en conta que o texto Detalles da peza desapareceu da cabeceira da pantalla e no seu lugar Power Apps Studio amosa unha mensaxe de erro. Isto ocorreu porque se calcula o ancho do control de etiqueta que amosa o texto. No panel Visualización en árbore, seleccione LblAppName2. Examine a propiedade Ancho. O valor desta propiedade é o resultado da expresión Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    Control LblAppName2 que mostra un erro de ancho.

  7. Cambie a expresión da propiedade Ancho a Parent.Width - Self.X. O erro debería desaparecer e o texto Detalles da peza debería reaparecer na cabeceira da pantalla.

  8. No panel Visualización en árbore, seleccione BrowseScreen1. Esta pantalla tamén amosará unha mensaxe de erro. A icona + na barra de ferramentas (IconNewItem1) permite ao usuario engadir unha nova peza. A propiedade OnSelect desta icona fai referencia á pantalla EditScreen1.

    Icona de elemento novo que mostra un erro.

  9. Seleccione IconNewItem1 e, a continuación, seleccione Eliminar. Como antes, o texto da cabeceira da pantalla desaparece e amósase unha mensaxe de erro e polo mesmo motivo.

  10. No panel de Vista en árbore, en BrowseScreen1 seleccione LblAppName1. Modifique a expresión para a propiedade Ancho eliminando a referencia a IconNewItem1.Width. A nova expresión debería ser Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Cambiar o ancho da etiqueta.

  11. Aínda hai un problema coa cabeceira. Aínda que o texto Buscar pezas reapareceu, estase a amosar un erro e as iconas de actualización e clasificación están no lugar equivocado. No panel Visualización en árbore, seleccione IconSortUpDown1. Busque a propiedade X deste control. Esta propiedade determina a posición horizontal da icona na cabeceira. Actualmente calcúlase en función do ancho do control IconNewItem1.

    Erro de ordenación das iconas.

  12. Cambie a expresión da propiedade X a Parent.Width - Self.Width.

  13. No panel Visualización en árbore, seleccione IconRefresh1. Cambie a expresión da propiedade X a Parent.Width - IconSortUpDown1.Width - Self.Width. Os erros deberían desaparecer.

Gardar e probar a aplicación

Agora pode gardar e probar a aplicación.

  1. Seleccione Ficheiro > Gardar como.

  2. En Gardar como, seleccione A nube, introduza o nome VanArsdelApp e, a continuación, seleccione Gardar.

    Gardar a aplicación

  3. Seleccione a frecha cara atrás para volver pantalla de Inicio.

    Volver ao á pantalla de inicio.

  4. Seleccione F5 para previsualizar a aplicación. Na páxina Buscar pezas, seleccione o paréntese de ángulo dereito (>) á dereita de calquera peza. Aparece a pantalla Detalles da peza.

    Execución inicial da aplicación.

  5. Seleccione o paréntese de ángulo esquerdo (<) na cabeceira da pantalla Detalles para volver á pantalla Explorar.

  6. Na pantalla Buscar pezas, introduza texto na caixa Buscar. Ao escribir, os elementos filtraranse para mostrar só aqueles que teñan texto coincidente nos campos Nome, ID de categoría ou Visión xeral.

    Buscar na pantalla Examinar pezas.

  7. Peche a xanela de vista previa e volva a Power Apps Studio.

Tema 2: Base de coñecemento de campo

Para acceder á base de coñecemento, Maria e Caleb (o técnico) prevén unha interface sinxela onde o usuario introduce un termo de busca e a aplicación mostra todos os artigos da base de coñecemento que mencionan o termo. María sabe que este proceso vai implicar Azure Cognitive Search, pero non precisa— ou mesmo querer— para entender como funciona. Polo tanto, María decide proporcionar a interface de usuario básica. Máis tarde traballará con Kiana para engadir a funcionalidade real.

María decide crear unha nova pantalla baseada no modelo de Lista dispoñible en Power Apps Studio.

  1. Na barra de ferramentas da pantalla de Inicio de Power Apps Studio, seleccione Nova pantalla e, a continuación, seleccione Lista.

    O modelo de lista.

  2. Na cabeceira da pantalla, seleccione a etiqueta que amosa o texto [Título]. Cambie o a propiedade Texto a "Consulta" (incluír as comiñas).

    Modificar o texto da cabeceira da pantalla de consulta.

  3. Na cabeceira da pantalla, seleccione o signo máis (+) e logo seleccione Eliminar. A icona + está destinada a permitir ao usuario engadir máis elementos á lista. A base de coñecemento é só para consulta, polo que non é necesaria esta función.

    Eliminar a icona +.

    Teña en conta que a eliminación desta icona provoca un erro na cabeceira debido á forma en que se calcula a localización e os anchos dos outros elementos. Xa o viu anteriormente coa pantalla de xestión de inventario e a solución é a mesma, como se describe nos seguintes pasos.

  4. No panel de Vista en árbore, desprácese cara abaixo ata a sección Pantalla1 e seleccione LblAppName3. Cambie a propiedade Ancho á fórmula Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Modificar o ancho da cabeceira da pantalla de consulta.

  5. No panel Visualización en árbore, seleccione IconSortUpDown2. Modifique a propiedade X á fórmula Parent.Width - IconSortUpDown2.Width.

  6. No panel Visualización en árbore, seleccione IconRefresh2. Modifique a propiedade X á fórmula Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Isto debería resolver todos os erros da pantalla.

  7. Seleccione Ficheiro > Gardar.

  8. Na caixa Nota de versión, introduza o texto Engadiuse a IU da base de coñecemento e, a continuación, seleccione Gardar.

  9. Volva á pantalla de Inicio e seleccione F5 para previsualizar a nova pantalla. Debería parecerse á seguinte imaxe.

    Pantalla de consulta en execución.

    Teña en conta que se selecciona a icona > xunto a calquera das entradas falsas, a funcionalidade de detalles non funciona actualmente. Tratarás isto máis tarde cando te integres Azure Cognitive Search na aplicación.

  10. Peche a xanela de vista previa e volva a Power Apps Studio.

Tema 3: Programación de campos e notas

María traballa con Malik, o recepcionista da oficina, para deseñar a interface para a parte de programación e citas de campo da aplicación. Malik ofrece un libro de Excel con algúns datos de mostra que María pode usar para construír a pantalla de citas. O libro contén unha táboa coas seguintes columnas:

  • ID (o ID do compromiso)
  • ID de cliente (un identificador único para o cliente)
  • Nome do cliente
  • Enderezo do cliente
  • Detalles do problema (unha descrición de texto do problema que experimenta o cliente)
  • Número de contacto
  • Estado
  • Data do compromiso
  • Hora do compromiso
  • Notas (unha descrición de texto con calquera nota engadida polo enxeñeiro)
  • Imaxe (unha fotografía do aparello, xa sexa en estado de traballo despois da reparación ou como imaxe complementaria para as notas do enxeñeiro)

Caderno de traballo de citas.

Nota

Do mesmo xeito que cos datos de xestión do inventario de campo, este libro presenta unha visión desnormalizada dos datos. No sistema de citas existente, estes datos almacénanse en táboas separadas que conteñen datos de citas e datos de clientes.

Maria garda este ficheiro na conta de OneDrive co nome Citas.xlsx. Lembrando que antes usara o nome predeterminado para a táboa no libro e que tiña que cambiar o título nas distintas pantallas que se xeraron, renomea a táboa do libro como Citas.

Nota

Este libro está dispoñible no cartafol Activos do repositorio Git desta guía.

María quere construír a sección de citas da aplicación directamente desde o ficheiro Excel. Ela decide seguir un enfoque similar ao da funcionalidade de xestión de inventario de campo, agás que nesta ocasión o enxeñeiro poderá crear e editar citas.

María decide crear as pantallas de citas inicialmente como unha aplicación separada. Deste xeito, pode usar Power Apps Studio para xerar gran parte da aplicación automaticamente. Power Apps Studio actualmente non lle permite xerar pantallas adicionais a partir dunha conexión de datos nunha aplicación existente. Cando María cree e probe as pantallas, copiaráas no inventario de campo e na aplicación da base de coñecemento.

Nota

Un enfoque alternativo é engadir a táboa Citas no ficheiro Excel como segunda orixe de datos á aplicación existente e, a continuación, elaborar a man as pantallas das citas. María optou por xerar as novas pantallas a partir do libro e copialas; actualmente está máis familiarizada cos conceptos de copiar e pegar que construír pantallas manualmente, aínda que progresivamente aprenderá a crear pantallas desde cero a medida que avanza o proceso de creación desta aplicación.

Para crear a aplicación de citas

  1. Na barra de menú de Power Apps Studio, seleccione Ficheiro.

    Menú Ficheiro.

  2. No panel esquerdo, seleccione Novo. No panel principal, seleccione a caixa OneDrive for Business: deseño de teléfono.

    Cree unha nova aplicación.

  3. No panel Conexións, seleccione Citas.xlsx.

    Nova aplicación do libro de citas.

  4. No ficheiro Excel, seleccione a táboa Citas e logo seleccione Conectar.

    Seleccionar a táboa de citas.

  5. Agarde mentres se xera a aplicación. Cando apareza a nova aplicación, conterá unha pantalla Explorar, unha pantalla Detalles e unha pantalla Editar, usando o tema predeterminado.

    A aplicación de citas xerada.

  6. No panel Vista en árbore, na sección BrowseScreen1 en BrowseGallery1, seleccione Imaxe1 e, a continuación, seleccione Eliminar. A pantalla Explorar só debería enumerar as citas, non as imaxes asociadas.

    Eliminar o control de imaxe.

    Teña en conta que eliminar o control Imaxe1 causa varios erros na pantalla porque os anchos e a localización do control Título1 fan referencia ao control Imaxe. Resolverá estes problemas no seguinte paso.

  7. No panel de Vista en árbore, en BrowseGallery1 seleccione Title1. Cambie o valor na propiedade X a 16. Cambie a fórmula na propiedade Ancho a Parent.TemplateWidth - 104. Isto debería resolver os erros da pantalla.

  8. No panel de Vista en árbore, en BrowseGallery1 seleccione Body1. Este control mostra actualmente os datos do teléfono de contacto para o cliente. Cambie o valor na propiedade Texto a ThisItem.'Nome do cliente' (inclúa as comiñas simples).

    Cambiar o control Body1 polo nome do cliente.

    Os detalles no nome da pantalla Explorar agora mostran o nome do cliente.

  9. No panel Visualización en árbore, seleccione BrowseGallery1. Usando a barra de fórmulas, examine a expresión na propiedade Elementos. O control busca citas empregando a data, hora e número de contacto da cita. Cambie esta fórmula para buscar o nome do cliente en lugar do número de contacto:

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

    Teña en conta que as citas están ordenadas por data e hora (os dous primeiros campos amosados).

  10. No panel Visualización en árbore, elimine IconNewItem1. Só o persoal de local pode reservar novas citas para enxeñeiros e técnicos. Teña en conta que esta acción produce erros no formulario porque o ancho e a posición doutros controis na cabeceira fan referencia á icona que acaba de eliminar.

  11. No panel Visualización en árbore, seleccione LblAppName1. Cambie a fórmula para a propiedade Ancho. a Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. No panel Visualización en árbore, seleccione IconRefresh1. Cambie o valor da propiedade X a Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. No panel Visualización en árbore, seleccione iconSortUpDown1. Cambie o valor da propiedade X a Parent.Width - Self.Width.

  14. No panel Vista en árbore, seleccione BrowseScreen1 e, a continuación, seleccione o botón de puntos suspensivos (...). No menú despregable que aparece, seleccione Cambiar o nome e cambie o nome da pantalla a BrowseAppointments.

    Cambiar o nome da pantalla de exploración.

  15. Usando a mesma técnica, cambie o nome do control BrowseGallery1 a BrowseAppointmentsGallery.

Isto completa a pantalla Explorar.

Para crear a pantalla de detalles

Agora pode dirixir a súa atención á pantalla Detalles.

  1. No panel de Vista en árbore, desprácese á sección DetailsScreen1. Pode ver que os detalles se presentan por orde alfabética por nomes de campo e algúns anacos de información útiles, como o campo Notas, non se amosan en absoluto.

    Deseño da pantalla de detalles da cita.

  2. No panel Visualización en árbore, seleccione DetailForm1. No panel dereito, no separador Propiedades, seleccione Editar campos preto de Campos. No panel central, seleccione cada un dos seguintes campos e logo seleccione Eliminar:

    • Data do compromiso
    • Hora do compromiso
    • ID de cliente
    • ID

  3. Seleccione + Engadir campo e engada os seguintes campos:

    • Notas
    • Detalles do problema
    • Estado

    Engadir campos á pantalla de detalles.

  4. Arrastre cada campo para que se mostren na seguinte orde, de arriba abaixo:

    • Nome do cliente
    • Enderezo do cliente
    • Número de contacto
    • Detalles do problema
    • Estado
    • Notas
    • Image

  5. No panel Visualización en árbore, seleccione Notes_DataCard1. Cambie a propiedade Altura a 320.

    Modificar o tamaño do campo de notas.

  6. No panel Visualización en árbore, elimine IconDelete1. Os enxeñeiros non deberían poder eliminar citas do sistema.

  7. Seleccione LblAppName2 e cambie a propiedade Ancho a Parent.Width - Self.X - IconEdit1.Width.

  8. Usando a técnica descrita anteriormente, cambie o nome de DetailsScreen1 a AppointmentDetails.

Para editar a pantalla Editar

A pantalla final que imos ver, por agora, é a pantalla Editar.

  1. No panel Visualización en árbore, seleccione EditScreen1.

  2. No panel Vista en árbore, na sección EditScreen1, seleccione EditForm1. No panel dereito, no separador Propiedades, seleccione Editar campos preto de Campos.

  3. Elimine os seguintes campos:

    • Enderezo do cliente
    • ID
    • ID de cliente
    • Data do compromiso
    • Hora do compromiso

  4. Engada os seguintes campos:

    • Detalles do problema
    • Estado
    • Notas

  5. Arrastre cada campo para que se mostren na seguinte orde, de arriba abaixo:

    • Nome do contacto
    • Número de cliente
    • Detalles do problema
    • Estado
    • Notas
    • Image

  6. Seleccione o campo Nome do cliente e amplíeo para ver as súas propiedades. Cambie o Tipo de control a Ver texto. Este cambio fai que o control sexa de só lectura; é útil ver o nome do cliente na pantalla Editar, pero un enxeñeiro non debería poder cambialo.

    Facer que o nome do cliente só sexa de lectura.

  7. Seleccione o campo Número de contacto e amplíeo para ver as súas propiedades. Cambie o Tipo de control a Ver texto. Este campo tamén debe ser de só lectura.

  8. Seleccione o campo Notas, amplíeo e cambie o Tipo de control a Editar texto de varias liñas. Esta configuración permite ao enxeñeiro engadir notas detalladas que poden abarcar varias liñas.

  9. Seleccione o campo Estado, amplíeo e cambie o Tipo de control a Valores permitidos.

  10. No panel Visualización en árbore, seleccione Status_DataCard5. No panel dereito, no separador Propiedades, seleccione Desbloquear para cambiar propiedades. Desprácese ata a propiedade Valores permitidos e cambie o texto a ["Corrixido", "Pezas pedidas", "Non resolto"] (incluír os corchetes). O enxeñeiro de campo só pode configurar o Estado a un destes valores definidos.

    Establecer os valores de estado permitidos.

  11. No panel Vista en árbore, renomee EditScreen1 como EditAppointment.

Agora pode gardar e probar a aplicación.

  1. Seleccione Ficheiro > Gardar como.

  2. En Gardar como, seleccione A nube, introduza o nome VanArsdelAppointments e, a continuación, seleccione Gardar.

  3. Seleccione a frecha cara atrás na barra de ferramentas de Power Apps Studio para volver pantalla de Inicio.

  4. Seleccione F5 para previsualizar a aplicación. Na páxina Citas, seleccione a icona > xunto a calquera cita. A pantalla Detalles debería aparecer para a cita. Na cabeceira, seleccione Editar para actualizar a cita. Verifique o seguinte:

    • Os campos de nome de cliente e número de contacto son de só lectura.
    • O campo de estado está limitado aos valores da lista despregable.
    • Pode introducir notas que abarcan varias liñas.
    • Pode cargar un ficheiro de imaxe no campo da imaxe.

    Nota

    Unha mellora que engadirá máis tarde permitiralle sacar unha foto co teléfono desde a aplicación e engadila ao campo de imaxe.

    A aplicación de citas en execución.

Combinación das pantallas nunha única aplicación

María creou dúas aplicacións, pero quere combinalas nunha única aplicación. Para iso, copia as pantallas da aplicación de citas na aplicación de xestión de inventario de campo e base de coñecemento, do seguinte xeito:

  1. Abra unha nova ventá do navegador e inicie sesión en Power Apps Studio cos detalles da súa conta.

  2. No panel esquerdo, seleccione Aplicacións, seleccione VanArdselApp e, a continuación, seleccione Editar.

    Abrir a aplicación VanArsdel.

  3. Na barra de ferramentas, seleccione Nova pantalla e, a continuación, seleccione En branco. Esta acción engadirá unha nova pantalla á aplicación na que copiará os controis da pantalla Explorar para a aplicación VanArsdelAppointments.

    Engadir unha pantalla en branco.

  4. A nova pantalla denominarase Pantalla2. No panel Vista en árbore, renoméea como BrowseAppointments.

  5. Repita o paso anterior dúas veces máis, para engadir dúas pantallas en branco máis (Pantalla3 e Pantalla4).

  6. Cambie o nome da Pantalla 3 a AppointmentDetails, e renomee a Pantalla4 como EditAppointment.

  7. Na barra de ferramentas esquerda de Power Apps Studio, seleccione a icona Datos. No panel Datos, seleccione Engadir datos. Na lista despregable Seleccionar unha orixe de datos, no campo Buscar, insira OneDrive e, a continuación, seleccione OneDrive for Business.

    Seleccionar a orixe de datos.

  8. Seleccione o ficheiro de Excel Citas.xlsx, seleccione a táboa Citas e logo seleccione Conectar.

  9. Cambie á xanela do navegador que amosa a aplicación VanArsdelAppointments.

  10. Na barra de ferramentas, seleccione Tema (pode que teña que expandir a barra de ferramentas para amosar máis elementos) e logo seleccione o tema Bosque. Este é o mesmo tema empregado pola aplicación VanArsdel.

  11. Na barra de ferramentas esquerda, seleccione a icona Vista en árbore, seleccione a pantalla BrowseAppointments e logo seleccione CTRL+A. Esta acción selecciona todos os controis da pantalla.

  12. Seleccione CTRL+C para copiar estes controis no portapapeis.

  13. Volva á xanela do navegador que amosa a aplicación VanArsdelApp.

  14. Na barra de ferramentas esquerda, seleccione a icona Vista en árbore e logo seleccione a pantalla BrowseAppointments.

  15. Seleccione CTRL+V para pegar os controis na pantalla.

    Nota

    Ás veces, o encabezado da pantalla aparece demasiado abaixo. Para solucionar este problema, seleccione os controis IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 e RectQuickActionBar1_1 no panel Vista en árbore (manteña premido MAIÚS mentres fai clic para seleccionar máis dun control á vez) e despois use as teclas do rato ou as frechas para movelos cara arriba no panel de vista de deseño.

  16. Volva á xanela do navegador que amosa a aplicación VanArsdelAppointments e seleccione e copie os controis da pantalla AppointmentDetails no portapapeis (CTRL+A seguido por CTRL+C).

  17. Volva á xanela do navegador que amosa a aplicación VanArsdelApp, seleccione a pantalla AppointmentDetails e logo pegue os controis (CTRL+V). Axuste a posición dos controis na cabeceira da pantalla, se é necesario.

    Nota

    Verá un erro informado na cabeceira da pantalla AppointmentDetails. Este erro prodúcese porque a pantalla fai referencia aos controis da pantalla EditAppointment, que aínda non se copiou. Os seguintes pasos deberían resolver este erro.

  18. Volva á xanela do navegador que amosa a aplicación VanArsdelAppointments e seleccione e copie os controis da pantalla EditAppointment no portapapeis.

  19. Volva á xanela do navegador que amosa a aplicación VanArsdelApp, seleccione a pantalla EditAppointment e logo pegue os controis. De novo, mova os controis na cabeceira da pantalla se é necesario.

  20. No panel Vista en árbore, seleccione a pantalla AppointmentDetails e comprobe que agora desapareceu o erro indicado anteriormente.

  21. No panel Visualización en árbore, seleccione a pantalla BrowseScreen1. Cambie o nome desta pantalla a BrowseParts.

  22. Cambie o nome da pantalla DetailsScreen1 a PartDetails.

  23. Cambie o nome da pantalla Pantalla1 a Base de coñecemento.

    Nota

    É unha boa práctica cambiar o nome das pantallas para reflectir a súa función en lugar de usar os nomes predeterminados xerados por Power Apps Studio, especialmente se unha aplicación contén varias pantallas. Isto pode axudar a evitar confusións máis tarde se a aplicación é modificada por outro programador.

Engadir unha pantalla de inicio á aplicación

A fase final é engadir unha pantalla de Inicio á aplicación. A pantalla de Inicio permitirá ao enxeñeiro moverse entre as distintas partes da aplicación (xestión de inventario, base de coñecemento e citas).

  1. Na barra de ferramentas da aplicación VanArsdelApp, seleccione Nova pantalla e, a continuación, seleccione En branco.

  2. No panel Vista en árbore, renomee a Pantalla2 a Inicio.

  3. Na barra de ferramentas, seleccione Inserir. Expanda, na lista de controis, Elementos multimedia e, a continuación, seleccione Imaxe. O control engadirase á pantalla.

    Engadir un control de imaxe á pantalla de inicio.

  4. Configure a posición X do control en 16 e a posición Y en 22. Cambie o Ancho a 605 e a Altura a 127. Cambie a Posición da imaxe a Encher.

    Establecer o tamaño e a posición da imaxe.

  5. Aínda estando no separador Propiedades, na lista despregable Imaxe, seleccione + Engadir un ficheiro de imaxe e logo cargue a imaxe VanArsdelLogo.png no control.

    Nota

    O ficheiro de imaxe está dispoñible no cartafol Activos do repositorio Git desta guía.

    Engadir un logotipo á imaxe.

  6. Da lista de controis, engada catro controis de Etiqueta de texto ao formulario e colóqueos para que se apilen baixo o logotipo de VanArsdel.

    Engadir controis de etiquetas de texto.

  7. Seleccione o control principal de Etiqueta de texto. No panel dereito, no separador Propiedades, defina a propiedade Texto en Seguinte cita. Configure o Tamaño de letra en 30 e use o selector de cores para establecer a cor da letra en verde (para que coincida co logotipo).

    Establecer a cor do tipo de letra.

  8. Seleccionar o segundo control de Etiqueta de texto. Cambie o valor da propiedade Texto a First(Appointments).'Nome do cliente' (inclúa as comiñas simples). Esta fórmula recupera o nome do cliente da primeira fila da táboa de citas.

    Mostrar o nome do cliente.

    Nota

    Actualmente, esta fórmula só actúa como marcador de posición. Modificará a etiqueta máis tarde para recuperar a próxima cita para o enxeñeiro, en lugar de mostrar sempre a primeira.

  9. Seleccione o terceiro Etiqueta de texto controlar e configurar o Texto propiedade a Primeiro (Citas).' Data da cita'.

  10. Establece o Texto propiedade do cuarto control de etiquetas para Primeiro (Citas).' Hora da cita'. Configure a propiedade Tamaño de letra en 30.

  11. Desde a lista de controis, engada un control Rectángulo. Estableza as seguintes propiedades para este control:

    • Modo de visualización: Ver
    • X: 0
    • Y: 632
    • Largura: 635
    • Altura: 1

    Este control actúa como un separador visual pola metade da pantalla.

  12. Engada tres controis de Botón á pantalla, dispostos verticalmente e espaciados uniformemente debaixo do separador. Configure a propiedade de Texto do botón superior en Citas, a propiedade de Texto do botón central en Pezas e a propiedade de Texto do botón inferior en Base de coñecemento.

    Botóns da pantalla de inicio.

  13. Seleccione o botón Citas. Cambie a expresión da acción OnSelect á fórmula Navigate(BrowseAppointments, ScreenTransition.Fade). Esta acción cambia a pantalla á pantalla de citas cando o usuario selecciona o botón.

    Botón de citas.

  14. Configure a acción OnSelect para o botón Pezas en Navigate(BrowseParts, ScreenTransition.Fade).

  15. Configure a acción OnSelect para o botón Knowledgebase en Navigate(Knowledgebase, ScreenTransition.Fade).

Ademais de navegar dende a pantalla de Inicio ás outras pantallas do sistema, as pantallas Citas, Pezas e Base de coñecemento precisan un xeito de permitir ao usuario volver á pantalla de Inicio. María decide engadir botóns de volta a estas pantallas.

  1. No panel Visualización en árbore, seleccione a pantalla BrowseParts.

  2. Seleccione o control RectQuickActionBar1 para darlle o foco.

  3. Seleccione o menú Inserir e seleccione Engadir icona. Mova a icona á esquerda do control RectQuickActionBar1. Teña en conta que a icona ocultará parte da etiqueta Buscar pezas.

    Engadir unha icona.

  4. No menú Vista en árbore, cambie o nome do novo control de icona a IconReturn1.

  5. Cambie a fórmula da acción OnSelect á fórmula á expresión Back(ScreenTransition.Fade). A función Back leva o usuario á pantalla anterior que visitou.

  6. No separador Propiedades, cambie a propiedade Icona a < Esquerda.

  7. Na cabeceira da pantalla, seleccione a etiqueta Buscar pezas. Cambie a propiedade X a IconReturn1.Width + 20. A etiqueta Buscar pezas xa non debería estar parcialmente oculta.

    Mover a etiqueta Examinar pezas.

  8. Despois do proceso descrito nos pasos 16 a 22, engada unha icona chamada IconReturn2 ao control RectQuickActionBar3 na pantalla Base de coñecemento.

  9. Do mesmo xeito, engada unha icona chamada IconReturn3 ao control RectQuickActionBar1_1 na pantalla BrowseAppointments.

  10. No panel Visualización en árbore, seleccione o obxecto Aplicación. Cambie a propiedade de acción OnStart á expresión Navigate(Home, ScreenTransition.Fade). Esta acción garante que a pantalla Inicio móstrase cando se inicia a aplicación:

    Establecer a fórmula de inicio da aplicación.

    Nota

    Se non especifica que pantalla se mostrará cando se inicie a aplicación, a pantalla que aparece na parte superior do panel Vista en árbore usarase. Para mover unha pantalla ao comezo da lista, faga clic co botón dereito do rato no panel Vista en árbore e seleccione Mover arriba ata que estea na parte superior.

Finalmente, pode probar a aplicación.

  1. Seleccione Ficheiro > Gardar. Na caixa Notas de versión, insira Versión completa con pantalla de inicio e, a continuación, seleccione Gardar.

  2. Seleccione a frecha cara atrás para volver á pantalla de Inicio e logo seleccione F5 para executar a aplicación.

  3. Verifique que a pantalla de Inicio da aplicación aparece.

  4. Seleccione Citas. Debería aparecer a pantalla de citas.

  5. Seleccione a frecha cara atrás para volver pantalla de Inicio.

  6. Seleccione Pezas. Debería aparecer o explorador de pezas.

  7. Seleccione a frecha cara atrás para volver pantalla de Inicio.

  8. Seleccione Base de coñecemento. Debería aparecer a pantalla de consulta da base de coñecemento.

  9. Seleccione a frecha cara atrás para volver pantalla de Inicio.

  10. Peche a xanela de vista previa e volva a Power Apps Studio.

A aplicación prototipo xa está completa.

Anterior Seguinte