Building an Internal Event Calendar App in Flight
Recently I volunteered to create a calendar app that we could use to share events across our organization, especially in the areas of Diversity and Inclusion. The target goal was to enable us to broadly share relevant events, yet to allow consumers of the app to decide which events they would like added to their calendars. This was a really fun project where I was able to finish most of it on a flight from DC to Seattle. The secret to building this app so quickly was a small amount of planning before getting to the airport. In this blog I’ll share how I approached the planning of the app, and an overview video on how I did it. If you're not interested in the approach, feel free to jump straight down to the YouTube video (smiles). Including post-draft tweeks from user feedback, the actual app build took only a few hours (because I was so fussy about the custom layout). IMO that is exceptionally fast though, especially when I think of how much harder this experience would be to recreate using traditional form-based tools like InfoPath for instance.
Planning Day 1
(took about 2 hours) – On the Friday before the Microsoft Inspire Conference
Sketching…
I usually start by storyboarding my app project using either paper and pencil, or PowerPoint. The key for me with storyboarding is that I don’t want to be distracted by software. It should be very easy to mock up my thoughts without having to hunt and peck through menus. Therefore, paper and pencil will work best unless I need to share the design with others for concensus. In the later case, or where the mock up may iterate, I use a PowerPoint template which has only 2 to 3 slides.
Slide 1: This is a slide that can only have 5 bullets maximum, and it defines my Minimal Viable Product (focus on ‘viable’ and not on minimal). Since, I can sometimes overthink things, this is how I scope myself for the build. In this case my 5 bullets were:
Slide 2: This slide is all about how I want the end user to experience the app. I will sketch out what they should see on the first screen, and what they should see if they select something. Remember that this doesn't have to be a perfect mock-up. Accept the fact that you may get new ideas while building your app, and that iteration is often on the road to innovation.
Feasibility…
The next step is to determine feasibility. This is where I create a list of features that I map to controls and formulas. I start by building out my event calendar in SharePoint. I finish prepping my data by setting permissions on the calendar, as I can trust that PowerApps respects SharePoint permissions. To determine feature feasibility, I’ll have a quick hallway chat with potential app users to get an idea of what they would like to be able to do. Finally, to check technical assumptions, I will open a blank app and play around with control configurations to be sure I know how to meet the requirements. At this point I am not worrying about the 'look' of the app yet, just the functional requirements. For example: figuring out what I need to do in order to 'add the calendar event to their calendar'. Sometimes this leads to me doing a bit of research using the Reference Formulas , or the documentation on connectors. I'll update my sketch based on what I learn in this step.
Design Folder…
I like to create a single folder where I store all my “design” components, or dependencies. I’ll create a single design folder on my desktop, and then stuff it full of fun media. If you’re wondering where I get my design ideas: I search for ideas using Bing search, or from Pinterest. I look for app designs that are close to what I’m looking to do, and then I modify my inspirations to meet my business requirements. For example, one of my favorite places to get icons is in PowerPoint or Outlook. Both applications have a recently released feature called “Icons” in the insert menu. You can find tons of easy to use (and to recolor) icons there. After adding them, just right click on them and save them as an image. Then you will upload them as embedded media in your app. I also add a single text file to my design folder with: 1) color palette selections with their RGBA equivalents, 2) the list of URLs for SharePoint, and 3) required connections FYI: I’ll often prep an app file with the connections already added, saving a local copy to my desktop for offline builds (see this blog for offline configuration here). Completed design shown below:
Draft 1 App Build – On the flight coming back from the Microsoft Inspire Conference
The Build…
Due to the great conversation I was having with Archana on the flight to the conference, I decided to build my events calendar app on the way back. The build was relatively easy, just pulling elements from my design folder as I tackled by app build screen-by-screen. Check out the video below for an overview of how I did this app (here is a link to my design notes with all the formulas/functions):
Known issue: Currently when you connect to a non-custom list in SharePoint Online, you must type the name of the list into a text input box (shown below). Therefore, the name of the SharePoint list must match exactly what you type. Please remember to tell site owners about this as well, because if they change the list display name then your app will break. The key here is to note that the app is connected via the list "display name" rather than the internal name when you make this connection by typing, rather than by selecting the list name. Internal names are referenced for all other connection types.
I hope this helps you to plan and create apps more quickly using PowerApps. It always amazes me how quick, and beautiful, our apps can be with just a little bit of planning, and a few ‘creative’ touches inspired by our consumers!
Enjoy!
Audrie
P.S. To learn more about how Microsoft fosters Diversity & Inclusion check out this site. https://www.microsoft.com/diversity/default.aspx