Microsoft Loop Components

When I looked at Loop a few months ago, I wasn't really impressed. The problem was I didn't have any context around what it could be used for. Since then, I have really come to love the service. 

In this blog you might see some inconsistencies. I left them in here to show that Loop is still not perfect and you may have to try a few different things to make it work. Certainly I had some unexpected results. At this time, Loop is still in preview. 

Loop has as much potential to disrupt content sharing as OneDrive did for sharing files. If you remember emailing documents around and all the crazy versions that resulted, then you know what I mean. It also has the same disruption potential as co-authoring in Office did. 

What is a Loop component?

Microsoft Loop components are like widgets that you place inside other communications. Each component is then related to all the others and is dynamic and updates in almost real time. Think of it like a hub and spoke of a wheel. The hub will be the data (pictures, text, surveys, etc.) and the spokes each connect to services like Word, Outlook, Teams and more. When a loop component is updated in one conversation area., it is updated in all places where that component is used. 

Vacation Planning Example

A big team trip is coming up this summer and I need a way to track and plan tasks with my crew. I have a few ways I could do it.

• Planner
• Microsoft Lists
• Excel spreadsheet
• Email messages

Each of those comes with advantages and disadvantages, which I won't cover hear to save time. This is a post about Loop after all. 

Let's begin!

I'm going to start by sending an email with a Loop component embedded in it to start the conversation. I open a new email, start typing my email and then I choose Loop from the Collaborate menu.

First thing is a voting table. 

 

Once the component is added, I fill in my ideas with some optional pros and cons. Several things you will notice. 

1. A link is created in the upper right corner. This is a link to the "hub" where the data is stored. 
2. People who are in this Loop component. It's just me right because I haven't emailed it yet. 
3. The table that will be shared and will editable with everyone. 

I updated my component and clicked send. If I log in as another user, I get a copy of the email and I can select the component and vote on the one I want. For this example everyone is voting for the island adventure. While it's hard to see in static images, my table was updated with votes, I can see who voted for what option and I can see who is currently on the page. 

Something that has recently gotten better is that permissions were automatically added to the Loop component based on the people invited to the email message. In the past you sometimes had to go back in and invite each user. 

Next steps, Planning! 

Now we get to see the real power of loop. I'm going to embed the content of the Loop in several places. First, I will be working from the web version, Kori from Teams, Garfield from email, and Rachel from Word. We can all work together simultaneously. To get is started I'm going to create word doc in a Teams channel. This next step isnt as smooth as it could be but I'm guessing it will get easier. I created a new document in Teams and in the ribbon I can add new loop components, but I cannot see the ones that already exist. 

That's okay because we can log into the Loop website and copy the component. Log into https://loop.microsoft.com and look at the list of recent items. I can see that the component I am looking for originated in Outlook.

I can open the component and I can interact with it. I can also click the Copy as Loop component link and that will allow me to place that Loop in other locations.

 I pasted the link directly into Word and it recognized it as a loop component, but at this time there is still a bug in Word embedded in Teams and the component doesn't render right.

 

Opening it in the browser version of Word makes it render properly. 

The desktop version also has the same issue as Word in Teams. 

I am also adding the loop component to the Teams chat window. Apparently it matters HOW you paste the link. I tried a regular paste, and you can see it just made a link. But ctrl-shift v rendered the component. I tried to paste it into a channel and it would never render and just left me a link. 

 

Freeform Collaboration

I will ask the team for idea on which activities they want to do for camp. By selecting an open area and typing a "/" i get a menu of the things i can do. I can add a task list and a bunch of other components. The will add their ideas in their respective technologies. 

Everyone added their content in their respective tools with tags applied to each persons writing. 

Assigning tasks

The next powerful piece is creating actionable items from the things you are working on. Lets create a task list and  assign tasks to be completed. The best part is these tasks are real tasks that will soon be connected to To Do and will show up in Outlook. 

As I fill in the tasks, emails are sent to their respective owners. 

Here an email is received with a link to the component, so no context switching out of Outlook. 

While To Do and Planner tasks did not roll out to my tenant yet, it's coming soon. I will update it when I can. For now, we have to complete the tasks in any of the tools we are working in, web, Word, Outlook or Teams. 

Conclusion

This is a very exciting tool to use and is still evolving. I can see this being used for standups reporting, budget planning and all sorts of things that collaboration is needed. Please give Microsoft your feedback and I know this will keep getting better and better. 

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. 

 

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.