Crear una aplicació de llenç per administrar projectes

Nota

Aquest article forma part d'una sèrie de tutorials sobre l'ús del Power Apps, del Power Automate i del Power BI amb el SharePoint Online. Assegureu-vos que llegiu la introducció de la sèrie per obtenir una idea general, així com las baixades relacionades.

En aquesta tasca, crearem una aplicació de llenç des de zero. Aquesta aplicació permet a un usuari assignar un administrador a projectes i actualitzar els detalls de projecte. Veureu alguns dels mateixos controls i fórmules que heu vist a la primera aplicació, però creareu una gran part de l'aplicació aquesta vegada. El procés és més complex, però aprendreu més, per la qual cosa pensem que és un tracte just.

Revisió ràpida del Power Apps Studio

El Power Apps Studio té tres subfinestres i una franja que fan que la creació d'aplicacions sigui com fer una presentació de diapositives al PowerPoint:

  1. Barra de navegació esquerra, que mostra una visualització jeràrquica de totes les pantalles i els controls de l'aplicació, així com miniatures de les pantalles.
  2. Subfinestra central, que conté la pantalla de l'aplicació en la qual treballeu.
  3. Subfinestra de la dreta, on definiu opcions com ara la disposició i les fonts de dades.
  4. Llista desplegable de propietats, on seleccioneu les propietats a les quals s'apliquen fórmules.
  5. Barra de fórmules, on afegiu fórmules (com a l'Excel) que defineixen el comportament de l'aplicació.
  6. Franja, on afegiu controls i personalitzeu elements de disseny.

Power Apps Studio

Pas 1: Crear pantalles

Un cop hem acabat la revisió, comencen a crear una aplicació.

Crear i desar l'aplicació

  1. Al Power Apps Studio, toqueu o feu clic a Crea i, a Aplicació en blanc, toqueu o feu clic a Disposició del telèfon.

    Aplicació en blanc: disposició del telèfon

  2. Feu clic o toqueu Configuració i introduïu el nom "Aplicació d'administració de projectes".

    Nom de l’aplicació

  3. Toqueu o feu clic a Desa com a, verifiqueu que l'aplicació es desarà al núvol i, a continuació, feu clic a Desa a la part inferior dreta.

    Desar al núvol.

  4. Toqueu o feu clic a Icona Torna a l'aplicació per tornar a l'aplicació.

Afegir quatre pantalles a l'aplicació

En aquest pas, crearem quatre pantalles en blanc per a l'aplicació. En funció de la finalitat de la pantalla, farem servir diferents disposicions de pantalla. Les afegirem a aquestes pantalles en passos posteriors.

Pantalla Finalitat
SelectTask Pantalla d'obertura; desplaçar-se a altres pantalles.
AssignManager Assignar un administrador a un projecte aprovat.
ViewProjects Visualitzar una llista de projectes, amb informació de resum.
UpdateDetails Visualitzar i actualitzar els detalls d'un projecte.
  1. A la pestanya Inici, toqueu o feu clic a Pantalla nova i a Pantalla desplaçable:

    Pantalla desplaçable

  2. Canvieu el nom de la pantalla a SelectTask.

    Canviar el nom de la pantalla.

  3. Creeu i canvieu el nom de pantalles addicionals:

    1. Toqueu o feu clic a Pantalla nova i a Pantalla desplaçable. Canvieu el nom de la pantalla a AssignManager.
    2. Toqueu o feu clic a Pantalla nova i a Pantalla de llista. Canvieu el nom de la pantalla a ViewProjects.
    3. Toqueu o feu clic a Pantalla nova i a Pantalla de formulari. Canvieu el nom de la pantalla a UpdateDetails.
  4. Seleccioneu els punts suspensius ( ...) al costat de Pantalla1 i, a continuació, toqueu o feu clic a Suprimeix.

    Suprimir la pantalla.

L'aplicació ara s'hauria de veure com a la següent imatge.

Totes les pantalles de l'aplicació

Pas 2: Connectar-se a una llista del SharePoint

En aquest pas, ens connectarem a la llista Detalls de projecte del SharePoint. Només s'utilitza una llista en aquesta aplicació, però podeu connectar-vos fàcilment a totes dues si voleu ampliar l'aplicació.

  1. A la barra de navegació esquerra, toqueu o feu clic a la pantalla SelectTask.

  2. A la subfinestra dreta, toqueu o feu clic a Afegeix una font de dades.

    Connectar-se a dades.

  3. Toqueu o feu clic a Nova connexió.

    Connexió nova

  4. Feu clic o toqueu SharePoint.

    Connexió del SharePoint

  5. Seleccioneu Connecta't directament (serveis al núvol) i, a continuació, toqueu o feu clic a Crea.

    Connectar-se directament (serveis al núvol).

  6. Introduïu una adreça URL del SharePoint i, a continuació, toqueu o feu clic a Ves.

    Adreça URL del SharePoint per a la connexió

  7. Seleccioneu la llista Detalls de projecte i, a continuació, toqueu o feu clic a Connecta't.

    Seleccionar la llista de detalls de projecte.

    La pestanya Fonts de dades de la subfinestra dreta ara mostra la connexió que heu creat.

    Pestanya Fonts de dades

Pas 3: Crear la pantalla SelectTask

En aquest pas, proporcionarem una manera de desplaçar-se a les altres pantalles de l'aplicació, treballant amb alguns dels controls, les fórmules i les opcions de format que proporciona el Power Apps.

Actualitzar el títol i inserir text introductori

  1. A la barra de navegació esquerra, seleccioneu la pantalla SelectTask.

  2. A la subfinestra central, seleccioneu el [Títol] per defecte i, a continuació, a la barra de fórmules, actualitzeu la propietat Text a "Administració de projectes de Contoso".

    Propietat Text de la barra de fórmules

  3. A la pestanya Insereix, toqueu o feu clic a Etiqueta i, a continuació, arrossegueu l'etiqueta cap avall a sota del bàner superior.

    Afegir una etiqueta.

  4. A la barra de fórmules, definiu les propietats següents per a l'etiqueta:

    • Propietat Color = DarkGray

    • Propietat Size = 18

    • Propietat Text = " Toqueu o feu clic en una tasca per continuar..."

      Actualitzar el text de l'etiqueta.

Afegir dos botons de navegació

  1. A la pestanya Insereix, toqueu o feu clic a Botó i, a continuació, arrossegueu el botó a sota de l'etiqueta.

    Botó Afegeix

  2. A la barra de fórmules, definiu les propietats següents per al botó:

    • Propietat OnSelect = Navigate(AssignManager, Fade). Quan executeu l'aplicació i feu clic en aquest botó, us desplaceu fins a la segona pantalla de l'aplicació, amb una transició atenuada entre les pantalles.

    • Propietat Text = "Assigna l'administrador"

  3. Redimensioneu el botó per adaptar-lo al text.

    Botó Redimensiona

  4. Inseriu un altre botó amb les propietats següents:

    • Propietat OnSelect = Navigate(ViewProjects, Fade).

    • Propietat Text = "Actualitza els detalls"

      Actualitzar el text del botó.

      Nota

      El botó està etiquetat com a Actualitza els detalls, però primer anem a la pantalla ViewProjects per seleccionar un projecte per actualitzar-lo.

Executa l'aplicació

L'aplicació no fa gaire encara, però podeu executar-la si voleu:

  1. Feu clic o toqueu la pantalla SelectTask (l'aplicació sempre s'inicia des de la pantalla seleccionada en mode de visualització prèvia al Power Apps Studio).

  2. Toqueu o feu clic a Icona Executa l'aplicació a la part superior dreta per executar l'aplicació.

  3. Feu clic o toqueu un dels botons per desplaçar-vos a una altra pantalla.

  4. Toqueu o feu clic a Icona Tanca la visualització prèvia de l'aplicació a la part superior dreta per tancar l'aplicació.

Pas 4: Crear la pantalla AssignManager

En aquest pas, farem servir una galeria per visualitzar tots els projectes que s'han aprovat, però encara no tenen un administrador. Afegirem altres controls perquè pugueu assignar un administrador.

Nota

Crearem una pàgina més endavant a l'aplicació que us permeti editar tots els camps d'un projecte (incloent-hi el camp de l'administrador), però hem pensat que també seria genial crear una pantalla com aquesta.

  1. Deseu els canvis que heu fet fins ara.

  2. A la barra de navegació esquerra, toqueu o feu clic a la pantalla AssignManager.

Actualitzar el títol i inserir text introductori

  1. Canvieu [Títol] a Assigna un administrador.

  2. Afegiu una etiqueta amb les propietats següents:

    • Propietat Color = DarkGray

    • Propietat Size = 18

    • Propietat Text = " Seleccioneu un projecte i, a continuació, assigneu un administrador"

      Assignar una disposició d'administrador.

Afegir una fletxa enrere per tornar a la pantalla SelectTask

  1. Toqueu o feu clic a la barra blava de la part superior de la pantalla.

  2. A la pestanya Insereix, toqueu o feu clic a Icones i toqueu o feu clic a Esquerra:

    Inserir una fletxa esquerra.

  3. Moveu la fletxa cap a l'esquerra de la barra blava i definiu les propietats següents:

    • Propietat Color = Blanc

    • Propietat Height = 40

    • Propietat OnSelect = Navigate(SelectTask, Fade).

    • Propietat Width = 40

      Afegir el botó Retrocedeix.

  1. A la pestanya Insereix, toqueu o feu clic a Galeria i, a continuació, a Vertical.

    Afegir una galeria vertical.

  2. Seleccioneu Títol, subtítol i cos al menú Disposició de la subfinestra dreta.

    Canviar la disposició de la galeria.

    La galeria té ara la disposició correcta, però encara té el text d'exemple per defecte. Corregirem això a continuació.

    Galeria amb text per defecte

  3. Definiu les propietats següents per a la galeria:

    • Propietat BorderThickness = 1

    • Propietat BorderStyle = Amb punts

    • Propietat Items = Filter('Project Details', PMAssigned="Unassigned"). Només s'inclouran a la galeria els projectes que no tinguin cap administrador assignat.

      Galeria amb text de la llista

  4. A la subfinestra dreta, actualitzeu els camps perquè coincideixin amb la llista següent:

    • ApprovedDate

    • Estat

    • Càrrec

      Galeria

  5. Redimensioneu les etiquetes de la galeria segons calgui i suprimiu la fletxa del primer element de la galeria (no necessitem desplaçar-nos enlloc des d'aquesta galeria).

    Icona Suprimeix la fletxa

    Ara la pantalla s'hauria de veure com a la imatge següent.

    Galeria formatada

Canviar el color d'un element si se selecciona

  1. Seleccioneu la galeria i, a continuació, definiu la propietat TemplateFill com a If (ThisItem.IsSelected=true, Orange, White).

  2. Seleccioneu un element de la galeria. Ara la pantalla s'hauria de veure com a la imatge següent.

    Galeria amb l'element seleccionat

Afegir una etiqueta, una entrada de text i un botó D'acord per enviar assignacions d'administrador

  1. Toqueu o feu clic a fora de la galeria a la qual heu estat treballant.

  2. A la pestanya Insereix, toqueu o feu clic a Etiqueta. Arrossegueu l'etiqueta a sota de la galeria a l'esquerra. Definiu les propietats següents per a l'etiqueta:

    • Propietat Size = 20

    • Propietat Text = "Administrador:"

    Etiqueta Afegeix un administrador

  3. A la pestanya Insereix, toqueu o feu clic a Text i, a continuació, a Entrada de text. Arrossegueu l'entrada de text a sota de la galeria al centre. Definiu les propietats següents per al menú desplegable:

    • Propietat Default = ""

    • Propietat Height = 60

    • Propietat Size = 20

    • Propietat Width = 250

    Afegir entrada de text.

  4. A la pestanya Insereix, toqueu o feu clic a Botó. Arrossegueu el botó que hi ha a sota de la galeria a la dreta. Definiu les propietats següents per al botó:

    • Propietat Height = 60

    • Propietat OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Per obtenir més informació, vegeu Anàlisi de fórmules.

    • En aquesta fórmula s'actualitza la llista Detalls de projecte definint un valor per al camp PMAssigned.

    • Propietat Size = 20

    • Propietat Text = "D'acord"

    • Propietat Width = 80

    Afegir un botó D'acord.

La pantalla completada s'hauria de veure ara com a la imatge següent.

Pantalla Assigna un administrador acabada

Pas 5: Crear la pantalla ViewProjects

En aquest pas, canviarem les propietats de la galeria a la pantalla ViewProjects. En aquesta galeria es visualitzen els elements de la llista Detalls de projecte. Seleccioneu un element en aquesta pantalla i editeu els detalls a la pantalla UpdateDetails.

  1. A la barra de navegació esquerra, toqueu o feu clic a la pantalla ViewProjects.

  2. Canvieu [Títol] a "Visualitza els projectes".

  3. A la barra de navegació esquerra, toqueu o feu clic a BrowserGallery1 sota ViewProjects.

  4. Seleccioneu Títol, subtítol i cos al menú Disposició de la subfinestra dreta.

    Canviar la disposició de la galeria.

    La galeria té ara la disposició correcta, amb el text d'exemple per defecte.

    Galeria amb disposició a la dreta

  5. Seleccioneu el botó d'actualització Icona Actualitza i definiu la seva propietat OnSelect com a Refresh('Project Details').

  6. Seleccioneu el botó d'element nou Icona Afegeix-ne un de nou i definiu la seva propietat OnSelect com a NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Afegir una fletxa enrere per tornar a la pantalla SelectTask

  1. A la barra de navegació esquerra, toqueu o feu clic a la pantalla AssignManager.

  2. Seleccioneu la fletxa enrere que hi heu afegit i copieu-la.

  3. Enganxeu la fletxa a la pantalla ViewProjects i col·loqueu-la a l'esquerra del botó Actualitza.

    Botó Retrocedeix

    Va acompanyat de totes les seves propietats, incloent-hi la propietat OnSelect de Navigate(SelectTask, Fade).

  1. Seleccioneu la galeria BrowseGallery1 i definiu la propietat Items de la galeria com a SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Això defineix la font de dades de la galeria com la llista Detalls de projecte i utilitza el camp Títol per cercar i ordenar.

  2. Seleccioneu la icona de la fletxa de detalls. al primer element de la galeria i definiu la propietat OnSelect com a Navigate(UpdateDetails, None).

     Galeria de visualització dels projectes: primer element seleccionat

  3. A la subfinestra dreta, actualitzeu els camps perquè coincideixin amb la llista següent:

    • Estat

    • PMAssigned

    • Càrrec

      Camps de la galeria

      La pantalla completada s'hauria de veure ara com a la imatge següent.

      Visualització de la pantalla del projecte acabada

Pas 6: Crear la pantalla UpdateDetails

En aquest pas, connectarem el formulari d'edició de la pantalla UpdateDetails a la nostra font de dades i farem canvis a propietats i camps. En aquesta pantalla, heu d'editar els detalls d'un projecte que heu seleccionat a la pantalla Visualitza els projectes.

  1. A la barra de navegació esquerra, toqueu o feu clic a la pantalla UpdateDetails.

  2. Canvieu [Títol] a "Actualitza els detalls".

  3. A la barra de navegació esquerra, toqueu o feu clic a EditForm1 sota UpdateDetails.

  4. Definiu les propietats següents per al formulari:

    • Propietat DataSource = 'Detalls del projecte'

    • Propietat Item = BrowseGallery1.Selected

  5. Amb el formulari encara seleccionat, a la subfinestra dreta toqueu o feu clic a la casella de selecció dels camps següents, en l'ordre que es mostra:

    • Títol

    • PMAssigned

    • Estat

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

      Editar els camps del formulari.

  6. Seleccioneu el botó Cancel·la icona Cancel·la i definiu la seva propietat OnSelect com a ResetForm(EditForm1); Back().

  7. Seleccioneu el botó de desa Icona Desa amb marca de selecció. i comproveu la fórmula OnSelect - SubmitForm(EditForm1). Com que estem utilitzant el control Edita el formulari, podem utilitzar Submit() en comptes d'utilitzar Patch(), com hem fet abans.

La pantalla completada hauria de tenir l'aparença de la imatge següent (si els camps estan en blanc, assegureu-vos de seleccionar un element a la pantalla Visualitza els projectes).

Pantalla Actualitza els detalls completada

Pas 7: Executar l'aplicació

Ara que l'aplicació s'ha completat, l'executarem per veure com funciona. Afegirem un enllaç del lloc del SharePoint a l'aplicació. Podreu executar l'aplicació al navegador, però pot ser que l'hàgiu de compartir per tal que altres usuaris l'executin. Per obtenir més informació, vegeu Compartir l'aplicació.

  1. A l'iniciador d'aplicacions de l'Office 365, toqueu o feu clic a Power Apps.

    El Power Apps a l'iniciador d'aplicacions de l'Office 365

  2. Al Power Apps, toqueu o feu clic als punts suspensius ( ...) per a l'aplicació Administració de projectes i, a continuació, a Obre.

    Seleccionar l'aplicació d'administració de projectes.

  3. Copieu l'adreça (URL) de l'aplicació al navegador.

    Copiar l'adreça URL de l'aplicació.

  4. Al SharePoint, toqueu o feu clic a Edita els enllaços.

    Editar els enllaços de lloc del SharePoint.

  5. Toqueu o feu clic a (+) enllaç.

    Afegir un enllaç d'aplicació a un lloc del SharePoint.

  6. Introduïu "aplicació Administració de projectes" i enganxeu l'adreça de l'aplicació.

    Editar les propietats de l'enllaç.

  7. Toqueu o feu clic a D'acord i, a continuació, a Desa.

    Desar els canvis de l'enllaç.

Assignar un administrador a un projecte

Ara que tenim l'aplicació al nostre lloc del SharePoint, assumirem la funció de l'aprovador de projectes: cercarem qualsevol projecte que no tingui cap administrador assignat i assignarem un administrador a un dels projectes. A continuació, assumirem la funció d'administrador de projectes i afegirem informació sobre un projecte que se'ns ha assignat.

  1. En primer lloc, fem una ullada a la llista Detalls del projecte al SharePoint. Dos projectes tenen un valor de Sense assignar a la columna PMAssigned. Els veurem a l'aplicació.

    Projectes sense assignar a una llista del SharePoint

  2. Toqueu o feu clic a l'enllaç que heu creat a l'aplicació.

  3. A la primera pantalla, toqueu o feu clic a Assigna un administrador.

    Pantalla d'introducció de l'aplicació

  4. A la pantalla Assigna un administrador, veureu els dos projectes sense assignar de la llista. Seleccioneu el projecte Programari del BI nou.

    Galeria amb l'element seleccionat

  5. A l'entrada de text Administrador, introduïu "Joni Sherman" i, a continuació, feu clic a D'acord.

    El canvi s'aplica a la llista i la galeria s'actualitza de manera que només es visualitza el projecte sense assignar restant.

    Assignar un administrador a un projecte.

  6. Torneu a la llista del SharePoint i actualitzeu la pàgina. Veureu que l'entrada del projecte ara està actualitzada amb el nom de l'administrador del projecte.

    Administrador de projectes assignat a una llista del SharePoint

Actualitzar els detalls del projecte

  1. Feu clic o toqueu la icona Enrere per tornar a la primera pantalla i, a continuació, feu clic a o toqueu Actualitza els detalls.

    Actualitzar els detalls.

  2. A la pantalla Visualitza els projectes, introduïu "Nou" al quadre de cerca.

    Cercar a la galeria d'aplicacions.

  3. Feu clic a la icona de la fletxa Detalls per a l'element Nou programari BI.

    Element de la galeria seleccionat

  4. A la pantalla Actualitza els detalls, definiu els valors següents:

    • El camp ProjectedStartDate = "3/6/2017"

    • El camp ProjectedEndDate = "3/24/2017"

    • El camp ProjectedDays = "15"

    Actualitzar els detalls dels elements.

  5. Toqueu o feu clic a Icona de marca de verificació per aplicar el canvi a la llista del SharePoint.

  6. Tanqueu l'aplicació i torneu a la llista. Veureu que l'entrada del projecte ara està actualitzada amb els canvis de data i dia.

    Llista del SharePoint actualitzada

Anàlisi de fórmules

Aquesta és la segona secció opcional sobre fórmules del Power Apps. A la primera anàlisi, hem tractar una de les fórmules que el Power Apps genera per a la galeria de navegació en una aplicació de tres pantalles. En aquesta anàlisi, veurem una fórmula que utilitzarem per a la pantalla AssignManager de la nostra segona aplicació. Aquesta és la fórmula:

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

Què fa aquesta fórmula? Quan seleccioneu un element de la galeria i feu clic al botó D'acord, la fórmula actualitza la llista Detalls de projecte, definint la columna PMAssigned com el valor que especifiqueu a l'entrada de text. La fórmula utilitza funcions per fer la seva feina:

  • La funció Patch modifica un o diversos registres d'una font de dades.

  • La funció LookUp troba el primer registre d'una taula que satisfà una fórmula.

Quan poseu les funcions juntes a la fórmula, això és el que passa:

  1. Quan feu clic al botó D'acord, es crida a la funció Patch per actualitzar la llista Detalls de projecte.

  2. Dins de la funció Patch, la funció LookUp identifica quina fila de la llista Detalls de projecte s'ha d'actualitzar. Fa això comparant l'identificador de l'element de la galeria seleccionat amb l'identificador de la llista. Per exemple, un identificador de 12 significa que l'entrada de Programari del BI nou s'ha d'actualitzar.

  3. Ara que la funció Patch té l'identificador correcte, actualitza el camp PMAssigned al valor de TextInput1.Text.

Passos següents

El següent pas d'aquesta sèrie de tutorials és crear un informe del Power BI per analitzar projectes.

Consulteu també