Download to read offline
Uploaded byNicolas Georgeault
SPS Toronto 2018 - Your first PowerApps in 30 minutes
The document outlines a session on building a PowerApps application aimed at non-developers, emphasizing objectives like creating an app from a SharePoint list and learning best practices. It provides a scenario involving an end user needing an app for event staffing and emphasizes the importance of documentation, user stories, and collaboration during app creation. Additionally, it includes resources and links for further learning about PowerApps and data management solutions.
More Related Content
Similar to SPS Toronto 2018 - Your first PowerApps in 30 minutes
More from Nicolas Georgeault
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
SPS Toronto 2018 - Your first PowerApps in 30 minutes
- 1. LEVEL 200 You’re nota developer Build your first PowerApps application in 30 minutes NOV 24 SharePoint Saturday Toronto #SPSToronto Nicolas Georgeault Senior Architect, MuBrain Inc. #PowerApps
- 2.
- 3. 3 SharePint SharePint The Drake &Firkin 6982 Financial Dr, Mississauga, ON L5N 8J4
- 4. About me • Founderand PPM @MuBrain Inc. • 20 years of experience in KM • 12 years with Microsoft SharePoint • Microsoft Specialist and Partner • MVP for 8 years • Machine Leaning certificate from Stanford University • Co-author of books about SharePoint • Mad about Jazz music and HorseBall
- 5. #CollaborateCanada Objectives • Discover PowerApps •Create an App from a SharePoint list • Discover the Model-Driven Model • Learn best pratices • Get some takeaways
- 6.
- 7.
- 8.
- 9.
- 10. #CollaborateCanada Scenario Megan Bowen isan end user working for Contoso Electronics’ Marketing team. She and other members of her team need an app to identify and staff various electronics events Clickthrough scenario from https://demos.Microsoft.com
- 65.
- 66. I don’t alwaystest my code But when I do, I do it in production
- 67. #CollaborateCanada Takeaways • Document allyour work and changes • Do not forget to write User stories even if creation is simple for you • Export apps to keep all information centralized in a source control solution • Use Teams to organize collaboration around App creation • Think globally about your versioning – App, PowerApps platform and data sources • Include the defined Data Model and future evolutions • Always think to the guys that will modify this app in the next 6 months…
- 68. With great power theremust also come… Great responsibility!
- 69.
- 70.
- 71. #CollaborateCanada More about DataGateway… https://www.slideshare.net/ngeorgeault /guspqc-qubec-avril-2018-la-passerelle- de-donnees-locale
- 72. #CollaborateCanada Credits • Microsoft Demoscontent used for the Scenario. • To get the full step by step training and demo content and a trial version of Office 365 tenant with content ready to use, connect on http://demos.Microsoft.com • You’ll find the PowerApps “Event to Staff” scenario in 3 versions: • Beginner, Intermediate and advanced
- 73.
- 74. 74 SharePint SharePint The Drake &Firkin 6982 Financial Dr, Mississauga, ON L5N 8J4
Editor's Notes
- #11 Megan Bowen is an end user working for Contoso Electronics’ Marketing team. She and other members of her team need an app to identify and staff various electronics events
- #12 Showing the end user experience Starting apps from a list view The Marketing team at Contoso Electronics, like many other teams, utilizes SharePoint lists to access, share, and collaborate around structured data. Megan Bowen, as a member of this team, uses this Events to Staff list to track important industry conferences and trade shows, and whether her team has adequate staffing plans for them. POINT OUT In the browser session, in the Events to Staff list, show the events that are already being tracked. CLICK STEP(S) At the top right, click the All Items drop-down.
- #13 With the SharePoint modern list experience, Megan can use a view to launch a simple app that was created in Microsoft PowerApps. The app allows her to manage these event items and was built without a single line of code. CLICK STEP(S) Click Events to Staff - Beginner to change the view.
- #14 The app starts directly in the browser, but Megan could also access the app from any device. CLICK STEP(S) In that view, click Open to start the app in the browser.
- #15 Using the browse screen In this case, the app is a slightly-modified version of one created, in context, with the default web designer experience. CLICK STEP(S) When the app starts, click on the right of the app to scroll down and show the full list of items.
- #16 It uses the data and schema from the list and has the standard three-screen experience for discovering and managing items, with just a small amount of formatting and logic applied. CLICK STEP(S) Click to the right of the app to scroll up.
- #17 A corporate logo and Create new item icon appear at the top of the browse screen. POINT OUT: At the top right, pause on the Create new item icon (plus sign). At the bottom, Megan can refresh the list, change the sorting, or exit the app. POINT OUT: At the bottom, pause on the Refresh list (circle), Sort list (up and down arrows), and Exit app (x) icons. Near the top, in the Search items box, she can filter the view with a text search, which is extremely helpful when there are hundreds or thousands of items in the list. CLICK STEP(S) Near the top, click in the Search items box to initiate typing.
- #18 [PowerPoint will auto-type consumer.] Using the detail screen For any item, clicking the corresponding right arrow icon takes Megan to the event details screen. CLICK STEP(S) In the list of results, in the Consumer Electronics Show (CES) item, click the > icon to show details.
- #19 This read-only view provides a quick summary of each event, pulling data directly from the SharePoint list. At the top, the Back to list icon allows her to return to the browse screen. POINT OUT: At the top left, pause on the Back to list (<) icon. At the bottom, she can edit the item, delete the item, or exit the app. POINT OUT: At the bottom, pause on the Edit this item (pencil), Delete this item (trash can), and Exit app (x) icons. Using the edit screen At the top right, Megan clicks the + icon to start the third screen, where she can create a new event item in the list. CLICK STEP(S) At the top right, click the Create new item (+) icon.
- #20 The editable form has controls bound directly to the SharePoint list columns. CLICK STEP(S) Click in the Title box to initiate typing.
- #21 [PowerPoint will auto-type Contoso Electronics Expo] CLICK STEP(S) Click in the Event Coordinator box to initiate typing.
- #22 [PowerPoint will auto-type mir.] This People or Group control works just like it would in the modern list experience. Megan types a few characters and then gets a list of possible results from which to select. CLICK STEP(S) Click Miriam Graham.
- #23 CLICK STEP(S) Click the Estimated Size list.
- #24 PowerApps supports choice… CLICK STEP(S) Click Medium.
- #25 …Yes/No… CLICK STEP(S) Click the Status list.
- #26 …and many other column types. CLICK STEP(S) Click Resourcing in Process.
- #27 When she has filled out her required data, at the bottom, Megan clicks the Submit item icon to create a new item in the list. CLICK STEP(S) At the bottom left, click the Submit item (checkmark) icon.
- #28 CLICK STEP(S) At the bottom right, click the Exit app icon.
- #29 CLICK STEP(S) Switch to the Electronics Events browser tab.
- #30 After exiting the app, she switches back to the Events to Staff list. CLICK STEP(S) At the top right, click the Events to Staff - Beginner drop-down.
- #31 CLICK STEP(S) Click All Items.
- #32 Within the default All Items view, she confirms that her new item has been added. POINT OUT: Point to, but do not click, the new Contoso Electronics Expo item. The effort required from Megan to build the app was less than a day, since she leveraged PowerApps integration with SharePoint, and made mostly light UX modifications. Now, let’s see how quickly Megan can build a comparable app from scratch. Building a simple app from scratch Automatically creating an app from a list The SharePoint modern list experience offers users a quick entry point to build an app in a matter of seconds, without the need for custom code. End users, like Megan, can leverage PowerApps to extend their solutions with relative ease, while professional developers can extend solutions even further with custom APIs and connectors. CLICK STEP(S) In the set of controls at the top of the list, click PowerApps.
- #33 In the list of controls at the top, the Create an app option provides seamless integration with PowerApps. CLICK STEP(S) Click Create an app.
- #34 When Megan specifies an app name in the flyout… CLICK STEP(S) In the flyout that appears to the right, click in the Name box to initiate typing.
- #35 [PowerPoint will auto-type Sample Event Tracker.] … and clicks Create… CLICK STEP(S) Click Create.
- #36 …the PowerApps web designer starts directly in the browser. Since the web designer knows the context of the list where Megan initiated the app, PowerApps can build a default three-screen experience using that list’s schema and data. Changing display data on the browse screen At the left, the web designer provides a Screens pane that makes it easy for Megan to navigate app screens and select controls. On the default browse screen, each item is displaying the event location, instead of the event name. Using the Screens pane, she selects the Title1 control… CLICK STEP(S) In the PowerApps Studio left navigation, within BrowseScreen1 >> BrowseGallery1, click Title1.
- #37 …and then changes the Text property so that it pulls data from the SharePoint list’s Title column. If she wanted to display more event information, she could leverage the corresponding Subtitle1 and Body1 controls and have them pull data from other list columns. CLICK STEP(S) At the top of PowerApps Studio, with the Text property selected, change the value to ThisItem.Title.
- #38 [PowerPoint will select City, then auto-type Title.] Adding an image to a screen Megan can easily incorporate images, videos, and audio into her app. Using the File tab in the web designer’s ribbon… CLICK STEP(S) In the ribbon, click the File tab.
- #39 …she can access the app’s Media page, where she can import and reference any of these multimedia files. CLICK STEP(S) In the left navigation, click Media.
- #40 If you recall from the end-to-end experience earlier, the app had a logo at the top of the browse screen. Here, Megan demonstrates how to include that logo into the app by clicking Browse… CLICK STEP(S) At the top right, click Browse.
- #41 …and then navigating to the Contoso logo on her local machine. CLICK STEP(S) In the left navigation, click Pictures.
- #42 CLICK STEP(S) Click the ContosoLogo.png. NOTE: In the actual demo you would double-click the image.
- #43 CLICK STEP(S) At the top left, click the <- icon to return to the designer.
- #44 Returning to her browse screen, Megan uses the Insert tab to insert an image control from the Media gallery. CLICK STEP(S) In the ribbon, click the Insert tab.
- #45 CLICK STEP(S) Click the Media drop-down.
- #46 CLICK STEP(S) Click Image.
- #47 With the Image property for that control selected by default, all she must do is set the corresponding value to the name of the image that was added. CLICK STEP(S) At the top of PowerApps Studio, click ThisItem.Logo property to initiate typing.
- #48 [PowerPoint will auto-type ContosoLogo.] If Megan needs to resize the image quickly, she can click one of the control’s corners and drag as needed. If she needed more precision with the image’s dimensions, she could modify the control’s Height and Width properties. Then, to move the image to the top title bar, Megan clicks one of the control’s sides and drags it up as needed. In just a few clicks, she has successfully branded her app. CLICK STEP(S) Click the image to resize and move it to the right of the Events to Staff heading.
- #49 CLICK STEP(S) In the PowerApps Studio left navigation, click the scroll bar.
- #50 Changing colors Many organizations have branding guidelines, which may include a color palette. Megan can easily comply with such guidelines. Changing font colors and background colors in the web designer is as simple as selecting a control and then editing certain properties. CLICK STEP(S) In the PowerApps Studio left navigation, click DetailScreen1.
- #51 CLICK STEP(S) In the left navigation, click the scroll bar.
- #52 In this case, Megan just wants to change the background color of the detail screen’s title bar. CLICK STEP(S) In the left navigation, within DetailScreen1, click RectQuickActionBar2.
- #53 Using the Screens pane, she selects the corresponding control. CLICK STEP(S) At the top of PowerApps Studio, click the property selector.
- #54 The property selector is set to OnSelect by default, so she changes it to Fill. CLICK STEP(S) Click Fill.
- #55 Now, she can adjust the background color by entering the correct RGB value. Again, in just a few clicks, Megan can apply basic branding to different elements of her app. CLICK STEP(S) Click RGBA to initiate typing.
- #56 [PowerPoint will auto-type 43,67,119,1.] Saving, publishing, and sharing an app With her light modifications in place, Megan is now ready to deploy her app. In the File tab… CLICK STEP(S) Click the File tab.
- #57 …clicking Save will save the progress she has made thus far. CLICK STEP(S) Click Save.
- #58 The app will not be available publicly, but at least she can pick up where she left off if she decides to revisit her design tasks later. CLICK STEP(S) Click Publish.
- #59 When Megan publishes… CLICK STEP(S) Click Publish this version.
- #60 …the app becomes available to everyone with whom it is shared. CLICK STEP(S) Click Share this app.
- #61 In this case, since the app is new, sharing has not been set up yet, but Megan can do that on the Share screen. POINT OUT: In the browser tab that starts, pause on the Add everyone in my org option. Note the ability here to share with the entire organization. CLICK STEP(S) Click in the Enter names, email addresses, or user groups box to initiate typing.
- #62 [PowerPoint will auto-type isa.] Initially, Megan wants to share the app with Isaiah, another member of the Marketing team with whom she collaborates frequently on event staffing. CLICK STEP(S) In the list of results, click Isaiah Langer.
- #63 She adds him to the app’s Shared with list. Once added, Megan can change permissions so that, in addition to using the form, Isaiah can edit it as well. CLICK STEP(S) In the Shared with area, click the Permission list for Isaiah to show options.
- #64 Megan then saves her changes so that Isaiah can now use and/or edit the new app. CLICK STEP(S) Click Save.
- #65 Conclusion In a few minutes, Megan leveraged PowerApps to build an app that connects with SharePoint Online. She extended her Microsoft 365 solution with relative ease, and her app required no custom design or code. Additionally, the app can be used by different members of the organization and on any device. End of Demo
- #66 Megan Bowen is an end user working for Contoso Electronics’ Marketing team. She and other members of her team need an app to identify and staff various electronics events