Thursday, April 6, 2023

Confusion Surrounding Get changes for an item

Power Automate has this really cool action that allows you to see changes to an item. Sometimes when an item is updated. you need to take a specific action based on that change. This action is critical when you are using a "When an item is created or modified" action as the trigger. 

Use case for the action

This is a very simple workflow that is going to trigger when an item is created or updated. If this item gets updated a lot, it will trigger every time that the item is modified.  If you aren't careful, you could cause an infinite loop, or you could cause too many email notifications to go out, or maybe your calculation is updated too many times. 

How this action works and reports changes

All this action does is review the changes of an item based on the versioning between the current item and the one just before it. The deltas are then stored in a collection that records true or false. True means this column was changed. False means this column wasn't changed. Simple!

Take actions based on the changed columns

What can I do now with my collection of true and false values? In this simple example we will take action only when the title has changed. The workflow has one branch that sets a single variable to either yup or nope.  

A simple workflow with a condition

When an item is updated or changed, the first action retrieves the item. The second action then does a compare between the current item and the previous one stored in the list. Versioning enabled is required for this to work. You can get really fancy and have these two actions compare in different lists or compare different items. That's beyond the scope of this conversation but it possible. 

To properly set up the action, you have to define a few parameters. Pass in the ID of the item from the previous action and set up the since and until fields. Those two fields give the action boundaries to work within. If you didn't provide boundaries, it wouldn't know what versions to look at. 


The best boundaries to use are the workflow tokens. Here is a close up of the value I use. 


In the Condition block, all we need to do is look to see if there is a true or false value in the column we are observing, and then take action based on that. 

The workflow with data

Now we will see what it looks like with changes. This action is really long with lots of details. Click on it to zoom in

We can see the ID of the items that we are currently looking at.
Since version number is the old version
Is current version is the current version

Then there are a bunch of  "Has Column Changed" fields. These are the true or false Boolean values letting me know what columns have changed in the item. In this instance, the Title column has changed and is now true. In the condition, the expression evaluates to true so we go down the If yes path and can take whatever action we want.



 On a subsequent run where the title did not change, the workflow still executed but we observe that the firstname column changed is true and not the title column. 


and because of that, the condition evaluated to false. 


Conclusion

I hope you enjoyed the lesson! Writing this article helped me a lot to understand how powerful this action can be. 


 




Tuesday, April 4, 2023

PowerApps sudo CSS

 Something that is missing in PowerApps as of the writing of this post is the ability to apply formatting to all data cards and their elements at once. I've seen a few people say you can select all and make changes but I have never had any luck with that. Until Microsoft updates this ability, here is a workaround that takes a bit of work up front, but pays off in the end. 

Set up your fake CSS

Every data card has a lot of elements in it. You can use the code below as a starting point. This code has the most common items inside a data card that I typically apply changes to.
//the data below is set in 4 places, make sure any changes are copied there.
//Click ... next to App and choose "run onStart" to view changes
//the 4 locations are: App "OnStart", Sharepoint integration "Edit, View, New"
//datacardkey
Set(varDKBorColor, RGBA(0, 0, 0,0 ));
Set(varDKBorStyle, BorderStyle.Solid);
Set(varDKBorThick, 1);
Set(varDKColor, Color.Black);
Set(varDKFill, RGBA(255,255,255,1));

//datacardvalue
Set(varDVBorStyle, BorderStyle.Solid);
Set(varDVBorThick, 1);
Set(varDVColor, Color.Black);
Set(varDVFill, RGBA(255,255,255,1));

//datacard
Set(varDCleftCol, 0.2); //this one and one below must equal 1
Set(varDCrightCol, 0.8);
Set(varDCBorColor, RGBA(166, 166,166,166));
Set(varDCBorThick, 1);
Set(varDCBorStyle, BorderStyle.Solid);
Set(varDCFill, RGBA(255,255,255,1));
Set(varDCFont, Font.Arial);
Set(varDCFontW, FontWeight.Normal);
Set(varDCFontS, 9);
Set(isVisible, false);

What I have done is set a bunch of variables that I am going to reference in each card. I have each section separated out as an easy way to remember what element they belong to. You can organize them any way you see fit. I also try to name the variables by their location. In the very first item, varDKBorColor, I would apply that to the Border Color of the Data Key element in the datacard.  

Where to apply this code

I'm going to just go start with PowerApps in horizontal mode which is the most difficult to work with. 
This is a simple form with a few fields and a button that saves the item back to a list.


The first thing to remember is that on a SharePoint form, the SharePointIntegration overrides the default App commands. So, if you are editing your form in the editor, changes made in the editor here will not be applied to the New, View and Edit forms when launching the from a SharePoint list. It will make sense in a few minutes. 
Open the App link from the left side menu, and locate OnStart action. 


Then copy the code from the code block from "set up your fake css" and paste it into the command window. Expand the window to see as much as you want. 


Next, I have to get these variables to initialize. To do this, I click the ... menu next to Apps and choose Run OnStart
 

This initializes all the variables I will using and makes working in the editor a lot easier. I can review the variables in the Variables section of PowerApps. Any time I change a variable value, I just re-run Run OnStart for them to apply.


This can be useful for troubleshooting. 

Apply the CSS to a DataCard

Now for the fun part! 
From here it's a lot of copy-paste actions. Its way easier to copy paste than to type everything. 
First select a card and unlock it if needed by right clicking and choosing Unlock. 

First I will do BorderColor by selecting it from the dropdown.


Replace the text thats in there with your variable. In this case varDCBorColor


I will repeat this action on the other border elements, BorderStyle and BorderThickness. PowerApps alerts me that these items have been modified by showing them in bold. 


I am starting see the styles take share. but for impact, I applied the variables to each of my datacards. Below you can see consistent formatting of the border. 

Repeat this process for each element from Font size to Fill colors. 

Make changes to styling

I can now make a change to a variable, run the OnStart action and every place that variable is used with get the new style. 
Here I and going to change the color of the border and make it 5 pixels. 



Now I run OnStart and I didn't have to click on any DataCards. 

Adjusting the left/right DataKey and DataValue elements.

I wanted to show a more complex part of this, and that's the ability to adjust the placement of the elements. Maybe you want the DataKey label to be bigger or smaller or maybe the form will be responsive. Hard coding items breaks responsive form sizing. I can leverage variables to help there too.
Look at the Width calculation for the DataKey. It's using a calculation to get the width so that it takes up 40% of the space, I want it to take up 30 percent and the Value card to take up 70 percent. 


Replace the 0.4 with the variable varDCLeftCol (or varDCRightCol if you are on the data value) just make sure the totals of the two variable equal one. It won't hurt anything, it will just give you more white space than you expect to see as show below. 


Now the variable is applied to the data card value to take up the extra space. 


Shortcuts where we can take them

There are a few things where we can take a few shortcuts. If you click on a data card, and select "CTRL-A" to select all, you can apply things like fonts and text sizes to the entire contents of the data card. Take the advantage when you can to prevent have to paste over and over again. 


Apply your formatting for SharePoint 

If you are applying this formatting to a SharePoint list form, you will need to copy the variables to multiple places in the SharePointIntegration section of the PowerApp. Click SharePointIntegration  to activate it.


Then add the variables to each of these sections. 


There is a benefit to having separate sections like this, you can change the format for each mode. If you want Helvetica for OnView and Segui for OnEdit, go for it! 


Conclusion

A little bit of extra work in the beginning of the project can make modifying these forms in the future a lot easier. In the future, I hope that we can simply apply formatting just like we do in CSS on web pages and this will have to do until then.