Microsoft 365 Community Community Demos, 27 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deep linking from List Formatting to Power Automate solution

Description

In this 15-minute developer-focused demo, Chris Kent shows the integration of lists, list formatting and Power Apps. Achieve a similar look and feel using same SVG icons in the list and the Power App. Call for list data from the Power App. Launch a Power App and send mail from within a list. Color SVG icons using fill properties in Inkscape SVG Editor. Chris shows the ease and convenience of using code from 2 samples in his demo. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on May 27, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Graphics - Fluent UI Icon Search | https://www.flicon.io/
• Sample - Person Mail To Link | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-mailto
• Sample - Launch Power App Button | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-launch-powerapp
• Blog post - Custom Icon Buttons in Power Apps with Hover Color | https://thechriskent.com/2021/05/27/custom-icon-buttons-in-power-apps-with-hover-color/
• Editor - Inkscape - https://inkscape.org

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

All right, let's get started, then let's take a look at a few things here, all right, so we head over to our classic warrior horses site and, of course, and uh the warrior horses they've got a couple of lists here: they've got a list uh called battles and in this list all they're doing is they've got a battle and they've got the commander for that battle and then they've got this related list over here called spoils right, and so it's got to look up to that battle and it's just got detail.

A

So it's a real master. You know parent-child kind of situation there. Okay. Now because the the warrior horses love uh all things, you know horrible and painful they've recently started getting to power apps. So let's take a look. They built a little power app around. This called spoils. Tracker 3000 right. So if we run that little thing, a very exciting and beautiful app, uh that makes you all weep at its beauty comes up here right. It lists those battles and if you click on one of them right, you'll get just the spoils for that battle.

A

Wow right! So that's cool right and that's awesome now. How do we kind of integrate this right? So we've got this idea of lists. We've got this idealist formatting. How do we kind of create a unique or a shared experience here right? What are some of the things we can do uh to make that a little better, so one of the things we can do right first off is add a a way to launch uh directly into that app right.

A

So if we want to come in here, we're gonna go more because I want to choose a calculated column type, and I only do that because it's I just want the format all right, so I really care about an editable value so launch for that, I'm just going to equals. Double quote: double quote, and I'm just hit.

A

Okay, now I'm head over to our samples repo, where we have a sample for you called a generic launch power app I'm going to copy that just paste that in here in advanced mode, all right get rid of that junk paste. This very beautiful format. Let's make this a little bigger, so we can see it. The whole idea is here: it just creates a button and if I preview that you can see it creates this beautiful button that says open an app and then it's got this link here now.

A

What first thing I need to do is make sure it's pointed to my power app. So if I go back to powerapps pick the power, if I want to link to go to details, I get this beautiful web link here. If I right click on that- and I say copy link, I'm just going to head back to that format, and just everywhere, that's in these first set of quotes all the way up to the ampersand before hide navbar, and I'm just going to paste that in now you'll notice.

A

This actually happened to already be my power up. So it didn't change a lot, but then I've got this hide now bar equals, true, which will go to the little powerapps sweet bar junk right and then I have this item id equals id and we'll talk about that. That's deep linking and I'm going to show you that briefly, but the idea here is that's pretty good. uh One of the things, though, is I don't really like that icon.

A

So if I head over here to flykin so flycan.io, where I can search for icon, I have no there's one that I want. It's called crown. I just hit this to copy the name and I'm gonna head back in here to this guy and I'm just going to paste over this icon name with crown, if I preview that ooh so pretty now, if I save that- and I can click on this guy right and it's going to launch the app now- it just goes straight to the main page because it launched the app right.

A

So what is this item id equals one all about? Well, let's see if we can handle that now this isn't a powerapps uh class or anything, but I can show you briefly how we handle this. So if we go to the app we go to the onstart event, I'm just going to copy the code to handle my parameter right. So let me copy down I'll paste that sucker in here, let's make it a little bigger, so we can all see it, and so the whole idea is I'm just looking for parameter item id.

A

If it's not blank and it's a number, then I'm going to load something in my uh I've got a variable called battle item right and all it's going to do is going to go. Look it up from the battles list and stick it in there and then it's going to navigate directly into the spoils screen very exciting. Let's save that! Let's publish and hope that our publish catches up here, yes publish this beautiful version all right, so we're going to publish that we'll give that just a minute.

A

While we look at a couple of other items here, all right so we'll come back to see the deep link working. But what if I want to do uh some other stuff like? If I look at my spoils list? Well, that's kind of fancy. I've got a little icon here again, another icon from the uh the fluid ui and that's cool. Well. If I want that same experience over in powerapps right, so I can do that. All I need to do is find those icons, and so, let's see diamond was one of them.

A

Let's grab diamond hover over that we go to export and we're going to save it as svg. That's just going to download it for us and then we'll do the same thing for the. uh I think it was. Let's see the six box product variant there. It is very exciting name all right. We're just export we're gonna, save that one as svg as well and then you know we need money.

A

Of course, all right, we're gonna, grab this money, icon, we're gonna, export that one to svg as well, and then I think we've got one more right and that's the recycle bin. So let's just trash, recycle bin and we're gonna export that guy okay. So now we've got all those that's exciting. We head back into our power app right. We go over to media and we're just gonna upload and go to my downloads.

A

Where here they all are, I'm gonna grab the ones I just did I'm going to open them and stick them in right there, just as the svg they are now. If I had wanted- and I I just kind of forgot- but you can actually set the color of these uh within flycon here. So if you go to the advanced color options, you can pick any number of options and they'll export that way, all right. So if I didn't want it to be, you know the standard kind of black. I could do orange whatever.

A

I want all right, but let's go back here so now. If I click on this little template guy instead of sample image, I can actually write a switch statement. That's almost identical to the switch statement, I've written in the format all right. So if I just paste that guy bam so you'll see I'm now using the fluid you icons right here, it's great it works. Well, I'm excited all right. I can go back. I can see how they know what is in here.

A

I don't know invasion of grasslands, all right, beautiful right, but that's the idea. That's one idea: so now we've got some integration here. It's a similar kind of look and feel, and all I've done is just put an svg directly in there and that's that's all right. But what if we do something a little further right? What if back in our list, we add another column. Now we go we're going to do another format, only column, that is the hiding columns.

A

So I'm going to go more and we're going to go with another calculated column which is right there and we're going to call this one support all right so and we'll say again equals double quote just so we don't have to stare at that sucker all right. So now we got that and now I'm going to take another sample. We've got so format, this column advanced mode and I'm just going to paste in our other sample, which is a generic mailto button all right.

A

So all this is going to do if I paste this guy in here preview it it creates this lovely thing right and if you hit it, it's going to launch in an email right. So, let's save that and we'll see what that looks like if I click that guy I get an email launched. You know it's got information from the list right, so it goes to the person that it's for- and it looks great.

A

So that's nice again, that's a sample, we're not going to go into details on how that's put together, but that sample is available for you. Now. If I look inside here, I actually have the same thing down here, so I have that same kind of support button and that's cool and they even have a similar icon, because I've got I picked one. That purposely is also in power. Amps now you'll find that actually power, we've got about 2, 000, plus icons available in fluent ui and in powerapps.

A

You've got about a hundred, so big difference there. So if I wanted to change the cycle right so say someone comes down here and they're like we don't like envelopes anymore right. This is for automated chatbot supporters. I don't know what all right we're just gonna put robot and let's preview, that hey there's a beautiful robot icon. So that's great! But what do I do about powerapps now now powerapps no longer matches right. I want to use the same icon there.

A

Well, if I head back over to powerapps, the first thing I might do is I go to the treeview and I'm going to go down here to the footer and I'm going to insert right. I could try and find another icon right. You'll see that the icons are pretty limited here, but there's no robot.

A

So if I want to add a guy, what I could do is, I could add, an image right. So if I did the exact same thing I did before, where I'm going to upload, you know I've already downloaded robot, let's go ahead and grab it all right. It's the same way from flycon. I upload that that's great right, I'm just going to grab I'm just going to stick it in there right, and so that seems okay at first right, okay, well good!

A

Now I've got that and I grabbed this guy and I grabbed the on select, which is just the launch for the email. Does the exact same thing- and I paste it in here all right? Oh not settings go to action. I go on select. I paste the exact same, very beautiful, launch right so now I mean it works, so I click it all right. We're going to get that same email experience, that's great, but one of the one of the problems I've got here is you know it doesn't quite act, the same all right.

A

So, if I hit play on this, it's a little more obvious right. We got a a nice hover, color dirt, nothing right there right! So, what's going on all right, let's see if we can fix that. Oh thanks! Okay, if I click that guy right now, I click color. It says color here you click it. It's actually the fill. It's a lie right!

A

So it's the fill and right here you can see the fill is transparent right, but I don't actually have a color because that's coming from that svg and I have a hover fill all right. So I could say the hover fill is going to be color dot red right. Let's see what that looks like so now, if I hold alt well, that is not what I want at all right. That is pretty lame. In fact, I'm going from there to this right instead of showing the line is red. So what can we do about that?

A

Well, that's what we're going to figure out in four minutes. We can do it all right. There is a blog explaining this, so I'm going to fly through it, but you can check out the whole blog. It has all the steps right in there, but what we're going to do is we're going to download that icon. So again, I've already downloaded the robot all right. So let's go back into our power app area there. It is, and let's go over this guy where's.

A

My downloads got my downloads, I'm just going to open up robot in something called inkscape inkscape is a free, svg editor, it's open source check it out, there's a link in the blog to it and it's free and it's exciting, and you will love it and leave that as beauty. Okay and all that, so the idea here is we're going to take this icon and we're going to make it so we can use it and the way we do that is the first thing.

A

We're going to do is we're going to draw a square we're going to draw any kind of square it doesn't matter. We don't want a stroke on it, though, and I'm just going to tap on this icon and we're going to find out which one is bigger: height or width copy it, whichever one with bigger and we're going to apply that same thing to the block, all right so same thing beautiful now we pick them both.

A

Now we're going to go to our line and distribute align relative to page that way we just kind of center them together and we're going to go to path again, I'm going really fast, but there's a blog about it. Exclusion and the only thing I'm other thing I'm going to do is go to document properties, I'll bring them over here and I'm going to resize the page to the content. That's it so that's exciting!

A

Then I'm going to do a save, as and in this case, because I just don't want all this extra junk. That's in there I'm going to pick optimized svg we're going to call this robot and we'll call robot special 2.

A

I may have practiced okay, robot special 2, very exciting, there's a few different options uh you want to pick. Basically just gets rid of all this extra junk.

A

We don't need we hit okay and then, if we look in our now our downloads folder we've got a robot special to which I'm just going to open up and say notepad right here, so robot special too, and the only thing I'm going to do is I'm going to find and replace all of those double quotes with single quotes, because I want to use it inside powerapps, so I'm going to replace all so. I've got that got this beautiful thing here. The only thing I'm going to add.

A

Well, let's grab that, let's just grab that guy, let's head back over here to our power app, we can leave that alone. So in our power app. Now, instead of this image, one of the nice things is, we can actually set this to a data url right. So in this case, what's exactly we're going to do we're going to grab some of this?

A

We just got to start it off, instead of calling it the actual image, we're going to go there, we're going to say and add in code url and here's where we're just going to paste in our svg that we just copied. That is not what we just copied. Let's grab this all right and we'll close that out. So now, we've pasted our svg. That looks interesting right because it's got that black.

A

So one of the things we can do is if we happen to know the fill color, and we do we're just going to grab that and we're going to say right in here, we're going to say the fill is going to equal uh bam, bam like a desk right and that's the wrong color. Let me see what that's supposed to be.

A

Let's pick the correct color, that's kind of important all right grab that and we'll paste that in instead now what you'll see is a little weird. It actually disappears right and that's okay, because now we can use the fill because we basically created a reverse image here. If we go up to fill all right, let's set that to you know just be black for now. It's fine all right! So it's black! But if we play this now we get a nice hover effect.

A

We actually get the real hover effect because we are essentially just setting the background. The fill value of the svg and the svg itself is actually a negative of the icon. Okay, everyone got all that: okay, real, quick, let's wrap up and summarize so for deep linking you can build a button using the sample just to pin your id or whatever else you need to that href and you can handle those parameters directly to power up.

A

It creates a really nice integration piece, especially if you're using those lists, and you want to be able to drive those directly or you want to be able to link those. You know all over the place throughout sharepoint, then, if you want to use the same icons everywhere that fluent or the flykn.io is your friend, it's going to make it a lot easier to find those. Then you can edit them with inkscape as you export them and whatever you need, and it's very exciting.

A

And finally, here are some resources so check out the blog post, but also check out these two samples to help get you started and that's it. That's all for me, awesome chris excellent, there's no horsing around in that demo he's there, but um all.

A