Skip to main content

Create a Microsoft PowerApps App to View Meeting Room Bookings

In this series of posts I am creating three Azure Functions to provide an API for use with PowerApps, via a custom connector, to display bookings from Exchange Online meeting rooms.

In this final post of the series we will now use the Azure Functions API in the PowerApps app.

Open up PowerApps studio and create a new blank Phone layout.

On the first screen, drop in a rectangle shape (which is found on the Insert tab, under the Icons drop down) and position it into shape as a header. Add a label (set the colour white for contrast) and change the text to the name of your app.

Then, on the Insert tab click Gallery and choose Vertical.

Position it to take up the available width and height under the header. Give it a name, like 'RoomLists'.

With the control selected, from the properties pane choose the Title layout option.

From the Content drop down just above the layout options, choose Add a Data Source.

Click New Connection. Scroll down until you see the name of the custom connector that was created when exporting the Swagger definition from Azure Functions. Click the connector and then Create.

With the gallery control still selected, access the Items property in the function bar. Start typing in the name of your custom connector and it should come up in the list of available options. Choose GetRoomLists. The final value should be something like: 
'name of your connector'.GetRoomLists().

From the galleries property pane, choose the Name field from the list of available options.

By now we should have our first screen done (change the theme if you want different colours).

Now duplicate the first screen to create the next screen, by right-clicking on the screen name and selecting Duplicate.

Rename the new screen (e.g. 'SelectedRooms') and the gallery control (e.g. 'Rooms').

Back on the first screen, select the gallery control, then the gallery template (click the pencil icon in the circle that appears when the gallery is selected) and then the chevron icon. Set its OnSelect property to Navigate(SelectRooms, ScreenTransition.Cover) (assuming the second screen you created is called 'SelectedRooms').

Select the second screen's gallery control and change its Items property to use the next function. It should be something like: 
'name of your connector'.GetRooms(RoomLists.Selected.Address) (with 'RoomLists' being the name of the gallery on the first screen).

Also add an icon into the header on the second screen and set its OnSelect property to Back().

Duplicate this second screen, again renaming the screen (e.g. 'Appointments'). As before, setup the chevron icon on the second screens gallery to navigate to this final screen by making the OnSelect property equal to Navigate(Appointments, ScreenTransition.Cover).

Re-size the gallery on the third screen so there is some room above it and insert a label (for the name of the meeting room) and a date picker. Re-name the date picker to AppointmentDate.

Set the text property of the label to Rooms.Selected.Name (with 'Rooms' being the name of the gallery on the second screen).

On the gallery on the third screen, change the Items property to now look up the appointments for the selected room. It should be something like:
'name of your connector'.GetRoom(Rooms.Selected.Address, Text(Year(AppointmentDate.SelectedDate)), Text(Month(AppointmentDate.SelectedDate)), Text(Day(AppointmentDate.SelectedDate)))

Now we need to edit the template for the final gallery. 

Delete the chevron icon. Set the Text property of the label to be ThisItem.Organiser (and style and position it how you want).

Insert another text label above this and set its Text property to:
If(ThisItem.Start = "12:00 AM" && ThisItem.End = "12:00 AM", "All Day Booking", ThisItem.Start & " - " & ThisItem.End)

To add a little more decoration, drop in an icon of a clock to the left of the label showing the appointment time.

For an added bonus, you can also display a message when there are no appointments for the selected date. Without any other control on the third screen selected, add another label and position it about the center of the screen. Change the text to be something like 'There are no appointments for the selected date' and its Visable property to CountRows(Appointments.AllItems) <= 0 (where 'Appointments' is the name of the gallery on the third screen).

If everything is wired up correctly, you can now test out your app and view the bookings for your selected meeting room!


Popular posts from this blog

Create an Exchange Meeting Rooms API with Azure Functions

In this series of posts I am creating three Azure Functions to provide an API for use with PowerApps, via a custom connector, to display bookings from Exchange Online meeting rooms.

IntroductionCreating an Exchange Meeting Rooms API with Azure Functions (this post)Create a Microsoft PowerApps App to View Meeting Room Bookings The Azure Functions described here were developed with Visual Studio 2017 using the Azure Functions Tools Add-in that provides an efficient way to create Azure Functions that can be developed and run locally before being deployed to Azure.

With the tools installed, create a new project using the Azure Functions template.

Once the project is created, right-click on your project in the Solution Explorer and choose Manage NuGet Packages. Search for and install the Microsoft Exchange WebServices package.

Create three C# class files, copying the code below (rename the namespaces as appropriate for your project).

This gets the list of meeting room lists,…

Using Microsoft PowerApps with Azure Functions to View Exchange Meeting Room Bookings

Microsoft PowerApps provides a large range of connectors to access data from external services. However, when the service you require is not there what options are available?

One recent scenario I had was to provide a display of the bookings in our organisation's meeting rooms on a given day. We use Exchange Online, as part of Office 365, to manage our meeting room calendars. I needed a way to connect to these meeting room calendars and present the information easily and quickly.

Happily, PowerApps provides the ability to define a custom connector allowing you to access a Web API which provides quite allot of potential.

Using Azure Functions, its possible to create an API that will expose details of meeting room lists (e.g. meeting rooms per building), meeting rooms for a given list and the bookings for a meeting room on a given day.

This API can be used with PowerApps, via the custom connector, to create the solution:

Over a series of posts, I will go through how to build the …