Creating a Voting App with Power Apps

Nick Brattoli

0 comments

In this tutorial, we’re going to look at how you can create a voting app that includes the following features:

  • Users enter their suggestions.
  • The pending suggestions are reviewed and either approved or rejected.
  • The Approved suggestions are presented on a voting form.
  • Users are allowed to vote for one choice only.
  • The total number of votes cast for each approved suggestion is stored in a SharePoint list.

To create this, we’re going to use a combination of SharePoint and PowerApps & follow these steps…

  • Create and configure a SharePoint list to hold the suggestion data.
  • Build the suggestion app (a form).
  • Build the voting app.

As we go through the process, we will use the following features and formulas…

  • Create a new SharePoint page.
  • Create a new SharePoint list and break inherited permissions.
  • Conditional formatting of a field in a SharePoint list.
  • Amend the OnSelect, OnVisible, Filter, Link to App, Data Default fields.
  • Patch and If formula.
  • Add Buttons, Add Icons, Insert Gallery.
  • Basic formatting of attributes.

So, let’s get started!

Configure SharePoint

Step 1: Create a list in SharePoint to store the suggestions

First, we need to create a list in SharePoint to store all relevant information about the suggestions (who created them, the descriptions, their status and the number of votes received). This list will contain all the data we need to link to when we create the PowerApps in steps 2 and 3.

In your SharePoint site, click “+ New” and then select “List”.

Call the new list “Suggestion Box” and click “create”.

Add new columns to this new list by clicking “+ Add column”.

First, we need a column for the suggestion description, so to allow the users to enter enough detail, we need to choose “Multiple lines of text”.

Call this column “Describe your suggestion” and add a description to encourage the users to explain what their suggestion is all about.

It is also a good idea to get the user to accept terms and conditions for the voting system, and we can achieve this by using a “Yes/No” column as well.

This column name needs to be “I agree to the terms and conditions” and set the default value to “No” (because we want them to have to check the box to agree to the T&C’s).

We do not need to ask for personal details (name/phone number etc.) because the user completes this task while logged into SharePoint. If your Active Directory records are kept up to date, there is no need to ask for this information again.

Now we need to add the columns for the data we want to track. Add a new column with multiple lines of text…

Then call it “Voters” (we’ll come back to this later).

Add another column as a “Number” as this is where we are going to store the number of votes each suggestion receives.

Call this “Vote count” and set it to zero decimal places.

Finally create a status field using the Choice option (we could use a workflow, but for this example, I wanted to show how you can choose your options).

Call this “Suggestion Status” and give 3 options, Pending (this will be the default status), Finalist (the Admins can choose this if they want to put the suggestion forward to a vote) and Rejected (for suggestions that don’t meet the requirements).

So we’ve now created all the fields we need, but we need to change the name of the “title” field and add permissions. To do this, go to the “Settings” menu and select “List settings”.

Select the “Title” column.

Change the column name to “Suggestion Name” and add a description “What do you want to call your suggestion?”.

Then select “Advanced Settings”.

Set the “Read Access” to “Read All Items” (this allows the users to read all of the suggestions) and set the “Create and Edit Access” option to “Create items and edit items that were created by the user” (this ensures that only the user who created the item can edit it at a later stage).

Now we need to ensure that all users can create a suggestion if they want to, regardless of their position in the organisation. Select “Permissions for this list”.

We don’t want this list to have the same permission levels as the rest of the site, so we need to click “Stop inheriting permissions”, and confirm that this is our intention.

Now we need to ensure that visitors can create items, so select the visitors group.

Then select “Edit User Permissions”.

On the next screen, select “Contribute” (Read should already be selected).

At this point, you can start adding suggestions to the list by a variety of methods such as:

  • selecting +New to create a new entry into this list (however this also provides access to the Vote Count and Suggestion Status fields which could cause problems).
  • by choosing the PowerApps drop down and selecting Customize Forms to automate the creation of a basic form (however this does not include any customisations).
  • using SharePoint to remove the additional fields that you don’t want users to see when adding a new item (however this doesn’t really help).
  • creating a basic PowerApp using the drop-down menu (however this will only provide about 80% of the features that we really want to create).
  • creating a bespoke PowerApp containing all the features and having the flexibility we need (which is what we’re going to focus on next).

Create a Form

Step 2: Create a PowerApp to provide a form for users to add their suggestions

In the PowerApps main screen, select “Canvas app from blank”.

Call the app “Suggestion Box”, and because we expect most people to access this on Tablets, I’m going to select “Tablet” (users can access the App on a phone, but the screen size will be optimised for tablets) and click “Create”.

When the basic app is created, you can add items from the Insert Tab or connect to data, but to add a form we need to use the “Insert” option in the top menu.

And then select “Edit” from the “Forms” drop-down menu.

We then need to connect this form to the list we’ve just created in SharePoint. In the middle of the main screen, select “Connect to Data” (highlighted in the box as the text is faint).

Click “+ New connection” and search for SharePoint.

You then need to select whether you are going to connect directly using Cloud services or connect via an on-premises gateway. In my environment, I’m using the cloud.

Then enter the name (URL) of your site.

Select the “Suggestion Box” list we made earlier and click “Connect”.

This will open up the form we already have, but as it’s not really in the format we want, we’re going to make some changes.

From the Edit option for this Form on the right-hand side of the screen, select “Fields” and “Edit Fields”.

For the 3 fields we don’t want to display in the form (Voters, Vote Count and Suggestion status because we don’t want the user to see these details when they are entering a suggestion) click the ellipsis by their name and select “Remove” from the drop-down menu.

Which should leave the following fields…

Which now look like this…

Changing the number of columns used in the form can be quickly achieved by using the drop-down option in “Snap to Columns” option.

We can make the form look nicer by clicking on the items and moving them around and resizing the boxes as appropriate.

We can also create a nice header for the top of the form. To do this, insert an Icon (a blue rectangle in my example), stretch it across the screen and then add text on top.

You can change the colours by using the options in the right hand “Label” menu to style this as you wish.

To make the form work, we need to go to the Advanced Forms properties.

In the “OnSuccess” box we need to type the command that we need to App to perform. In this case, we want to submit the last form that was completed and open up a new form for the user to add more suggestions if they wish. In the Action box, we need to use a Patch formula as shown below.

We also need to change the “DefaultMode” to say “FormMode.New” as below.

To add a method for this form to be submitted, we need to Insert a button and drag it to wherever you want it to be displayed on the form.

In the button properties change the display text to say “Submit”.

From the Advanced button options, we only want to accept the submission if the user has agreed to the terms and conditions, so we need to create an “if” statement to check that this has been done. Unfortunately, the data card values are not shown with the descriptions that you’ve given them, so you need to use trial and error to make sure you get the right one (the chosen field will be highlighted with a green outline for you to check).

Remember to save your work at this point, and then you can publish and share it with the relevant people.

To test that the form works as you intended, you can click the “Play” button in the top right of the PowerApps screen.

At the moment, the form displays the name of the fields you created, and no additional descriptions are provided to help guide the user. To add them you need to click on the item, then go to the advanced options.

Unlock the item so you can change the properties.

Then “Insert” a “Label” and add the description you want.

You may need to resize or move some of the items and boxes already in the form to make it fit.

Remember to save these changes and republish the App.

We can now embed the PowerApp into a SharePoint site by creating a new page with a blank template and calling the page “Suggestion Box”.

Then add a PowerApps Web Part to the page.

In the web part, click “Add an app”.

Then we need to add the web link to the app in this box.

To get the link, you need to review the properties of the App you created – you can use either Weblink or App ID (it doesn’t matter which) and paste it into the box shown above.

This will now display your suggestion form on this page (don’t forget to publish the page) and check to make sure it works.

If you review the items shown in the original SharePoint list, you should see all the test data you’ve used while creating and testing the process (they should have a ‘Pending’ status at this point).

You can edit the current view to access additional details if needed (for example to add the ‘created by’ field to see who made the suggestion) or format some of the data (e.g. to conditionally colour the status depending on the value, pending = blue, finalist = green and rejected = red for example).

Create a Voting App

Step 3: Create the Voting App so users can vote for their favourite suggestion

Now we have a way to add and approve suggestions, we need to offer the users a way to vote for their favourite & we’re going to create another PowerApp for this.

Create a blank canvas app as before and call it “Suggestion Voting”.

Adding a “Reload” icon (from the insert option) and place it in the top right-hand corner.

Also, add a label, and call it “Suggestion Box Voting”. Resize this to fit across the top of the screen and style it as you wish (ensure the reload icon is placed on top of the heading label, so it is visible).

Next, insert a “Vertical Gallery”.

Resize and drag it to fit the area available.

We now need to select SharePoint as the data source again.

Select the same site again (containing the list you’ve just created).

Then select the “Suggestion box”.

This brings through the suggestions you’ve already created while testing your original form.

We can now work on formatting the App as needed. On the “Screens” list, expand the Gallery to see all of the different elements individually.

We can optimise the voting app by removing elements like the Image and Subtitle that we don’t need. Click on the ellipsis at the side of the item and select delete.

Next, click the edit button so we can add an HTML button.

Then from the Insert menu, select “Text”, followed by HTML Text.

Drag the box across to the right side of the screen and resize as required.

We now want to amend the text shown in the HTML box to show the suggestion details, so in the Advanced Properties menu, look for the data field…

… and change it to “ThisItem.Describe your suggestion”.

The suggestion description we added earlier is now included.

We can also edit the fields & in this case, it is already using the correct information, the Suggestion name.

The suggestion name, as well as the suggestion description, are now both showing in the voting app. We now need to focus on what happens next.

We need to decide what items to display in this gallery. This is controlled in the Advanced menu, Data section.

We only want to show the items from our initial suggestion list that have a “Finalist” status, so we need to filter out the rest. The filter formula shown below will search in our Suggestion Box list and look for items where the status value is “Finalist”.

In preparation for the next step we need to create a new screen, so go to “Insert”, “New Screen” and choose “Blank Screen”.

We can now change the “OnSelect” field, which initially shows as “False”.

The “OnSelect” action can now be changed so that when an Item is chosen (voted for), we navigate to the second screen. You can choose whatever screen transition you prefer. I chose “Cover” as below.

Now we need to sort out the “Refresh” button we created earlier. We want this to not only refresh the screen but also record the User Email and set the Voter Token to record the fact that the user has cast their vote. To do this change the OnSelect field to…

“Refresh(‘Suggestion Box’);Set(UserEmail, User().Email);Set(VoterToken, (“|” & UserEmail & “|”)); Set(HasVoted, !IsBlank (Lookup(‘Suggestion Box’ , VoterToken in Voters)))

To complete screen 2 we need to add an “Edit Form” (from the insert menu, select Form and then Edit Form).

Click “Connect to Data” and select “Suggestion Box” (this should appear in the drop-down menu form “Select a Data Source”).

Resize the form to fit the screen and because we only want to display the data that has been entered, in the Advanced properties, change the “DefaultMode” to “FormMode.View” .

To change the fields that are displayed, go to Properties and select Edit Fields.

We only really need to see the Suggestion Name and description (you can leave attachments if you want to) so for all other options click the ellipsis and remove them.

Also ensure the form relates to the selected suggestion, buy entering “SelectedItem” into the Item field.

Add a heading to the form if you want to (the same way we’ve done previously) and also add an “X” Icon to act as a Cancel button so users can go back to the previous screen if they want to. To do this, you need to set the Advanced “OnSelect” property for this X icon to “Back()”.

We need to insert another button for users to click to cast their Vote; I put this at the bottom middle of the screen. Then from the Advanced menu, changed the text to state “Vote for this entry”. To ensure the voter can’t vote again we need to add the following to the “OnSelect” field…

Patch(‘Selection Box’ , SelectedItem, {‘Vote count’: SelectedItem.’Vote count’ + 1, Voters: Trim (SelectedItem.Voters & ” ” & VoterToken) }); Back()

To ensure the Voter can’t vote again, we need to change the DisplayMode to make it conditional using an If formula as shown below (If they have not already voted, display the vote option, if they have already voted, disable the option).

To make the voting process run smoothly, we need to ensure that when the first screen loads it triggers a refresh to ensure all of the variables are set correctly. To do this, we need to select the Refresh button. In the Advanced menu for Screen 1, add “Select(icon1)” in the OnVisible box.

To display this App on a new SharePoint page, go back to the SharePoint site and create a new page using the blank template.

Add the title “Vote on your favourite” and add a PowerApp into the body of the page. You may need to go back to the App and look for the sharing / APP ID link again and then paste this into the Link ID box and publish the page.

This shows your app with all of the test data you’ve used while creating and testing the app. If you go back to the original SharePoint list we created for the Suggestion Box; you should see the data you’ve collected throughout this app creation process.

To remove these, so you can start afresh, go to the SharePoint list you created and delete the items.

Users should now be able to add suggestions, an admin can reject or approve them as finalists, and then users can vote on their favourite suggestion.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}