#PowerApps: Using Components to create a Digital Clock - Part 1

Building a Digital Clock the traditional way

When I first set out to build a digital clock with night mode, I figured I was just going to start from what I know. Each digit of the clock is composed for 7 segments and each segment would behaves in a binary way based on the number that it needs to display.

To create each segment, I would use a Rectangle from the Icons gallery. Since I initially set out to add 3 digits to the clock - two to display seconds, and 1 to display minutes - this would require a whopping 21 rectangles, plus 2 for the blinking dots to bring the total rectangles to 23.

Controlling each digit required the use of 3 timers. Each timer would have to evaluate a value to determine which segments to display. For the right most digit, the following code is used for the timer, Timer1:

Timer1 OnTimerStart()
Select(Button1)

Timer1 OnTimerEnd()
UpdateContext({MyCounter: MyCounter + 1});
If (
    MyCounter > 9,
    UpdateContext({MyCounter: 0}),
    false
)

The code to determine which segment to display is encapsulated in a button, Button1, which allows for some isolation.

Button1 OnSelect()
// Segment 1
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS1: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS1: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS1: SegmentUnselected.Fill})
    )
);
// Segment 2
If(
    Or(
        MyCounter = 1,
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS2: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS2: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS2: SegmentUnselected.Fill})
    )
);
// Segment 3
If(
    Or(
        MyCounter = 1,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS3: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS3: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS3: SegmentUnselected.Fill})
    )
);
// Segment 4
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS4: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS4: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS4: SegmentUnselected.Fill})
    )
);
// Segment 5
If(
    Or(
        MyCounter = 2,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 0
    ),
    UpdateContext({FillColorS5: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS5: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS5: SegmentUnselected.Fill})
    )
);
// Segment 6
If(
    Or(
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS6: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS6: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS6: SegmentUnselected.Fill})
    )
);
// Segment 7
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9
    ),
    UpdateContext({FillColorS7: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS7: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS7: SegmentUnselected.Fill})
    )
)

But keep in mind that this is only for the first digit! For the second digit (from right to left), a second timer evaluates whether the MyCounter variable is also greater than 9 to advance yet a second counter for the second digit.

 Timer2 OnTimerStart()
Select(Button2)

In turn, we need to evaluate this second counter to ensure it does not exceed a value of 5.

Timer2 OnTimerEnd()
If(
    MyCounter = 0,
    UpdateContext({NyCounter: NyCounter + 1}),
    false
);
If(
    NyCounter > 5,
    UpdateContext({NyCounter: 0}),
    false
)

The Button2 code now looks awfully similar to the code we saw for Button1, but controls the display of segments for the second digit. Except for the name of certain variables, in fact, the code is the same!

Button2 OnSelect()
// Segment 1
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT1: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT1: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT1: SegmentUnselected.Fill})
    )
);
// Segment 2
If(
    Or(
        NyCounter = 1,
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT2: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT2: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT2: SegmentUnselected.Fill})
    )
);
// Segment 3
If(
    Or(
        NyCounter = 1,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT3: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT3: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT3: SegmentUnselected.Fill})
    )
);
// Segment 4
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT4: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT4: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT4: SegmentUnselected.Fill})
    )
);
// Segment 5
If(
    Or(
        NyCounter = 2,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 0
    ),
    UpdateContext({FillColorT5: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT5: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT5: SegmentUnselected.Fill})
    )
);
// Segment 6
If(
    Or(
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT6: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT6: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT6: SegmentUnselected.Fill})
    )
);
// Segment 7
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9
    ),
    UpdateContext({FillColorT7: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT7: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT7: SegmentUnselected.Fill})
    )
)

Now, we need to repeat the above for the left most digit all over again. Once again, we introduce a new timer with events that will evaluate the counter status to advance a third variable, and a button to encapsulate the code that will evaluate the segments to be activated for the third digit.

 Timer3 OnTimerStart()
Select(Button3)

In turn, we need to evaluate the first and second counters for when they reset to zero, to advance the minute counter.

Timer3 OnTimerEnd()
If(
    NyCounter = 0 && MyCounter = 0,
    UpdateContext({OyCounter: OyCounter + 1}),
    false
);
If(
    OyCounter > 9,
    UpdateContext({OyCounter: 0}),
    false
)

The Button3 code is in effect an exact copy of the code in buttons Button1 and Button2, but controls the display of segments for the left most digit.

Button3 OnSelect()
// Segment 1
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM1: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM1: NightmodeBackgr.Fill}), UpdateContext({FillColorM1: SegmentUnselected.Fill}))
);
// Segment 2
If(
    Or(
        OyCounter= 1,
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM2: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM2: NightmodeBackgr.Fill}), UpdateContext({FillColorM2: SegmentUnselected.Fill}))
);
// Segment 3
If(
    Or(
        OyCounter= 1,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM3: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM3: NightmodeBackgr.Fill}), UpdateContext({FillColorM3: SegmentUnselected.Fill}))
);
// Segment 4
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM4: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM4: NightmodeBackgr.Fill}), UpdateContext({FillColorM4: SegmentUnselected.Fill}))
);
// Segment 5
If(
    Or(
        OyCounter= 2,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 0
    ),
    UpdateContext({FillColorM5: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM5: NightmodeBackgr.Fill}), UpdateContext({FillColorM5: SegmentUnselected.Fill}))
);
// Segment 6
If(
    Or(
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM6: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM6: NightmodeBackgr.Fill}), UpdateContext({FillColorM6: SegmentUnselected.Fill}))
);
// Segment 7
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9
    ),
    UpdateContext({FillColorM7: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM7: NightmodeBackgr.Fill}), UpdateContext({FillColorM7: SegmentUnselected.Fill}))
)

As can be concluded from this exercise, the amount of (repeated) code, variable declarations, and controls increase progressively per 7-segment digit added. Another thing I noticed is, timers are not as responsive and the application is slow, overall - not the type of experience you would like and end-user to have.


NOTE: I am not sure if components is right for every application case, but one thing that I will insist on is to group objects and controls wherever possible to facilitate application readability and control navigation as an app builder.

Here's the final result:


On the positive side, building this application, using the pain staking process above thought me how I could leverage PowerApps components in order to promote code reusability, improve user experience, and increase application responsiveness. That will be the subject of my next article, Part 2 of this series.

This version of the app can be downloaded here (OneDrive).

Until next post,

MG.-
Mariano Gomez, MVP

Comments

Post a Comment

Popular posts from this blog

DBMS: 12 Microsoft Dynamics GP: 0 error when updating to Microsoft Dynamics GP 2013 R2

Image
Hello all! It's been quite a while since I've actually written anything of remote interest to anyone who follows my blog, but at the same time, you will be pleased to know that I've been quite busy in the consulting front, with upgrades, server migrations, complex multi-instance postings involving 10's of thousands of transactions, wrapping up some Field Service Automation projects, and the list goes on and on. This time around I want to bring to the forefront, an issue I encountered updating  from Microsoft Dynamics GP 2013 SP2 to Microsoft Dynamics GP 2013 R2 plus the latest service pack. Background My client requested a server migration to a new environment where they wanted to deploy Dynamics GP 2013 R2 web client (plus the latest service pack) and upgrade their relational database management system to Microsoft SQL Server 2014. This is something I'm absolutely comfortable with (for the most part) given also that my client was sitting at Microsoft Dynamics...
Read more

Do I have to use those "Z-" currency IDs in GP?

Image
I know this seems like a trivia question, but recently I have come across a number of clients who have been using Microsoft Dynamics GP for a number of years and have been told by their former partners that they *must* use the predefined currency IDs created after adding the sample company, with no real explanation to support these claims. Case in point, my new client in Saudi Arabia, has been struggling for years to understand why they were told to prefix all currency IDs with the "Z-". So they went ahead and setup "Z-SR" for the Saudi Real. If you are familiar with Microsoft Dynamics GP and the sample company, Fabrikam, you may have noticed by now that after adding the sample company (which is not a requirement by any means), you will get a number of predefined currencies such as Z-US$ (US Dollars), Z-UK (British Pounds), Z-C$ (Canadian Dollars), Z-AUD (Australian Dollars), and so forth, accompanied by a number of exchange rate tables. If you are not familiar wi...
Read more

Microsoft Dynamics GP Scrolling Windows and Line Sequence Numbers

Image
I thought I would write about something meaningless that no one really thinks about. However, I realized that this is a compelling topic since it makes for some interesting discussion around the ability to insert line items withinin most transaction scrolling windows. Let’s take some time to understand where Line Sequence Numbers come from. A Line Sequence Number is auto generated by Dynamics GP and uses a seed value of 16,384 as a basis for the first line. Each subsequent line in the scrolling window is incremented by this number, so line number 2 would have a Line Sequence Number value of 32,768, line number 3 would have Line Sequence Number Value of 49,152, and so on. Since most GP transaction entry scrolling windows allow inserting rows in between line items, the newly inserted Line Sequence Number value is calculated as an average between the previous and the next line item sequences, i.e., if you were to insert an item in between row 1 and row 2 in the scrolling window -- keep in...
Read more