My name is Rachel Irabor, I'm a Beta Microsoft Learn Student Ambassador Power Platform Developer, Power Platform Advocate, Technical Writer, and a student at the University of Benin. Enthusiastic about community building and have taught 1700+ individuals on power platform through organizing events, holding classes, organizing power platform bootcamp, and being a part of the community leaders in Power Platform User group Nigeria and other power platform community groups.
Welcome to my first article on Power Apps, in this article, I would show you how to create a customer complaint management application for your organization without having to write a single line of code using Microsoft Power Apps.
An Overview of the Customer Complaint Management Application
In organizations with so many customers, it's difficult to manage complaints. Imagine how difficult it would be for a customer support engineer to track and manage tons of complaints from customers. Even worse, it might be difficult to track complaints when they are done manually.
This application makes it easy for customer support employees within your organization to monitor and respond to complaints made by customers. Customers would submit their complaints via a Microsoft form then with the aid of Power Automate, all responses are collected and stored on a SharePoint list.
How to create the SharePoint List
The table below shows the data structure of the SharePoint List and the parenthesis are their data types.
|
Name (Single line of text) |
Account Number (Number) |
(Single line of text) |
Complaint (Multiple lines of Text) |
Status (Choice) |
Feedback (Multiple lines of text) |
|||
|
|
|
|
|
|
|
I created a YouTube video on How to Create the SharePoint List.
How to Create a Custom SharePoint List
The Home Screen of the Customer Management Complaint App
Creating the Home Screen
Step 1
Add Image control (A control that shows an image from, for example, a local file or a data source) to the Screen by clicking on insert and next click on media
Step 2
Add the Image URL to the Image Property of the Image control
“https://53.fs1.hubspotusercontent-na1.net/hub/53/hubfs/customer-complaint.jpg?width=1190&height=800&name=customer-complaint.jpg"
Step 3
Change the Image Position Property (The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or control if it isn’t the same size as the image) to expand the Image in the Image control
ImagePosition.Fill
Step 4
Change the Fill Property (the background color of a control) of the Screen from white by using
RGBA(232, 232, 232, 1)
Step 5
Add the Button control (A control that the user can click or tap to interact with the app) and move it to the right side on the screen
Step 6
From the right side of the screen,
- Change the X property of the button control to 947 and Y property to 378 in the Position property
- Also, change the width of the button control to 279 and the height to 82 in the Size property
Step 7
Change the Text Property (appears on a control or that the user types into a control) of the Button control
“Get Started”
Step 8
Change the FontWeight Property (the weight of the text in a control: Bold, Semibold, Normal, or Lighter) of the Button control from Semibold to Bold
Step 9
Change the Fill Property (the background color of a control) of the Button control.
RGBA(0, 51, 102, 1)
Change the Size property of the font in the Button control to 20 to make the font more visible
Step 10
To navigate from the Home screen to the customer complaint management screen, change the OnSelect Property (specify the default action to take when the user clicks or taps an item in the gallery) of the Button control
Navigate(‘Complaint Management Screen’,ScreenTransition.Fade)
Creating the Customer Complaint Management Screen
Step 11
Add a new screen to the App
Click on New screen, select Blank
Step 12
Next, go to insert, add the Label control to the screen and expand the Label control
- Change the X property of the Label control to 0 and Y property to 0 in the Position property
- Also, change the width of the Label control to 1366 and the height to 61 in the Size property
Step 13
- Change the Text Property in the Label control to “Customer Complaint Management”
- Change the Size Property of the font (The font size of the text that appears on a control) of the Label Control to make it easier to see
- Change the FontWeight of the Label Control to Bold
- Change the Fill Property of the Label control to RGBA(0, 51, 102, 1)
Step 14
Change the background of the screen by changing the Theme of the Screen to Steel
Step 15
Add the Gallery control to the screen by clicking on the arrow down button next to Mixed Reality
Step 16
Add Vertical Gallery control (is a type of control that can display a set of records from a data source) to the screen
Step 17
- Change the X property of the Gallery control to 39 and Y property to 142 in the Position property
- Also, change the width of the Gallery control to 582 and the height to 596 in the Size property
Step 18
Change the layout of the Gallery control from "Image, title and subtitle" to Title, subtitle and body at the Right hand side of the pane
Step 19
Add Data Source to the Gallery control by clicking Connectors, search for SharePoint
Step 20
Connect to SharePoint
Step 21
Connect the SharePoint Site, choose the preferred SharePoint list and click on Connect
Step 22
Add Text Input control (A box in which the user can type text, numbers, and other data) to the Screen for the purpose of searching for a person's detail
Step 23
Delete the Default value in the Text input control and change the Hint text to Search
Step 24
- Change the X property of the Text input control to 45 and Y property to 79 in the Position property
- Also, change the width of the Text Input control to 320 and the height to 40 in the Size property
Step 25
Add ComboBox control ( is used to display a drop-down list of various items) to the Screen
Step 26
- Change the X property of the Combo box control to 401 and Y property to 79 in the Position property
- Also, change the width of the Combo box control to 220 and the height to 40 in the Size property
Step 27
Change the Items Property of the ComboBox control
Choices(‘Customer Complaints’.Status)
Step 28
In the Combo box control , Switch off the Allow Multiple Selection at the right-hand side of the Pane, then Switch on Allow Searching
Step 29
Change the Items Property (one single record from the table configured under DataSource property) of the Gallery
Filter(‘Customer Complaints’, (StartsWith(Title, TextInput1.Text) Or StartsWith(Email, TextInput1.Text)) And (ComboBox1.Selected.Value = Blank() || Status.Value = ComboBox1.Selected.Value))
Step 30
Add Button control to the Gallery to know the status of each person
- Change the Text Property of the Button control
ThisItem.Status.Value
- Change the X property of the Button control to 348 and Y property to 36 in the Position property
- Also, change the width of the Button control to 160 and the height to 40 in the Size property
- Change the border radius to 30, to help change the shape of the button
Step 31
- Change the Fill Property of the Button Control
Switch(ThisItem.Status.Value,
“Open”,
Red,
“In Progress”,
Yellow,
“Completed”,
Green)
- Change the Color of the font in the button control to black
Step 32
Change the DisplayMode Property of the Button control from Edit to View
DisplayMode.View
Step 33
Change the Transition Property (the visual effect (Pop, Push, or None) when the user hovers over an item in a gallery) of the Gallery
Transition.Pop
Step 34
Change the experience of your Gallery control, Text input and Combo box control to make it more user friendly.
- Change the Template Fill property of the Gallery control
If(ThisItem.IsSelected, RGBA(0, 51, 102, 1), RGBA(0, 0, 0, 0))
- Change the Color Property of the the Gallery
If(ThisItem.IsSelected, White, Black)
- Change the HoverFill Property of the Text Input control and Combo box control
RGBA( 225, 225, 225, 1)
- Change the visibility of the Navigation icon on the Gallery control, from true to false to help hide the Navigation icon.
Step 35
Add Form (update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source) to the Screen
Step 36
- Change the X property of the Form control to 684 and Y property to 79 in the Position property
- Also, change the width of the Form control to 682 and the height to 611 in the Size property
- Change the Column of the Form to 1 at the Right hand side of the Pane
Step 37
- Add Data Source
- Change Fill Property of the Form to transparency
RGBA(0, 0, 0, 0)
- For the data in the Gallery to reflect in the Form, go to the Item property of the Form
Gallery. Selected
- Change the DisplayMode Property (The mode to use for data cards and controls within the form control) of the Form
DisplayMode.New
- Change the DisplayMode Property, for few of the columns. The purpose is that the complains and information filled by the customer is in View then the few columns remaining is for the Customer personnel.
Step 38
Add Button control to the Screen
Change the Button control, Text Property
“Reply”
To send an email to the customer or cilent after filling in the feedback of the report
Change the OnSelect Property (specify the default action to take when the user clicks or taps an item in the gallery) of the Button control
Office365Outlook.SendEmailV2(Gallery2.Selected.Email, “Feedback to your complaints”,
“Dear “ & Gallery2.Selected.Title & “,<br>This is a feedback to your complaint that was logged with us.<br>
Complaint: “ & Gallery2.Selected.Complaint & “<br>
Status: “ & DataCardValue5.Selected.Value & “<br>
Feedback: “ &
DataCardValue6.Text& “<br><br>Thank you
“);
SubmitForm(Form1)
Step 39
Change the DisplayMode Property of the Button control to help disable the button when the
If(Form1.Valid, DisplayMode.Edit, DisplayMode.Disabled)
Step 40
Change the OnSuccess Property (Actions to perform when a data operation has been successful)of the Form
Notify(“Response Sent”, NotificationType.Success, 3000)
Build with more with Power Apps
Microsoft has created a learning path by professionals
Prerequisite of Power Platform
The Microsoft 365 developer account provides you developer access in creating your low-code or no-code applications. As an active user it renews the E5 license itself, which enables you to have access to developing amazing solutions with the tools in Power Platform.
Steps in creating your Microsoft 365 developer account can be found here
Microsoft Power Platform Certification Pathway
Microsoft has created a certification path for individuals who are looking to start a career in Power Platform. As a leading giant in the low-code or no-code application, here are the certification paths to look out for.
Power Platform App Maker Associate
Power Platform Functional Consultant Associate
Power BI Data Analyst Associate
Power Platform Developer Associate
Power Automate RPA Developer Associate
Power Platform Solution Architect Expert
Additional resources on Certification Pathways
Learn more about the different learning path for each certification here
LowCode October
| Dates | Time (GMT+1) | Topic | Link |
| Oct 4th | 4PM | Build A Facility Maintenance App with Microsoft Power Apps | |
| Oct 11th | 4PM | Automate Facility Maintenance Process with Power Automate | |
| Oct 18th | 4PM | Facility Maintenance Application Data Analysis |
