DigiPersonal

Create a no-code navigation button with icon

In one of my current projects, we’re working on a canvas app where user experience is an essential part of the project. We teamed up with a designer to make sure that the app fits into the company’s styling guidelines and that the UI was as intuitive and attractive as possible. One of the elements present in the resulting design is a button with an icon on it in addition to the label.

In the standard button control, it’s not possible to add an icon. If we just added the icon on top of the button, the colors will differ when hovering over the button or the icon which is not ideal for user experience. Since we didn’t want to create a custom component with code to add the possibility of an icon, I created a button component using only standard controls.

The resulting button will look and behave like this:

Keep reading for the steps to create this button!

Button requirements

Buttons can be used for many different things in an app: submit a form, navigate to another screen, apply a filter to a gallery, etc. Typically, when a button is pressed, an action needs to happen. Since canvas components currently don’t support specifying actions as their inputs or outputs, we are limited in what we can do with a button component. In this project’s requirements, the buttons would be used to navigate to a different screen.

Creating the component

💡 It’s not required to create the button as a component, but I prefer to do this to have less controls in my actual app later on.

You can create the component in any canvas app you have or in a dedicated component library. After creating the component, I’m renaming the it to btnNavWithIcon so it’s easily identifiable when I want to use it in my app. I’m also changing the height and width to a commonly used button shape and size.

I am then adding the four controls I need to create the button: the background button (btnBottom), a label (lblNavButton), a random icon (icnNavButton) and the top button (btnTop). The reason I’m adding two buttons is to make sure that the top button (which will be transparent) and background (which will have a color) will be exactly the same shape. At this point, it doesn’t matter where they are placed inside the screen since that will all be determined dynamically. What is important is that the top button control is in front so that that can actually be selected when the component is used in an app. We can see which control is at the front of the component in the Tree view (higher position in the tree = higher layer in the app/component).

I’m defining three custom input properties for my control:

Label (text): the label that will be visible in the final button
Icon (text): the icon that will be used
Screen (screen): the screen to navigate to when the button is pressed

The next thing to do is link these input properties to the controls in our component, remove the labels from the button controls and disable the bottom button.

Set the “Text” property of lblNavButton to btnNavWithIcon.Label
Set the ‘Icon” property of icnNavButton to btnNavWithIcon.Icon
Set the “OnSelect” property of btnTop to Navigate(btnNavWithIcon.Screen, ScreenTransition.None)
Set the “DisplayMode” property of btnBottom to DisplayMode.View
Set the “Text” property of btnTop and btnBottom to “”

Let’s complete the basic functionality and styling of the button as well.

Set the size of btnTop to the size of the component
Set the “X” and “Y” properties of btnTop to 0
Set “Height”, “Width”, “X” and “Y” of btnBottom to the corresponding properties of btnTop
Resize and position the icon and label so they fit nicely inside the component
Set “Fill” of btnTop to Transparent
Set “HoverFill” of btnTop to RGBA(255,255,255,0.1) – This is 90% transparent white, meaning the color behind it will be about 10% lighter
Set “PressedFill” of btnTop to RGBA(0,0,0,0.1) – This is 90% transparent black, meaning the color behind it will be about 10% darker

The last 3 properties will make it appear that the icon and label are part of one button, since their color will change together with the background color (the fill color of the bottom button).

The button will look like this:

💡 You can test the component by setting the input properties you defined using the formula bar. In this case, I’ve set “Icon” to Icon.Settings (without quotation marks) and “Label” to “Settings”.

Styling the button

To determine the styling of the button, there are plenty of options. You can fix colors, position and size of the icon and label inside the button, you can make their position and size dynamic based on the height and width of your component, or you can specify additional input properties so that whoever will use your component has control over it.

In my case, I’m choosing a dynamic styling based on user inputs. This means I need to add a couple more input properties for the location and size of my controls: IconLocation, IconSize and FontSize. I’m also adding two color input properties: ButtonFill and TextColor. For the IconLocation and IconSize, I’m specifying the possible values in the description: Top, Bottom, Left and Right for location and Small, Medium and Large for size.

To apply the styling on the controls, we first need to decide what we want the styling to be. Colors is easy, they will be defined when someone adds the control to their app. Apply the below settings to btnBottom, icnNavButton and lblNavButton.text

But what does “Top” or “Left” mean? And what size is “Large” compared to “Small”? I’m using the following definition:

If the position of the icon is “Top” or “Bottom”, the label and icon will be centered inside the component
Horizontal margins are 10% of the width of the control, vertical will be 10% of the height of the component
“Small” means the icon’s height and width is 30% of the minimum of height and width of the component, “Medium” 50% and “Large” 70%
Default position is “Left” and size “Medium”

Let’s break this down for the “X” property of the icon.

If the position of the icon is “Top” or “Bottom”, the center of the icon should be in the center of the button. Using the below image, we can work out what that means in terms of known properties.

If the position of the icon is left the margin compared to the left side of the button should be 10% of the width of the button. This translated directly to the X-coordinate of the icon.
If the position of the icon is right, the margin compared to the right side of the button should be 10% of the width of the button. We can again use an image to figure out what this means in terms of known properties.

Bringing these three together, we get the following formula for the X-coordinate of the icon.

By not specifying “Left”, this will act as the default location of the icon and will also work if no or an incorrect value is specified.

Using similar reasoning and the styling rules defined, the remaining position and size properties of the icon and label can be specified.

That’s it! The button component is now ready to be used!

The result

We can easily test the resulting component by changing the input properties using the formula bar. Changing height, width and icon position could yield the result in the following animation.

We have successfully created a button component with a label and an icon with a couple of styling options to make it flexible. If we add this button to an app and specify the “Screen” property we can navigate to that screen by pressing the button. In the below animation I have created a simple test app with 3 screens and some buttons to navigate between them.

I hope this helps in creating your own custom button component with an icon. Good luck!

Taking care of the personal now that we’re going digital

These days, more and more of us are staying home and going digital for work, pleasure and connecting with friends and families in order to #flattenthecurve. COVID-19 has spread across the globe and is impacting our lives in significant ways. The digital world that we have at our finger tips offers many advantages: it keeps us up to date, entertained, connected and allows us to work from home.

And yet, it also means we run the risk of losing track of our personal well-being. Digital connection is not the same as real-life connection. Working from home constantly makes it easy to forget where work ends and free time starts. I can only imagine what it’s like to throw children in the mix. There are a lot of tips out there on how to manage the working part in WFH when you’re not used to it, but I’d like to touch on everything else.

How do we stay sane and take care of ourselves in all this?

Set boundaries

I’m a firm believer and supporter of the flexibility that working from home provides. You can choose more freely when you start and end the working day. There’s no commute that you need to take into account. You’ll find yourself to be more productive because there are no co-workers to distract you (there might be others asking for your attention, but that’s another issue). This is great if you’re working from home a couple of days a week and you can use the extra time to get some difficult work done. However, when you’re WFH full-time, it can easily turn into working all day, everyday. That’s not healthy.

To prevent this, decide a schedule for yourself and stick to it. Determine when you’ll start in the morning, take a proper lunch break and clock out in the afternoon/evening. Put it on the agenda, set a reminder in your phone, ask the other people in your house to come and remind you, teach your dog/cat/other animal to grab your attention when an alarm starts playing. Do whatever it takes, as long as you don’t end up spending every waking minute with work. Getting away from it and doing something else will mean you have a clearer mind when you pick it up the next day, or after the weekend. Yes, weekends still exist, and you should take them.

Get outside

This may not be an easy one, depending on your living situation.

If you have a garden or can still go on the street, take a walk. If you have other living beings in the house, maybe even play a game. Throw a ball around, play hide and seek, run after your dog/cat/other animal. And a little rain will not hurt you, or who are you trying to save that hairdo for? 😉 With spring around the corner, you could possibly get some work done in the backyard. Remove the weeds, mow the lawn for the first time, replant some potted plants etc. Or just sit on the patio with your preferred drink and enjoy the sun and fresh air.

If you live in an apartment and you’re not allowed to go on the street anymore, it’s more difficult. But not impossible, you can still get fresh air. Go out on the balcony if you have one. If you don’t, open a window and stick your head out. Take a couple of deep breaths and let your eyes wander. If the weather’s nice, you can even open all the windows and air out your apartment. Fresh air and a bit of sunlight can do wonders to our mind, body and spirit.

Move your body

First things first, I’m not an athletic person by any means. I mean, I’m short of breath after two flights of stairs. And yet I mean it when I say that you should move your body. You might be surprised by the amount of movement we miss out on when we’re at home 24/7. Not walking to the car, public transport, the office, cafeteria, bathroom, that colleague on the other side of the building or site, your favorite coffee shop or lunch spot etc. That’s a lot of walking you’re not doing. You should make up for that.

There are different ways to move your body. You can take a walk if you can still go on the street or in your garden (see tip #2). Any stairs around? Go up and down them a couple of times. You can turn to YouTube for free workout videos, there are different options depending on your physique. From yoga to HIIT, there’s something for everyone. Chase your pets or kids if they like it. Turn on some music and have a dance party. And if you have significant other with you… I don’t need to spell that out, do I? Just move your body, whichever way you prefer. 😉

Get away from the screen

Just as your mind needs rest, your eyes need rest too. It’s easy when you clock out of work to browse the internet and fall down a Twitter, Instagram, YouTube or other social media rabbit hole. Try to avoid this. And yes, TVs and smartphones are screens to. Turn to something else. Read a real, paper book if you have one. Do something creative like drawing, painting or other arts and crafts. Play a board game with the family. Clean the house, one room every day (bonus tip to move your body!) or that oven, bathroom cabinet or other place that is in desperate need of a cleaning. Reorganize a space or closet. Make a jigsaw puzzle. There is so much you can do away from the screen, experiment and maybe you’ll find yourself a new hobby or rekindle an old one.

Get enough sleep

You may have thought “awesome, I don’t need to get up early because I don’t have to commute to and from work!”. Yes and no. If you have a one-way commute of an hour or more, definitely take that extra time to sleep a bit later. Just don’t use it as an excuse to stay up an hour later in the evening and binge-watch Netflix (or play another round of the board game you’re playing). Just as it is important to set and stick to a schedule for work, it’s important to maintain a healthy life schedule as well, and that includes getting enough sleep.

Decide when you want to get up and set your alarm. I highly recommend not straying too far from your normal wake up time so it’s easier to slip back in to your normal routine when the time comes. Once you know what time you want to get up and how many hours of sleep you need (on average it’s 8 hours, but you might need more or less), you know by what time you need to be in bed. Make it happen. You’ll thank yourself in the morning (or the next evening when you don’t have to work 2 hours longer than planned because you couldn’t get out of bed).

These tips are common sense and absolutely also valid in a time without COVID-19, but when you’re working from home it can be easy to forget. Consider this as your friendly reminder that you also need to take care of yourself. Don’t forget the personal aspect while we’re going digital even more than before. Stay at home to stay healthy physically and use these tips to stay healthy mentally.

Good luck! #flattenthecurve

Power Platform Data Policies: #BetterTogether ?

If you’re working with Power Apps or Power Automate, chances are you’ve heard about Data Policies or DLP (Data Loss Prevention) policies already. If you haven’t, here’s how Microsoft defines them:

DLP policies enforce rules of what connectors can be used together by classifying connectors as either Business Data only or No Business Data allowed. Simply, if you put a connector in the business data only group, it can only be used with other connectors from that group in the same app.
docs.microsoft.com

On Microsoft Docs, you can find some more information about them and some guidelines are proposed on how to use them within your tenant. Now, in these docs it is always assumed that one and only one policy is applied to each environment in a tenant at any given time. Now I was wondering what happens if you apply multiple data policies to the same environment. I wanted to know how they would interact: would one overrule the other, and if so, which one would “win”? Would they be combined and could this potentially provide advantages? Let’s see what I found and if they are #BetterTogether…

Setting the scene

In order to test out different combinations of data policies, I created a couple of easy Power Automate flows that each contain two to three connectors. The name of the flows describe the connectors used inside. This allows me to easily see which connectors are affected when applying different data policies.

An example of one of these simple flows:

Example flow with Teams en Notifications actions.

I also created several data policies but didn’t apply them to any environment yet. Here, I used the name of the data policy to describe which connectors are added to the “Business data only” group.

Data policies in the tenant, not applied to any environment.

And an example data policy:

Example data policy with Notifications and Teams in the “Business data only” group.

With all this in place, we can start experimenting and see what happens.

Applying complementary data policies to an environment

Let’s start simple. I change the environments in the “Teams-Notifications” policy to “Contoso”, and immediately in the overview I see my policy has been applied. Going back to the flow overview, I can see that two of the flows are now suspended. (This last bit can take some time to synchronize and show up.).

Teams-Notifications policy is applied to the environment with flows.

SP-Teams and Teams-Approvals flows are suspended because they violate the policy.

The flows that are suspended are those that contain one connector from the “Business data only” group whereas the other is in the “No business data allowed” group: SP-Teams and Teams-Approvals. This is exactly the behavior that is expected from data policies.

Now, let’s go a step further and apply a second policy: SP-Outlook.

Teams-notifications and SP-Outlook data policies are applied.

SP-Approvals, SP-Teams and Teams-Approvals flows are suspended because they violate one of the two policies.

Now, an extra flow is suspended: SP-Approvals, because the Approvals and SharePoint connector cannot be used in the same flow according to the new data policy. This means that when applying multiple data policies to one environment, they are all in effect and there is no overruling of one data policy. The groups that are defined in the “Business data only” section of the data policies exist next to each other. That’s clear. However, in this case I only included different connectors in the two different policies, so there is no interference, what happens when I apply multiple data policies including the same connector?

Applying multiple policies for the same connectors

Let’s turn off the SP-Approvals policy and enable the Teams Only policy.

Teams only and Teams-Notifications policies are applied.

SP-Teams, Teams-Approvals and Teams-Notifications flows are disabled.

The result: all flows that have combined a Teams connector with another connector are suspended. The other ones are turned on. This means that the least permissive policy regarding the connector used in multiple policies is enforced, even if another policy exists that specifies that these connectors can be combined. The other policy is also still in effect. Note that in this case I don’t have any other flows that combine the Notifications connector with another one, if I did, that one would also be suspended.

Let’s try another case: Teams Only is disabled, SP-Teams is enabled. This leads to even less active flows. All but one are suspended. Any flow that combines SharePoint or Teams with another connector is disabled. (Not pictured but the same would be true for Notifications.)

SP-Teams and Teams-Notifications policies are applied.

Only the OneDrive-Approvals flow is active, all others violate at least one of the applied policies.

This leads to the conclusion that different data policies are combined in an AND relationship. Let’s look at it using a venndiagram.

Venn-diagram of Data Policies SP-Teams and Teams-Notifications applied to the environment.

In this diagram we see that when the two policies are applied with a shared connector, we are effectively creating 4 groups of connectors, instead of 2 with a typical data policy. Since there is only 1 connector in 3 of these groups, the flows that are using any of these connectors in combination with another one would be suspended. Any flows that combine connectors that are in the “No business data allowed” group in both data policies will continue to function. We can create a similar diagram for the second situation in the previous section, and will see a similar result.

Venn-diagram of Data Policies SP-Outlook and Teams-Notifications applied to the environment.

In this case, 3 groups are created, and there is no overlap since different connectors are included in the Business data only group in both data policies.

What does this mean?

You can use multiple data policies applied to one environment to create multiple groups of connectors that can share data between them and not with any other connectors. However, it is important to be considerate so you don’t unintentionally get isolated connectors.

If you are consciously using multiple data policies, make sure that connectors used in any other policies are all in the same group. Be aware that the least permissive data policy is applied, no extensions to data policy groups can be made by using multiple policies, only complementary groups can be created.

However, data policies still provide little flexibility. I would like to see an option to distinguish between incoming and outgoing data in a lot of connectors. For example, I might want to capture all tweets with a certain hashtag, but I don’t want to automate tweets myself. Another situation that you might encounter is where you want to be able to combine SharePoint with Teams and Teams with Twitter, but maybe not SharePoint and Twitter. This is also not possible with how data policies currently work, unless in different environments.

To conclude, combining multiple data policies can definitely be useful if you want to create more than 2 groups of connectors, with different connectors in each group, to manage your data connections in apps and flows. In this case, they are #BetterTogether.

DigiPersonal… What’s in a name?

One of the first steps in creating a blog is deciding on a name. Definitely not the easiest thing to do. There are an infinite amount of options. Personally, I was struggling with this for quite some time. My last name, Ysewijn, isn’t the easiest to remember, pronounce or write down without actually seeing it written or spelling it out (and even then). It’s relatively unique, yes, and that provides some benefits, but I wanted something that could be found easily. There began my quest for the “perfect” blog name.

First, let’s backup a bit. I’ve been wanting to start a blog and build my online presence for quite some years now. Plenty of topics to write about played in my mind, I even started with 2 posts a couple of years back before my fears got the better of me and I abandoned the project. It wasn’t “perfect” (perfect tends to be a theme around here). What will make this time different?

Since I started working at my current employer, I have been introduced to the community. Even though I was already working in the field of SharePoint and Office 365 before that, I had no idea about its size and the possibilities it holds. I started playing with the idea of contributing to it in the form of a blog. What could be better than combining my interests as a professional and my itch to write? Still, I hesitated and doubted myself.

Fast forward to the end of 2019, after some reflection and looking ahead at what is to come, I decided that 2020 will be the year I finally take a risk or two, three, … I submitted sessions to speak at a couple of events (of which several were accepted!) and decided that I will take another swing at starting (and keeping!) a blog. I figured out I want to write about my professional interests: Office 365, including the Power Platform. However, I also want to write about personal growth, since this is something that I’m passionate about.

Is it possible to combine these things? Will people be interested in hearing about it? Will I lose my credibility as a professional if I write about personal stuff? These were all thoughts going through my mind. However, in my preparation for 2020, I decided that my theme for the year would be COURAGE. Feeling the fear and doing it anyway. So I’m taking a chance and deciding to launch a blog where these two aspects will be combined. At this moment, I’m back to finding the “perfect” name.

Courage is feeling the fear and doing it anyway
– Oprah Winfrey

One evening I was thinking about it when DigiPersonal came to mind. A combination of digital and personal, I was sure someone would have already thought about it. I looked it up and found the domain still available for purchase. I thought it over some more and a few days later purchased the domain. Is it “perfect”? Probably not, “digital” might be too broad of a term. What does perfect mean anyway? But it’s easy to remember and clearly shows that my blog will also include personal stories. Therefore it’s perfect for now.

So, what’s in a name? DigiPersonal – a blog about digital and personal transformation. I will write about my experiences as a professional, helping organizations digitize using Microsoft products and lessons I learn along the way. On the other hand, personal growth topics will be included as well. This gives me ample inspiration and freedom to write.

Step 1: Starting a blog ✔️
Step 2: Keeping a blog 🚧

I hope you’ll join me on this journey!