How to Create a Customer Complaint Management Application in Power Apps
Published Sep 30 2022 05:27 AM 13.7K Views
Iron Contributor

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)

Email

(Single line of text)

Complaint

(Multiple lines of Text)

Status

(Choice)

Feedback

(Multiple lines of text)

 

 

 

 

Open

In Progress

Completed

 

 

I created  a YouTube video on How to Create the SharePoint List. 

How to Create a Custom SharePoint List 

 

 

HomeScreen.PNG

                                                   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 

 

Image property.PNG

 

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"

image Url.PNG

 

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

Image position.PNG

 

Step 4

Change the Fill Property  (the background color of a control) of the Screen from white by using  

RGBA(232, 232, 232, 1)

fill.PNG

 

 

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

 

button ctrl.PNG

 

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

 

button ctrl 2.PNG

 

Step 7 

Change the Text Property (appears on a control or that the user types into a control) of the Button control 

“Get Started”

name.PNG

 

 

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

 

name 1.PNG

 

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

Fill property.PNG

 

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)

Onselect property.PNG

 

 

Creating the Customer Complaint Management Screen

Step 11

Add a new screen to the App 

Click on New screen, select Blank

Blank screen.PNG

 

 

blankscreen.PNG

 

 

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

 

Label control.PNG

 

 

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)

 

Customer Complain Management.PNG

 

 

Step 14

Change the background of the screen by changing the Theme of the Screen to Steel

Theme Screen.PNG

 

Step 15

Add the Gallery control to the screen by clicking on the arrow down button next to Mixed Reality

Gallery control.PNG

 

 

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

 

Vertical gallery control.PNG

 

 

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

 

Vertical gallery control 2.PNG

 

 

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

 

Layout.PNG

 

Layout2.PNG

 

 

Step 19

Add Data Source to the Gallery control by clicking Connectors, search for SharePoint

Data source1.PNG

 

Data source.PNG

 

Step 20

Connect to SharePoint

SharePoint Site.PNG

 

 

Step 21

Connect the SharePoint Site, choose the preferred SharePoint list  and click on Connect 

SharePoint Site1.PNG

 

 

 

SharePoint List.PNG

 

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

Text input control.PNG

 

 

 

Step 23

Delete the Default value in the Text input control and change the Hint text to Search

Text input control 1.PNG

 

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

Property.PNG

 

 

Step 25

Add ComboBox control  ( is used to display a drop-down list of various items) to the Screen 

Combo box.PNG

 

 

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

Combo box1.PNG

 

 

Step 27

Change the Items Property  of the ComboBox control 

Choices(‘Customer Complaints’.Status)

Item property.PNG

 

 

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

Combo box 2.PNG

 

 

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))

Filter function.PNG

 

 

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 

Button control in gallery control.PNG

 

 

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

Fill property 1.PNG

 

 

Step 32

Change the DisplayMode Property of the Button control from Edit to View

DisplayMode.View

Display mode.PNG

 

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

Transition Property.PNG

 

 

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. 

User Friendly.PNG

 

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

 

Edit form1.PNG

 

 

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

 

Edit form.PNG

 

 

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. 

Data source 3.PNG

 

Power Apps.PNG

 

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)

Button Control.PNG

 

Step 39

Change the DisplayMode Property  of the Button control to help disable the button when the 

If(Form1.Valid, DisplayMode.Edit, DisplayMode.Disabled)

Disabled Button.PNG

 

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)

 

Onsuccess Property.PNG

 

Build with more with Power Apps

Microsoft has created a learning path by professionals

Power Apps learning path

 

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 Fundamental

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

LeeStott_0-1664540784959.png

Dates Time (GMT+1) Topic Link
Oct 4th 4PM Build A Facility Maintenance App with Microsoft Power Apps

https://aka.ms/LowCodePowerApps 

Oct 11th 4PM Automate Facility Maintenance Process with Power Automate

https://aka.ms/LowCodePowerAutomate 

Oct 18th 4PM Facility Maintenance Application Data Analysis

https://aka.ms/LowCodePowerBI 

 

 

You can Find me on Linkedln and Twitter

11 Comments
Version history
Last update:
‎Oct 18 2022 09:37 PM
Updated by: