Crear unha aplicación de lenzo para xestionar proxectos

Nota

Este artigo é parte dunha serie de titoriais sobre o uso de Power Apps, Power Automate e Power BI con SharePoint Online. Asegúrese de ler o documento introdución da serie para coñecer a imaxe global, así como as descargas relacionadas.

Nesta tarefa, crearemos unha aplicación de lenzo dende cero. Esta aplicación permite que un usuario asigne un xestor a proxectos e actualice os detalles do proxecto. Verá algúns dos mesmos controis e fórmulas que veu na primeira aplicación, pero esta vez construirá máis da aplicación. O proceso é máis complexo, pero aprenderá máis, polo que pensamos que é unha compensación xusta.

Revisión rápida de Power Apps Studio

Power Apps Studio ten tres paneis e unha cinta que fan que a creación de aplicacións se pareza a construír unha plataforma de diapositivas en PowerPoint:

1. Barra de navegación esquerda, que mostra unha vista xerárquica de todas as pantallas e controis da aplicación, así como miniaturas das pantallas
2. Panel medio, que contén a pantalla de aplicación na que está traballando
3. Panel á dereita, onde establece opcións como maquetación e fontes de datos
4. Lista despregable de propiedades, onde selecciona as propiedades ás que se aplican as fórmulas
5. Barra de fórmulas, onde engade fórmulas (como en Excel) que definen o comportamento da aplicación
6. Cinta, onde engade controis e personaliza elementos de deseño

Paso 1: crear pantallas

Finalizada a revisión, imos comezar a crear unha aplicación.

Crear a aplicación

Crear un aplicación de lenzo en branco con Teléfono deseño e o nome da "aplicación de xestión de proxectos".

Engadir catro pantallas á aplicación

Neste paso, crearemos catro pantallas en branco para a aplicación. Usaremos esquemas de pantalla diferentes, segundo o propósito da pantalla. Engadiremos a estas pantallas en pasos posteriores.

Pantalla	Propósito
SelectTask	Abrir a pantalla; desprazarse ata outras pantallas
AssignManager	Asignar un xestor a un proxecto aprobado
ViewProjects	Ver unha lista de proxectos, con información resumida
UpdateDetails	Ver e actualizar os detalles dun proxecto

1. No separador Inicio, faga clic ou toque NewScreen e Pantalla desprazable.

   

2. Cambie o nome da pantalla a SelectTask.

   

3. Crear e cambiar o nome de pantallas adicionais:

   1. Faga clic ou toque NewScreen e Pantalla desprazable. Cambie o nome da pantalla a AssignManager.
   2. Faga clic ou toque NewScreen e Pantalla de lista. Cambie o nome da pantalla a ViewProjects.
   3. Faga clic ou toque NewScreen e Pantalla de formulario. Cambie o nome da pantalla a UpdateDetails.

4. Seleccione os puntos suspensivos ( ...) preto de Screen1, logo faga clic ou toque Eliminar.

   

A aplicación agora debería ter o aspecto da seguinte imaxe.

Paso 2: Conéctese a unha lista creada usando Listas de Microsoft

Neste paso, conectarémonos ao Detalles do proxecto lista. Só utilizamos unha lista nesta aplicación, pero pode conectarse facilmente a ambas se quere estender a aplicación.

1. Na barra de navegación esquerda, faga clic ou toque na pantalla SelectTask.

2. No panel da dereita, toque ou faga clic en Engadir orixe de datos.

   

3. Prema ou toque Nova conexión.

   

4. Prema ou toque SharePoint.

   

5. Seleccione Conectar directamente (servizos na nube) e logo faga clic ou toque Crear.

   

6. Introduza un URL de SharePoint e logo prema ou toque Ir.

   

7. Seleccione a lista Detalles do proxecto e logo faga clic ou toque en Conectar.

   

   O separador Fontes de datos do panel dereito agora mostra a conexión que creou.

   

Paso 3: Compilar a pantalla SelectTask

Neste paso, proporcionaremos un xeito de navegar ata as outras pantallas da aplicación: traballando con algúns dos controis, fórmulas e opcións de formato que Power Apps fornece.

Actualizar o título e inserir texto introdutorio

1. Na barra de navegación esquerda, seleccione a pantalla SelectTask.

2. No panel medio, seleccione o [Título] predeterminado e despois na barra de fórmulas, actualice a propiedade Texto a "Xestión de proxectos de Contoso".

   

3. No separador Inserir, faga clic ou toque Etiqueta, despois arrastre a etiqueta debaixo da faixa superior.

   

4. Na barra de fórmulas, estableza as seguintes propiedades para a etiqueta:

   • Propiedade Cor = DarkGray

   • Propiedade Tamaño = 18

   • Propiedade Texto = "Faga clic ou toque unha tarefa para continuar..."

     

Engadir dous botóns de navegación

1. No separador Inserir, faga clic ou toque Botón, despois arrastre o botón debaixo da etiqueta.

   

2. Na barra de fórmulas, estableza as seguintes propiedades para o botón:

   • Propiedade OnSelect = Navigate(AssignManager, Fade). Cando executa a aplicación e fai clic neste botón, navega ata a segunda pantalla da aplicación, cunha transición descolorida entre as pantallas.

   • Propiedade Texto = "Asignar xestor"

3. Redimensione o botón para acomodar o texto.

   

4. Inserir outro botón coas seguintes propiedades:

   • Propiedade OnSelect = Navigate(ViewProjects, Fade).

   • Propiedade Texto = "Actualizar detalles"

     

     Nota

     O botón está etiquetado Actualizar detalles, pero primeiro navegamos ata a pantalla ViewProjects para seleccionar un proxecto para actualizar.

Executar a aplicación

A aplicación aínda non fai moito, pero pode executala se quere:

1. Faga clic ou toque a pantalla SelectTask (a aplicación sempre comeza desde a pantalla seleccionada no modo Vista previa en Power Apps Studio).

2. Prema ou toque na esquina superior dereita para executar a aplicación.

3. Faga clic ou toque nun dos botóns para navegar a outra pantalla.

4. Prema ou toque na esquina superior dereita para pechar a aplicación.

Paso 4: Compilar a pantalla AssignManager

Neste paso, usaremos unha galería para mostrar todos os proxectos aprobados pero que aínda non teñan un xestor. Engadiremos outros controis para que poida asignar un xestor.

Nota

Máis tarde construiremos unha páxina na aplicación que lle permita editar todos os campos dun proxecto (incluído o campo de xestor), pero pensamos que sería xenial tamén crear unha pantalla coma esta.

1. Garde as modificacións que realizou ata agora.

2. Na barra de navegación esquerda, faga clic ou toque na pantalla AssignManager.

Actualizar o título e inserir texto introdutorio

1. Cambie [Título] por Asignar xestor.

2. Engada unha etiqueta coas seguintes propiedades:

   • Propiedade Cor = DarkGray

   • Propiedade Tamaño = 18

   • Propiedade Texto = "Seleccione un proxecto e logo asigne un xestor"

     

Engadir unha frecha cara atrás para volver á pantalla SelectTask

1. Prema ou toque a barra azul na parte superior da pantalla.

2. No separador Inserir, prema ou toque Iconos e, a seguir, prema ou toque Esqueda.

   

3. Mova a frecha cara ao lado esquerdo da barra azul e configure as seguintes propiedades:

   • Propiedade Cor = Branco

   • Propiedade Altura = 40

   • Propiedade OnSelect = Navigate(SelectTask, Fade)

   • Propiedade Ancho = 40

     

Engadir e modificar unha galería

1. No separador Inserir, prema ou toque Galería e, a seguir, seleccione Vertical.

   

2. Seleccione Título, subtítulo e corpo dende o menú Maquetación no panel dereito.

   

   Agora a galería ten o deseño adecuado, pero aínda ten o texto de mostra por defecto. A continuación resolveremos iso.

   

3. Defina as seguintes propiedades da galería:

   • Propiedade BorderThickness = 1

   • Propiedade BorderStyle = Punteado

   • Propiedade Elementos = Filter('Project Details', PMAssigned="Unassigned"). Na galería só se inclúen proxectos sen ningún responsable asignado.

     

4. No panel dereito, actualice os campos para que coincidan coa seguinte lista:

   • ApprovedDate

   • Estado

   • Título

     

5. Cambie de tamaño as etiquetas na galería segundo corresponda e elimine a frecha do primeiro elemento da galería (non necesitamos navegar por ningunha parte desta galería).

   

   A pantalla agora debería ter o aspecto da seguinte imaxe.

   

Cambiar a cor dun elemento se está seleccionado

1. Seleccione a galería e logo configure a propiedade TemplateFill en If (ThisItem.IsSelected=true, Orange, White).

2. Na galería seleccione un elemento. A pantalla agora debería ter o aspecto da seguinte imaxe.

   

Engadir unha etiqueta, entrada de texto e botón Aceptar para enviar tarefas do xestor

1. Faga clic ou toque fóra da galería na que estivo traballando.

2. No separador Inserir, faga clic ou toque Etiqueta. Arrastre a etiqueta debaixo da galería cara á esquerda. Defina as seguintes propiedades da etiqueta:

   • Propiedade Tamaño = 20

   • Propiedade Texto = "Xestor:"

   

3. No separador Inserir, prema ou toque Texto e, a seguir, seleccione Entrada de texto. Arrastre a entrada de texto debaixo da galería, no centro. Defina as seguintes propiedades da lista despregable:

   • Propiedade Por defecto = ""

   • Propiedade Altura = 60

   • Propiedade Tamaño = 20

   • Propiedade Ancho = 250

   

4. No separador Inserir, faga clic ou toque Botón. Arrastre o bitón debaixo da galería cara á dereita. Defina as seguintes propiedades do botón:

   • Propiedade Altura = 60

   • Propiedade OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Para obter máis información, consulte Análise a fondo das fórmulas.

   • Esta fórmula actualiza a lista Detalles do proxecto, establecendo un valor para o campo PMAssigned.

   • Propiedade Tamaño = 20

   • Propiedade Texto = "Aceptar"

   • Propiedade Ancho = 80

   

A pantalla completada debería ter o aspecto da seguinte imaxe.

Paso 5: Compilar a pantalla ViewProjects

Neste paso, cambiaremos as propiedades para a galería na pantalla ViewProjects. Esta galería amosa elementos da lista Detalles do proxecto. Selecciona un elemento nesta pantalla e logo edita os detalles na pantalla UpdateDetails.

1. Na barra de navegación esquerda, faga clic ou toque na pantalla ViewProjects.

2. Cambie [Título] por "Ver proxectos".

3. Na barra de navegación esquerda, faga clic ou toque BrowserGallery1 en ViewProjects.

4. Seleccione Título, subtítulo e corpo dende o menú Maquetación no panel dereito.

   

   Agora a galería ten o deseño adecuado, co texto de mostra por defecto.

   

5. Seleccione o botón de actualización e estableza a súa propiedade OnSelect en Refresh('Project Details').

6. Seleccione o botón de novo elemento e estableza a súa propiedade OnSelect en NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Engadir unha frecha cara atrás para volver á pantalla SelectTask

1. Na barra de navegación esquerda, faga clic ou toque na pantalla AssignManager.

2. Seleccione a frecha cara atrás que engadiu aquí e cópiea.

3. Pegue a frecha na pantalla ViewProjects e colóquea á esquerda do botón de actualización.

   

   Todas as súas propiedades inclúense, incluída a propiedade OnSelect de Navigate(SelectTask, Fade).

Cambia a orixe de datos para a galería BrowseGallery1

1. Seleccione a galería BrowseGallery1 e estableza a propiedade Elementos da galería en SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

   Isto define a orixe de datos da galería para a lista Detalles do proxecto e usa o campo Título para buscar e ordenar.

2. Seleccione a no primeiro elemento da galería e configure a propiedade OnSelect en Navigate(UpdateDetails, None).

   

3. No panel dereito, actualice os campos para que coincidan coa seguinte lista:

   • Estado

   • PMAssigned

   • Título

     

     A pantalla completada debería ter o aspecto da seguinte imaxe.

     

Paso 6: Compilar a pantalla UpdateDetails

Neste paso, conectaremos o formulario de edición na pantalla UpdateDetails coa nosa orixe de datos e imos facer algúns cambios de propiedade e campo. Nesta pantalla, edita os detalles para un proxecto que seleccionou na pantalla Ver proxectos.

1. Na barra de navegación esquerda, faga clic ou toque na pantalla UpdateDetails.

2. Cambie o [Título] a "Actualizar detalles".

3. Na barra de navegación esquerda, faga clic ou toque EditForm1 en UpdateDetails.

4. Defina as seguintes propiedades do formulario:

   • Propiedade DataSource = "Detalles do proxecto"

   • Propiedade Elemento = BrowseGallery1.Selected

5. Co formulario aínda seleccionado, faga clic no panel dereito ou toque a caixa de verificación para os seguintes campos, na orde mostrada:

   • Título

   • PMAssigned

   • Estado

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

6. Seleccione o botón de cancelar e estableza a súa propiedade OnSelect a ResetForm(EditForm1); Back().

7. Seleccione o botón Gardar e comprobe a fórmula OnSelect - SubmitForm (EditForm1). Debido a que estamos a usar o control de edición de formulario, podemos usar Submit() en vez de usar Patch() como fixemos anteriormente.

Agora a pantalla completada debería parecerse á seguinte imaxe (se os campos están en branco, asegúrese de seleccionar un elemento na pantalla Ver proxectos).

Paso 7: Executar a aplicación

Agora que a aplicación está completa, imos executala para ver como funciona. Engadiremos unha ligazón no sitio de SharePoint para a aplicación. Será capaz de executar a aplicación no navegador, pero é posible que teña que compartir a aplicación para que outras persoas poidan executala. Para obter máis información, consulte Compartir a aplicación.

Engadir unha ligazón á aplicación

1. No iniciador de aplicacións de Office 365, faga clic ou toque Power Apps.

   

2. En Power Apps, faga clic ou toque os tres puntos (...) para Aplicación de Xestión de proxectos, e logo Abrir.

   

3. Copie o enderezo (URL) da aplicación no explorador.

   

4. En SharePoint, prema ou toque EDITAR LIGAZÓNS.

   

5. Prema ou toque (+) ligazón.

   

6. Insira "aplicación de xestión de proxectos" e pégueo no enderezo da aplicación.

   

7. Prema ou toque Aceptar e logo Gardar.

   

Asignar un xestor a un proxecto

Agora que temos a aplicación no noso sitio de SharePoint, imos asumir o papel do aprobador do proxecto: imos buscar os proxectos que non teñan asignado un xestor e asignar un xestor a un dos proxectos. A continuación asumiremos o papel do xestor de proxectos e engadiremos información sobre un proxecto que se nos asignou.

1. Primeiro, vexamos a lista Detalles do proxecto en SharePoint. Dous proxectos teñen un valor de Non atribuído na columna PMAssigned. Ímolos ver na aplicación.

   

2. Faga clic ou toque a ligazón que creou para a aplicación.

3. Na primeira pantalla, faga clic ou toque Xestor de asignacións.

   

4. Na pantalla Xestor de asignacións, verá na lista os dous proxectos non asignados. Seleccione o proxecto Novo software de BI.

   

5. Na entrada de texto Xestor, introduza "Joni Sherman" e logo faga clic en Aceptar.

   O cambio aplícase á lista e a galería actualízase de xeito que só se mostra o proxecto restante non asignado.

   

6. Volve á lista e actualiza a páxina. Verá que a entrada do proxecto agora está actualizada co nome do xestor do proxecto.

   

Actualizar os detalles do proxecto

1. Fai clic ou toque a para volver á primeira pantalla e logo faga clic ou toque Actualizar detalles.

   

2. Na pantalla Ver proxectos, escriba "Novo" no cadro de busca.

   

3. Faga clic na para o elemento Novo software de BI.

   

4. Na pantalla Detalles de actualización, estableza os seguintes valores:

   • O campo ProjectedStartDate = "06/03/2017"

   • O campo ProjectedEndDate = "24/03/2017"

   • O campo ProjectedDays campo = "15"

   

5. Prema ou toque Para aplicar o cambio á lista.

6. Peche a aplicación e volva á lista. Vostede ve que a entrada do proxecto agora está actualizada cos cambios de data e día.

   

Análise profundo das fórmulas

Esta é a segunda sección opcional sobre fórmulas de Power Apps. Na primeira análise profunda, observamos unha das fórmulas que Power Apps xera para a galería de navegación nunha aplicación de tres pantallas. Nesta análise profunda, veremos unha fórmula que usamos para a pantalla AssignManager da nosa segunda aplicación. Aquí está a fórmula:

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Que fai esta fórmula? Cando seleccione un elemento na galería e faga clic no botón Aceptar, a fórmula actualiza a lista Detalles do proxecto e axusta a columna PMAssigned ao valor que especifique na entrada de texto. A fórmula usa funcións para facer o seu traballo:

• A función Patch modifica un ou máis rexistros dunha orixe de datos.

• A función LookUp atopa o primeiro rexistro nunha táboa que satisfai unha fórmula.

Cando reúne as funcións na fórmula, isto é o que sucede:

1. Cando fai clic no botón Aceptar, a función Patch é chamada para actualizar a lista Detalles do proxecto.

2. Dentro da función Patch, a función LookUp identifica que liña da lista Detalles do proxecto actualizar. Isto faino comparando o ID do elemento da galería seleccionado co ID da lista. Por exemplo, un ID de 12 significa que a entrada para Novo software de BI debería actualizarse.

3. Agora que a función Patch ten o ID correcto, actualiza o campo PMAssigned ao valor en TextInput1.Text.

Pasos seguintes

O seguinte paso desta serie de titoriais é crear un informe de Power BI para analizar proxectos.

Consulte tamén

• Escenarios de integración de SharePoint

Nota

Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)

Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).