Through this and the next two blog posts, I’ll give a step-by-step tutorial of how you can create this app yourself. This post includes a quick introduction and the beginning stages of building the app.<\/p>\n
\u00a0 \u00a0<\/p>\n PREPERATION<\/p>\n Before building this app, please download<\/a> the folder by clicking the link. The folder contains design assets, a starter app, and an Excel spreadsheet.<\/p>\n This tutorial will give instructions on how to build the app on the web version of PowerApps\u2014however, you can also choose to build in the Studio version of PowerApps. If you build the app on the web, we recommend using the newest version of Google Chrome or Internet Explorer.<\/p>\n Let’s start building \u2026<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n STEP 1- CREATING AN ENVIORNMENT<\/p>\n 1. Go to https:\/\/powerapps.microsoft.com\/en-us\/<\/a><\/p>\n 2. Sign in as yourself<\/p>\n 3. Once you’re logged in, select the Settings icon in the top right corner of the page<\/p>\n 4. Select Admin center<\/strong> to continue<\/p>\n \u00a0<\/p>\n 5. The Admin center will open in a new window and display the environments already created (or no environments for new users). Select New environment in the top right corner<\/p>\n \u00a0<\/p>\n 6. Name the environment Contoso Test, then select the Region as United States and tap the Create environment button<\/p>\n \u00a0<\/p>\n 7. Select Create database<\/strong><\/p>\n \u00a0<\/p>\n 8. <\/strong>Choose Give all users access <\/strong>and tap Create my database<\/strong><\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n STEP 2 – CREATING ENTITIES<\/p>\n 1. Go to https:\/\/web.powerapps.com<\/a><\/p>\n 2. Adjust the Environment<\/strong> dropdown in the top right corner to the Contoso Test Environment that was recently created<\/p>\n 3. In the left side-panel, select the Common Data Service<\/strong> dropdown and choose Entities<\/strong> to continue<\/p>\n \u00a0<\/p>\n 4. In the right hand corner, select New entity<\/strong><\/p>\n \u00a0<\/p>\n 5. Label the New entity name<\/strong> as Swag and the Display name<\/strong> as Swag, as pictured below<\/p>\n 6. Tap Next<\/strong> to continue<\/p>\n \u00a0<\/p>\n 7. Select Add field<\/strong><\/p>\n \u00a0<\/p>\n 8. Enter in the New field<\/strong> information for Asset image Url and set the Display name<\/strong> to Asset image URL, the Name<\/strong> to AssetImageUrl, and set the Type<\/strong> dropdown to Text<\/p>\n \u00a0<\/p>\n 9. Tap the Add field<\/strong> button in the bottom right to continue adding custom fields<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n 10. Select Add field<\/strong> again and enter in the New field<\/strong> information for Booth name<\/strong> and set the Display name<\/strong> to Booth name, the Name<\/strong> to BoothName, and set the Type<\/strong> dropdown to Text<\/p>\n 11. Tap the Add field<\/strong> button in the bottom right to continue adding custom fields<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \n12. Choose Add field<\/strong> again and enter in the New field<\/strong> information for Name<\/strong> and set the Display name<\/strong> to Name, the Name<\/strong> to Name, and set the Type<\/strong> dropdown to Text<\/p>\n 13. Tap the Add field<\/strong> button in the bottom right to continue adding custom fields<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n 14. Select Add field<\/strong> again and enter the New field<\/strong> information for Quantity<\/strong> and set the Display name<\/strong> to Quantity, the Name<\/strong> to Quantity, and set the Type<\/strong> dropdown to Number<\/p>\n 15. Choose Add field<\/strong> in the bottom right corner to continue<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n 16. Save the entity by tapping the Save Entity<\/strong> button in the bottom right corner<\/p>\n \u00a0<\/p>\n 17. Select Import data<\/strong><\/p>\n \u00a0<\/p>\n 18. Tap the Search<\/strong> button to find the Excel spreadsheet<\/p>\n \u00a0<\/p>\n 19. Select the file titled Swag.xlsx, then choose Open<\/strong><\/p>\n \u00a0<\/p>\n 20. Once the file has loaded, tap the Import <\/strong>button in the top right corner<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n STEP 3 – OPENING THE STARTER APP<\/p>\n 1. Go to\u00a0 https:\/\/web.powerapps.com<\/a> and navigate to the left-side panel and select New app<\/strong><\/p>\n 2. The studio portal will open. Navigate to the left side-panel and tap Open<\/strong><\/p>\n \u00a0<\/p>\n 3. Select Browse<\/strong> to search for the starter file<\/p>\n \u00a0<\/p>\n 4. Choose the file title SwagTheme.msapp and click Open<\/strong><\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n STEP 4- ADDING DATA<\/p>\n 1. Before connecting to data, it\u2019s considered good practice to rename screens as soon as they are created. To do this, navigate to the Home<\/strong> ribbon and select the Screen1<\/strong> dropdown and rename the screen to SwagScreen<\/p>\n \u00a0<\/p>\n 2. Now that the custom entities are set up and the starter app is loaded, the app can begin to be built within PowerApps. Begin by clicking the Add data source<\/strong> button in the right side panel<\/p>\n \u00a0<\/p>\n 3. Select Common Data Service<\/strong> from the right-side panel as shown below<\/p>\n \u00a0<\/p>\n 4. Find the Swag<\/strong> entity and select the box, then tap the Connect<\/strong> button<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n STEP 5- ADDING A GALLERY<\/p>\n 1. To add a Gallery, navigate to the Content ribbon and select Insert, then choose the Gallery dropdown and tap Blank horizontal<\/p>\n \u00a0<\/p>\n 2. Rename the Gallery<\/strong> by selecting the Gallery1<\/strong> dropdown from the Content<\/strong> ribbon and change the name to SwagGallery<\/p>\n \u00a0<\/p>\n 3. Connect the gallery to data by selecting the Gallery<\/strong> then going to the right side-panel, and under Content<\/strong> select the CustomGallerySample dropdown and change to Swag<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n 4. While the Gallery<\/strong> is selected, tap the blue text labeled Add an item from the Insert tab<\/strong><\/p>\n \u00a0<\/p>\n 5. Navigate to the Media<\/strong> dropdown and select Image<\/strong><\/p>\n \u00a0<\/p>\n 6. Now that a sample image has been inserted into the Gallery, connect the data to the image by changing the property of the Image<\/strong> from SampleImage to ThisItem.AssetImageUrl<\/p>\n \u00a0<\/p>\n 7. Select the Edit<\/strong> icon in the left corner of the Gallery<\/strong> to edit the spacing around the image<\/p>\n \u00a0<\/p>\n 8. Adjust the width of the Gallery<\/strong> box to fit the boundaries of the box, as displayed below on the right<\/p>\n \u00a0<\/p>\n 9. Select the image of the water bottles and adjust the size to fit the entire box, as displayed below<\/p>\n \u00a0\u00a0\u00a0\u00a0 \u00a0<\/p>\n 10. While the Gallery<\/strong> is selected, go to the Gallery<\/strong> ribbon and select Show scrollbar<\/strong> to hide the scrollbar<\/p>\n![\"SCREENS\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ebfb02a5-5ac6-48b8-8ed7-02c0a990cfd7.png\" "\\"SCREENS\\"")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n\n<\/ul>\n
\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n<\/ul>\n
\n
<\/a><\/p>\n<\/a><\/strong><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/strong><\/p>\n\n
<\/a>\u00a0\u00a0<\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\n\n<\/ul>\n
<\/a>\u00a0\u00a0\u00a0\u00a0 <\/a><\/p>\n<\/a>\u00a0\u00a0\u00a0\u00a0 <\/a><\/p>\n\n