{"id":177,"date":"2017-08-03T03:23:10","date_gmt":"2017-08-03T10:23:10","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/building-an-internal-event-calendar-app-in-flight\/"},"modified":"2024-09-24T14:53:40","modified_gmt":"2024-09-24T21:53:40","slug":"building-an-internal-event-calendar-app-in-flight","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/building-an-internal-event-calendar-app-in-flight\/","title":{"rendered":"Building an Internal Event Calendar App in Flight"},"content":{"rendered":"

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<\/em> getting to the airport. In this blog I\u2019ll 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.<\/p>\n

Planning Day 1<\/strong>
\n(took about 2 hours) \u2013 On the Friday before the Microsoft Inspire Conference<\/h3>\n

Sketching\u2026<\/strong><\/h3>\n

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\u2019t 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.<\/p>\n

Slide 1: This is a slide that can only have 5 bullets maximum, and it defines my Minimal Viable Product<\/u><\/a> (focus on \u2018viable\u2019 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:<\/p>\n

\u00a0<\/p>\n

\"\"<\/p>\n

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.<\/p>\n

<\/p>\n

\u00a0<\/h3>\n

Feasibility\u2026<\/strong><\/h3>\n

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\u2019ll 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\u00a0 <\/em>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 <\/a>, or the documentation on connectors<\/a>. I’ll update my sketch based on what I learn in this step.<\/p>\n

\u00a0<\/p>\n

Design Folder\u2026<\/strong><\/h3>\n

I like to create a single folder where I store all my \u201cdesign\u201d components, or dependencies. I\u2019ll create a single design folder on my desktop, and then stuff it full of fun media. If you\u2019re 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\u2019m 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 \u201cIcons\u201d in the insert menu<\/u><\/a>. 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<\/u><\/a> 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\u2019ll 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<\/a>). Completed design shown below:<\/p>\n

\"\"<\/p>\n

\u00a0<\/h3>\n

Draft 1 App Build <\/strong>\u2013 On the flight coming back from the Microsoft Inspire Conference<\/h3>\n

\u00a0<\/h3>\n

The Build\u2026<\/strong><\/h3>\n

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<\/strong><\/a> with all the formulas\/functions):<\/p>\n