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:
- 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.
- Subfinestra central, que conté la pantalla de l'aplicació en la qual treballeu.
- Subfinestra de la dreta, on definiu opcions com ara la disposició i les fonts de dades.
- Llista desplegable de propietats, on seleccioneu les propietats a les quals s'apliquen fórmules.
- Barra de fórmules, on afegiu fórmules (com a l'Excel) que defineixen el comportament de l'aplicació.
- Franja, on afegiu controls i personalitzeu elements de disseny.

Pas 1: Crear pantalles
Un cop hem acabat la revisió, comencen a crear una aplicació.
Crear i desar l'aplicació
Al Power Apps Studio, toqueu o feu clic a Crea i, a Aplicació en blanc, toqueu o feu clic a Disposició del telèfon.

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

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.

Toqueu o feu clic a
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. |
A la pestanya Inici, toqueu o feu clic a Pantalla nova i a Pantalla desplaçable:

Canvieu el nom de la pantalla a SelectTask.

Creeu i canvieu el nom de pantalles addicionals:
- Toqueu o feu clic a Pantalla nova i a Pantalla desplaçable. Canvieu el nom de la pantalla a AssignManager.
- Toqueu o feu clic a Pantalla nova i a Pantalla de llista. Canvieu el nom de la pantalla a ViewProjects.
- Toqueu o feu clic a Pantalla nova i a Pantalla de formulari. Canvieu el nom de la pantalla a UpdateDetails.
Seleccioneu els punts suspensius ( ...) al costat de Pantalla1 i, a continuació, toqueu o feu clic a Suprimeix.

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

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ó.
A la barra de navegació esquerra, toqueu o feu clic a la pantalla SelectTask.
A la subfinestra dreta, toqueu o feu clic a Afegeix una font de dades.

Toqueu o feu clic a Nova connexió.

Feu clic o toqueu SharePoint.

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

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

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

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

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
A la barra de navegació esquerra, seleccioneu la pantalla SelectTask.
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".

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

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

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

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"
Redimensioneu el botó per adaptar-lo al text.

Inseriu un altre botó amb les propietats següents:
Propietat OnSelect = Navigate(ViewProjects, Fade).
Propietat Text = "Actualitza els detalls"

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:
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).
Toqueu o feu clic a
a la part superior dreta per executar l'aplicació.Feu clic o toqueu un dels botons per desplaçar-vos a una altra pantalla.
Toqueu o feu clic a
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.
Deseu els canvis que heu fet fins ara.
A la barra de navegació esquerra, toqueu o feu clic a la pantalla AssignManager.
Actualitzar el títol i inserir text introductori
Canvieu [Títol] a Assigna un administrador.
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"

Afegir una fletxa enrere per tornar a la pantalla SelectTask
Toqueu o feu clic a la barra blava de la part superior de la pantalla.
A la pestanya Insereix, toqueu o feu clic a Icones i toqueu o feu clic a Esquerra:

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 i modificar una galeria
A la pestanya Insereix, toqueu o feu clic a Galeria i, a continuació, a Vertical.

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

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

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.

A la subfinestra dreta, actualitzeu els camps perquè coincideixin amb la llista següent:
ApprovedDate
Estat
Càrrec

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

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

Canviar el color d'un element si se selecciona
Seleccioneu la galeria i, a continuació, definiu la propietat TemplateFill com a If (ThisItem.IsSelected=true, Orange, White).
Seleccioneu un element de la galeria. Ara la pantalla s'hauria de veure com a la imatge següent.

Afegir una etiqueta, una entrada de text i un botó D'acord per enviar assignacions d'administrador
Toqueu o feu clic a fora de la galeria a la qual heu estat treballant.
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:"

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

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

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

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.
A la barra de navegació esquerra, toqueu o feu clic a la pantalla ViewProjects.
Canvieu [Títol] a "Visualitza els projectes".
A la barra de navegació esquerra, toqueu o feu clic a BrowserGallery1 sota ViewProjects.
Seleccioneu Títol, subtítol i cos al menú Disposició de la subfinestra dreta.

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

Seleccioneu el botó d'actualització
i definiu la seva propietat OnSelect com a Refresh('Project Details').Seleccioneu el botó d'element 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
A la barra de navegació esquerra, toqueu o feu clic a la pantalla AssignManager.
Seleccioneu la fletxa enrere que hi heu afegit i copieu-la.
Enganxeu la fletxa a la pantalla ViewProjects i col·loqueu-la a l'esquerra del botó Actualitza.

Va acompanyat de totes les seves propietats, incloent-hi la propietat OnSelect de Navigate(SelectTask, Fade).
Canviar la font de dades per a la galeria BrowseGallery1
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.
Seleccioneu la
al primer element de la galeria i definiu la propietat OnSelect com a Navigate(UpdateDetails, None).
A la subfinestra dreta, actualitzeu els camps perquè coincideixin amb la llista següent:
Estat
PMAssigned
Càrrec

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

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.
A la barra de navegació esquerra, toqueu o feu clic a la pantalla UpdateDetails.
Canvieu [Títol] a "Actualitza els detalls".
A la barra de navegació esquerra, toqueu o feu clic a EditForm1 sota UpdateDetails.
Definiu les propietats següents per al formulari:
Propietat DataSource = 'Detalls del projecte'
Propietat Item = BrowseGallery1.Selected
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

Seleccioneu el botó Cancel·la
i definiu la seva propietat OnSelect com a ResetForm(EditForm1); Back().Seleccioneu el botó de desa
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).

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ó.
Afegir un enllaç a l'aplicació
A l'iniciador d'aplicacions de l'Office 365, toqueu o feu clic a Power Apps.

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

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

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

Toqueu o feu clic a (+) enllaç.

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

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

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

Toqueu o feu clic a l'enllaç que heu creat a l'aplicació.
A la primera pantalla, toqueu o feu clic a Assigna un administrador.

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

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.

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.

Actualitzar els detalls del projecte
Feu clic o toqueu la
per tornar a la primera pantalla i, a continuació, feu clic a o toqueu Actualitza els detalls.
A la pantalla Visualitza els projectes, introduïu "Nou" al quadre de cerca.

Feu clic a la
per a l'element Nou programari BI.
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"

Toqueu o feu clic a
per aplicar el canvi a la llista del SharePoint.Tanqueu l'aplicació i torneu a la llista. Veureu que l'entrada del projecte ara està actualitzada amb els canvis de data i dia.

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:
Quan feu clic al botó D'acord, es crida a la funció Patch per actualitzar la llista Detalls de projecte.
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.
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.