Microsoft 365 Community Development, 21 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: General SharePoint Dev Special Interest Group (SIG) - February 21st 2019

Description

Recording of the SharePoint Dec community call from February 21st. The latest news around PnP CSOM Core, PnP PowerShell and the modernization tooling.

Demo - Velin Georgiev (Pramerica) - Setting up multiple environments with your DevOps pipeline

Demo - Chris Kent (DMI) - Column formatting design mode

Demo - Paolo Pialorsi (PiaSys.com) - Building Electron application which is accessing SharePoint Online

Detailed agenda and covered topics are available from SharePoint Dev blog at http://aka.ms/spdev-blog.

Download recurrent invite from http://aka.ms/spdev-sig-call. More details on the SharePoint Dev community from http://aka.ms/sppnp.

A

Welcome everyone, the general SharePoint development, a special interest group or bi-weekly call today slightly different, set up your usual host versus having a day of suffocation. So that's why we were the other folks to take over the school and kind of leak it through some cool content.

A

We'll follow the usual agenda so we'll give you an update on the listen and see some PowerShell momma's ation, then Chris Gaines warrior horses, hopefully are there as well and and they have some nice list- formatting tips for you.

A

Next, we have felon showing us how to set up multiple environments in Azure, DevOps and, finally, a really cool demo from Paulo around building an electron application that goes back to SharePoint Online, and maybe we have time for Q&A we'll see.

A

Typically, we don't have time, but maybe I talk faster than Messer, so so, without being said, we would like you to communicate in our communities to work with us.

A

This is a forum also for you, meaning if you have done something cool that you want to show. You use a particular technique. You build a nice sample, a solution that you want to show just which I'll stress to any one of us Patrick. First semi, any one of the team essentially and just make us aware- and we put you on the agenda and you get ten fifteen minutes to talk about it, something to show what you did.

A

The cool thing that you did so we really love to have those contributions for you guys coming in here and showing it don't really get up. Of course, many of you have done that in the past. So thanks for that, so keep doing that to keep keep up the good work, keep trading box, changes, etc and provide feedback if also feedback in form of issues or Twitter comments, whatever works so many channels nowadays, but give us feedback.

A

Let's move on to the next one he said usual, slides, you've seen them before now, just a reminder. A keynote, ms / s, PDF ducks is out of place for all documentation. Everything sharepoint, developer, related all documentation can be found over there. This is also an open source platform. Essentially you can change the connotation. So if you don't like what you see over there make a change and get a pull request that we can take your change in and improve for documentation all the videos that we create.

A

Like all the meetings the sick calls are recorded, the monthly calls are recorded. We have additional videos that we create on a regular basis. They all end up on our YouTube channel, which you can reach via KMSP dev videos.

A

And finally, if you have an issue, a developer, related issue, so when talking about developers specifically related issues, not general SharePoint issues, but if it's developed a related issue, please create an issue in SPF issues list which is the our central issue list, which is triage by a product group and engineering. So this gives su the necessary attention for your issue.

A

With that being said, let's move on to our quick update on bnps system, so the PP season call is a central what net utility library, essentially that really makes it easy to work with SharePoint, that's growing from something quite small. Two years ago, three years ago, the were released and library, with lots of lots of functionality and looking at system what will be coming. So we version February missus is ready for about two weeks now and just in the middle between two releases.

A

So we didn't about two weeks will release the March version and for that one we plan to have a lamb support. So there is some pending requests that we should love to emerge to get a lamb's bhavish upon 2019, so pretty cool. So the first relationship on tour that specific capability after we've enabled 2019 support.

A

Another fairly cool thing is a radical dental flow of dedication. So you might have customers today that have disabled the legacy alt in the tenant, because you made it quite easy. Go to sound too. Like that to be talent, administration, you can just check a box and then legacy alt is disabled, which then implies that if he was using a password bang, it doesn't work anymore. It just blows up right now.

A

With this new edge ready, cadential flow, you can still use username and password, but then we go to Azure ad and get an access, token and kind of bypass the legacy old problem.

A

Well, when we built this, we stumbled upon an issue with our loading method, so totally in SharePoint in season Co library. We use a lot of cloning, where we kind of take one client context, object for particular URL and then create another line context for total URL. Now, clothing works great as long as you stay in the same audience. So, let's say in my case it would be like HBS birth line that SharePoint that come everything underneath brothel on a shelf or not converse great.

A

However, if I would switch to a birth line, my SharePoint that come for example, that would fail- and essentially we now build the solution for that where the cloud method is intelligent and there's no stance its context and can handle those situations, the several smaller provisioning engine, but fix is done and the small thing around double quotes in the client side, page title long-term warship on 2019 sports, webpart connections and clients at pages api. There's an issue crater for that, and I think, is something that we should to work on to sport.

A

It and, of course, a new scheme is supposed schema. Support has been kind of delayed a little bit because we are working on the provisioning service once the fishing service gets released. We can further focus on the new schema.

A

Going to a powershell, let's see if he ever banana :, okay, so for PMT, powershell, safe release, rhythm within two weeks, the new version and better aligned toward the changes in inside score. We have a better support, like PNP online, to authenticate to SharePoint with credentials when legacy alt has been turned off, we'll also make the apply. Pd tenant template commands a bit more verbose.

A

So when you apply P internal template, it can mean that you create multiple side, plexus, join them and hope so, as can do a lot of things and will now also output that information to you after the creation. So you get some feedback in the console. What what was created essentially and then you can pick up the output in and do additional steps with it and there's an issue that we fixed a small issue in and the connecting the line with SPO management. Shell parameter.

A

So essentially with the March release, you should be able to see miss authenticate even if legacy alt has been disabled. That's the key thing every working on and trying to achieve.

A

All righty and the thirst recurring topic here is modernization. So what happened in that space for the next version, the March release would plan, have some pretty cool new things actually, so when first one is an experimental support for transforming pages into another site collection. So essentially the scenario is that you have a team site or publishing portal or something we do it but pages, and you transform that old page into a client site model on page into a new site collection, for example, into a communication site. This is in this early stages.

A

This is a community contribution from our poll burlock. So thanks Paul for doing that, if you're in a call- and we plan to do some more work on in that area, to make this actually better to have more features there and there and, like example, for thinking about it. If you have a page, showing images, why not copy the images over to the target site collection if you go cross site collection?

A

Furthermore, we'll have some improved mappings for contractors and cons on by query web parts, more detailed, mappings, more functionalities. Being that, looking into offering a translation support for a condom, research and the list view web part now supports a tool bar, there is someone, it's a background noise, so remember to mute yourself, guys all right, thanks Patek, so the toolbar. So you recall that if you put a classic web policy, it still lists reports on a page.

A

You can configure it to not show a tool, but that option now is available for a modern, listen library report and we enable now that to take over the setting. If it's present.

A

We're still working on the patient, summation, UI version 1, so that will have some more tenant level switches to control, behavior pages living in full support, better item level, copying and multilingual squawk, the four areas that we plan to introduce v1 and then actually also this week we released the modernizations again as version 2.4.

A

This scanner is, you know, 30 to 40% faster, even more, depending on scenario, just by optimizing, the amount of calls going back to sharepoint, so it's just used, fiddler and kind of really checked every operation. Each call being made is needed, can be kind of rude to call cetera, so that gives it a nice performance improvement. Also, packaging is kind of cleaning out single eggsy. So did the additional web part mapping file? That was there as now as an embedded resource and some some minor ux improvements.

A

Alright ii think that covers the default weekly updates. But now, let's go to our weekly a warrior horses story: if it's, the warhorse is Chris I'm, not sure what you plan to show but think actually.

B

Chris is having a bit of an.

C

Issue with the horses one of them has gotten loose so he's trying to catch it. If we could skip him and go to somebody else on the demo, Paulo is ready to go or velan. um You can come back to Chris closer.

A

To the end, when Chris caught this is again, we can get back to you guys, Belen yep, take it away. You can take over the screen and.

C

Just try to share the.

A

Vellum will show you how to set up multiple alignments, so if I should live ups.

C

Right see, you see my screen just let me know when you sit.

A

And not yet I'm still sharing. Okay. Now it's I lost my sharing, so it's loading at my site, I've got Rama said yep same here. Hold it.

A

Felon you're still a mute, so maybe if you enter it.

C

Sorry guys I just did my first light, I'm good! Sorry about that. Can you hear me now? Can you hear me.

D

Yes, we can. Yes, we do. Yes, we do.

C

Great great, so let's continue there, you go so the presentation is about how to set up multiple environments within your DevOps pipeline in an in an automated fashion here. So my name is willing. Your gif and I'm a SharePoint developer for a very long time and I did a demo back in December on basics, how we could link github with Azure pipelines, and this will be just a follow up.

C

So if you want you to see the basics, you can go on that URL and then just watch your previous video, because I was keep few things that I did there, but basically, today, we'll be talking about different environments. So it's a nice to have at least two environments.

C

You have your life site where you have all the coolest business features there and the users are using them, but, on the other hand, you're building a new features, a half-baked code in you might need a separate environment or a separate trip, one site where you want to host that. So you don't break the life environment for today's demo, I'll be just I'll, just go with just a development, environment and production, environment and I'll.

C

Show you how you can automate that pipeline and for the developer environment, who abusing a communication side with site collection, app catalog. So we can deploy our SharePoint framework solution there and once we are happy with the code, so that will be deployed in an automated way. But once we are happy with our code in again in an automated way, we will move it here into the tenant, app catalog that will serve the life or the production and environment.

C

Of course that will require approval, because we need something: someone like a release manager to prove the trigger and say that's good to go so because I don't have enough time. I'll go just try to the demo. So here we have a production environment, and this is my production side. It is pulling information from the global tenant aapke block and, as you can see, it's named production and its greenish, so we can make a difference between the developer and the production.

C

On the other hand, I have a production, I have a development environment here or a developer environment or whatever you call it, and it has that blue look, so we can make the difference.

C

But basically this is my SharePoint framework solution, and this is my work part and it's a version 13 so at the end, ideally will increase the version to 14 in both environments, but I'll have to go to Asia DevOps here, so my source code is in github again and github is linked with Asia DevOps and I already have my built set up here. That means that come on work, fresh.

C

Ok, we good so our build here is already pre setup and I show that on the previous demo. So if you're interested in creating your own build yeah as I've said you, you have to watch your other previous demo here now we will be creating just a release pipeline. So what the build we will do.

C

It will build bundle and package our solution and it will make it available on Asia DevOps after every new piece of code after we commit a new piece of code in our source controls that will basically build the package and make it available here. But that's not enough, because the package available here means nothing. You have to move it to our developer environment and our production environment. After so we have to configure those release pipelines here. So what I would you eat out?

C

Sages, a new pipeline and I'll say an empty job, and this is stage 1. So my stage, 1 will be my death environment here and, as you can see, I have a stage 1 here and I have another box here, and that is my where, where basically, where my artifact is where my sharepoint package is and after selected, but because it is here in asia DevOps- and I know that I can simply find it and point to the folder where that actually is so.

C

This is my phone and then once we have a artifact, we can move that artifact through the stages and create an automated way to move it all the way to my development site, but before that I'll click on that icon and I'll just enable continuous deployment. So that means that whenever I commit a new piece of code into my master branch of the source control, it will trigger the build first and once the package is it's available in asia. Devops the sharepoint package share from framework package.

C

Then it will automatically move to the dev environment, which is using site collection of catalog. So here, on the other hand, after configure it up, so you can see one job and zero tasks and if you go here, you will see a built agent or a release agent. Basically, this is our release vm and we have to set up a few more steps to to make it so it can deploy our package to the site.

C

So first thing I have to do this after install node, note GS, why not years because I'll be using the office three to five CLI and because it's an odious application, I need, are installed in my machine. The second thing to do is to install my just just execute a bash command and within that bash command I will reuse a basket that I've created in my source, control and I'll show you that script, but like that script is available within my artifacts here.

C

So just select it and now go and just quickly demo discrete for you. So this is how the script looks is in my source control. So that's my SharePoint framework solution. I have a DevOps folder than a release folder and have a bunch of scripts that will help me release my weapon and on top here we have four parameters that will set up within your DevOps, and then we install the CLI, we output the version. Then we login with using credentials and then we say SPO.

C

This is a command that will try to find a package in Asia DevOps and it will try to deploy it to an app catalog and, of course we have to specify the scope. So these are dynamic variables here. After that package is uploaded in the app catalog we will have to execute SPO up deploy and this will deploy it and it will make it available, like the new changes, will immediately pop up and be available on the site, so that webparts will change with that's the flag here skip feature.

C

Deployment means that it will keep the feature XML and we don't have to do additional, install or anything, so it will immediately deploy it and make it available. The web part will immediately will be available with all the new changes we do here. On the on the other side, we have a PowerShell analog, so I know this demos I will try to keep CLI version, PowerShell version, so you get the idea. What is about in PowerShell but in PowerShell is almost the same.

C

You have some parameters here and then you try to log into the site catalog and wait with some credentials and the command to add. The app is at pimpy up again where your solution is in nature, DevOps, scope and publish so publish will pretty much do that. C'mon here is doing for the CLI, but for our demo, I'll be using the CLI, because it's a little bit easy to install, as you can see here, I'm missing a piece of of a script where you have to make the PowerShell module available for your release.

C

Agent and I haven't done that here, but that step is okay here, so we can install the skill I easily in run it so I'll be using the CLI here. So there you go.

C

It's that's my badge clip here, but basket takes four arguments so after specify those four arguments here- and they will look like that and as you can see that weird syntax here, that means that I'll pull them from somewhere and we have a section here on top of the called variables and if I set up a variable called site there, it will know using that syntax. It will know to pull it from there.

C

So I'll just put all my details here. So this is the first parameter side. There's a second parameter, my email, so I can authenticate this array.

C

There is a third parameter, which is a password and I'll, keep it private filled encrypted.

C

The last one was school: it's called a site collection, white site collection because we are still trying to deploy to our deaf environment, so I'll, save and I will show you that that URL points to site collection, app, catalog within my Deaf environment and I, have to specify that scope. So this yell I know us to deployed there.

C

Now we've done with our deaf a stage here, but now, once we are happy with our deaf and all the features are working for our solution, then we can move it to production for that I'll, just clone that one and I'll create another stage and I'll call it production.

C

And here we will have pretty much the same setup. It's the only difference here is I have to specify different parameters here because we'll be the point to the tenant up catalog. So for me to change that, I'll go to the variables and, as you can see here, we have a scope, so I can easily say that will work under my depth whenever I'm releasing to death and I can have the same variables here and but with just different values and I needs.

C

Oh and that's called tenant, and this will work for the prod stage, where I'm deploying to prod think we should be good, and these are shared, so I'll be using them for both I'll just save, and the last piece that I should do here is to change like there is a setting here. That's called pre deployment approval, so I'll try to enable that, because you don't want a half-baked culture, an unapproved code to go to your production environment, and here I will be the approver. So nothing goes in without my approval.

C

This in case, you need a release, manager, someone or product owner someone to approve that before that girl's life. So with that I think we're ready to test our environment and our immediately go and change something in my code so because it will take some time to so. I'll change the version from 13 to 14 and we'll see that change in the title of my web part and how committed save get.

C

Changed to the 14 I'll push that to my source control and that should trigger the build. Hopefully, let's see so everything saved. There is my build we're still waiting. Hopefully that should start soon. Okay,.

C

Just that so it says, push to master, so we are waiting a sure DevOps to start my build.

C

Version 15.

C

Nothing happens. That's interesting.

C

Supposed to fire a new-build here: oh there, you go so version, 15 succeeded version 14 for some reason couldn't but I I don't have enough time to troubleshoot. So we're good to go with that one. So we'll update our web prior to version 15 and our ability is running and let's see what is happening. Hopefully the whole build will will succeed and we might have to wait a little bit here to install all the packages. But then it will build the SharePoint framework solution and it will make it available in Asia DevOps.

C

After the build is done, it will run the release and because we enabled the automated deployment a year, the continuous deployment it will try to move it immediately to our dev environment. That means that when I refresh my blue web part here, it should change to version 15 and my green web part should remain on version 13, because that's being deployed only to my development environment, let's see how these ghosts, so the bill might take a while, and while this is running, I'll show you a few more steps like the different organizations, have different requirements.

C

So here in between, you might have QA environment stage, environment, UAT, environment, whatever environment, and you can configure all these step by step here. You can run things in parallel as well, so you can say a new stage and create a new stage running in parallel here, which is also handy in case.

C

You want to deploy your sharepoint for a Marc solution from one stage here for one stream, and you want to do something with they can't code in Asia in another stream, so loads of options for you to play with here, I'm just showing the basic scenario. So you can get the idea how you can easily configure those two. Now, let's see what happens with the built, I still running almost there package solution, and in a few seconds we will be just there to have a look at our release and how these will be triggered.

C

I was just refresh. Hopefully that should start soon.

C

Can he still running uh already done so the delete should be two-year by now, and here, if I refresh now, I should say that the release is here and it says in the queue and production is not deployed. We can click in on that URL or here and give it a little bit more details of what's going on. So, as you can see it's already running, so it found unavailable machine.

C

You have nice graphics here to show you that something is happening for four of six, but you also have a log here, so we can go here and see what is happening, but basically we're waiting to install no GS and then run our buy scripts, and if I've done everything correctly on the variables part that should just deploy the package to my dev environment.

C

Okay, almost there, so here we go so that means that the package is already on the dev site, but to save some time, I will trigger the same thing here and I'll show you the result. After, as you can see, I have an unapproved button here. So someone has to approve that before it moves to the production, environment, I'll, just click the approve button and let it run, and while it is running our move back to my site, to show you that the version here actually changed to 15.

C

So that's my developer environment and that should remain the same because we are waiting, we're waiting on approval, we're waiting for a code and developer broke the code or a missing horse is not here or whatever, and right after everything is fixed. We will move here, but because I approve that it should be already there. So five six, almost there.

C

Good but now I'll just refresh and still running, seven of sanim, okay, that should be okay. So if I refresh now, we should see the new version deploy to production as well. There we go. So that's with me, maybe next time we'll talk about different configurations for the different environments, because this is also something that is a must-have use, so you usually have different variables that you have to call depending on on your different environments. But that's with me thanks thanks.

A

Filler, this is a very useful solution and does apply to it most of us in the Colfer. So thanks for sharing it Chris are the voices back on track or should powder go first now.

B

In the port, alright.

A

You can take over the screen now all.

B

Right share my screen here: I'm, a known you guys see it.

B

Back on track, jokes, getting out of hand, let's get crazy, alright see what we got here. It's.

A

Loading all right, I can see all.

B

Right so contrary to the published agenda, I will not be discussing alternating rows. You know check out the sample. It is available, there's a blog post on it, but there is an issue this morning. That's preventing that from working, so good news, we've got something else for you. Alright, let's take a look at it. I, don't suspect you know by the way, I'm Chris Kent. That's me, that's my picture, there's some Twitter tweets and all that stuff. Alright, let's take a look at what we're talking about today.

B

So I want to talk about column, formatting design mode. We talked a lot about JSON and all the fantastic and cool stuff you can do with that. But right now there is some nice little wizards that are directly in the UI. You guys haven't seen these. These are a great place to start they're also very place to learn, what's being done behind the scenes and you can customize from there. So you get these kind of options for date/time columns, choice, columns and yes/no columns, including the calculated versions.

B

So if you've set your calculated columns to be the type of day time orbit, muling yes/no, these will show up as well and work for you. So what happens is when you choose these you'd use that format column. Take a look at that you hit this edit template button and when you click that they all pretty much work the same way. You can pick one of these pre-selected classes here for colors. You can apply those based on certain values and there's some cool options there and the nice thing is because of the opacity.

B

That's a part of these. They work very well in the dark theme. I'll see them to do any kind of adjustments there they're just gonna work. They are not tied to your theme colors, however, so if you want time to get theme, colors, that's a whole different discussion. We talked about here and at any time you can switch it back to JSON, including all the changes you made in the wizard, so here's the predefined class that we've had for quite a while, if you guys have seen these so we all the severity classes.

B

It's really just set a background. Color I've got the data bars it's a nice little line at the top, and that is theme specific and you guess these other ones here and as always, I highly recommend using the UI fabric, color and typography classes to match the theme.

B

So again, if you're wanting to use some of these, you can use these to kind of set up so a design mode, and then you can swap out those plots or some of these theme classes, which we'll take a look at and last thing to note, really helpful naming conventions behind the scenes is all of these colors are actually classes themselves, so they have really catchy names like SP, CSS background color, neutral background 50, so everyone's gonna remember that right and you'll notice that the blue background does not follow the same naming convention.

B

So extra awesome. There but anytime you guys, can use these. So let's take a look at what that looks like okay. Here we go back over now, I can't see Tam's there we go okay, so we're here on our warrior horses sight all right. We want to just do some quick customizations to our new assets, transcripts five so come over here we can do things on the dates, so we say the recorded date. If we come here to format this column, you know we don't get that same box. We get on the others.

B

We can always get to about it in advanced mode and we can paste our jason here. We could take from any of those samples over here, but instead I'm going to go back to design mode, so all I do is I hit edit template and notice. I immediately get these fancy colors behind the scenes right and they're all based off of today, which once a product. So that's the ad now magic string behind the scenes. All right, I could choose to change that. You know certain colors. It's it's pretty easy to customize all this, however.

B

I need to all right. I can take a look here. I can also switch this so instead of today, I could put a specific date all right. So if I want to say which one tomorrow right, we can do that and I can switch all these around. So there's some real power to this and at anytime I could say Advanced Mode all right and you can see, what's been generated for us. So it's basically a giant switch statement, but it's using the old abstract syntax tree. So I've got the operator and the operands right.

B

You may not have known that you could use the colon instead of the question mark they're both equivalent, but you come down here. You can start to see where they're, using these classes like right here, SP CSS background, color, neutral background, 30, again very classy, but if I wanted to switch that out right, so I wanted to go to SP field severity desk, severe I was a warning that sounds right. It's pretty bad! It's not right! So we'll just go warning.

B

Yeah there we go so the idea here is, you know, could easily swap it out to those colors if I won't want it right. If I want to come in here, instead I wanted to say Ms eg, color, red dark. We do that as well, and you see we can start using with steam classes all right if I didn't want to use red, dark, I could certainly say theme primary and they get my nice, beautiful brown and so on.

B

Alright, so you can begin to use these things for all that you can switch back to design mode. It's going to warn me that lose all that who did I go back in there now. So that's for date times alright moving come over here. We also the exact same thing for boolean's right. Let's hear that come over to compromise was the acid compromise. We can format this column.

B

You can see it's the exact same kind of thing, a few less options in terms of you know we could choose here, but I can use the nest, know all that and then I can also do the exact same thing for choices. So if I've got my status over here, so just format this column, you notice, it gives me all different shades of blue Thanks.

B

Alright, but again, I can come in here and I could switch those out as well. Now. One thing to note: it's good to apply on that will keep one is that that will not work for your multi choice, columns right, so it'll act like it's going to see for mathis column. You come in here. You notice none of these work unless they were single select.

B

Now, if you'll go back to our demo from two weeks ago that recording there we showed you how to deal with multi select choice columns, so you don't have to be a little more advanced, but the design notes not gonna work, all right, yeah, good, I'm, glad someone remembered it. That's good! Someone paid attention, it's very exciting and the other thing to note is again: we've got this date. This is a calculated data Stu days later, so it's just a calculation, but you could do the exact same thing so does not matter.

B

This is a calculated value for a long time. Calculated values have not been supported, but they listed is not supported. Still. However, there are a couple of minor limitations, but for the most part you can reference all calculated columns. You can apply formats to all calculated columns and even the out-of-the-box Wizards apply the calculated columns, so that actually opens up a lot of possibilities to do some of those advanced formulas.

B

You may not have been able to do before in fact that we just have a sample added yesterday from April that uses a calculated column specifically to submit a like date text to get an exact format. She wanted so check that out. That's our birthday format. That was just added all right. That's all I got for today, and hopefully I want to come back next time. We'll have maybe some alternating rows to show you. Okay, thanks all.

A

Right: cool cool Chris, another episode in the warrior, hasta saga, so looking forward to the next one. Actually, so, with that, let's move to Paulo for our last demo electron are you.

D

Ready, yes, yes, I'm, ready, Thank, You, Bert I will take over the presentation. So let me share my screen and please let me know when you see it so sharing.

D

Like I cannot share, let me try again.

D

D

Let me know when you see it, please.

A

D

Drops you know the Skype for business window. Of course role play. Yes, yes, okay, cool! So let's talk a little bit about how to create a little Jes app which can access a sharepoint online. First of all, let me set a little bit the context. So when we talk about electrons yes, what do we mean? What is electrons? Yes? Well, electrons, yes, is an open source library developed by github. So actually now we can say developed by Microsoft the site not, and it's built on top of chromium and OJ.

D

Yes, and you can use it to create HTML and JavaScript based applications which can be executed on desktop platforms like Mac, OS, Windows and Linux. So it is really powerful and useful whenever you need to create a cross-platform desktop solutions and whenever you want to reuse your knowledge as long as you know how to create HTML and JavaScript application. Moreover, it's pretty easy to use electrons, yes to release applications that can be easily deployed on the target environment of the end users as well as easily updated.

D

Whenever you have an updated version of your desktop that you want to really serve from a tool chain perspective, developing electrons, yes, applications can be done. It is just one set options, but can be done using Visual Studio code and typescript language, as well as using a reactor or angular, or the framework of your choice.

D

Personally, being an SP FX developer, a sharp informal developer I like to use typescript and react with images to decoder, to build electron, jes solutions, and maybe you're wondering if there are any real applications built with editor on GS and well. The answer is pretty easy. There are about a little bit more than 600 applications built with electron nowadays and in the list of those applications we can, which can find visuals to do code just to make an example or Microsoft teams detects the path of micro teams, as well as the as Lakha desktop client.

D

So there are plenty of real business applications built using electron and that's why personally I'm using and I started using electron for such kind of applications for my customers, however, being the fact that I am can SharePoint guy, usually when I develop solutions, I need to consume to use content which is stored in SharePoint, most likely SharePoint Online, as the repository for my data and having the capability to create a desktop solution which can be multiplied from cross-platform and can easily consume data in SharePoint, Online I think it's a very good opportunity and it's a real challenge for building a real business level solutions.

D

Moreover, as I said, if you are a SharePoint frame or developer and most likely, you are because you are a thing, this Cola as a sharepoint frame or developer, you will be able to reuse most of the knowledge that you have and that you put in place when you create your own thermal solution. Also, when you create electron genius solutions.

D

However, if you want to consume sharepoint online as usual, and luckily we have to face some security and authorization and authentication challenges, because in order to access the condiment, we have in SharePoint Online. Of course we need to authenticate and to have proper authorization in order to get the content out from SharePoint.

D

We most likely. We all know that under the cover of office 25, we have issue Active Directory is your Active Directory support, open authorizations, 2.0 and the way to go to have access to a secure access to SharePoint Online through an electron application is to leverage the open authorization protocol offered by your Active Directory.

D

So now, I will show you a solution which is a real solution which we developed for one of our customers, and that's why I will start from the customer requirement. The customer wanted and want to have a solution which is a kind of an application launcher, a desktop application, launcher cross-platform, of course, and they want to use this application to start all of the tools all of the apps that they use on their next environment.

D

But they want to have a unique repository for the whole list of apps that they want to launch through the app launcher. They wanna have authorization based on their Active Directory and on their agent directory this customer as a Federation in place.

D

So they have an interactive actory on pram and they are federated with the azure ad and they wanted to use exactly the same user account and the single sign-on experience provided by the federation, while accessing the app lounge are still having authorization filters, so that every single user will be able to see just and only the applications that is allowed to launch and to see in the app launcher and, moreover, or last but not least, the customer also said that from a requirements perspective, they wanted to have a nice modern UI for their app launcher and not something really old-school with the classic windows form UI.

D

Or something like that. So the proposed solution that we created and that I will show you in a matter of few second from now, is a solution that stores the pub lounge items in a SharePoint Online list, so that by using a collection of items in a list, we can use the SharePoint authorization rules and the access control lists of SharePoint to filter items based on the currently connected user.

D

Moreover, using SharePoint, Online and agility, we can make it possible for the end users to have a smooth experience, because they will leverage the single sign-on that they have through a TFS and through the Federation that they have in place. Moreover, we decided to use electron Jes, of course, and we are using electrons yes, because through electron we have a cross-platform support and we decided to use react to build a UI component that we use to render the app launcher and again.

D

Last but not least, we are using the open authorization, 2.0 endpoints of a directory to to create the authorization and authentication flow within the electrons AS application. So let's say now that you have the context and actually I, don't know how many of you already know and use the electron Jes most likely you know, but not necessarily you use it.

D

That's why I decide it with a small context before moving to the demo, but now I will move to the demo environment and I will show you the solution in practice, as well as some code excerpts of these solutions. Just for the sake of completeness, this is the URL for electron genius project.

D

If you wanna dig into it- and this is the SharePoint Online side, the customer is based in Italy as like as I am so sorry for the UI in Italian language, but most likely you can, you can get what is the meaning of all the items you see, and here we have a list of items that we wanna launch using the app launcher. We have a title. We have a description, an icon and stuff.

D

So on the other side, we have a Visual Studio code project for our electrons, a yes solution. Let me first of all start the producer that you will be able to see the UI of the application first and then the code undercover. So let me start it and, as you can see, I have design in UI I'm, not a user with a federated account because I'm outside of their domain, so I have to do an explicit authentication, but still I can authenticate using Azure Active Directory I will use my credentials in the customer tenant.

D

They have a DFS, as you can see so. I have to provide my credentials to their a DFS authentication from 10 and I have to wait for the true factor, authentication code which hopefully will come in a matter of few seconds. Ok got it so for 2, 4, 6, 4 2 again. Luckily it is a one-time password.

D

So now I mean I will not save my user access token, because I want to use different credentials needed and, as you can see, this application now provide with a UI which can which you can like or not it's up to you. But it's not the real topic of this demo.

D

Here we can see a bunch of groups of icons actually, in my account, I have all of them, but a real user will just see a small amount of icons and they can start the application by clicking on them and launching the apps that are running under the cover of every single icon that we have in the app launcher. But I don't really care about the application by itself and I want to move to this source code.

D

Just for the sake of completeness here we have the developer toolbar, because I am in the developer context, and you can see you can appreciate the fact that, under the cover, there is their LH tml application, which is running inside the chrome Yuma platform in the elect from GES solution. So let me close this application, and this is the source code of the electrons.

D

Yes up well, I will not dig into all of the details of the electron genius up, because this is not a demo about how to build an electron, a solution from scratch, but just for the sake of clarity. I have an index.html page, which I load in a JavaScript file, and this index.html page is made up of the HTML code, which will render the UI that we just saw, and there is a diva which I will use to replace it with a custom, react component which I have in this app dot.

D

Tsx file and this custom react component, as you can see as like, as you are used to doing when you develop sharpen framer solutions, for example, as its own properties, its own state and all the other stuff that has a real component.

D

You maybe are used to sing and I render the component inside the div element that I have in the HTML that we just saw. Moreover, in this we have component when the component got mounted, I simply make a request using the inter process- communication of electrons, yes to make an interactive actor in log.

D

In this ad logging request, them will go to a inter process main event handler called a login as like, as the one we were using in the react component, and here we simply use the implicit flow of open authorization inside this application to make the out indication flow in the application. So we use no gimmicks online.com. We use the open authorization and point we can connect to the authorized in point.

D

We provide a bunch of settings for the application, including the client ID, including the resource that we want to access which is SharePoint Online, and you can clearly see it in the settings of the application in the collection of resources. We have the micrograph, as well as the sharepoint online resource that we want to consume. Once we have the URL for an implicit flow request, we simply create a browser window within the context of electron.

D

We render that window on the screen and we waited for the window to get a redirect to redirect URL that we provided during the authentication flow and once we have done that, we can get back from the query string of the response.

D

The access token that we can use to connect to SharePoint Online and in fact, we store the access token in a global variable that we have so that later on, we can say: okay still using the inter process, communication, call the SPO refresh data action and again we have another event on this side which will be fired and we will make an HTTP request for the URL of SharePoint Online for the rest of the eyes of SharePoint Online.

D

To get the specific list that we have in target and the items in that list and as we are used to doing whenever you use the SVT I of SharePoint Online. We make a get request for the items. We provide the authorization header of type Bearer with the access token, and we accept the edges response so that we will get back the collection of items to render using an access.

D

Token, which will include the context of the currently connected user, and so the response will be filtered based on the currently connected user, and we can just return the collection of items which will be rendered in the react component in the UI of the application. In order to be able to do that, of course, we had to register the application in the direct directory and in fact we have that Lounger application registered in the ad tenant of our customer and in a manifest file of this ad application.

D

We enable the implicit flow, as you can see here, off, to allow implicit flow equal true as well as, of course, in order to be able to access sharepoint online in the required permissions. We had to declare that we want it to access, at least in read-only mode, the content of the site collections with a delegated permission request. So pretty straightforward. You create an electron genius application. You leverage at the low level, I would say the both implicit implicit flow as well as the rest.

D

Api is of SharePoint Online, providing the access token, and that's it you can interact. You can communicate with sharepoint online from a desktop application built with electron Jia's, and that's it on my side as well. So we have a few minute three four minutes for Q&A if needed. Thanks.

A

Paulo, so looking at the shadow in the poll, there's one question from Russell and it's asking like when you saw the screen with all the tiles vacant launch applications. The applications that you launched are they're all web applications or can the tool also launch application, which is locally a solo machine.

D

Can be application which are Rockley learning on the machine, because actually you can do that when you run the desktop application and we have an IPC function that we use to do that. So, for example, you can launch another desktop app running on the machine. Yeah.

A

Yeah, pretty cool service kind of a connection to the actual host running the generic collection. It.

D

If you think about that, when you are in Visual Studio code or when you are in themes or in slack, you can do the same so yeah.

A

Looking at your questions.

A

This is run on iOS discussion.

D

Linux and Windows.

D

The IPC main class comes from electrons. Yes, so if you dig into the documentation of electrons, yes, you will find that IPC main is provided through the out-of-the-box infrastructure. The inter process communication is provided by the out-of-the-box infrastructure of electron genius.

A

There's a question: is there a link for the for the sample? Probably not because this is cement so precisely.

D

Precisely hi addy the customer allowed me to to show the sample.

D

Of course they cannot share the source code of this sample, I'm thinking about building something like that, maybe something easier than that just for the sake of sharing a simple solution, but not not very soon, I think, and unfortunately this is a project that we built for a real customer. So we can't share it. Sorry.

A

But that makes sense, I think there is enough resources around electron and there's also love documentation, run totals and to get the ship online using Azure ad and having a simple sample without pin the future.

D

My personal next step on this topic will be to being able to use the MP Jes rather than a low-level rest request. So I plan to work on it in the upcoming month, but still yet.

A

D

A

Right, I'm gonna, meanwhile share the screen again yep, so we can do the closing slides if my sharing will work because I feel like boxes in Skype now so there's typically not a good sign but and let's see.

A

A

D

Here so me not still loading my screen, nice, that's.

A

Not soon, let me try once more.

A

Loading loading loading, loading.

A

All right seems to work, I, think I, hope anyone see the screen yeah got it good, it's good. So we are are at our well at this time for Q&A still not that as much as we maybe might have hope to, but.

A

So, thanks for being in a call, where is my slides, so next call will be on March 7th. The next ship went development special interest group been in two weeks so, but next week there's ready. The ship went framework expressions this group next week, Thursday, so all welcome over there as well at the Confessor will be you're always done and to wrap up learn for you is share.

A

That's what we need to do thanks. Everyone have a nice day.