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.
- Creating an Exchange Meeting Rooms API with Azure Functions
- Create a Microsoft PowerApps App to View Meeting Room Bookings (this post)
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!