Employee Hub - Power Apps demo

Demo Guide

Updated: April 23, 2020

This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet Web site
references, may change without notice. You bear the risk of using it.
This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and
use this document for your internal, reference purposes.

© 2019 Microsoft. All rights reserved.

Contents
Introduction.................................................................................................................................................................................................................................................. 3
Prerequisites................................................................................................................................................................................................................................................. 4
Demo environment(s).......................................................................................................................................................................................................................... 4
There are two personas used in this demo.................................................................................................................................................................................. 4
Recommended Devices....................................................................................................................................................................................................................... 4
One-Time Environment Setup Steps................................................................................................................................................................................................... 5
Pre-demo Setup Steps.............................................................................................................................................................................................................................. 5
On your desktop/laptop:.................................................................................................................................................................................................................... 5
On your phone:....................................................................................................................................................................................................................................... 6
Conference Sessions Demo Steps........................................................................................................................................................................................................ 7
Showing the end user experience................................................................................................................................................................................................... 7
Automate Business Processes......................................................................................................................................................................................................... 11
Mobile Conference app - demo steps............................................................................................................................................................................................. 13
Showing the end user experience................................................................................................................................................................................................. 13
Showing how we built it................................................................................................................................................................................................................... 19
Conclusion.............................................................................................................................................................................................................................................. 21
Reset Instructions..................................................................................................................................................................................................................................... 22
On your desktop/laptop:.................................................................................................................................................................................................................. 22

2
Introduction
Constant switching between tasks and contexts reduces productivity. Employees are faced with this and many other challenges trying
to focus with many different tools and apps plus having to create manual processes to get their work done. By integrating apps and
automating workflows in Microsoft Teams, employees can digitize business processes and improve business efficiencies while they
keep on collaborating to be more productive.

The Employees Hub in Teams will help employees to have better tools to get important information about conference sessions,
submit kudos within their teams, and submit time away.

In this demo, we’ll show how employees can search for conferences sessions, edit them and send them to their manager for approval.
Also, the employee can have the application embedded in Microsoft Teams or run the app on their tablet or phone, this helps the
employee to select at any time a session conference that is interested and have information such as the time and location of the
conference.

The Approver (just like the employee) will open the app embedded in Microsoft Teams and edit the conference sessions that the
employees have submitted for approval. Also, the approver gets notifications in Microsoft Teams for each session waiting for
approval. In this way, the approver can easily reply to the employee who requested a conference session within Microsoft Team, open
the app and approve the conference sessions.

3
Prerequisites

Demo environment(s)
This demo guide can be used only with the following Microsoft 365 tenant, owned by the Power Platform team:
 PowerAppsDemos3

There are two personas used in this demo.

Login information for the two demo personas is as follows:
 Name: Megan Bowen
 Title: Marketing Manager
 User name:                  MeganB@PowerAppsDemos3.onmicrosoft.com
 Password:                   PowerPlatform!
 License(s): Office 365 E5, Microsoft Power Automate Free

 Name: Jeff Hay

 Title: Sales Representative
 User name:                  JeffH@PowerAppsDemos3.onmicrosoft.com
 Password:                   Run09370$
 License(s): Office 365 E5, Microsoft Power Automate Free, Power Apps per user plan, Dynamics 365 plan

Recommended Devices
For this demo, use any Windows 10 for the desktop/laptop steps, while a mobile device is needed for the end user experience. The
mobile steps in this demo guide were written for and tested against an Android Tablet and phone.

4
One-Time Environment Setup Steps
Complete the following setup steps once for your demo environment:
1. On your phone, navigate to the Play Store and download and install Microsoft PowerApps mobile app.
2. Sign in as JeffH@PowerAppsDemos3.onmicrosoft.com.

Pre-demo Setup Steps

Complete the following steps before each presentation of the demo:

On your desktop/laptop:
1. Start an InPrivate Edge session, navigate to portal.office.com, and sign in as MeganB.
2. Click Teams.
Note: if you do not see Teams, click the App Launcher waffle, and then select Teams.

3. Navigate to the Employees Hub team and Events channel.

4. In a separate enter the URL https://make.powerapps.com/
5. At the top right, ensure the Environment is set to Employee Hub
6. Under Recent apps, next to the Mobile Conference app, click the ellipsis, and then click Edit.
NOTE: If prompted with a Welcome to PowerApps notification, click Skip.
a. In PowerApps Studio, click the File tab, and then click Save as.

5
 b. At the top, in the name box, change Mobile Conference app to <Your Name> - Mobile Conference app, and
then click Save.
NOTE: Using your name in the naming convention will ensure uniqueness on a shared tenant.
c. In the left navigation, at the top, click the <- (left arrow) to return to the home screen.
7. Under Recent apps, next to the Conference Sessions app, click the ellipsis, and then click Edit.
NOTE: If prompted with a Welcome to PowerApps notification, click Skip.
d. In PowerApps Studio, click the File tab, and then click Save as.
e. At the top, in the name box, change Conference Sessions App to <Your Name> - Conference Sessions, and
then click Save.
NOTE: Using your name in the naming convention will ensure uniqueness on a shared tenant.
f. In the left navigation, at the top, click the <- (left arrow) to return to the home screen.

On your phone:
1. Start the PowerApps mobile app, and, if needed, sign in as JeffH.
2. In PowerApps, tap the Mobile Conference app.
3. NOTE: If prompted for permissions to use the SharePoint, Office 365, Teams, etc. click Allow.

6
Conference Sessions Demo Steps

Showing the end user experience

Speaker Script Click Steps
Microsoft Teams 1. In Microsoft Team, Navigate to Employee Hub then select the Events channel.
Megan is the content lead for a list of sessions at an
upcoming conference. She’s working in the Teams
Employee hub collaborating with her co-workers in their
events channel. The team is challenged with managing
100’s of reviews & approvals and wondering how can
automate the process. In the past it’s been a manual
process of emailing session speakers, getting their
updates, reviewing, copy & pasting them updates into
spreadsheets.

2. Select Add a Tab

Megan is also a citizen dev & builds a Power Apps app
directly from a SharePoint list and pins it to the Teams
channel to help automate the review and approval
process.

1. Select Power Apps from the Add a tab pop-up screen

7
 2. Select Conference Sessions by Megan Bowen

3. Point to Search Sessions at the top of the screen and select any date – E.g.: Friday
27
Without leaving their Teams channel Megan & her co-
workers can review and approve conference sessions
with a Power App.
A session speaker can easily make updates to their
session title, abstract, objectives, etc., and submit
changes.
4. Point to a Search by Keyword, and Type a Session Title and scroll to select a
session where ‘Session status’ is ‘In Progress’

8
 5. On the right side, edit a session
6. Point to Title, Session Type, Session Level, Primary Speaker, Additional
Speakers, Description and Feedback.

7. Point to Description and update the Description.

8. Select Submit. (A notification will show at the top)

As soon as a session has been updated and submitted a 9. In teams, go to Employee hub then Events channel
notification is delivered in Teams. No more having to
10. Point to Notification regarding “Conference session updated to waiting for
chase people down. approval”
The Approver clicks on the conference link provided in
the post (within the Microsoft Teams). The approver can
also open the Conference session app, see the list of
session conferences or search for a specific session to be
11. Click on the conference session link or go to app and search for the session to be
approved. After picking a session, the manager clicks on
approved. Click on Approve. (A notification will show at the top)
Approve.

9
A final approval is made for a session. The app
experience in Teams helps improve the overall
effectiveness of Megan & her co-workers by allowing
12. Check the session, all fields should be read-only, and Session Status should change
them to keep collaborating within Teams while digitizing to Approved.
business process processes.

Finally, the session owner gets a notification in Microsoft 13. On the Teams channel you will see a post as below
Teams that their session is approved.

Analytics

With many conference sessions, Contoso can now
leverage the newly generated data to gain valuable
insights and drive actions across the conferences with
Power BI.
But valuable insights are now always that obvious.
1. On the Conference Sessions app home screen, tap Analytics
2. Point to the Conference Session scores Dashboard.
3. Tap < to return to the Schedule screen.

10
 Luckily, the AI powered visuals in Power BI surface those
less obvious insights. Megan can track the conference
session scores such as attendance and ratings for a
session.
As a manager, she now knows exactly the metrics of
each conference session: Session by number of
attendees, total averages NSAT, Total average Qavg and
session type max Qavq.

Automate Business Processes.

Showing how to automate with Teams flows. Logged-in as Megan H.
Speaker Script Click Steps

Automating this approvals and updates process is realty easy
with Power Automate. Megan can create flows that send
notifications when her SharePoint list items have been updated.
1. In Power Apps select Flows on the left navigation
2. Select Team flows
3. Select flow Post Session Update to Teams Events tab V2.
4. Click edit flow icon.

11
Here you can I’m checking items from a SharePoint list and if it’s been 5. Expand each flow item by clicking on it.
updated, which is the condition set to “In Progress” from the app
6. Minimize items by clicking on them again
then the flow changes the status to “Pending Approval” and send a
Teams notification to the session approver.

12
Mobile Conference app - demo steps

Showing the end user experience

Logged-in as Jeff H on a Microsoft Power Apps plan.
Speaker Script Click Steps

At previous conferences Jeff and others have struggled getting 7. On the phone, open the Mobile Conference App.
accurate information from customers attending sessions and
the expo. He has a new app that simplifies the process using AI
Builder to detect business cards and extract their information.
Now he can spend more time talking to customers rather
typing.

13
 8. Select Lead Entry

This app provides the ability to create leads. Jeff would 9. Select Scan business card.
normally fill in the first name, last name, job title, email,
company, phone, and comments. Thanks to the apps AI Builder
business card reader component to detect business cards, Jeff
can save time and extract their information directly from a
picture & spend more time talking to customers.

Note: You need the Common Data Service user role to use the
business card reader.

14
After the lead is created, a customer survey will be available.

10. Scan business card with by taking a photo or upload the file ‘Business
Card.jpg’ if running the app on a tablet/pc.
11. Select Create Lead.

12. Select Get Started for the customer survey.

15
After the lead is captured the customer is given the option to
take a short survey. This information along with the contact
information is automatically stored in the Common Data
service enabling additional business process tools, which help
Jeff and other sellers focus on the their relationships with
customers.

Note: You need a Power Apps plan to use the Common Data Service
entities in this app.

13. Complete the survey.

14. Select Return to Business Card Import

16
 15. Select the left arrow < to return to the home screen.

16. Select Product Showcase

Finally, Jeff wants to showcase their latest product to a customer.
However, due to the physical size of their latest product, it’s unable to
fit this expo space. Not a problem, with the Mixed Reality (MR)
capabilities in Power Apps Jeff can show the product in MR and walk

17
the customer around the product virtually using his mobile device.

17. Select View in MR

18. View the product showcase in Mixed Reality.

18
Showing how we built it
the end user experience as Jeff H on a Microsoft Power Apps plan.

19
Speaker Script Click Steps

Let’s see how easy it was to build this app which digitized a 19. In Power Apps studio open the Mobile Conference app <your name>
business process and integrated it with the orgs Common Data
20. Navigate to the BusinessCardScreen
Service business entities. Here in the app I can connect to office
365 data like SharePoint list OneDrive for business and over 21. Select LeadForm
200+ other data sources. With Power Apps license I can
connect to Common Data Service (CDS) which is used by
business applications throughout the org.
I don’t have to worry about security, managing the data as it’s
all built into the cloud with CDS. I can focus on building rich
business applications.

22. Highlight Leads entity from the Common Data Service

Additionally, it was simple to incorporate Augmented Reality 23. Navigate to the ProductScreen
(AR) into the app without prior knowledge of 3D code like the
ARCore and ARKit API framework. Because this capability is
fully integrated into Power Apps low-code platform I can
simply drag & drop an object and connect to my data source.
This approach enables me to build rich immersive experiences,
easily enabling me to respond and adapt to changing business
needs.

20
 24. Select Insert (+)
25. Select Code Components
26. Click View in AR (preview)
Do not save any changes.

Conclusion
Speaker Script Click Steps

21
 By integrating apps and automating workflows in Microsoft No click steps.
Teams, employees can digitize business processes and improve
business efficiencies while they keep on collaborating to be
more productive.

Reset Instructions
Follow these steps to reset the demo after each presentation:

On your desktop/laptop:
1. In the <Your Name> - Conference Sessions App browser tab, click the File tab, and then click Close.
2. prompted about saving your progress, click Don’t save.
3. Switch to the Microsoft PowerApps browser tab.
4. For the <Your Name> - Conference Sessions app, click the ellipsis, and then click Delete.
5. In the confirmation dialog, click Delete from cloud.
6. Repeat the steps (4 and 5) to delete the <Your Name> -Mobile Conference App.
7. Sign out of and close your MeganB browser session.
8. On your iPhone:
a. Close the <Your Name> -Mobile Conference App.
9. On your iPhone:
a. Close the <Your Name> - Conference Sessions app.

22