Microsoft 365 Community Development, 13 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 & Power Platform Development Community call – 13th of October, 2022

Description

Microsoft 365 & Power Platform Development community call on October 13th. Demos: Introduction to Fantasy Premier League Independent Power Platform Connector and Create a better version of HTML Text component using PCF components in Power Apps. Project releases - Yo teams - yoteams-build-core and Microsoft Teams Toolkit. Delivered 7 Independent Publisher Connector, 5 script, 1 Microsoft Teams and 1 Power Platform samples plus Microsoft 365 PnP Weekly – Ep 182. Please see the blog post for this call for project updates, news and events details. The host of this call was David Warner II (Microsoft) | @DavidWarnerII. Q&A takes place in chat throughout the call.

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for the Microsoft 365 & Power Platform Development community call: http://aka.ms/spdev-sig-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

With the community, this is the Microsoft 365 and Power Platform development. Bi-Weekly call today is October 13th. How are we so far into 2022? Already? We are excited for what's going to come next in the rest of this year, my name is David. Warner I will be your host with Microsoft. Let's talk about what we're going to talk about today, so we've got a number of agenda items latest updates on the community, pnp.net libraries, Powershell, yo teams, teams, toolkit graph, toolkit publisher, connectors. Oh my and then talk about samples.

A

We got them late, sunscript samples, Microsoft team samples, Power Platform samples. What time will that be after that picture time with together mode? So we like to see everybody if you're willing to uh share your camera, we'll show and wave to the community to show how awesome you all are then we're going to get to our fantastic presenters of the day. The All-Stars Joe onwin is going to show us the Fantasy Premier League independent Power, Platform connector.

A

So all you, sports fans are rejoicing right now and celebrating you're excited to see that and so am I. Then we're going to turn to Fabio he's going to show how to create a better version of the HTML text component using a PCF component in powerapps, so that is a whole lot that we are excited about, seeing let's first talk about your opportunity to participate in the community. This is an open Community. We all have a part in it and we want you to feel empowered to do that as well.

A

So we invite you to demo a solution or a technical pattern here on calls such as this. You are more than welcome. In fact, we've even got a easy form for you to fill out to show your interest and if you're not familiar or not comfortable, we can even partner you up with a buddy, so don't hesitate to get involved. You can also contribute on GitHub.

A

These are samples that you're going to see a lot about here in the intro part of this call you're going to have opportunities to submit samples to there and share them with the world you're going to see amazing samples that others have created as well, and we're going to show you a program. That's going to empower you if you're not familiar with how to do that.

A

We also love feedback, so if you've got any feedback, constructive or areas, even that you do like that, we're already doing that you'd like to see us do more of don't hesitate to provide that feedback. We're always looking to improve all areas of the community, because it is a program that is set up for you.

A

This is your community and we want to make sure that you're empowered to to kind of steer that wheel, so don't hesitate to get more involved now, let's take an overview glance of all of the different resources that are available to you. We've got a collection of developer and Community videos that showcase uh features and implementations of solutions and the software that we all love and use.

A

Every single day we've got a number of Open Source initiatives around Microsoft graph and SharePoint office development, a Power Platform that you can take advantage of and then, as I mentioned sample galleries, aplenty they're a plethora as I said last week at Cornucopia as we get into fall of sample galleries.

A

So those are team samples, spfx samples, Power Platform samples, spfx extensions list, formatting the list goes on and all on and on, and you can see all of them at AKA, dot, ms4, slash, M365 samples, but we've got so many other beneficial resources for you and there's really only one URL that you have to keep track of and that is AKA dot. Ms forward, slash, M365 community. That will give you access to all of the variety of programs and initiatives and samples that we're going to show you about today.

A

That's not all. If you call now you get even more calls. Community calls are plenty we have so many for you to choose from and they're all valuable in their own specific details. So, let's start at the top Microsoft 365 platform. This is a weekly call. Now what makes this unique? It is only Microsoft presenters that means that you're going to get all of the information directly from the mothership here in Microsoft.

A

So we want you to feel empowered to know more and so we're going to bring you all of that from within uh the the you know, the walls of Microsoft, and so that you can feel like you're keeping up to date. There's also adaptive cards, Microsoft identity platform, office, add-ins, there's a monthly Power, Platform call that happens next week. There are the bi-weekly calls that you are on.

A

So today is the Microsoft 365 and Power Platform development call uh The Sibling, for that is the Viva connections, the SharePoint framework that happens at the exact same time. Next week you can get access to all of these calls at AKA dot, Ms forward, slash M365, slash calls now looking at that, Microsoft only call it's going to occur next week on the 18th of October at 8 A.M Pacific time. It is going to have two topics this or next week.

A

uh Brian and Cameron are going to cover, introduction to Microsoft, Graph, Search apis and then Ikea is going to cover, build your first command bot in c-sharp for Microsoft teams, with teams toolkit for visual studio. So a nice array of opportunities to learn directly from those at Microsoft now as you're going through all of our uh programs and initiatives. Today uh you may say wow. That is a lot. How do I get involved?

A

How can I learn more I'm, not quite sure how all that works, and these things like GitHub and pull requests and samples being contributed? How does that happen? uh What happens because of amazing individuals like you, but we understand that there may be some hurdles that are involved with submitting those within the repositories might be a little complex when you hear things like forking and pull requests and what is all that sounds awfully uh adversarial?

A

No, it doesn't it's just words and terms and phrases that are services and platforms use, but we understand that there may be some uh fear to that. So sharing is caring, is a program that is here to provide you that Hands-On guidance, and what does that mean? It means in live sessions, we're going to provide safe space opportunities, which means that the calls are not recorded for you to interact and collaborate with other members of the community members of Microsoft MVPs.

A

We are one big Community Family, so we want you to feel empowered uh to do more and yeah. Just like Daniel said in the chat who me yes, absolutely you every single one of you. We want you to be empowered, so these sessions are uh live and they are also safe space, as I mentioned so not recorded.

A

Now we do know that uh we're getting more and more of these sessions uh so we're starting to build some video series on them that you can kind of reflect back on or kind of on-demand watch in advance things that make sense like providing the information about being a first-time presenter, some tips and tricks using NVM to empower you to do more with PNP spfx samples. So we want you to be empowered to do more, and so we're going to empower you together.

A

We're going to show you and you can learn more at AKA dot Ms forward. Slash sharing is caring. Now, once you have contributed, we want you to feel recognized and appreciated, and so we have started the recognition program for the community. Now this is a unique one-of-a-kind, Community Driven recognition program. In fact, it's the first that credly the same credly that provides those badges to you when you get Microsoft certified, they are who we are partnering with, and so we are providing you badges as well.

A

Now these badges are super super cool because it's official, it's accredited, you can associate them to your LinkedIn profile. You can put them on Twitter and share them. You can share them with your clients, with your managers or both letting them know that you're making a difference, and it is absolutely free.

A

We only need you to opt in so that we can kind of track some of the contributions that you're doing within the community, and once you do that, you only need to do it once we'll continue to track year after year, and as you see, these badges have year assignments to them year, tags. So we're we're going to do this continually and it's something that it's not just a once one time only.

A

We want to continue to recognize you we're doing more and more programs with badges going to be working on a PNP Powershell badge here soon and getting that out. But what's exciting about right now is we have a badge for hectoberfest? So if you contribute just one contribution in October, you are going to get a hacktoberfest badge that is only available for this month in October 2022, so don't hesitate to opt in. Don't hesitate to contribute, want to learn more on how you can do that. There's a variety of ways.

A

You can even contribute via documentation, helping update documentation. That is absolutely a contribution that we love and is absolutely valid, so don't hesitate to get more involved. We want to help you do that and recognize you all right. Let's talk about some Project Specific updates. uh We are going to begin with pnp.net libraries, hello,.

B

David, um yes, uh not um I, think one Milestone to celebrate. We crossed a 1 million downloads for the pic or SDK you get package, so I think that's amazing. uh Now Encore as the case site, what happened? Jens did provide features to kind of add group members when provisioning uh group connected sites. So that's new uh couldn't network on our vehicle connection support. So we have support to actually provision video connections to put the cards in the dashboard and so on to edit them and clean the same extensions there and some minor bug factors.

B

I would say that that happened on the PNP framework side. The key thing is that the new provisioning schema, the 202209 schema, is in our Dev Branch. You know 90 bill, so you can try it out. Paulo and Paul Bullock did a ton of work there.

B

So, thank you guys to add those new features implemented features not just in this given, but also in the provisioning engine, so that will be really useful for our customers and isps using that and next to that there is a set of fixes done by Patrick, Martin and Matt's in in PPA framework and yeah I. Think that's and we're kind of prepping for new releases. It's about time to get a new release out. We moved away from the monthly Rhythm, but uh that doesn't mean that we shouldn't release anymore.

B

So if you so I think we can at least uh somewhere in the coming weeks, all right go down, move to Powershell.

C

Thanks thanks, but yep pnb Powershell some background here, so it is a cross platform, uh Powershell library that you can use to connect to SharePoint teams and other Microsoft 365 uh products. Here uh we cross the 3.2 million download Mark uh PNP partial by the way, runs everywhere. Almost wherever Powershell runs, Powershell files, Powershell, seven Azure, Cloud, shell Azure functions, run books and even the Raspberry Pi um yeah. So what what's new? In the PNP Powershell yep? We added managed identity, support for all SharePoint commandlets.

C

So, even if you are thinking of provisioning via PNP templates or anything, we do support managed identity. uh We added a new command uh I'm, going to use David's favorite word here plethora, so we added plethora of changes here in this couple of weeks past weeks, so we added a new command to retrieve sign in logs. uh We also added a command to easily disable or enable Powershell Telemetry collection. uh If you are using PNP teams tag, we added some commands to handle Team tag.

C

Information like whether you want to list tags from a particular team, whether you want to update that or if you want to remove that tag. uh One very important request was that support for inline images, so there is a modern text web part which supports inline images. So we have, we extended the add PNP page text, part to support inline images. We also created a new PNP image part which will handle just simple image, upload of showing the images inside the webpart there.

C

Besides, that, there are tons of bug, fixes and improvements which are going on. uh What we are thinking of next is support for.net6 and yeah uh yeah before I forget. We have also have a announcement to make if you have not seen it on Twitter, uh we we enabled uh we created a module related to Powershell predictions, so it think of it as an autocomplete for PNP Powershell uh I'll do check it out. It is right now in beta uh again it was a great work done by.

C

Do check that out yeah besides, that it is hack to per month, so we would absolutely love your contributions in the PNP Powershell and, of course, the PNP framework and the.net libraries as well so yep. Thank you so much. uh How do you David awesome.

A

Thank you, man, I, have to admit PNP, Powershell and Raspberry. Pi sounds delicious, so loving that all right, let's move over to Yo teams with Steven.

D

Thank you, David um yeah, for your teams. We still see a lot of growth in the usage, which is really great. We have some news to share with you today. The first one is that we have released version 1.8.0 for your team's build core with some minor typing mistakes fixed by Robert and an update to the code ql analysis by Rick. So thanks a bunch. We also did some repo cleaning and switch from Master to Main Branch.

D

Finally, and apart from that, we're still in discussions on which topics to focus on next and we think about adding more docs and tutorials, of course, but besides of that, we also have a bunch of ideas on like vs code extensions support for more features in your teams, but we would like to to hear from you and your feedback, so please jump into these discussions and issues on GitHub. Let us know what you'd like to see for your teams and maybe also contribute, as it's October Fest back to you, David.

A

Awesome, thank you. Stephen excellent Let's uh move into Microsoft teams. Toolkit I think this is going to cover this for us today.

E

For this time uh it's going to be me, so the team's toolkit is the the alternative option or the the Microsoft provided options for building the Microsoft teams uh Solutions, um and the latest version was released as a 4.0.6 in the late September uh right now, uh there's a lot of focus on new samples um around okay around the team's toolkit in the github.com office test. Teamsfx, that's samples and those samples will be pretty soon uh surfaced, also in a unified sample Gallery.

E

So you'll have a one location to find all of the theme samples, not just the Microsoft ones and in a different location. 4.0.7 preview version is already out and that's going to be released later this month. I guess I'm not going to provide any exact dates and there will be additional samples available uh which are built with the team's toolkit. But if you have issues or findings or feedback, please please, please use the themes.

E

Fx issue list, um there's a lot of engineering people who would love to know more how we can help to make your development for Microsoft teams easier.

A

Awesome, thank you vessel all right. Let's keep the train going move over to Microsoft graph toolkit with officially now Big Daddy, Seb Levert.

F

Good morning, good afternoon, good evening, everybody, you cannot see me right now. I want to turn my camera on because it's ignite, so it's the comeback of the giraffe suit everybody uh so we're celebrating by wearing the trf kit, amazing. uh So what's doing the Microsoft graph toolkit our release, 2.6.1 was out a couple of weeks ago. We are on the verge of just shipping, another version with a bunch of great capabilities and lots of that are coming from Community feedback around um component disambiguation around um localization. All of that really really excited about this.

F

um We have our MGT sample repository that I'd love you to go and uh use AK dot, Ms, slash, MGT simple! So if you have anything you're working on with MGT we'd love to learn from you and would love you to share with the community that's going to be eligible for the um hacktoberfest, so feel free to jump in uh submit your stuff right there.

F

You want to try what's next npmi Microsoft emergency at next or if you want to really be curious about what we're building a big new update around fluent UI npmi at Microsoft ngt at next.fluent UI come fix. Our bugs help us share your thoughts, bring your own requirements. We'd love to hear from you back to you, David.

A

Awesome Sev love it and love the outfit fantastic. All right, independent publisher, connectors with Jocelyn. Take it away. Hi.

G

Everyone thanks so much for being here. We have some exciting news in the world of independent publisher connectors. Since the last time we spoke, we have contributions from four new IPS, including Victor Shadrach Marin yusadem, as I mentioned last time. There was a 30 days of fusion hackathon, going on, which is now concluding. Some of these IP contributors are from that hackathon and thank you so much to them for their submissions. These connectors have not all been certified yet, but I have seen some proposals and I am absolutely thrilled with the ideas.

G

I am hoping to be sharing those all with you in a few weeks as they go out of the pipeline. We are now at a total of 64 IPS. We also have seven new certified connectors from IP since two weeks ago, as well, including some of the following from our most active Community member and independent publisher, Troy Taylor check Lee. Did you mean this Dynamic docs replicates enthusia? We also have Focus mate from Phil in working days from Tomas.

G

Thank you to you all and last week I announced a certification of Joe unwin's, connector, Fantasy, Premier, League and I am so excited that he will be sharing that with all of us today.

G

um Due to all of these amazing contributors, we are now at a total of 180 independent publisher connectors to put that in proportion the entire connector ecosystem across all of power, automate power, apps and Azure logic. Apps include 842, total connectors, nearly half as third-party verified Publishers and another good chunk of Microsoft first party connectors. So these independent publisher connectors now make up nearly a quarter of that pie. Chart all due to the power of this community and contrib contributions from devs.

G

Like you guys and as I mentioned at the start, the 30 days of fusion hackathon is coming to a close, but as David mentioned earlier, there is another ongoing opportunity for connector building. The hacktoberfest is sponsored by digitalocean, currently open I'm, going to drop some links in the chat. This hackathon focuses on leveraging open source code for Innovation, and our repo is indeed involved with this program.

G

I'll send all of the links here as well as my contacts please reach out to me, if you're interested in any of these activities or if I, can help your connector building experience at all. Thank you. Everyone handing it back over to script, samples.

A

Awesome, thank you Jocelyn, and for that we will invite Paul, hey.

H

Thank you, David So script. Samples is a place where you can share scripts with the community, so this will be any tasks where you're automating any scenarios against 365 using variety of tools such as Microsoft graph, SDK Clio for 365, PMP, Powershell, free management show, and many many more and all these samples are integrated with the Microsoft solution sample Gallery. So all of these samples will be seen there. So if you contribute here, then that gets published there automatically, which is super super cool.

H

We've got four scenarios and one update on the uh on the repo which is which is super cool, so the first one is update, content type of files and affordable system update by reshmi. We've got change of placeholder text in SharePoint search box by Ganesh. We've also got activator site feature in SharePoint online by Ganesh and uh disable SharePoint. This commenting at 10 and level by Ganesh. So obviously there's a theme there. So thank you very much for the recipe for the multiple, uh multiple contributions there. That's really really cool.

H

We've got one updated sample for the CLI, which is the export term store items to CSV. If you want to contribute to the repo, obviously you're absolutely welcome to it's hack table Fest, so they will be recognized as well.

H

I do tag the uh the issues accordingly, as they come through if you're having any issues with that or want to learn more, there is a contributing button on the site which gives you some some docs or you by all means reach out to me on Twitter I'm, open DMS to help you get going um at any point in time. Thank you very much for all the samples that you've done all your contributions are welcome. This this couldn't be as big as it is without everybody involved. So thank you very much back to you. David.

A

Here here absolutely agree: Paul thank you and thank you, everyone for all your amazing contributions and another opportunity. Well, let's talk about some Microsoft team samples with Bob German, hey.

I

Hello, everyone, so we don't have any brand new samples, uh it's it's hot, it's hacktoberfest, so I'm hoping to see some more uh coming in. However, uh Marcus has updated his amazing uh tab, meeting movie app where you get to vote on movies and watch them together um and so I just love the fact that they're that we're getting updates so um as well and to kind of keep the quality going, and so I really appreciate that and I guess.

I

If you don't mind, I'm going to put in a quick plug that my team is putting together. If you want to learn about teams, app development and monetization, please join us on October 20th um for a an app special app Camp live webinar. So I put that in the chat and back to you, David.

A

Awesome, thank you Bob uh and last, but certainly not least, is Power Platform samples. So we have a new convert dock into a PDF uh flow from Power automate by John Donny, so definitely check that out. We've got a number more that uh ended up coming in after the Power Platform conference. We had that we have now ignite so we're catching up on those PR, so be patient with us.

A

We really appreciate all that we had our first ever sharing is caring live in the Power Platform conference, so that was really cool, got some contributions from that. So again, thank you. Everyone for all that you're doing across the board. For all these programs and initiatives it would not be possible without you.

A

Well else, wouldn't be possible without you picture time. So, let's get those fantastic faces showing up on the cameras uh vessel will take over and yep.

E

In one second, already sharing screen I'm already recording, but let's wait for 50 people to join I will get my camera on as well. Oh I can say that giraffe on the background second row. Not yet not yet wait, wait, wait, wait, wait! Giraffe is there turn off? Is there cheer up can be the example of how do we do waving right there? We go excellent.

J

E

So we're already recording we're hitting the 50. here we go. So let's do something everybody! Thank you once again on joining on, the community call awesome to have you on the call and thank you chair for being the example on the second row, on the on the back: excellent thanks, everybody, we'll craft a FUNimation out of that and sharing that in the social media. Thank you. Thank you. Really cool.

A

Awesome, thank you vesa and thank you. Everyone. Let's get back to our agenda now uh and our first demo of the day is by Joe Unwin on again the Fantasy Premier League independent, Power, Platform connector. So all of us sports fans are excited Joe. Take it away.

J

Hi everyone, so yes I'm here to talk to you about the fancy Premier League, independent connector that I've created, um but before that, let's just touch on who I am my name is John Wynn I'm, also known as flojo in the community I'm a Microsoft MVP and MCT I work at internship Solutions. This is a solution architect and the training lead, and if you need to contact me for any reason about flow or anything like that, contact me at flojo, outlook.com or visit my blog at www.flojo.io.

J

Okay, so, firstly, we should really touch on what is the Fantasy Premier League. So if there's anyone on this call, that has no idea what I'm talking about. It is essentially a fantasy football league that you can pick a squad of players. You can buy and sell um each of them each week uh you get one free transfer. You get deducted points.

J

If you do more than that, you can then get points based on how your team performs and then you get a total of weekly points and that gets added to your total points and then each game week, your leaderboard's, updated so whoever's doing best with the most total points will be at the top and whoever's doing worse will be at the bottom and then at the end of the season.

J

The highest point team wins that's relatively simple, but it's super popular there's over 10 million users worldwide and um even at my own company Hitachi we've got over 20 people playing in our little league Okay. So why did I create this? Well? Firstly, I created it at titachi, simply because uh we have this chat and everyone's talking about what's going on, but you have to go on to the website and get the information and you're.

J

Looking at that solo right, we wanted to build camaraderie within the team, especially as we're all remote workers, so I created a custom. Connector and I was posting all of the information about our league into the chat every Monday morning for a recurrence on Flow and then I decided to essentially build it out, build more features and make it into an independent connector, because that's a great thing about the independent connector initiative is that any custom connector that you create. You can then build out, submit it to GitHub and it can be used for everyone.

J

um So let's look at the process then well. What we're going to be doing, then, is we're going to be looking at how power will automate independent connector requests the information?

J

The information is going to be requested from the Fantasy Premier League they're, going to respond with um to our request with uh information based in Json, then we're going to receive that information in power automate, manipulate it and then send it to teams, and then teams will receive that data and display the message to the users. So what can we actually do with this independent connector? We have multiple different actions. We have the classic League standing action.

J

The classic League standing action essentially allows you to get all the information on your league, and this is what the majority of people use if they use this connector. This is what I use all the time, but then you have fixtures, so you can get like upcoming fixtures previously played fixtures. You can get like the score results from teams that have just played Etc.

J

You have game week live data, so you can get all the information about that particular game week. You get general information such as team of the week and how what what people have been transferring in and out. You also have like basic manager.

J

Information such as like the manager is a user and you get to get their first name last name: team names, the links that are in uh you also get the history of a manager which allows you to get breakdowns of their like previous years, play the transfers that they've made it's more specific information and then I've also added a player's detailed data action that allows you to pull data on specific individuals.

J

So if you wanted to find more information about your favorite player and how they're doing you could provide their ID and then you can pull that information?

J

Okay, so let's jump straight on to power automate and have a look. um What we are going to be doing, firstly, is I'm going to be building out a flow that essentially grabs the league information passes it to Microsoft teams and I'll. Show you how relatively easy it is. But what I'll do as well, because we're limited on time is I'll go into a more complex flow that I've created to show you how complex you can get with this type of stuff and or get all of the information that you require.

J

So let me just delete this, as this was just.

I

J

Template um so what I'm going to do here is I'm just going to type Fantasy, Premier, League and I can select the independent, published connector and then I can select the classic League standings. Now all you need to do here is provide a league ID. Now, how do we find that League ID? So if I jump over to my team doing relatively okay- um and you can see all the information about your team here but down at the bottom- you have the classic leagues now I'm not signed in. So all of this information is public.

J

um So if I go to the Hitachi All-Stars league, for example, you can see that we have all of the information about the individuals, the game week scores and the total scores, but at the top in the URL we have fantasy.premierleague.com leagues, slash an ID. Now that ID is what you want to copy and then, if we go back to our flow and paste it in here, what that's going to do, then, is that's going to pull the information on our league.

J

So let's just run a quick test on that and see what information we get back.

J

Okay, so, as you can see super fast, uh you get all of the data back in Json uh once it loads yep, okay, so you can see, we've got the name of the league we've got when it was created. We've got all of the information if it has a carb and so on, and then we've got all of the information, as you can see on here, such as the rank, the team name, the person name game week, um the total score.

J

We've got all of that information in here as well, plus more so we can actually get more information than the actual website is displaying to us now. What this allows us to do, then, is this allows us to manipulate the data that we get back and set it up to make it into a nice and easy readable way um before we send it to Microsoft teams.

J

So the next thing we're going to do is simply create a HTML table.

J

And we're going to pass in the information now, if you haven't seen this before I've got um if in settings the power automate settings, I've got the experimental features on, because what this does is it gives you this nice, larger area for dynamic values and expression box. So, if you're looking to get a bigger expression box, that's how you can do it.

J

So what you can do, then, is I'm going to select the classic League standing results and then in here, I'm going to open advanced options and I'm going to customize the columns, because I want to get specific information. Now, what I'm going to do is I'm going to set position as my first header and then I need to select the actual Dynamic data that I'm going to be using so I know that the dynamic data is rank, so we've got last Rank and then we've got the classic. Just the current rank the current position.

J

So what I'm going to then do is do previous, so we can see who's actually either gone up or gone down. So if I just write rank in here again and do last Rank and then what I'm going to do is uh the name of the actual individual.

J

So this is going to be player, name and then I'm going to do total to get the actual total score.

J

And then I'm going to get the um this week's tutorial.

J

Okay, so then, now what we've done then, is we've essentially created a table and pulled all of the information that we want to display into our teams.

J

We want to display the position, the previous position, the current player name, the total score that they've actually got and then the actual score that they've got this week because at Hitachi, for example, I have this running every Monday morning at 7am Eastern, so that everyone can come into work and see be really happy that they've got um they've, moved up on the league or not so happy because, unfortunately, someone's overtaken them. So let's have a look at this. Then, let's just run this and see what we get back from our HTML table.

J

Okay cool, so, as you can see here, information is split up into a nice easy to read table now. We know that, for example, myself this week, I'm in rank six last week, I'm in rank seven Mr Tabor was ranked six last week, but he's now moved down to rank seven because I had a good week. I've got my total points here and the amount of points that I've got during that week. So then we need to get this into Microsoft teams.

J

Okay. So how do we do this? Then we can simply use the Microsoft teams um uh action and we can post to a chat or Channel now, depending on how you want to set this up in your teams, you can either have it in a Channel or like us. We have just a chat with everyone in it. um You can also post to that right. So if we select uh float bot and then we can select the actual chat that we want to go into.

J

This will then be able to go into our particular channel here. um For some reason, my chat's not showing up not entirely sure why? um uh Let me delete that and try again.

J

Interesting for some reason my uh I don't know why, but it's not my message: Channel isn't showing up, but anyway, what I can do is I can just jump straight over to my other flow. So now, we've gone from basically creating the HTML table and posting it into teams to building out a HTML table for our our league exactly the same, but we've now gone into fixtures.

J

So how this works then is I want to go through the fixtures I want to get the latest fixtures so I want to get the latest results from our events, so we've got, for example, Nottingham Forest, but assassin Villa was the last game. I want to get the last three, for example. So what I can do then is I can call those fixtures, but what I'm doing at the beginning is I'm, creating an array of team names. So why am I going through this and arranging these team names?

J

Well, if you go on to Wikipedia, you can just copy a list of all of these team names. What I've done, then, is I've pasted this into Excel and, as you can see, we've got 1 to 20.. Now the Fantasy Premier League doesn't actually send you a team name back. They send you a team number. They must be keeping their um team names on a database somewhere that they're calling that we don't actually have access to. So this is how you can get around situations like. That is that you can create an array.

J

You add a string array of all of these teams and obviously an array is base of zero, so Arsenal would be zero. Aston Villa would be one Etc. So if we get one through for arsenal, we need to minus one from that to get the team name from the array. So I can go into them fixtures. They call the fixtures and pass in the Json. All I've done is I've run this previously copied the result back from there and generated a sample from it, and then I'm filtering my array. Now.

J

What I'm doing in this filter array is that I'm, using the and because I'm doing two different filters and I'm saying that I I'm using the not equals kickoff time, is null because team games get moved. Sometimes they don't kick off for whatever reason they get canceled, so I don't want to receive any of those I just want to receive the games.

J

I've played so I'm, putting a uh not equals kickoff time of null, as well as I'm doing an equals of finish, because I only want the games that have been played, because this gives you every single fixture. So I only want the games that have actually been played.

J

Then um what I've got here is I'm going through and sorting the array. Now. This is a new. um This is a new function. That's been added uh called sort and I'm just passing through the output of my filter array and I'm sorting by the kickoff time now. The ascending kickoff time goes from oldest to newest, so I need to then wrap that in a reversal, I get the newest on top and then I'm going to essentially use the function called take and get the last three results.

J

So I'm just passing the output, comma, 3 and then taking uh the free results that I want and again I'm passing the output into there and building up a table. Now this table, then, is built up with the home team name, so I'm going to have the home team name their score, the score of the away team, then the away team name and then the time that you actually took place.

J

Now, as I mentioned previously, we've got a variable on top of FPL names and then what I'm doing is I'm using the subtraction function and passing in the team number that they are giving me from this data from the fixtures and then I'm subtracting one from it, so that we get to the base of 0 for the array and I'm passing that in the square brackets. So then it will pull the name from our array rather than having to have a number, and no one knows what the number is right.

J

So then, we'll get a a name through we'll get a team score through then we'll get the name of the away team, then we'll get the kickoff time and then so that's what this is. What you should be should have seen in the last flow is that we have the Fantasy Premier League group chat and what happens then is we use the float bot posting group chat, Fantasy, Premier League. What this is going to do, then, is it's going to post on behalf of the user.

J

That runs it so it will say flow bot on behalf of Joe onwin, for example.

J

Then I'm just populating the message right so I'm doing FPL ranks at and I'm just using a format date time, UTC now I'm pulling in the full day, so it would say Thursday now, for example, and then I'm just doing the date so month day year, I'm putting the output of our table that we was creating previously on the previous flow, with the position. Previous name total this week, Etc and then I'm doing latest outputs of the latest matches and I'm passing that into here for that output.

J

So, let's run this then and I'll show you what it looks like in Microsoft teams.

J

Okay, so um these have run in parallel. That's why we've got the two different bits here and our tables have been created. uh You can see the table here as well as all of the filtered table here. So we've got the last three results: we've got 99 Forest versus Aston, Villa, Everton versus Man United and Arsenal vs Liverpool, this one I'm particularly happy about.

J

um Then we post to the uh channel. So this is what happens then, um is that we now have a nice easy to read: table get post to our Fantasy Premier League chat. We have all of the information based on the positions, the previous, the name, the total um and the this week's total. And then you can see the latest results here, the time that they were played in BST and we essentially have all of the information to it. But um let's just jump back to here now.

J

Obviously I'm doing this as a manual trigger and as I mentioned previously in uh Hitachi. What we've got is we've got a recurrence weekly at Monday morning, 7 A.M, so you can have this flow run every week. So before you come in comes into your chat, you have all the information there ready for you to go and discuss if you have done well or not, and I had done relatively okay this week, so I was relatively happy, but I was super happy that Arsenal beat Liverpool.

J

Okay, that's the end of the presentation, I'm going to now just jump over to a review slide here and just go through what we've actually seen. So what have we actually seen? Then? We looked at how easy it was to gather League information, create a table from that information and send that information to your team's chat I'm, not entirely sure why the action wasn't. Picking up my chat at that particular point. I'll have to have a look into that. Maybe I'll selected the wrong action from the excitement of doing this presentation.

J

Then we also saw how you can get more complex. Now I was manipulating a lot of data. I was filtering, it I was essentially cleaning the data that I wanted and then I was taking specific information and building up a actual table, a HTML table before sending it to teams.

J

So you can get really complex with the data that you have or you can do it really easy if you just want the league information displayed directly into your teams, I want to just highlight other connectors that I've created I've created the Dexcom, continuous glucose monitoring, connector that essentially I'm Type 1 diabetic, so I have a continuous glucose, monitor. It monitors my blood sugar every day, every five minutes actually and it sends information to a website. Now parents can't uh like they they may want access to what their kids are doing.

J

It gets sent to your mobile device. What you can do is you can then pull that information via the power automate and the Power Platform, and essentially have a look at that right, have a look at uh uh blood sugar levels and and so on. Obviously it should be. This isn't a I'm not saying this is a specific medical thing that you should be using, but it's a very interesting to like get averages and and so on, and then I've done a jira extension as well.

J

That essentially builds upon what was already built on Parallel to me. And lastly, if you want to see any more from me check out, www.flojo.io I go much more into in-depth into how we build out that fixtures section so I know we had to go through that relatively quickly. Okay, so I'll hand back to you, David awesome.

A

Thank you, you're, very, very cool love, how you're integrating some team chemistry using the technology and how extensible it is to also use in other areas of business, so very, very cool. Thank you. um I know, there's some questions and comments in the chat I'll. Let you look at that in the interest of time, so we will now call up Fabio on creating a better version of the HTML text component using PCF components and powerapps, so Fabio take it away.

K

Yeah yeah, let me share my screen so I to all this quick uh session. It's about how to create a better version of html text component. So, first of all, uh just few words about me: I'm Fabio, franzini, I'm, CEO of appv solutions, I'm Microsoft MVP, both on office, development and business category and, of course, I'm a developer, but I brought code by using a typescript node.js, basically on SharePoint framework, but I love, powerfx, I love power, apps to create certain applications.

K

So in this lab you can find some a way to contact me like my email, my Twitter account LinkedIn and GitHub. So the agenda of today, it's just an introduction of the default html text component in powerapps canvas and then I want to show you just on a block of uh and a component built on, powerapps component framework to create a better version of this default. Html text component I'll show you some demo and and the code of course, and then at the end, just one slide with some references.

K

So this is the default you can see in the slide the image of the default html text component. So basically, it's used to show static HTML inside your canvas app. There are a lot of samples on how to use this component to create some interesting graphical new component, just to use HTML.

K

But the first problem is that if you want to generate Dynamic HTML, you need to generate the string Inside powerfx by using, for example, the concatenation strings, and then you have to pass the string at this component and some problems like the performance, because you need to calculate the string or, for example, if you want to create complex Graphics, you need to use the Styles property for the every HTML elements and then it's not simple to create complex Graphics by using just the Styles attribute.

K

So it's used to create not only to show html text but to create custom new custom component by using HTML, but have some problems, for example, it this this control not support the internal state. For example, if you want to create a dynamic control, you are not able to manage the internal State and it's not implemented the interactivity like custom events and so on. So this is the reason why I tried to create a just, an Epoch of a PCF component named HTML template component.

K

So this component support the creation of dynamic HTML by using two different properties: the HTML template property and the Json data use internally use the Microsoft graph to get templating engine to take, of course, the HTML template and apply the Json data and Implement some interesting stuff, like the internal state, the possibility to write custom styles using the syntax of the tilewin CSS, the talwin CSS later I'll show you uh instead of the the official website.

K

The syntax is just uh a set of CSS class name that you can use to apply some Styles at the HTML elements and, of course, with this component, you are able to handle custom events by using the standard on change. They have your property and two different properties, the event type and event data to pass to the from the component to the the canvas app which custom event you want to invoke and the data that you want to pass.

K

So basically, it's a component that allows you to create new controls so component with behaviors and internal State, not only to show HTML static HTML.

K

So these lights, it's an representation of an example of a HTML template that you can pass to to this component and first of all, you are able to see uh into the class attributes some strings, and these strings is uh the class names that come from the talwin CSS to apply different styles, but inside these anchor element, for, for example, you're able to see the data dash, for example, four or props, and these two attributes come from the the syntax of the Microsoft graph toolkit.

K

So inside this component, I, don't use the Microsoft graph toolkit, but just the engine to apply the template and, for example, you're able to see that here you can attach to the click of the anchor some functions and then pass some parameters. And then we have the the syntax to to bind the the text that you want to evaluate that. You want to to show us a text inside the uh the the result and again the data Dash is, if you want to show or hide some elements based on.

K

For example, director of this get State function.

K

I Implement inside this component some function that it's used by the the template engine to manage the state of the component and, uh for example, to invoke custom event. So, first of all, we are able to see here the set State function. uh This set State use two parameters, the state name and state value, and it's used to set the internal state.

K

If you need to manage the internal state of the component and then we have another one function, uh name, it get State uh that accept just one parameter state name to retrieve, of course, the internal State another one for toggle state to toggle the specific state name value with another value. Basically, it's used, for example, for Boolean Barre to set the true or false, and the last one is the invoke event function.

K

Yeah you can use to invoke uh to emit a custom event and then managing site the canvas app by using on change, Behavior property. So it's time to the demo. First of all, I want to show you. This is my test environment for the powerapps component framework, and this is the the component. You are able to see that I'm able here to write some HTML element and then this HTML it's a rendered inside the component. But for example, if I take some of more complex like, for example, the success message.

K

I'm able to see that I'm able to render more beautiful, HTML directly inside this component, so this HTML it's created by using again tilewind CSS and tilewin CSS. It's an open source framework, CSS framework that Implement a lot of CSS class name already available, and then you need just to use specific class name to create the complex Graphics inside your HTML.

K

Okay. uh More complex example could be, for example, this one timeline.

K

I put this HTML inside string inside my component, and my component render again a beautiful UI using HTML and tilewind CSS. Why I use tilewind just because it's more simple to decorate the HTML to apply Uh custom Styles then use directly the style attribute, for example, and the last one that I want to show.

K

You come on just one moment: it's the complex one, because the this previous sample render only the static HTML but I want now to show you the possibility to use Dynamic HTML by using some Json value, I copy and paste just on a Json valve and I want to show you this portion of HTML that use again talwin and the the Microsoft graph toolkit template syntax to generate dynamically at runtime. So I put this one inside the property, and this is the example.

K

So this example it's uh represent, for example, on a dashboard, and this data come from the Json barrier that I passed to the Json data property. The good part is if I try to click inside on a specific div.

K

This HTML, it's a completely Dynamic and then I'm able to show an another div and inside this another div, of course it's dynamically and then, if I click different box, the value change, if I click again I'm able to hide, because uh inside here I use the toggle function inside the template. And then the good part is if I click on the value inside this div. Okay, I have two output properties, sorry, the event, type, details, click and the event, data that contain the value that I passed this function.

K

So if I click here, for example, or here and I click, the total subscribers I'm able to show here the total subscriber value. This means that if I go inside on a canvas, app demo.

K

That use, of course, this control, okay and then click on start I'm able to see that if I click its work, of course and if I click on the level here, I'm able to show here inside two labels inside the the canvas app the name of the event, the value that I passed to the event and I'm able to manage the on change property to interact with the with an event to the canvas app. For example. These two labels take the value from the events, data and given type from these HTML template component.

K

But if I navigate here inside the on change event, I'm able to use, for example, the notify to notify some value or, if I want to implement by using the HTML template and Json data, for example, on a navigation bar I'm able to read the event, data and the event type and then, for example, when I click on specific item inside the my HTML navigate to another screen inside the same application. So I don't have too much time. But I want to show you the implementation of this component.

K

So basically, it's a powerapps component framework by using, of course, typescript as a language to create this component and have four different type of properties: the HTML template, which is on data event, type and data, this event type and even data. It's to how to put parameters and then inside the implementation we have inside the unit, the initialization of the control.

K

We created the template context for the template engine of the max graph toolkit to have the set State, get State, toggle, State and invoke event, and then I use a library p-wind that it's uh the browser and runtime implementation for talwin CSS, just to generate analyze the HTML and generate the style based on the class name present inside the HTML string inside the update View. We have just the logic to take an update view.

K

It's uh call it every time that the property uh of the controller changed and then I take the basically the HTML template and I passed the template helper. That comes from the Microsoft graph toolkit to render on a specific template inside on a specific element of, of course, the container of my control and then I pass the data context that come from the Json data and the template context, and at the end we have, of course, a get output that return.

K

The two output properties and the magic is inside the template context, because we have the possibility to set the the controls to update view or notify output changes.

K

Okay, I think! That's all. For me, this is the reference I want to show you for the this. This control, just the the reference for the HTML text, control the full control for a canvas app how to create components by using the powerapps component framework and how to customize so how to use the template of the Microsoft graph toolkit to implement the template for this control and just an introduction of the TV in the library to implement the tile wind CSS inside your HTML template.

K

Thank you. Thank you. Thank.

A

You Fabio really really cool stuff, I included those links there into the chat for everyone as well, so they can reference them uh well. Thank you to Joe and Fabio, both of you a huge round of applause.

A

We really appreciate you taking the time to share with the community the recording will be available in 24 hours on the Microsoft 365 Community YouTube channel. You can subscribe at aka.ms4, slash, M365 videos, that'll, let you know exactly when they've been uploaded. You can also follow us on Twitter at microsoft365 Dev at m365pnp, the next M365 General Devon, Power Platform call.

A

What you are in right now is going to be two weeks from today: October 27th at 7 00 a.m and the next Viva connections SharePoint framework one week, October 20th at 7 00 a.m as well. You can see all the other community calls at AKA dot, Ms, slash, M365 calls. Remember you can't download the video, even though it shows you that you might be able to in the chat uh just make sure you go subscribe, look for that blog post uh as well on our blog site. So thank you. Everyone! Thank you. Joe!

A

Thank you, Fabio and all of you in the community that contribute to making this the best community in Tech have a great rest of your week, enjoy the rest of ignite and have a wonderful weekend. Thank you.