PowerApps: How to use PowerApps to build a Claim Form System?

I’m still a newbie towards PowerApps, so bear with me. Well, you can leave your comments below for me to improve or pinpoint my faulty parts. ūüėÄ

I have been occupied lately, and now only I got the time to do a blog on PowerApps. As you those that know me, I don’t do much of development coding like a software engineer.

So this is my simple claim form system, I am still improving it by adding conditions.

*Note

  • You may need to change the permission on this page to allow the only administrator to have edit rights and where employees have only created and view rights.
  • This Blog may require some basic knowledge and understanding of PowerApps and SharePoint Online

So let’s begin on the user experience;

  1. First, I go to “Claim Form” then it will open up Expense Form

This is how it looks like under Site Contents > Expense Form.

expense.png

3. Select “New”

pa01.png

4. Then it will expand the Expense Form;

I’ve got 5 different lists;

  • Title (What is this expense form about, How should you name it)
  • Start Date
  • End Date
  • Category (such as Parking expense, food expense, petrol)
  • Description (Optional, for employees to explain)
  • Amount
  • Attachment

I’ve got 2 functions;

  • Submit button (is at the top right)
  • Clear button (basically it will clear the entire fill up of information)

pa02

pa06.PNG

  • After successfully submitted the form, you will be direct to a successful page;

pa07.PNG

5. I even make few of the lists as a requirement to fill up, you could see a (*) at the lists.

6. After submitting an expense form, you will have a view of your submitted forms

  • Well, I am still trying to figure out how to not allow others to view others submitted claim forms though.

pa03.png

Now the PowerApps part…

  1.  Create a new page for your SharePoint site
  2. ¬†Then create a new content type, “List”
  3. You have to create the PowerApps based on the expense form list

pa02.PNG

4. Create a New Blank PowerApps

5. Then I created a new form and rename it to “ClaimForm”, the naming for each action are pretty straight forward. This form will include the necessary data for an expense form. (Sorry about the ordering)

  • ExpenseForm – Is a label
  • ClearButton – Contain action to clear and reset the form
  • Data – Is an Edit form type (multiple choice for type of data)
  • AttachmentData – for upload attachment
  • AmountData – fill in the amount of expense
  • CategoryData – select choice of expense type
  • TitleData – To fill in name of expense form
  • StartDateData – Select start date of this expense
  • EndDateData – Select end date of this expense
  • DescrpitionData – Include any necessary explanation for expense form
  • SubmitButton – Submit the form
  • Bar – Design of the Expense Form

pa06-1.png

6. To include choice information for the category, you have to include it at the List Settings of this Expense Form in SharePoint Online.

pa01

pa07-1.png

7. For after successfully submitted of the expense form it will direct to a successful page.

I created another new form and named it “SuccessfulSubmitView”

  • Icon3 – Design
  • ¬†SubmitMessage – a successful message
  • Circle2 – Design

 

pa06-2.png

8. To have the expense form to direct to the successful page after successfully submit, you got to include action into the SubmitButton;

If(Rule1, SubmitForm(Data);
Navigate(SuccessfulSubmitView,ScreenTransition.Fade), 
SubmitForm(Data))

pa01-1.png

9. To clear the form, you got to include action into the ClearButton

ResetForm(Data)

 

For exception, they have a default error action, you could edit that too. Example, if a data is not key in or the data doesn’t match with the condition it may have an error show.

pa01.PNG

That’s all you have to know about creating a simple claim form system. Well, yes there is room for improvement. I probably got to spend a bit of time for the improvement. Hope you enjoy this.