Create a SharePoint list by using a list template “Work Progress Tracker” and give it a name “Task assignments” . Here the list template includes different columns like single line of text, Multiple line of text,choice,Date and Time, person type columns etc.
Create a canvas app in power app by naming it “Task Management”
For a Responsive design first we need to change some settings in the app
Go to Settings -> Display ->Scale to fit (Disable it)
Create a new screen “Header,main section,footer” and rename it as “Home screen”
Delete the footer and add a Text label to the Header and name it as “Responsive Grid”
Connect to the data source SharePoint list “Task Assignments” to the power apps
Build the Headers to the Grid :– Add a ‘container’ to the main section of the container and rename it as ‘Grid header’ . Off the flexible height of the container and set the height to ’40’
Add a button to the container and name it as “Work item” and set the mode to “view” mode. Repeat the process to all the headers.
Rename all the Header controls in the left navigation
The width of the headers has to be different because the width of the controls which are to be added to the headers would be in different width. for that change the ‘X’ property of the headers as below
Category :-
Property : X=headerworkitem.X+headerworkitem.width
Progress:-
property X=headercategory.X+headercategory.width
priority :-
property X=headerprogress.X+headerprogress.width
start date :-
property X=headerpriority.X+headerpriority.width
Due date:-
property X=headerstartdate.X+headerstartdate.width
Assigned to :-
property X=headerduedate.X+headerduedate.width
After Repeating the process for all the headers, when we increase the size of one header the remaining headers will reposition automatically.
Build the Grid using Gallery :-
Insert a ‘Blank vertical gallery’ to the main section container
Instead of connecting data source directly to the gallery lets create a collection in the app and add that collection to the gallery, for that insert a ‘button’ to the Home screen and rename it as ‘btnLoadData’ .
“onselect” property of the button =clearcollect(colGridData,’Task Assignments’)
Now add the collection to the Gallery and rename the gallery as “galleryGrid”
‘Work item’ is a text control, for that i am adding a ‘Text input’ to the gallery and naming it as ‘work item’ & The X property and width of the text input has to be same as the header control,for that
Text input :-
X=headerworkitem.X
Width=headerworkitem.width
For remaining columns instead of adding individual controls separately to the grid lets create a new screen and insert an Edit form and connect SharePoint list so that we can add that data cards to the grid.
Here the category is a choice column of multiple select combo box, copy this data card and paste it in the gallery of home screen
Remove all the errors of the control in respective properties by removing text in the properties like ‘defaultselecteditems’,’Tooltip’,’Bordercolour’ and preview the app
Set the X property and width of the category same as the header
X=headercategory.X
width=headercategory.width
Add the progress data card to the gallery and set the size of it same as it’s header, for that change the properties of X and width
X=headerprogress.X
width=headerprogress.width
Repeat the same process to every column now the preview of the grid will be as shown below.
Reset the size of the gallery same as the header columns.
Now the data in the grid has to be loaded on the click of the button for that the ‘visible’ property of the button has to be ‘false’ and for the home screen the ‘onvisible’ property has to be set as “select(btnLoadData)” so the movement home screen becomes visible that executes the formula in the button which acts as a reusable code in the grid.
To set the grid in view mode or editable mode we need to set the following changes
In the “onstart” property of the ‘App’ : set(varGridEdit,false);
Now create a button when the user needs to see the grid in view or edit mode by clicking on it
Add a container to the main section of the screen and reorder it to the top and off the flexible height and set the height to 50 in the property section on the right side.
add button to this container set the properties like
Text=if(varGridEdit,”Exit the Grid View”,”Edit the grid view”)
onselect=set(varGridEdit,!varGridEdit)
for gallery control set the properties like below to change the modes of the grid
DisplayMode=if(varGridEdit, DisplayMode.Edit,DisplayMode.View)
Now preview the app when you click on button it will switch to view mode and edit mode based on the button click.
change the ‘Boarder thickness’ property of the work item text input =if(varGridEdit,2,0); to make it same as other controls.
when we check the grid still the data is not loaded into the grid from SharePoint list .
so to load the data into the grid we need to set the default values of the columns
workitem text input :default=ThisItem.Title
Category combo box :defaultselecteditems=ThisItem.Category
progress combo box :defaultselecteditems=ThisItem.progress
Priority combo box:defaultselectedItems=ThisItem.Priority
Start date :defaultdate=ThisItem.startdate
Duedate :defaultdate=ThisItem.Duedate
Assigned to :defaultselecteditems=ThisItem.Assigned to
Now the preview of the app will be like this where the items are added here
To patch the data to the SharePoint first the data has to be stored in the collection for that
In the onchange property of all the columns write the formula “select(parent)”
Here the parent control is gallery so set the property of gallery as below to patch the date
| onselect :patch(colGridData,Thisitem,{Title: workitem.Text,category:category.selecteditems, progress:progress.selected, priority:priority.selected, ‘startdate’:startdate.selecteddate,’duedate’:duedate.selecteddate,’Assigned to’:Assigned to.selected}) |
change the work item text input property “Delayoutput” to true so the onchange function only works when user stops typing instead of working after every key stroke .
To update the items in the SharePoint when we click on “Exit Grid View” button do some changes to the button in the “onselect” property
| set(varGridEdit,patch(‘Task Assignments’,colGridData));select(btnLoadData);set(varGridEdit,!varGridEdit) |
Now preview the app and add data in the collection
The data will be added to the SharePoint as below
To create new records add a button to the grid and rename it as “New item” & in the onselect property of the button add the function
| collect(colGridData,Defaults(‘Task Assignments’)) |
Here the default function will work like a new record entry that’s being added to the data source it won’t add the record in the data source it’s just get the empty record and adds it to the collection. Now every time the user clicks on the button this function is being executed . The default function is also an expensive operation because every time the user clicks on this it’s going to query the data source and go and get the schema with empty record from there and this is something that is definitely not going to change during the user session so what we can do is again go to the “App” object and create a variable “varNewRecord” in onstart property and assign default function to it
| set(varNewRecord,Defaults(‘Task Assignments’)); |
This function runs only when the app starts . Now instead of Default function add this variable to the formula as below
| collect(colGridData, varNewRecord) |
To set the button only visible when the grid is in edit mode set the visible property of the button as below
visible=varGridEdit(New item button)
Now the variable is empty here .
In SharePoint the Id column is always unique,so to set an unique id for the item created in the grid not in SharePoint lets create an another variable in the ‘onstart’ function of the “App”.So when the user creates an item it will store under that id
Add that variable to the ‘new button’ and set varNumber+1 so that The Id will increase while your creating new records.
Now we can check the id’s of the items created in the grid like 10000001 and so on…
Data validations :-
lets perform data validations on the grid .First work item has to be in red shade when no item is there in it for that in the ‘Bordercolor’ property has to be
| Bordercolor(workitem)=if(isblank(self.Text),Red,RGBA(0, 18, 107, 1)) |
Same operation on the Category
| Bordercolor=if(isblank(self.selecteditems)||isEmpty(self.selecteditems),Red,RGBA(166, 166, 166, 1)) |
so when the category column is empty it will highlight in red color
To indicate an Error massage to the user lets write below formula in the Onselect property of button “Edit Grid View”
| If(varGridEdit,If(!IsBlank(LookUp(colGridData,Title=Blank()||Title=” “||IsEmpty(category)||IsBlank(category))),Notify(“Please fill required fields”,NotificationType.Error,2000), Patch(‘Task Assaignments’,UpdateIf(colGridData,Created=Blank(),{ID:Blank()}));Notify(“Grid Data Updated”,NotificationType.Success,2000); Select(btnLoadData);Set(varGridEdit,!varGridEdit)),Set(varGridEdit,!varGridEdit)); |
When we run the app the error massage will be displayed on the top when the category column is empty.
To UNDO changes add a button to the container and in onselect property write
| onselect=Select(btnLoadData);Set(varGridEdit,false) visible=varGridEdit(so the button will visible only in edit mode) |
Horizontal scroll and freeze pane :-
Add a slider to the grid and set the properties as shown below
Make some changes to the category so the scroll will work accordingly.
| X=headerworkitem.X+headerworkitem.Width-Slider1.Value |
Now preview the app we can see the items are scrolling from left to right
Delete item/Record in a Grid :-
To Delete the items in the Grid ,Add an “Trash” icon to the grid and place it after the work item lets fix The X and width properties of the work item as below
| X=headerworkitem.X+iconDelete.Width |
Width=headerWorkitem.Width-iconDelete.Width
When you run the app you can delete an item by clicking on delete icon.
