Microsoft 365 Community Development, 1 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 & Power Platform Development Community call – 1st of September, 2022

Description

Microsoft 365 & Power Platform Development community call on September 1st. Demos: Independent Publisher Connector - OpenAI connector on using AI for content creation and interactions AND How to animate SVGs in Adaptive Cards. Delivered Yo teams - generator-teams – v4.0.1. Also 5 Independent Publisher Connector, 2 script, and 3 Power Platform samples. Get latest hands-on labs and samples at Microsoft Teams App camp | aka.ms/app-camp. Join next Tuesday – September 6th for Microsoft 365 platform call. 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: (YouTube)
• 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

B

With the community, this is the Microsoft 365 and Power Platform development. Bi-Weekly call today is September 1st. Where did the year go? We are getting into winter and fall. I am David Warner your host for the call.

B

Today, let's talk about what we're going to talk about everybody, we're going to have the latest on updates on the community, we're going to talk about pnp.net libraries, PNP, Powershell, independent publisher, connectors, we're going to see the latest on a number of sample script, samples, Microsoft team samples, Power Platform samples and then what time it's going to be picture time with together mode everybody's favorite time of the call and then we'll get into our All-Star presenters of the day.

B

Robin is going to talk to us about an independent publisher, connector, open, AI demo, and then Christine is going to show us how to animate svgs and adaptive cards can't wait. These are two favorite topics, so we are looking forward to all of our demos today. How can you participate and get more involved in this community? Well, uh number one we'd love to invite you to demo a solution or a technical pattern.

B

This is something that we absolutely love to see: you're, going to see two of our amazing Community presenters today doing just that- and you are welcome to do that as well. We made it even easier on you. You can request a demo spot at AKA, dot, Ms forward, slash m365pnp, slash, request, slash demo, they say slash yup, make sure you get those slashes in there. You can contribute on GitHub and so you're going to see some opportunities today about how you can be provided.

B

Assistance on that if you're not overly familiar with GitHub and all of its weird acronyms and phrases and names for things like forking and pull requests, we've got you covered we're going to take care of you and we want to hear feedback. We'd love to hear. What's working for you, we'd love to hear maybe some things that you'd like to see improved. We just ask you to be: please be positive with your feedback and keep it collaborative now there are a number of resources that are available to you within the community.

B

There are two different YouTube channels: developer, videos and Community videos. There are a number of Open Source initiatives and projects ranging from SharePoint to office Dev to Microsoft graph, to teams to CLI for Microsoft 365, all kinds of opportunities and resources available to you and did we mention samples? Well, we have a plethora of samples, samples Galore, covering from all up samples to teams, spfx Power Platform list, formatting SPF extensions, so many samples for you to choose from you can use them to start to learn to get a projects off the ground.

B

They are all open source and guess what they are available for you to improve and contribute back to and again we'll talk a little bit about that now, you don't need to remember all these links. Nope nope, just one AKA dot, Ms forward, slash, M365 Community, will take you to the community Landing site and that will give you access to all of these resources.

B

In addition to resources, we've got you covered for a lot of developer. Community calls, so uh the first up is the Microsoft 365 platform. Now this has been on a summer break from July 1st to the 31st of October, which was yesterday. So the next call is it's spinning back up in the 6th of September next week, so you can get that if it's not already on your calendar, AKA dot, Ms forward, slash mt365, a dash, adev dash call a number of other sessions and Community calls are available.

B

Adaptive cards, Microsoft identity platform, office, add-ins, Power Platform, which is a monthly call and by the way plug plug. That's going to be done, live at the Power Platform conference, and so uh you uh can see everyone that's going to be attending. If you're going to be there, we're gonna have a live session for it so it'll be fun. Then we've got the Microsoft 365 Power Platform development, call which you're in right now and we've got the Viva connections and SharePoint framework.

B

Those are sibling, calls if you will they flip-flop bi-weekly, and they are going to be available to you. Every week we are here rain, shine, Winter holidays. You can count on us like the sun rises, so AKA dot, Ms, slash M365 calls will give you access to all of these calls and uh invites and direct links so definitely take advantage.

B

As we mentioned, the Microsoft 365 platform call is spinning back up on the sixth now this is a unique and fantastic call, because all the presenters are directly from the mothership. These are all Microsoft presenters. So next week we're going to see Brian and Cameron talking about e-discovery premium apis on Microsoft, graph, Alex and vesa, who are those two guys? Oh, we love them. Alex and vesa are going to be talking about spfx, feature demo and previews, and then Morel will be introducing graph x-ray graph x-ray.

B

So we're excited for that now you can get your recurrent invite at aka.msforward, slash, m365-, Dev Dash call now you're going to see all of these programs and resources and opportunities and talk about contributing back to the community. Well, it may be a little intimidating, maybe a little new to you if you're new to the community, but don't worry, we have a program that is just for you. It's called sharing is caring and it is here to provide you Hands-On guidance, and what do we mean by Hands-On guidance?

B

Well, these are sessions that are live in their safe space, meaning they're not recorded So you're free to ask any and all questions you're going to work right alongside other members of the community, Microsoft MVPs, Microsoft employees, members of this community team we're here to support you. We actually do these things right here with you in the call.

B

So, for example, if you would like to submit to any of the sample repositories, for example the Power Platform samples, we are going to walk you through how to do that and show you some tips and tricks along the way. If you'd like to write for the web, learn a little bit more tips or tricks there. Hugo Bernier and Emily Mancini are leading that we've got one of those coming up here in this month.

B

It's one of the newest sessions and available to you so don't hesitate to take advantage and by the way again, if you're going to be at the Power Platform conference, which I know a number of us are. This is going to be a live session at the conference. We're going to be doing it in person uh for everyone that would like to attend and learn more so we're going to walk you through it.

B

Just like a normal session, still won't be recorded, don't worry and you're going to be free to ask any and all questions in person. So it's going to be a lot of fun, so check it out and once we do uh have you contribute and assist you. We would absolutely love to recognize you in a formal and official way, not just by word or appreciation, but actually taking action to show that appreciation by allowing you to register for what we call the recognition program now.

B

This is a formal program that is partnering with credly powered by credly as well. That's incredibly, that same organization that provides you, those badges. When you get your Microsoft certifications yep, we have partnered with them and it is no cost to you.

B

All you need to do is register at AKA dot, ms4, slash, M365 recognition today is a new day, so we're going to be process our first day of the month, I should say so we're going to be processing all those badges from the last month and we're going to award you all and recognize you it's a great way to show your managers, your clients or both that you are making a difference in the community uh and it can be Associated to your LinkedIn profile.

B

It can be Associated to your Twitter account and uh you can also put it on the fridge I know. I do so. I can show the family that I actually do something, and everyone will be proud of you and it's a good way to be recognized again, no cost at all. We cover the cost. We do need you to opt in, though uh just once so you can do that at AKA, dot, Ms forward, slash, M365, PNP, Dash recognition.

B

All right. Let's talk about some of our programs, we're going to move into pnp.net libraries and I. Think Paulo is going to cover that for us.

C

Yes, thank you David. So, uh first of all, we can see that the users of our library libraries keeps on going like crazy and we need to say thank you to the whole Community for using it and for contributing to these uh libraries in the last few weeks. If we have been managing some uh pull requests and we need to say thank you on the PNP framework side to Ronald, Bowden, Daniel, pastor, oleiruhaka and friend ball, as well as on dpmp core SDK side.

C

We had the contribution from leonline, Rose, Bert, Johnson and Martin Link's drill. We also want to remind you that we are going to release a new version of the PMP provisioning schema. It will be the one of September 2022. So if you have any feedback, please share it through the Gita repo under github.com PMP, slash, PMP, provisioning schema and most likely in a couple of weeks from now, we will have the new release implemented in the engine and then we will need to add additional support.

C

Water for the provisioning part of the story and I think that's all for me. So back to you David. Thank you. Awesome.

B

Thank you, Paulo. Let's move on to PNP Powershell we've got them.

D

Thank you. Thank you. David uh in pnb, Powershell We are continuing work on the 1.12 release, so uh we received, we see a lot of exploding usage as well like we saw 2.9 Million downloads overall, and we are also seeing quite a lot of executions per day.

D

uh What goes on in improving is we have improved the exception handling and the verbose messaging for the commandlet, so if you're provisioning, a site, collection or you're, swapping a site collection all that we are showing a more improved messaging there when you are doing that, uh we also improved the group Microsoft 365 group, related commandlets and also added additional two parameters to the tenant command.

D

Let's, like display name of file, views and display name of file viewers in SPO, so both of these commandlets basically show them the people who have viewed a particular file inside the property pane. So we did that uh what next uh yeah we'd love to absolutely hear your thoughts on what you would like to have from the pnb Powershell?

D

uh What one thing that this so practically on the top of our mind is the.net6 support, so yeah dot net 6 support is, um is coming very very soon because right now, the one that is based on dotnet core 3.1. It itself is getting out of support in December 2022. So we are really looking forward to update to that.net6 and yeah. That's pretty much from mind uh over to you. David awesome.

B

Thank you, you got them really really inspiring awesome stuff, so keep up the great work there. Thank you so much all right. Let's move on to Yo teams and we'll uh give the mic over to Stefan.

E

Thank you, David um So. Within your teams, we had a little summer break. So there's not really much of news. We can talk to you about uh after we released the latest major version, which is 4.0, which yeah shifted things a little bit. um We decided to take on a summer break and we just did a latest release: 4.

E

4.0.1, which fixed some issues, but we're still in the process of yeah deciding what we're going to do next and we really are looking forward to help with you guys. So if any one of you has an idea uh has something he or she wants to give us along the way of implementing into your teams. Please feel free to do so in our GitHub repo.

E

As we see here, top of minds are SSO support, Microsoft draft toolkit support and a lot of more stuff, but if you have an idea or if you have a requirement, please let us know, and if you'd like to contribute, please feel free to do so. Thank you.

B

Awesome thanks Steven uh excellent work here. Yo teams is so so cool I appreciate all the work so definitely dive in there. If you have any interest, don't hesitate to reach out and ask questions as well. Mgt Microsoft graph toolkit uh Seb is still out on uh paternity lead being a new daddy. So congratulations to him. uh So it's been a little slow going here during summer, but I just wanted to remind everyone that MGT is awesome and available. uh They are fluent UI components, near components, theming capabilities and there are samples.

B

The stop pills repository is live, so you can contribute to these. Absolutely you can access them at AKA, dot, Ms, forward, slash, MGT samples and you're always welcome to help with issues you can do that at AKA dot, Ms forward, slash MGT, forward, slash issues. Now, let's move on to Independent publisher, connectors with Natalie.

A

Hello good morning, good afternoon, good evening, independent publisher, connectors for those of you who don't know are essentially Power Platform connectors. They show up in powerapps power, automate and even Azure logic, apps and anyone can build and publish one to an existing API as long as it's not on the platform already. So uh just a couple announcements we have 53 awesome, independent Publishers, 168, independent publisher, connectors um and in general I would like to say that we have over 815 connectors on the Power Platform today um in terms of new connectors. Recently we have five.

A

We have uh Joe onwin's Fantasy Premier League, and then we have two new independent Publishers who have joined Richard and Simone. Richard has built mockeroo and someone has built mapbox and then Troy has built two new connectors near Earth, object, web service and USGS earthquake hazards, and this in terms of these two hack uh connectors that Troy has built. This has been his recent theme here as well, so um yeah I, guess we do have that.

A

One large theme now on our uh platform and if you're looking to submit a connector, but you don't know which one you should build and submit um you can, when you go into our GitHub repository in the wiki and I'll post, the link in the chat as well, we do have something called top connector asks. There's also some asks in the discussion as well. So if you are stuck- and you want to contribute, you want your name in the product, but don't know where to start. You can always go there thanks.

A

Everyone back to you, David awesome.

B

Thank you, Natalie I think I need to go plug into that earthquake hazard being from La. So thank you, Troy all right. Let's talk about some samples, we're going to begin with script, samples and Paul Bullock.

F

Hey thank you David, so uh PMP script samples, it's the old repository to go to if you've got Powershell or bash scripts that you want to either find an example for or a sample or even if you want to submit to the repository yourself. So if you've got scripts that you want to share with the community, then this is your place to go.

F

We've got over 250 scripts in 150, so 165 scenarios that's different um different types of tasks that are covered by potentially one or more scripts, covering things like the Microsoft graph, CLI PMP power, strategory management, shell and more there's, there's really no limit to it. So I can always expand the site and add the capabilities if you've got a type or script sample that you want to share.

F

um I can reach out to me. I can always include that in the in the site, so these samples are integrated into the unified solution Gallery. So those will appear there as well to get that that further reach, which is super super cool. We've got a couple of new uh samples and updates.

F

So we've got a new sample from Martin ningstral to get certified in Microsoft teams for SharePoint Health incidents, which is super super cool and we've had an update for CLI, uh again 365 scripts uh to ensure the site asset libraries created so there's an update there I recently also added a feature to the script sample site to filter by security.

F

There's been a few few uh conversations going on on Twitter, so I thought I'd add a filter, so you can see anything related to that aspect, but thank you very much for all the samples and the contributions that you have made so far. You're absolutely awesome again. If you've got anything, you want to contribute, feel free to reach out to me in the best place is Twitter through direct message back to you. David.

B

Awesome, thank you Paul and yeah. Congratulations just want to underscore how awesome this repository is and again what Paul said if you have any script, so we all do. We've all got so many scripts that are little utilities and awesome, and we may think ah who needs them. Everybody needs them, don't hesitate to reach out at all. If you've got one you want to share, we want to include it and recognize you all right. Team samples with Bob German, hey.

G

Everybody well, let's see we don't have any news um Community samples this week, but I can't resist the opportunity to publicize the teams app camp that my teammates and I just finished working on.

G

This includes a number of samples actually and also Hands-On instructions on how to put them together, and so you learn to Port a website to teams with Azure ad SSO, even if the original app didn't use, SSO or Azure ID at all, uh it helps you with identity linking messaging extension, configurable tabs blah blah blah blah check it out at AKA, dot, Ms, slash, app dash, Camp and guess what it's open source too.

G

So if you look at the GitHub issues, you'll see our wish list for additional labs, and if you would like to contribute a lab I would absolutely love it. um You're welcome to do that with a pull request or better. Yet contact me because I haven't written up all the contribution stuff yet and I can probably save a little bit of time by pointing you at the guidelines. That's it and hope to see some more Community stuff next time and back to you, David.

B

Awesome thanks, Bob I'm excited I'm gonna go get my tent and sleeping bag. Now for this Camp. To be honest,.

G

With you so, and not only that, but the camera I turn I always turn my camera off when I speak and on when I stop speaking because I don't know, I haven't had enough coffee, I, don't know.

B

All right awesome all right, one more before we get to everybody's favorite Time picture time, Power Platform samples with April Dunham.

A

Thanks David, so we have not one but two but three new samples from Lama aliwami. We have a great sample on email translation, so this particular one shows how to use the Microsoft translator connector to translate your emails automatically before sending it into a different language. They have a PDF converter sample that shows how to use the encodian connector to be able to take a file from your OneDrive convert that into a PDF and then a weather sample as well.

A

That shows how to use the open weather map API with the custom connector inside the PowerApp to be able to show get your geo coordinates and show the weather so lots of great samples. Thank you so much Lama for your great samples this month and if you have samples you want to contribute for Power Platform go to aka.ms4 Power Platform, Dash samples, we'd love to see it back to you. David awesome.

B

Thanks April a hat trick of samples today in the Power Platform world, so excellent, all right. What time is it picture time? Let's show those cameras if you want to show the community how awesome you are- and we want you to- and vessel will take over here here in a moment to yep- show.

C

E

D

C

I will I will probably just get the screen back here. We have 50 states in the room and let's wait for the seats to fill in to Big clay. We do get the 50 uh on these scores, one more row, we'll snap in in a second there we go yes, excellent, a few more seats, fewer seats and about the recording already on no rush, no rush, no rush. If you still have few seconds there was one more, maybe one more seat.

C

Let's do something everybody we'll get to the awesome stars of today and the actual demos, but we don't want to miss the together mode. So, thank you, everybody for being part of the community. We love you and we always want to hear more from you around the feedback on what we can do to make your life easier thanks. Everybody thanks for being part of the community.

B

Awesome, thank you. Vesa I mean, let's be honest. We the resources, make their life easier. We just make it harder right. It's like they got to endure us to get to the resources.

B

All right, everybody! Thank you. uh So, let's move into our Superstar Community presenters today, Robin is going to kick it off with an independent publisher, connector demo on open, AI Robin. Take it away.

H

Okay, let's get started hi. uh My name is Robin and it's an absolute pleasure to be here today, especially on the same call with Christina, because we share the same passion for svgs uh in in powerapps canvas apps, yeah, yeah, she's, uh she's, talking and I've learned so much from her sample. So you should definitely check them out as well, um but you can also, if you like, that topic check out my YouTube channel, which has lots of SVG related stuff enough ads from me today, I'm gonna talk about a totally different topic.

H

David already said it. We are talking about about the open, AI, gpt3, independent publisher, connector I contributed Natalie, already told you how this thing works. So this is available in all your tenants in all your Power Platform environments, as long as it's as it's not blocked by DLP. So you can set this up in a few minutes yourself. What I'm, showing today, let's take a first look at open AI you may have probably heard about the company- does a lot of AI stuff yeah.

H

What is news right now is one of the image generation models, the dial E2 model, but that has no API, probably in the future. um So today we're going to talk about GPT 3 and what is gpt3, it's short for generative, pre-trained, Transformer 3. It's an auto, regressive language model that uses deep learning. I have no idea what all of this means and I have no idea about AI, but it's so easy to use. We're gonna look into that right now, because it produces human like text. What can you do with it? Some examples.

H

Of course this thing can do writing, and probably some of the news you are reading are already written by AI, probably by GPT 3, and this can do excellent fiction writing and is really creative. This thing you see it in the top in the picture, is trained by 45 terabytes of data, so this thing basically knows the whole internet and at least the whole of Wikipedia lots and lots of books. So it's really smart.

H

It can bring up answers in a matter of seconds and and this thing speaks multiple languages and you don't set the language anywhere. You just start talking to it in language and it will respond in the according language um while English works. The best German is also a language. This thing understands and also programming languages, and you will probably have heard um of this thing before the ideas Tab and the canvas app editor, and this is actually powered by this model by gpt3.

H

Of course, there's a little bit more magic going on in the background and it's trained a little bit further, so it can produce um Power FX. But this thing can also already. The standard model can already produce a programming languages like HTML and others. So before we get into demo time, um I'm gonna take you on a quick tour to get started and get your API key to use. My connector I'm setting up an account is done in a few minutes and these things actually cost money.

H

But when you set up your account, um you get three months of free trial and 18 in credit, which is uh lots to play around with this stuff and get started, so you don't have to plug in credit card data.

H

You can set this up in a few minutes and get going without paying a Cent and where you should start is uh the playground, because this is basically what uh my connector can can do, and this will look very familiar if we look into into Power automate in a second and first of all, um we're gonna plug in our first prompt. The string we are giving to the model is called a prompt.

H

um I was basically doing the thing that was in the index, but I um included a little bit more, so we are plugging in the prompt and we are getting a response back. This is yeah, um probably more creative than I would have been and makes absolute sense for an ice cream shop tagline, and you see how easy it was, and basically we're doing the same thing with the API. There are some presets there down here that you can also change in the API. You should get familiar with them through the playground.

H

The most important is probably the engine that is in the background, and when you want to have human-like text, you should use the text DaVinci engine, which is the most uh the most expensive phone, but um yeah. You can get familiar with the pricing stuff and, as I said, you start with enough credits to play around a lot even with this model, and you should also check out the examples um right here, because manufacturing your prompt is a science in itself. So let's look at one of my favorite examples: it's mouth the!

H

Where is it Mark? The sarcastic chatbot right here? We open it in the playground, get back to the playground and get your prompt plugged in presets a little bit changed, but not too much and now we're gonna look at a little bit a longer prompt right here.

H

um It's separated in the first step. This is the warm up um where you just set the seam for the model, so it knows what you're expecting of it, and then you double down on that with this is called a few short learning approach, where you give on the spot a few examples um that you make sure you get the results, just as you want them, so we are giving here like four results or anything, and um then we can plug in it's already.

H

Everything set up, we hit, submit and math gives and sarcastic answer right now and lots of fun to play around with this example and one more thing and the model picks up really well when you use the column, so you color Off column that it's a dialogue between um you and the model itself, because we told the model that is called math right now. So this is a technique that works really well, and this isn't programmed into the model. It's an AI. They just found out manufacturing prompts in this way works really really well.

H

So, let's jump into Power automate first to see this um through the Power Platform connector, we will set up a new flow, probably not because it doesn't seem to work right now. So, let's give it one more try.

H

Now it works just an instant Cloud flow which we will trigger manually and then add in a new step, open AI and once again this should be in your tenant as well, and this only has one endpoint, the most important one, the completion endpoint- and um this is the defaults that I plug in which I would think would showcase it a little from the get-go.

H

We save it and test it for one time. So you see the same things you couldn't you could put in in the playground and continue when you do it. For the first time. Of course, you have to set up a connection enter your API key. You get from the open, AI website really easy to find and we will run the flow and get our first response back through the API there. It is, and we ask what is the model's favorite animal and why and the favorite animal is an elephant because they end intelligent and loyal.

H

Also very large and impressive can weigh up to six or seven tons. Don't know if that is correct, but sounds impressive. Impressive and I want to point out one thing: um if you are not too familiar with response, objects or Json objects, you're getting right here and we get this response object. And then it has this nested objective choices which can have multiple records, and we generally want the First Choice and then the text property of that that is yeah important.

H

We will look at the at the source code in our second example in a second- and this is the chatbot- it's a little bit like the like the playground like chatting with a mouth, but in a yeah in a canvas app. You can use on your smartphone really well, and this is actually in the powerapps samples.

H

Repo I will plug a link in the end and if you like design, then you should listen really carefully to Christina's presentation, because this is from her from her new morphic design kit, which I used to to make this look more beautiful. I, look like a link at the end as well. So let's get started and ask the model what its favorite movie is, and the favorite movie is Shawshank Redemption. Indeed a good one, and let's ask for a short synopsis of the movie.

H

And we will get a perfect synopsis, it's a little bit longer. It's ended because I said the the end, condition to narrow I think it would have rode a little bit longer, but this uh probably does make a lot of sense and the rest would have made a lot of sense as well. I want to add one more detail right here.

H

um This thing picks up context phenomenally, so I was just asking to write a short synopsis and, of course, the model knows that I want a synopsis about the movie Shawshank Redemption, and how does this work? Let's look a little bit here, which prompt did we did we send before um in each text we are sending again. We are including the whole conversation um for the prompt, so the model can also pick up on the context and give better answers right here and then we're gonna. Look at the second little demo.

H

App I have um equally lots of fun with that, it's my sample data generator, um which sample data are. We want to generate right here. We want five capitals of European cities, countries, sorry and we get Paris, London, Rome, Madrid and Berlin. This makes sense as well, so we were you asking gpt3 right here with our first call. This is a call to the Google image search, so no gpt3 involved in here, and we get a really nice sample image.

H

We can scroll through some of them and we can ask gpt3 again for more information for a short description of the subject, and then we get a description about Paris, London, Rome and so on, and we can ask for another thing and we will ask for famous sites in the city of star and then internally, the star gets replaced with the city, and we will add this sub list right here.

H

So for Paris we get Eiffel, Tower, Notre, Dame, Cathedral and so on, which seems to make a lot of sense and yeah I, just love playing around with this and learning about different stuff through this app so I'm having lots of fun and we are looking for the wrap up, we're looking for the API call. We are making um through the canvas app right here.

H

We are calling the open, AI independent publisher, connector, the completion endpoint, which is the only one again available, plugging in The DaVinci model, and then we are setting it up just like we did it in the playground. We are using a warm up and then a few short learning where I provide four examples of sample data that is generated and to process the data. It's important for me to have it separated by semicolons, which I also say in the warm-up and then what I said earlier.

H

We want the first set of data from the choices object and from there we want the text. That is what we usually after and then we are splitting the whole thing by semicolons, and that is where we're getting a nice collection. We can work with I couldn't find any data that's set. But here you can see that data is displayed through this collection.

H

Then, of course, we are doing exactly or similar things again with the description and the sublist and adding it to the collection, and that is it for my samples, I'm gonna, plug the links in the in the chat and don't know how we proceed. Do we have time for some questions.

B

H

B

H

B

Questions get asked yeah the questions get asked in the chat, so definitely I believe there are some questions Robin excellent. This is a super super cool, um really love. How you've created it to be a little bit more fun and showed some business use cases for it uh really really flexible in terms of what you can do with this connector. So if you haven't checked it out definitely go check it out. Thank you for the links uh that are in the chat uh and by the way. Yes, this was Chuck Norris approved.

B

So just in case you were wondering so excellent job Robin. Thank you all right. Let's move over to Christine, where she is going to Razzle and Dazzle us some more on animating svgs.

I

Awesome thanks David! Thank you so much hi everyone. uh Thank you so much for having me here today. uh My first BMP called presenting. So hopefully it all will go well uh thanks, Robin for the shout out that was an absolutely mind-blowing demo. I literally cannot believe what I've Just Seen uh that was literally perfect. So what I'm going to do today is I'm going to show you how I can animate svgs and why you might look at animating this, which is in adaptive cards, going to talk about how to do it.

I

We'll have a live demo and then we'll crack on with adding that to the svgs and the Adaptive cards. So let me just quickly share my screen.

I

um There we go so uh what we're going to do today, like I, said we're going to look at animating messages in adaptive cards now, I post a lot about svgs in powerapps and I thought oh I'm, going to try and give that a go in adaptive cards so before we navigate to the demo uh for anyone that doesn't know me, my name is Christine kolodowski I work as a principal consultant at a company called computer center. I'm based in London in the UK and I, tend to spam.

I

Everyone's Twitter and Linkedin feed a lot with uh different geeky stuff um that QR code is still off my social. So if anyone wants to connect with me, please feel free to scan that in and I know that David will share that in a chat as well. So let's have a look at why we might use animation or why when why it might be beneficial. So, first of all the stats, ninety percent of the information transferred or transmitted to our brains is visual.

I

That means that as long as you're, not visually or cognitively impaired in any way most of what you, what your brain is processing is what you see, which means that naturally animations are going to be more attractive to the eye. Anything graphical is going to be a lot more attractive to the eye.

I

Now scientific research has proven that if you use graphical objects to support instructions or text so by using our images and icons, your performance or your brain's performance is going to increase by 88, so you're more likely to understand instructions or an application or anything else. If there are supplementary icons now, I don't know about you, but I've put many Ikea furniture before and I. Don't think I would have been able to do that without the uh kind of thorough guides, with with all of the pictures now around 87 of all the information of.

I

Oh sorry, of all our uses process animation before they see text, so you may have seen on the first slide. I did kind of catch you there I added an animation and I can guarantee that around at least eighty percent of you looked at the animation first before you even looked at any of the texts or anything else that was on that slide and the last part the best reason it is: it's 100, fun, I, absolutely love, animating, svgs, I learned a lot about from Robin as well.

I

Robin is the SVG King and uh it is just really really fun now before we go into the demo, there is something that I want to mention and that's around limitations. Now uh the one thing I didn't want to use obviously talk to you about the demo and then someone tagged me in Twitter to say: Christine I've watched the demo. You lied to me so I have put a couple of limitations.

I

However, last night I came up with another idea on how to overcome the um limitations and I'm going to show you that today, as well, so the first kind of limitations that everyone will be aware of is that there is a payload limit on adaptive cards. This means that we are limited us to uh the size of an image or anything, video that we can pass inline if the cards payloads exceeds the limitations that we have. The cards will literally just not render in any application, then by using inline c r in the svgs.

I

We do have some limitations around the CSS attributes that you can use so things like gaussian blur, linear gradients and some of the other things are unfortunately not supported in inline HTML uh within the Adaptive card. Just yet again, I have found a way to work around those two. Then they are not supporters in model windows, so this is only applicable to uh the svgs that are written in line as well.

I

Within the Adaptive cards like I said before, I have found a workaround to this as well and the last the worst reason the best limitation is. They are just addictive. So once you start animating things, I promise you there is literally no way back from there, so, let's dive into the demo instead, so what we're going to do is I'm going to animate a very basic SVG first and then I'll show you how I can add that to the Adaptive card itself?

I

Okay, so for the uh kind of Animation I'm going to do today is uh Disney logo. uh As we know, we have the Power Platform conference in just over two weeks. uh One thing that I'm super excited for, apart from the conference, which is going to be incredible, is visiting Disneyland I'm, a huge Disney fan and I thought.

I

This would be a perfect kind of use case for for animation today, so to uh kind of go over the structure of an SVG for anyone that hasn't worked with an SVG before SVG is comprised really of I, guess three main elements, so we always have the opening SVG tag here. So this is what we will declare things like the namespace. This will declare with hide. If we wanted the view box and all of that, then we have our object. So that could be a path.

I

As you can see, now paths will comprise of pretty much tags. These are all the kind of cubic beziers all of the curves that you get in an SVG or geometrical shapes, so that could be like a rectangle and Eclipse uh pretty much anything a circle as an example, and then, at the very end of this video we will have the close using SVG tag. Now, if we wanted to add any Styles, we know that we can't link any style sheets within the SVG. We have to use inline Styles.

I

So to do that, we have to open a style tag in here and then we'll close, that before I forget and then we can start declaring the Styles directly within here. So let's uh start with the selector, so for the selector we will just use path. We only have one path in here. uh If we want to, we can add, obviously a class as an example, so we can just say uh plus let's say we can just do it test as an example and we can just to test as an example.

I

So you can do that just like you would normally in CSS, then we'll open the curly brackets and before we start adding any animation, let's actually create an animation so to do animation with svgs. We have three options: normally we have JavaScript, we have uh CSS and then we also have what's called smell: smell transfer, synchronized multimedia integrated language. Now uh we know that we can't add inline JavaScript in here. So that's out of the box for us and then smell uh is great, but smell isn't supported on mobile devices as well.

I

So for today's demo we are going to use CSS just because it is supported on pretty much every browser, including Internet Explorer. If anyone is using it. Hopefully no one is so to do that. We will start by declaring keyframes. So that's how we do animation in CSS and then we'll open the curly brackets now within. Here we have two options. We can either declare that starting and the finishing point of Animation. This will be done using from until or we can declare what's called checkpoints.

I

Well, I call them checkpoints I, don't think they're actually called checkpoints. So to do that we can just say: uh let's just give um the animation some names so for the name, let's just start with, as an example fade. So that will be the name of animation and, let's just say, we'll, go from and then we'll go from opacity zero. So we want that to be uh transparent at first and then we want that to go two and we'll go to opacity one.

I

So we want this to kind of breathe into our screen now, once we've done that all we have to do is assign that animation to our SVG. So I'm just going to pop that into here and told to fate that situation, we can just do three seconds as an example, and then we can just see infinite, so it's doing it infinitely and, as you can see, that's animated already now.

I

One thing that I really dislike is when you can see that resetting point, so you can see that after three seconds, it's just literally resetting the animation. So to counteract that we can actually use alternate and alternates will alternate the finishing point of the animation. So you will now see the kind of breathe in and breathe in uh breathe out effect, so you can see that it's not disappearing and resetting the animation anymore. It's actually kind of breathing in and breathing um out. So that's one way of doing an animation.

I

Now, let's just add some color as an example, so to add color again, I can add this within this keyframe. So we can declare as many as we want, or we can add another keyframe I will add another keyframe just because I want to show you a different structure of keyframes, so we will just do let's say keyframes and then we'll just call it our color as an example and then we'll open the curly brackets.

I

Now for this one we're going to use checkpoints so with checkpoints, we declare each of the points of the animation at which wants something else to happen. So to do that, we can do let's say we'll do increment it by 20. So we'll.

I

uh Let me just quickly do that 20 and then we'll change, let's say, fill to be uh blue and then I will just quickly copy and paste, because we know we don't want to rewrite all of that, and then we will increment this by 20, so that would be 60, 80 and 100, and all we have to do now is just change these colors, so I can just say: I want this to be green and I want this to be yellow I want this to be pink and I.

I

Want this to be, let's say uh purple as an example and then once we've done, that we again need to assign the animation. So we can add the animation straight after this one. We can just separate it with a comma and then add I think we call the color. Did we call it? The English white color, the American white color, perfect, add the duration as well, so we'll just make five seconds.

I

So it's not jittering on the screen and will just make it infinite, and we should hopefully see in a second is that this will be changing. Colors, we'll just give it a second to uh load, color five seconds, a color color. Have we done everything? um Oh I think I have too many of these there we go. Let's just quickly have a look: oh I'm, not sure why that's not changing color, let's just quickly check what have I done. I haven't made a mistake: 20 30, 60 80, 100 percent uh keyframes.

I

Oh I'm, not sure why that's not changing color um color! Okay, let me just quickly remove that, for some reason, I'm not sure, what's happened there, how very bizarre okay! So we have demo demons, as you can see. I am not quite sure, what's happened uh there. Let me just quickly pop a random snippet in here to see, if that will that will work instead and then let me just quickly call that Earth as an example I'm, not sure if my browser just needs refreshing.

I

Okay for some reason, that's not actually loading I'm, not sure. What's happened with the uh browser in here, I will just quickly go on to oh, that's. Why is it because I had 1000 over there, okay, so uh to counteract that again, I can fix that quickly. So I already have a kind of pre-generated uh animation for this anyway, so we don't have to worry about that. We will just quickly go to the Disney logo, so this is what I was going to quickly build for you I'm not really sure, what's happened there.

I

So apologies to anyone watching this back. So once we have the animation ready now we can actually add that to our um adaptive card. So if you've ever worked with powerapps as an example uh to add an SVG to your power apps, the first thing that we need to do is we need to encode the actual SVG itself. So to do that, I will just click on. Let's just quickly add an image to here and the way we do. It is we'll just open it in here.

I

So to start with, we will do with uh data, then we will do image and then slash SVG plus XML. There we go now. We can't declare the chart set as well if we wanted to and then after this. This is where we will pop our SVG text.

I

So if I was to just quickly navigate back to my to my Disney logo, here will copy all of that Ctrl C and then we'll go over here and then we just pop that other ends there pop that into here, and as you can see, we now have this animation in um in the Adaptive cards. Now, that's one way of doing it again. This is quite simple animation and one thing that I like doing is really kind of creating pretty things like neon glows, gaussian blouse, like I, said, and more kind of advanced animation.

I

uh So if you don't want to do it, this way, I will show you another way of how to do it. So if you've worked with adaptive cards before you'll know that you can link any image externally from any kind of host website. So last night I was getting very creative and I thought.

I

Why don't I find an SVG hosting website as an example add that to SVG there and Link it back and it worked so what I've done is I have put together a couple of those videos just to quickly show you how that works. So the website that we're going to use is called SVG share or SVG uh I. Think that's how you say it. So all we have to do in here is: we have to add these routines to here. So I'll just go to.

D

I

Then we have to choose this video, so I'm just going to go for, let's say the rainbow SVG. That was actually the cloud and I will just refresh the website again. The demo teamers are coming in, which is absolutely fine. We always expect that to happen at some point. Let's try that again and we'll go to Rainbow go to share and that will generate the link for us. So now that will generate the link, so all I have to do is I have to go and get the uh image source of that specific image.

I

So I'll just get that from here. We have to make sure that it has the format at the end as well. Otherwise it will not render, and all we have to do is if I were to just go to this sunny icon as an example and go to the URL here. All I have to do is just replace that and again this is quite small, so I'm just going to make it slightly larger and we'll do large and as you can see, we now have that animation.

I

So if you wanted to have some neon glow as an example, let me just change that to dark and we will add one of the things that I have done recently.

I

So we'll just go to add: SVG we'll go to choose file and we'll go for the Xbox one as an example and I will not show you what that's doing yet well go to share and then I'll scroll to the bottom, and here that SVG file from here Ctrl C, go to Adaptive card and I will just pop that on the top here and then, if you give it a second, uh this is an animated kind of drawing neon SVG.

I

So in a second you'll see the Xbox logo and then it will pop like in the light there we go again. We have an issue with a bit of a v-bucks around the edges for that I expected as well, that's something we can fix, and that is it for today's demo. So uh I've shared settings as well and I'll pop them in the chat and I know that David's kindly offered to share the links as well. I hope you enjoyed it and I'm handing over to you David.

B

Awesome, thank you Christine. Well, what can I say holy cow right, I mean both. Those demos today are absolutely epic, so love to see the community getting creative with this uh and all of the uh demos and examples, and in use cases as well really fantastic to see how this can be used together, how the technology can be better together across M365 as well as Power Platform. uh It's really really fantastic and amazing.

B

So thank you. Both Robin and Christine I think we uh need a round of applause and celebration for everybody today, uh as well as those in the chat. So thank you all for being part of that. Let's wrap this up today.

B

We want to thank you again and the recording be available within 24 hours on the Microsoft 365 PNP YouTube channel. You will not be able to download it in the chat. You'll see that it's ready to download you'll think you can download it, but you can't so uh what you want to do is go to ak.ms4, slash, M365 videos that will take you to the YouTube channel. You can subscribe and as soon as it's uploaded, you'll get an alert. So definitely go subscribe today.

B

You can also be alerted by following on Twitter at M Microsoft, 365 Dev and at m365pnp. The next general Dev call is going to be one week from today same bat, Channel same bat time, September 15th, 7, A.M, Pacific uh view connection SharePoint framework, one week from today, uh 7 A.M as well, so you can access all these calls from AKA dot, Ms forward, slash M365, slash calls thank you again, everybody for being fantastic. You are amazing, Community contributors. Thank you!

B

Robin and Christine again to present today, on some fantastic demos, have a wonderful rest of your week. Everybody and a wonderful weekend.