Building a Power App for Issue Tracking!
Overview:
This blog post offers a step-by-step guide on how to build a Power App for Issue Tracking, starting with acquiring browser and O/S details through the Power Apps Host Object. It then demonstrates the process of creating a new SharePoint list for the app, detailing the necessary columns and their configurations.
Power Apps Host Object Get Web Browser And O/S Details
Open Share Point Site and Create New Share Point list
Create a New List: click the “+ New” button and select “List.”
Click on “Add column” to Create a new column In your SharePoint list For each column, configure them as follows:
To present travel time in a user-friendly manner, converting seconds to hours and minutes is advisable.
Issue Description (multiple lines of text):
User Agent (single line text):
Operating System (single line text):
Session Identifier (single line text):
Tenant Identifier (single line text):
Save and Continue
After configuring all the columns with the desired wording and names, click the “Save” button or equivalent option to create the list.
To present travel time in a user-friendly manner, converting seconds to hours and minutes is advisable.
Create a New Power App:
Once you're logged in, click on the "Apps" option in the left-hand menu.
- Next, select the “+ Create” button to create a new Power app.
- Click on “Blank” to proceed.
And select the Canvas App
Give The Name And chose The Format
- After The Change Screen Name
- Name: Issue_list_Screen
- And Add the New Label for the Header to Define Screen Purposes
Do this Step on the Header Label Properties
Name: Lbl_Header_List_screen
Text: "List Of Issues"
X:0
Y:0
Width: Parent.Width
Height:60
Font: Font.'Open Sans'
Size: 25
FontWeight : FontWeight.Semibold
Fill: RGBA(246, 88, 16, 1)
Color: RGBA(255, 255, 255, 1)
Insert add icon to create new issue
X:0
Y:0
Width: Parent.Width
Height:60
OnSelect: Navigate('Issue Tracker Screen',ScreenTransition.Cover);NewForm(frm_Issue_Tracker)
Insert the horizontal blank gallery do this step with the gallery
Do this step with this gallery
Name: Header_gal
X: 0
Y: 97
Width: Parent.Width
Height: 60
TemplateSize: Parent.Width/5.5
WrapCount: 1
TemplatePadding: 0
Now insert the blank Vertical Gallery
Do this step with this galery
Name: LIst_gal
X: 0
Y: 157
Width: Parent.Width
Height: 611
TemplateSize: 80
WrapCount: 1
TemplatePadding: 5
And connect with share point list And Add Label in LIst_gal
Name: Lbl_Issue_Description
Color: RGBA(0, 0, 0, 1)
Fill: RGBA(0, 0, 0, 0)
X: 0
Y: 0
Width: 357
Height: Parent.TemplateHeight
Text: ThisItem.'Issue Description'
Copy And Paste the Label Do these steps on label properties
Name: Lbl_User_Agent
Color: RGBA(0, 0, 0, 1)
Fill: RGBA(0, 0, 0, 0)
X: 357
Y: 0
Width: 211
Height: Parent.TemplateHeight
Text: ThisItem.'User Agent'
Again, Copy and Paste the Label Do these steps on label properties
Name: Lbl_Operating_System
Color: RGBA(0, 0, 0, 1)
Fill: RGBA(0, 0, 0, 0)
X: 568
Y: 0
Width: 209
Height: Parent.TemplateHeight
Text: ThisItem.'Operating System'
Name: Lbl_Session_Identifier
Color: RGBA(0, 0, 0, 1)
Fill: RGBA(0, 0, 0, 0)
X: 777
Y: 0
Width: 191
Height: Parent.TemplateHeight
Text: ThisItem.'Session Identifier'
Again, Copy and Paste the Label Do these steps on label properties
Name: Lbl_Tenant_Identifier
Color: RGBA(0, 0, 0, 1)
Fill: RGBA(0, 0, 0, 0)
X: 968
Y: 0
Width: 265
Height: Parent.TemplateHeight
Text: ThisItem.'Tenant Identifier'
After Adding the Label Add icon to view the issue
Insert The View Icon
Name: Icon_View
X: 1264
Y: 8
WIdth: 64
Height: 64
PaddingTop: 10
PaddingBottom:10
PaddingLeft: 10
PaddingRight:10
OnSelect: Set(varissues,ThisItem);Navigate('Issue Tracker Screen',ScreenTransition.Cover);ViewForm(frm_Issue_Tracker)
Insert one more screen to show the all issues in power app
Name: Issue Tracker Screen
And Add the New Label for the Header to Define Screen Purposes
Do this Step on the Header Label Properties
Name: Lbl_Header
Text: "Create New Issue"
X:0
Y:0
Width: Parent.Width
Height:60
Font: Font.'Open Sans'
Size: 25
FontWeight : FontWeight.Semibold
Fill: RGBA(246, 88, 16, 1)
Color: RGBA(255, 255, 255, 1)
Insert back icon to Navigate List Screen
OnSelect: Navigate(Issue_list_Screen)
After This insert Edit Form to Create New Issue
After Insert the Edit Form Connect to your SharePoint list
Do this step on Edit form properties
Name: frm_Issue_Tracker
X: Parent.Width/2-Self.Width/2
Y: Lbl_Header.Height
Width: 800
Height: 500
Columns: 1
Item: varissues
DataSource: 'Issue Tracker'
Now our Form Look Like this
We Do Some More Step On every DataCard
First Of All Unlock All the DataCard
Select the User Agent_DataCard1
In this This Datacard Select DataCardValue3 Do this step On the Properties of this Datacard
Default: If(frm_Issue_Tracker.Mode=FormMode.New,Host.BrowserUserAgent,Parent.Default)
DisplayMode: DisplayMode.Disabled
Select the Operating System_DataCard1
In this This Datacard Select DataCardValue4 Do this step On the Properties of this Datacard
Default: If(frm_Issue_Tracker.Mode=FormMode.New,Host.OSType,Parent.Default)
DisplayMode: DisplayMode.Disabled
Select the Session Identifier_DataCard1
In this This Datacard Select DataCardValue5 Do this step On the Properties of this Datacard
Default: If(frm_Issue_Tracker.Mode=FormMode.New,Host.SessionID,Parent.Default)
DisplayMode: DisplayMode.Disabled
Select the Tenant Identifier_DataCard1
In this This Datacard Select DataCardValue6 Do this step On the Properties of this Datacard
Default: If(frm_Issue_Tracker.Mode=FormMode.New,Host.TenantID,Parent.Default)
DisplayMode: DisplayMode.Disabled
Write this code on frm_Issue_Tracker OnSuccess properties
OnSuccess : Notify("Issue Has been reported to the app Developer");ResetForm(frm_Issue_Tracker)
Insert Button To Submit The issue
After This Insert Button To submit The Issue Do the Following step to button properties
Name: btn_Submit
Text: "Submit"
X: Parent.Width/2-Self.Width/2
Y: frm_Issue_Tracker.Height+frm_Issue_Tracker.Y+20
Width: 200
Height: 80
RadiusTopLeft: 50
RadiusBottomRight:50
RadiusTopRight: 50
RadiusBottomLeft:50
Size: 25
FontWeight : FontWeight.Semibold
Fill: RGBA(246, 88, 16, 1)
Color: RGBA(255, 255, 255, 1)
PressedColor: Self.Color
PressedFill: Self.Fill
PressedBorderColor: Self.BorderColor
HoverColor: Self.Color
HoverFill: Self.Fill
HoverBorderColor: Self.BorderColor
OnSelect: SubmitForm(frm_Issue_Tracker)
Now Our App is complete
Additional Informations:
- Platform: Microsoft Power Apps and SharePoint.
- Purpose: Issue tracking and management.
- Key Features:
- Web browser and O/S detail acquisition.
- Customizable SharePoint list with essential columns.
- User data collection including User Agent, Operating System, Session, and Tenant Identifiers.
- Target Audience: App developers, IT managers, businesses seeking efficient issue tracking solutions.
- Prerequisite Knowledge: Basic understanding of Power Apps and SharePoint.
- Integration: This Power App can be integrated with other Microsoft services for enhanced functionality.
- Benefits:
- Improved data organization.
- Streamlined issue reporting and resolution.
- Enhanced user experience through easy tracking.
Conclusion:
Building a Power App for Issue Tracking can significantly streamline the process of recording and managing issues. With the help of SharePoint lists and the right columns, one can easily track user details, issue descriptions, and other relevant data to ensure a seamless user experience.
