PowerApps, Office365 and Microsoft Flow Integration

PowerApps, Office365 and Microsoft Flow Integration

To demonstrate the potential of PowerApps applications, SharePoint Online from Office 365 and Microsoft Flow working seamlessly integrated, the following functional test case was performed. The case will show how to share an image from a device to an enterprise document manager.

imagen1

The example scenario is a company with the need to report an incident and leave an image taken from a Smartphone. It is sent by mail to the user and uploaded to a SharePoint library so that the rest of the company have access to the image.

App Creation with Power App

  1. The first thing we will do is create the app. Download PowerApps from https://powerapps.microsoft.com/en-us/ and install it on our computer. We create a new “Phone layout” and rename the screen TomarFoto.

imagen2

imagen3

  1. Next, to our TomarFoto screen, we add a camera control in the Insert tab in the Multimedia group. We rename it to Camera and we add an alternating control (switch) to be able to change the type of camera.

imagen4

imagen5

imagen6

3. Next we set the camera to change the focus depending on the value of the Switch control. We select the Camera control and in the Camera property of the Design group we put the expression “Switch.Value”. Then we add a Text Input control for the file name (image_name). So far our app is already 90% complete.

imagen7

Workflow creation with Microsoft Flow and SharePoint Online

  1. Next thing we will do is add a Microsoft Flow stream, which will send the photo and upload it to an image library in SharePoint Online. The first thing to do is to create our connections to both Outlook and SharePoint Online by signing in to Office365.

imagen8

2. We will do the same for SharePoint, after creating a connection, we select SharePoint. A screen will appear to create a connection. We will see a screen to create the connection in which there is a checkbox. For this exercise it will not be necessary so we leave it unchecked and we select Create connection.

imagen9

imagen10

It will be created and connected and now we will have the 2 necessary connections to make our app to send mail and save it to the SharePoint library.

  1. After creating the connections we can create our flow and start adding actions. We will look for the PowerApps trigger, and select it:

imagen11

imagen12

  1. Then select Office 365 Outlook – Send an email. In this example the mail will be sent to the user who is logged into PowerApps. When selecting box A a list of services is displayed which are used within the flow. Select Ask in PowerApps and do the same for the fields Attachments Name, Attachments Content, Subject and Body.

imagen13

imagen14

5. The next thing we will do is add a New Step in our flow that uploads the image to a SharePoint Online Library

imagen15

We choose SharePoint Service and fill the action fields:

imagen16

imagen17

  1. We name the Flow Photo from PowerApps and then we create flow.

imagen18

Integration and Proof

  1. We return to PowerApps and we will see that the flow is now available for use. We select Camera in control, and we add the flow that we just created. A function has been created in the event OnSelect and the control of the function is Run() with five parameters that are the types of dynamic contents that we create in the flow.

imagen19

  • Parameter 1: Mailbox where the mail will be sent. We will use the User() function, and with the Email property we will get the email of the person who logged into PowerApps.
  • Parameter 2: Name of the person sending the image. We will also use the User() function but this time with the FullName property resulting in User(). FullName
  • Parameter 3: The image name. From the image_name control we will take the Text property, which is important in this parameter. We must concatenate the file type which in this case will be .JPG resulting in Concatenate (nombreImage.Text; “. JPG”)
  • Parameter 4: we will use the same than in parameter 3.
  • Parameter 5: We will send the photo captured by the Camara control. This will be done using the Photo property of that control, resulting in Camara.Photo

2.    Finally, we save the App in the cloud with the name Images with Flow

imagen20

  1. To test our app, press F5 or select the Play symbol.

imagen21

  1. It will show a sort of Smartphone emulator. We fill the field with the name of the image.

imagen22

  1. If we are in the computer, to take the photo click on the Camera control. If we are from a touch-sensitive phone we simply touch the Camera control, and this will activate the Flow and take us to the fotoEnviada screen

imagen23

To validate that the flow runs correctly at first we go to the mail to check that the image and the correct texts arrived.

imagen24

As you can see in the image, there is the attached picture as well as the mail subject and body with the text we placed in the flow. Next we go to the SharePoint library.

imagen25

  1. To end the article and see one of the great features of the O365 suite, we share our app. For this, we go to PowerApps site: https://web.powerapps.com and In the left side menu select Applications.

imagen26



Integración de PowerApps, Office365 y Microsoft Flow

Para mostrar la potencialidad de las aplicaciones de PowerApps, SharePoint Online de Office 365 y Microsoft Flow trabajando de forma integrada, se realizó el siguiente caso de prueba funcional. El caso será compartir una imagen desde un dispositivo a un gestor documental empresarial.

imagen1

El escenario de ejemplo es el de una empresa con la necesidad de informar sobre alguna incidencia, y dejar una imagen tomada desde un Smartphone. La misma es enviada por correo al usuario y subida a una biblioteca de SharePoint para que el resto de la compañía tenga acceso a la imagen.

Creación de App con Power App 

  1. Lo primero que haremos será crear la app. Descargamos PowerApps desde https://powerapps.microsoft.com/en-us/ y lo instalamos en nuestro computador. Creamos un nuevo “Diseño de teléfono” y renombramos la pantalla a TomarFoto.

imagen2

imagen3

2. Ahora a nuestra pantalla TomarFoto, agregamos un control de cámara en la pestaña Insertar en el grupo Multimedia. Lo renombramos a Cámara y agregamos un control alternar (conmutador) para poder cambiar el tipo de cámara.

imagen4

imagen5

imagen6

3. Ahora configuramos la cámara para que cambie el foco dependiendo del valor del control Seleccionamos el control Camara y en la propiedad Camera del grupo Diseño colocamos la expresión “Conmutador.Value”. Agregamos luego un control de Entrada de texto para el nombre del archivo (nombreImagen). Hasta aquí ya nuestra app está a un 90% terminada.

imagen7

Creación de Flujo con Microsoft Flow y SharePoint Online 

  1. Lo siguiente que haremos es agregar un flujo de Microsoft Flow, el cual se encargará de enviar la foto y subirla a una biblioteca de imágenes en SharePoint Online. Lo primero que debemos hacer es crear nuestras conexiones tanto a Outlook como a SharePoint Online, iniciando sesión en Office365.

imagen8

 

2. Haremos lo mismo para SharePoint, luego de crear conexión, seleccionamos SharePoint. Nos aparecerá una pantalla para crear la conexión en la cual hay un checkbox. Lo marcamos si vamos a usar una puesta de enlace para datos locales. Para este ejercicio no será necesario así que lo dejamos desmarcado y le damos Crear conexión

imagen9

imagen10

Igualmente quedará creada y conectada y ahora tendremos las 2 conexiones necesarias para lograr que nuestra app envíe el correo y guarde en la biblioteca de SharePoint.

3. Luego de crear las conexiones podemos crear nuestro flujo y comenzar a agregar acciones. Buscaremos el desencadenador de PowerApps, y lo seleccionamos:

imagen11

imagen12

4. Luego seleccionamos Office 365 Outlook – Enviar un correo electrónico. En este ejemplo el mail se enviará al usuario que haya iniciado sesión en PowerApps. Al seleccionar la casilla A se despliega una lista de servicios que se usan dentro del flujo. Seleccionamos Preguntar en PowerApps y haremos lo mismo para los campos Datos Adjuntos Nombre, Datos Adjuntos Contenido, Asunto y Cuerpo.

imagen13

imagen14

5. Lo siguiente que haremos será agregar un Nuevo Paso en nuestro flujo que suba la imagen a una biblioteca de SharePoint Online

imagen15

Escogemos el servicio SharePoint y llenamos los campos de la acción.

imagen16

imagen17

6.Le colocamos nombre al flujo Foto desde PowerApps y luego le damos crear flujo.

imagen18

Integración y Prueba

  1. Regresamos a PowerApps y veremos que el flujo ya está disponible para usar. Seleccionamos en control Cámara, y agregamos el flujo que acabamos de crear. Nos ha creado una función en el evento OnSelect y el control de la función es Run() con 5 parámetros que son los tipos de contenidos dinámicos que creamos en el flujo.

imagen19

  • Parámetro 1: Correo donde se enviará el mail. Usaremos la función User(), y con la propiedad Email obtendremos el email de la persona que inició sesión en PowerApps
  • Parámetro 2: Nombre de la persona que envía la imagen. Igualmente usaremos la función User() pero esta vez con la propiedad FullName quedando User().FullName
  • Parámetro 3: El nombre de la imagen. Del control nombreImagen tomaremos la propiedad Text, importante en este parámetro. Debemos concatenar el tipo de archivo que en este caso será .JPG quedando Concatenate(nombreImage.Text;”.JPG”)
  • Parámetro 4: usaremos lo mismo del parámetro 3
  • Parámetro 5: Enviaremos la foto capturada por el control Camara. Esto lo haremos usando la propiedad Photo de dicho control, quedando Camara.Photo

2. Por último, guardamos la App en la nube con el nombre Imágenes con Flow

imagen20

3. Para probar nuestra app, presionamos F5 o bien damos al símbolo play

imagen21

4. Nos mostrará una especie de emulador de Smartphone. Llenamos el campo con el nombre de la imagen.

imagen22

5. Para tomar la foto si estamos en el computador hacemos click sobre el control Si estamos desde un teléfono táctil simplemente tocamos el control Camara,  y esto disparará el flujo de Flow y nos llevará a la pantalla fotoEnviada

imagen23

Ahora para validar que el flujo se ejecute de forma correcta vamos en principio al correo para ver que llegó la imagen y los textos correctos.

imagen24

Como ven en la imagen, está la foto adjunta, así como el asunto y el contenido del correo con los textos que colocamos en el flujo. Luego vamos a la biblioteca de SharePoint.

imagen25

6. Para cerrar el artículo y ver una de las grandes características de la suite de O365 vamos a compartir nuestra app. Vamos al sitio de PowerApps https://web.powerapps.com/ , en el menú lateral izquierdo seleccionamos Aplicaciones

imagen26

Share This
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn