Are you looking out for a few PowerApps examples? In this PowerApps tutorial, we will discuss how to create a self-declaration form for COVID 19 using PowerApps. This is a General Health Self Declaration form During Covid-19 using PowerApps.
This Covid-19 form helps people to protect themselves and as well as others around them by knowing the facts and taking appropriate precautions.
Basically, This form is used in the Organization where people can feel safe and ready from the spread of Covid-19. Somehow, By using this form, you can reduce your chances of being infected by others.
SharePoint Online tutorial contents:
PowerApps Examples – Business Requirement
There is a Covid-19 Registration Form where people or employees should restrict to enter their Health details before entering the organization.
It is made up of a PowerApps Form with a Tablet layout. People will add the new entry by filling in all the necessary fields and submit the form.
Once the user will submit the form, then all the user details will store inside the SharePoint List.
Before creating the PowerApps App, I have created a SharePoint list where it will store all the user details once they submit the form.
I have created a SharePoint Online List named “Access Registers“. This list has all these below columns with different data types as:
- Title (By default Single line of text column)
- Employee Name (People picker/Person)
- Department (Dropdown/Choice)
- Visitors Name (Single line of text)
- Visitors Contact Number (Single line of text)
- Date (Date Picker including Time)
- Location (Dropdown/Choice)
- Check Your Temperature (Single line of text)
- Washed Your Hands (Yes/No)
- Had a High Temperature (Yes/No)
- Any Signs of Illness (Yes/No)
- Travelled Domestically or Internationally (Yes/No)
- Had Close Contact With Someone (Yes/No)
- Family Showing any Symptoms of Virus (Yes/No)
- Wearing Appropriate PPE (Yes/No)
- Cleaned Your Workspace with Wipes (Yes/No)
Below screenshot represents the SharePoint list with these above columns:
Create PowerApps App
To create this Covid-19 Registration form, We will use the PowerApps Canvas App (From Blank).
If you are new to PowerApps Canvas App and interested to know how to use, then follow these below links:
- How to Create a Canvas app from SharePoint List in Power Apps
- Create a canvas app from Excel in Power Apps (Step by Step tutorial)
To create this PowerApps app, you can use both the two Layouts: Tablet Layout and as well as Phone Layout. There is no much big difference between both the layouts. Only the difference you can see is, the app or form view will look like a Tablet view or a Phone view.
In this example, I have used the Tablet layout for this Powerapps form. So that the form will open in Tablet view format.
Use PowerApps Screens
I have taken three Blank screens where the first screen is a Welcome Screen, the Second screen contains the Covid-19 Form and the third screen is a Thanks or Successful notification screen.
First of all, the user will open the app and it will open with a welcome screen including a button (Submit New Entry). When the user will click on the button, then the Covid-19 form will appear with all the fields. Once he will Submit the form, then the user will get a successful thanks notification.
The overall apps looks like the below screenshot:
Here, I will explain about all these three screens:
In the PowerApps Canvas app, first of all, Add three new Blank screens (Home -> New Screen -> Blank). If you want to rename the screen, then rename with as like below names:
- Screen1 (Welcome Screen)
- Screen2 (Registration Form Screen)
- Screen3 (Thank You Screen)
- Welcome Screen:
- Insert an Image (Insert -> Media -> Image) on the screen. Give the image link on its Image property. Once the image is uploaded, just adjust it with the screen. Refer the below screenshot:
- Add a Button (Insert -> Input -> Button) on the image (as like the above screenshot) and rename it to “Submit New Entry“.
- Select the Button (Submit New Entry) and apply this below formula on its OnSelect property as:
OnSelect = Navigate(Screen2)
Screen2 = Registration form screen
The above code specifies, when the user will click on the button, it will navigate to the next screen where he/she can enter and submit the health details about them.
2. Registration Form Screen:
- In this second screen (Screen2), Add an Edit Form (Insert -> Forms -> Edit).
- Connect the Data Source as SharePoint, Choose the specific SharePoint list (Access Registers), and connect it with the Edit form.
- Add all the Fields (Select the Form -> Properties -> Edit fields -> +Add field) from the SharePoint List and make all the fields with proper alignment in the form.
The Edit form looks like below screenshot:
- Also, there is a Submit button on the bottom of the form. Apply this below formula on its OnSelect property as:
OnSelect = If(Form1.Valid,SubmitForm(Form1);NewForm(Form1);Navigate(Screen3),Notify("Please enter the Required fields",NotificationType.Error));
Form1 = Edit form Name
- This above code specifies, if the form is a valid one, then only it will submit and navigate to the third or Thank you screen. Otherwise, it will give a notification error on the top of the form.
PowerApps Form Field Validations
Here, I will explain to you what are the validations I have given to the fields in the Edit form in PowerApps App.
- Department: There are different choices options are present in the Department Dropdown column as like “IT”, “HR”, “FINANCE”, “VISITORS”, “ADMIN” etc.
When the user will select VISITORS from the dropdown, then it will display the Visitor’s Name and Visitor’s Contact Number fields.
Similarly, When the user will select “IT”, “HR” or any other choices from the dropdown, then it will display the Employee Name field.
Also, you can refer the below link that how you can show and hide the data card based on the dropdown selection:
It is a Date Picker Data type (including Time). But sometimes, in some cases (especially in Tablet Layout), when you will add the Date field from the SharePoint List, it is not taking the time. Only it is taking the Date value.
In that case, if you need to add the Time value, then you can follow this below link:
Also, By using this above link, you can set the Date Time as your System or Default Date.
- Employee Name:
This field will appear when the user will choose the Department value as like “IT”, “HR”, “ADMIN” etc. See the below screenshot:
- Visitor’s Name and Visitor’s Contact Number:
Similarly, When the user will choose the Department value as “VISITORS”, then both these fields (Visitor’s Name and Visitor’s Contact Number) will display in the form. See the below screenshot:
- Temperature Check:
There is a Temperature Field with a single line of the text data type. In this field, the user can only restrict to enter the Number value (including Decimal value) instead of the text value.
Also, there will be a warning notification where the temperature value should allow between 34C to 40C. If the user will not enter the value within the specific limit, then he/she will get the warning message.
To provide the Temperature Validation to this Temperature field, you can follow this below link:
- Toggle controls (Yes/No fields):
As I have added all the Yes/No fields from the SharePoint list, So you can see all the questions fields in the form as like below screenshot:
Sometimes, you can see the Yes/No fields are appearing On/Off or True/False which is unexpected. So you can easily convert the Toggle value to Yes/No by following the below link. Also, if you want to know more details about the PowerApps Toggle Switch control, then you can refer to this link:
- PowerApps toggle control + How to use with example
It is a field where I want to store the Employee Name or Visitors Name. The value should store inside the SharePoint list once the user will submit the form.
To get the more information about how to set a field value in other field in PowerApps, follow this below link:
NOTE:If you are interested to know about more Power Apps Validations, then you can follow this link: Various PowerApps Validation Examples
3. Thank You Screen:
- This is the third screen (Screen3) which is almost similar to the first screen (Screen1).
- Like the first screen, Insert an Image on the screen. Give the image link on its Image property. Once the image is uploaded, just adjust it with the screen. Refer the below screenshot:
- Here, I have added two Labels (Insert -> Label) on the image. One label is to display the “Thank You” message and the other one is to display the “Your form has been submitted successfully.” message.
- Add a Button (Insert -> Input -> Button) on the image (as like the above screenshot) and rename it to “Back to Home“.
- Select the Button (Back to Home) and apply this below formula on its OnSelect property as:
OnSelect = Navigate(Screen1)
Screen1 = Welcome screen
The above code specifies, when the user will click on the button (Back to Home), it will navigate to the first screen/Welcome screen.
Preview the PowerApps App:
Once your app is ready to use, just Save and Publish the PowerApps app. You can also preview to see how it works by using F5 button.
Below screenshot represents the whole process that how this PowerApps canvas app is working:
First, a user will click on the “Submit New Entry” button from the first screen. Then it will open a form where the user will enter all the details about him and submit the form.
If all the field validation is fine, then that specific user details will store in the SharePoint list and the user will get a successful notification message.
Also, if the user wants to go back to the Welcome screen, he/she can click on the “Go to Back” button from the Thank you screen.
Now, let us see, we can save data to the SharePoint list based on the PowerApps Choice field user’s selection.
Let’s come to the exact requirement. I have a PowerApps Form that helps the Organization where people can feel safe and ready from the spread of Covid-19.
The below screenshot represents the PowerApps Edit form where you can see some different types of fields including the Choice fields. All the fields are retrieved from the SharePoint Online List (As you can view the existing SharePoint list in the above link).
Lets talk about what exactly I want to do using PowerApps. Follow these below two statements:
- In the PowerApps Edit form, If all the choice field values are represented as “No” (as per users selection), then the form will submit and a successful screen (with a successful message) will appear.
- In the PowerApps Edit form, If any of the individual choice field value is represented as “Yes“, then the form will not submit in the SharePoint List and a warning screen (with a warning message) will appear.
To do this, We need to apply an appropriate formula on PowerApps Submit Button. Select the Submit button and apply this below formula on its OnSelect property as:
OnSelect = If( Form1.Valid && DataCardValue17.Value = false && DataCardValue18.Value = false && DataCardValue19.Value = false && DataCardValue20.Value = false && DataCardValue21.Value = false && DataCardValue22.Value = false && DataCardValue23.Value = false && DataCardValue24.Value = false && DataCardValue25.Value = false && DataCardValue26.Value = false, SubmitForm(Form1); NewForm(Form1); Navigate(Screen3), Notify( "Please enter the Required fields", NotificationType.Error ); Navigate(Screen4) )
- DataCardValue17 to DataCardValue26 = These are the PowerApps choice fields and the values given as false
- Form1 = This is the PowerApps Edit form name.
- Screen3 = This is the Successful screen name that appears success message.
- Notify = This is the function that helps to display a notification on the Powerapps screen.
- Screen4 = This is the warning screen name that appears as a warning message.
The above code specifies if a user will select all the choice values as “No“, then the PowerApps form will submit to the existing SharePoint List and at the same time it will navigate to the successful screen (that your form has been submitted successfully). Refer to the below screenshot:
Similarly, if a user will select any of the choice value as “Yes“, then a warning message will appear in the Warning screen to contact the health care provider. Also, the PowerApps form will not submit to the existing SharePoint list. Refer to the below screenshot:
If any of the field values will not valid, then an error notification will appear to the user to enter the required fields as shown in the above screenshot.
Also, you may like these below Power Apps Tutorials:
- How to use Power Apps Search Function
- The function Search has some invalid arguments in PowerApps
- How to use PowerApps Timer Control
- How to reset timer on a button in PowerApps
- How to use PowerApps notify function
- Create People Picker in Power Apps with Combo Box
- How to Create PowerApps GridView
- How to format number as currency in PowerApps
- PowerApps Value Function – How to use
- PowerApps Cascading Dropdown (Detailed tutorial)
- How to Create CSV in SharePoint using PowerApps and Power Automate
- PowerApps Barcode Scanner
In this PowerApps tutorial, we saw a PowerApps example, how to create a self-declaration form for COVID 19. I hope you like these PowerApps design examples.
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com