Work-From-Home App
A simple application that facilitates the remote log-in & log-out of employees during remote work. This is made using PowerApps and SharePoint.
During my internship my supervisor voiced the desire for an easier way to log-in and out of the job remotely as the ones they use are a slower process because it needs to log-in with a username and password.
I created a WFH prototype using PowerApps and they liked it so much it ended up being implemented and used by the company.
Design
There isn't much of a design phase as I finished the creating the app in a day. Of course it ended up being done in a week because of revisions and tweaking but generally those are just minor changes and some additional functionality but the UI/UX was enough that it didn't really need anymore massive changes.
​
I used the mobile size screen because it is faster to load and it didn't really need a lot of actions. It's only opened using MS Teams because the security protocols of the company doesn't allow any access to devices not owned by the company.
Development
I created this after finishing my Skill Matrix app and during another project with managing a website using WIX. It took me two months to complete the Skill Matrix app and I learned a lot from creating it, considering the level of difficulty of that application and my relative knowledge on PowerApps when I started it (which was zero). This application was rather simple but I did learn how to manipulate texts and how to work with dates & time.
​
NOTE: There are parts that I was not able to recreate and used other means to show the same functionalities. I will add comments to show the difference.
OnStart
On the start of the application I do run a simple function.
ClearCollect(userProfile, Filter(Employee, ID = 1))
I didn't need to do this in the original app as I only need to use the User() functions to indicate who was using the application. It was connected to the Office365 of the company. This is used to show the image and name of the user as seen in the image.
Timer
I added a timer to indicate what time it was. The text shows
Text(timeone,"mmm dd, hh:mm:ss AM/PM")
​
timeone is set using a timer control. The timer control is set to autoStart and autoRepeat every 1000ms. Inside the timer control, on the OnTimerStart function, I put
Set(timeone, Now())
​
FLAG: I found out during the testing phase that you can cheat this with just changing the time on your computer as the Now() function uses the system locale time setting and not a server time based in your current time zone.
Log-In Button
Log-Out Button
As I indicated I originally used the User() function. The two buttons are almost identical and in the original one I added a Notify() function that tells the user that you are now logged in/logged out.
View Logs
OnVisible
I run a function whenever the screen of the View is shown. I use caching to save processing and limit connection calls.
Again, originally I use the User() function, this is just a work around to show the same thing I did on the original as I cannot faithfully recreate it.
Gallery
The gallery just shows the information regarding the specific user that uses it. On the OnVisible you can see that there is a Set() function. I use it to filter the gallery.
True will show the in type.
False will show the out type.
Log in/Log out buttons
This runs a simple function when clicked. Login button sets the view type to true while logout button sets it to false.
Flow (PowerAutomate)
A flow was requested to be added for the application. What this flow do basically is create a CSV file of all of the days logs. When I made the PowerApps the company actually discarded their old way of logging in as using MS Teams was faster and is easily integrated with PowerApps.
So when the app I created was approved and implemented to be used, it wasn't just used as a login/logout for remote users but as the main login/logout application for every employee at the company. The CSV file was to be sent to HR for payroll.
NOTE: I wasn't actually the main author of this flow but only as a collaborator as I had another project assigned to me. This was a recreation based on memory I might have somethings wrong or changed.
This was the original flow for the CSV file export. It is a recurring flow that runs every midnight and automatically exports a CSV file to the SharePoint site of the HR that is responsible for the payroll.
To begin, the flow takes all the logs for that day and arrange it for a table.
The CSV requires the login time and log out time together in one row. The data source data model doesn't include the time in and time out in one row. They are separated by "Log Type" column which indicates if it is "in" or "out" value.
​
There are 450+ employees that are using this application. So when you log-in and log-out, every day there are about 900+ rows created everyday.
The way the flow is created the "Get Row" will get all 900+ items. It is checked against itself to combine the "in" rows and "out" rows and append it to an array with the time-in and time-out together in one row. The algorithm works but the amount of time it takes to run is quite long.
A loop within a loop creates a two dimensional amount of processes. Since it is checking itself against itself, then the amount of check loops it does is about 900+ times 900+ or 810,000+ times. That is a lot of loops.
NOTE: I'm only focusing on this because this is my part in the collaboration.
My Version
My version differs because instead of taking all 900+ rows. I get the rows into two different arrays of 450+ each.
Instead of using the "condition" in the flow inside the loop to check if the "Log Type" is "in" or "out", filtering is done by the "Get Rows" by using ODATA Filter.
This process of using ODATA significantly reduces the amount of rows to be checked against itself.
Now 450+ times 450+ is still around 200,000+ loops but it is 25% of the original size of the loop and it cuts down the processing time by as much as 80%.
If you noticed I didn't add the part where you export it to an CSV file, that is because I am just a collaborator on this flow it didn't actually create the entire flow but I do know how to export it to a CSV file. I did something similar but is much harder which is export it to an excel template using a script in MS Excel.
Conclusion
This is what Power Apps was made for. A quick and relatively easy solution to business processing that requires any application. This is one of the simplest applications that I made but I thoroughly enjoyed making it because as I have said this is what PowerApps was made for.
I did learn somethings during this project. Also as this is one I created with prior knowledge to PowerApps I was able to make this way quicker that when I first started on my first project. My initial prototype took me a day to complete, the constant feed back and adjustment from the requestor (my supervisor) taught me a valuable lesson on how my project should be made for a much easier modification. Since this was also used by the company I had to do a extensive documentation for the application. ( I can't remember what exactly they are but they were quite a lot of them).