Creating a Swag Inventory App

Veronica Ward, Product Designer, 2017년 6월 16일 금요일

From Build to the Data Insights Summit, Microsoft hosts many conferences throughout the year. During these conferences, tons of swag is given to attendees to increase booth traffic and business leads. But what if a booth runs out of swag? Is there a more seamless way to manage inventory? Also, is there a better way to connect with potential business contacts? We used PowerApps to create the Swag Inventory Management app to help with this real-life scenario.

SCENARIO
Imagine you're hosting a booth and handing out swag in hopes of getting more business leads. A visitor arrives and takes a bottle from your table. This is when the Swag Inventory Management app comes into play.

First, open the app. On the Welcome screen, press the SELECT SWAG button which will bring you to the Select swag screen with a list of all the swag at your booth. Ask the visitor for their contact information so you can record their name and email address. Next, confirm that the bottle they're holding is the item selected in your gallery. If it is, press the GIVE & RECORD button to submit.

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.

PREPERATION

Before building this app, please download the folder by clicking the link. The folder contains design assets, a starter app, and an Excel spreadsheet.

This tutorial will give instructions on how to build the app on the web version of PowerApps—however, 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.

Let's start building …

STEP 1- CREATING AN ENVIORNMENT

1. Go to https://powerapps.microsoft.com/en-us/

2. Sign in as yourself

3. Once you're logged in, select the Settings icon in the top right corner of the page

4. Select Admin center to continue

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

6. Name the environment Contoso Test, then select the Region as United States and tap the Create environment button

Environments are places to store, manage, and share apps that you make. They serve as containers to separate apps that may have different roles, security requirements, or target audiences
This app is being created in a new environment to help introduce the idea of environments, but more established users can create apps in any environment they choose

7. Select Create database

Creating the database will allow users to collect, store, and share data

8. Choose Give all users access and tap Create my database

Giving all users access means that anyone can use the app created in that environment
To restrict access and choose who gets to use the app, select Restrict access
Note that there is a limit to the number of environments one person can create

STEP 2 - CREATING ENTITIES

1. Go to https://web.powerapps.com

2. Adjust the Environment dropdown in the top right corner to the Contoso Test Environment that was recently created

3. In the left side-panel, select the Common Data Service dropdown and choose Entities to continue

Custom entities are being created to store data that is specific to this app
Some entities are premade and accessible within Common Data Service, such as Contact, which stores basic contact information

4. In the right hand corner, select New entity

5. Label the New entity name as Swag and the Display name as Swag, as pictured below

Because the custom entity will hold data that involves handing out swag, the new entity will be named Swag and use the same name as the display name

6. Tap Next to continue

7. Select Add field

This entity will store four custom fields that all involve swag: Asset image URL (images of the swag), Name (the name of the swag item), Quantity (the amount of swag a booth owner has), and Booth name (the name of the booth owner)

8. Enter in the New field information for Asset image Url and set the Display name to Asset image URL, the Name to AssetImageUrl, and set the Type dropdown to Text

9. Tap the Add field button in the bottom right to continue adding custom fields

10. Select Add field again and enter in the New field information for Booth name and set the Display name to Booth name, the Name to BoothName, and set the Type dropdown to Text

11. Tap the Add field button in the bottom right to continue adding custom fields

12. Choose Add field again and enter in the New field information for Name and set the Display name to Name, the Name to Name, and set the Type dropdown to Text

13. Tap the Add field button in the bottom right to continue adding custom fields

14. Select Add field again and enter the New field information for Quantity and set the Display name to Quantity, the Name to Quantity, and set the Type dropdown to Number

15. Choose Add field in the bottom right corner to continue

16. Save the entity by tapping the Save Entity button in the bottom right corner

17. Select Import data

This step adds the data from the Excel spreadsheet

18. Tap the Search button to find the Excel spreadsheet

19. Select the file titled Swag.xlsx, then choose Open

20. Once the file has loaded, tap the Import button in the top right corner

A green Import successful message will appear when the import is officially complete

STEP 3 - OPENING THE STARTER APP

1. Go to https://web.powerapps.com and navigate to the left-side panel and select New app

2. The studio portal will open. Navigate to the left side-panel and tap Open

A starter app has been created to assist in the default styling of the app

3. Select Browse to search for the starter file

4. Choose the file title SwagTheme.msapp and click Open

Once the file is opens, the screen will turn to a dark background, as displayed below

STEP 4- ADDING DATA

1. Before connecting to data, it’s considered good practice to rename screens as soon as they are created. To do this, navigate to the Home ribbon and select the Screen1 dropdown and rename the screen to SwagScreen

Naming screens, motifs, buttons, controls, and labels makes finding these controls easier in the future. It also makes it easier to connect information when creating formulas

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 button in the right side panel

Adding a data source takes the data from an external source (such as data from CDS) and connects it to your application
This application will connect data through CDS (pulling the data that was imported earlier when adding entities into your application)

3. Select Common Data Service from the right-side panel as shown below

4. Find the Swag entity and select the box, then tap the Connect button

STEP 5- ADDING A GALLERY

1. To add a Gallery, navigate to the Content ribbon and select Insert, then choose the Gallery dropdown and tap Blank horizontal

Galleries can show multiple entries from a data source. This particular gallery will hold images of the booth’s swag selection, the names of the swag, and the quantity of swag
There are six default gallery options, but because this particular gallery will contain a lot of custom information, a blank one is being added as a starting point

2. Rename the Gallery by selecting the Gallery1 dropdown from the Content ribbon and change the name to SwagGallery

Galleries need to be named to stay help files stay organized
When a Gallery is named something generic like Gallery1 it can become confusing to write functions that reference them. To easily identify what a gallery is, name each one as soon as it’s added to the file

3. Connect the gallery to data by selecting the Gallery then going to the right side-panel, and under Content select the CustomGallerySample dropdown and change to Swag

This step is connecting the data from the Swag entity that was imported, and attaching it to the gallery that was inserted
Alternatively, the same task can be done by adjusting the Items property to Swag

4. While the Gallery is selected, tap the blue text labeled Add an item from the Insert tab

To fill up the blank Gallery with content, an image is being inserted that will connect to data from the Swag entity

5. Navigate to the Media dropdown and select Image

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 from SampleImage to ThisItem.AssetImageUrl

ThisItem.AssetImageUrl is a set of images that was saved into the Common Data Service
All child elements are listed as ThisItem. which is from the initial parent item (which is the Gallery)
There is a column named AssetImageUrl with links to images of the swag. By changing the name of the sample image to ThisItem.AssetImageUrl, the data from that column is now bound to the image, which will display the images from the column

7. Select the Edit icon in the left corner of the Gallery to edit the spacing around the image

The final product will have one image of swag, so we need to adjust the bounding box by dragging it outward, as displayed below

8. Adjust the width of the Gallery box to fit the boundaries of the box, as displayed below on the right

9. Select the image of the water bottles and adjust the size to fit the entire box, as displayed below

10. While the Gallery is selected, go to the Gallery ribbon and select Show scrollbar to hide the scrollbar

Galleries will default to include a scrollbar, however this gallery doesn't need a scrollbar so it's being hidden
Alternatively, the same task can be done by setting the ShowScrollbar property to false

11. While the Gallery is selected, tap Show Navigation to initiate a navigation arrow

Show navigation prompts an arrow that you can select to navigate to the next image in the gallery
Alternatively, the same task can be performed by setting the ShowNavigation property to true

12. While the Gallery is selected, insert a textbox by going to the Insert ribbon and selecting Label

13. Change the Text property of the inserted label to ThisItem.Name

This step is connecting the entity field created earlier called Name to the label that was inserted

14. Change the color of the text to a medium gray by navigating to the Home ribbon and selecting the A, then choose the gray color as displayed below

Alternatively, the same task can be performed by adjusting the Color property of the text to RGBA(125, 125, 125, 1)

15. Copy and paste the Label that was just created by hitting CTRL+C then CTRL+V for Windows, or Command+C then Command+V for Mac

16. Change the Text property of the copied label to ThisItem.Quantity

17. Position the Labels as shown below

18. To include text in front of the Quantity label that was added, type "Current QTY: " & ThisItem.Quantity

When text is in quotation marks that means the text is now a string
The & symbol appends strings to display both what is in quotes, as well as the data from ThisItem.Quantity

STEP 6- ADDING A PAGE HEADER

1. To add media to your PowerApps file, navigate to the Content ribbon and select Media

2. Choose Browse in the top right

3. Navigate to the Assets folder and select all of the images, then tap Open

4. When the images load, tap the left arrow in the left side-panel to navigate back to the file

5. Add the header by going to the Insert ribbon and choosing the Media dropdown and selecting Image

6. Change the Image property to Header, as displayed below

The name of the image was saved as Header.png. To populate the loaded content, the image property must be set to the name of the loaded content

7. Adjust the bounding of the image to fit the width of the page and the height displayed below, move the image to the top of the page

8. If there's any space between the image and the edge of the bounding box, adjust the ImagePosition property of the image to ImagePosition.Fill to have the image fill the entire box

9. Navigate to the Insert ribbon and select Label to begin to add text to the header

10. While the label is selected, adjust the property dropdown and choose Size, changing it from 16 to 22

Alternatively, the same task can be performed by navigating to the Home ribbon and selecting the text Size dropdown and typing in 22

11. Select the property dropdown and choose Align, then change the property to Align.Center

Alternatively, the same task can be performed by navigating to the Home ribbon and tapping the Text Align icon and choosing Center

12. Select the property dropdown and choose Text, change the property to "SWAG LIST"

When a text property is written with quotations around the text the text becomes a string and will be visible within the app as displayed below

STEP 7 - ADDING A BUTTON

1. To add a button, navigate to the Insert ribbon and select Button

2. Move and adjust the size of the button under the gallery, as displayed below

The button width should match the width of the Gallery

3. Adjust the text of the button by changing the Text property of the button to “GIVE & RECORD”

4. Save the progress by navigating to the ribbon and clicking File, tap on the Save as text in the left-side panel. Name your file Swag and click the save button in the bottom right of the screen

Stay tuned for more of this tutorial, posted to the blog soon.