Microsoft 365 Community Development, 27 Dec 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: General SharePoint Dev Special Interest Group (SIG) - December 27th 2018

Description

Recording of the SIG from December 27th. Latest SharePoint Development news from engineering.

Demo - Chris Kent (DMI) - Column and view formatting tips and tricks

Demo - Velin Georgiev (Pramerica) – Setting up Azure DevOps Pipelines for SharePoint Framework solutions

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

So welcome everybody. This is the channel on SharePoint development, special interest group bi-weekly sync- and this is the December 27th of 2018. So we are four days away from New Year, which is mind. Blowing time flies when you're having fun today is 27th of December. This is actually my birthday, so where else would I actually be than presenting this within this community called well.

A

I was working today anyway, so why not actually take responsibility of the call as well and rather than dividing that for somebody else as expected, we have much less people attending then typically, which is completely understandable. Hopefully, people are if, if people are not working, they're prioritizing time with their family and and other more important things, because it is a holiday season in maturity of well in certain areas of the world. Let's put it this way anyway. So let's actually get started on the on the discussion. So quickly recap what this is all about.

A

If your first time arriving here, most likely, are there any first-timers in the call? Just out of curiosity? Are there anybody who are first-time joining on the community call just out of curiosity is.

B

There always this.

A

I knew that so the special interest group call for general deaf in PMP is basically meeting bi-weekly, and this is all about what is not everything else, my SharePoint day, which is not a part SharePoint framework, so basically concentration on entering solutions, provisioning site, provisioning, automation, API is flows, DevOps power, apps and all of that stuff. So all of the non client sites stuff so to say now we do have a separate special interest group call for SharePoint framework, where we then concentrate bi-weekly on SharePoint framework, specific topics and JavaScript development.

A

So, depending again on your interests, you can choose to join both of them or you can choose to join one of them or then you can joined on the monthly community call to say a monthly summary. What has happened with inertia upon development now?

A

The key point here is to go to have a kind of an update on on the choice you have on development topics. I will always we will always go through if there's any updates on the roadmap or any announcements from a SharePoint engineering side and then we'll always at least one or two demos scheduled and then hopefully Q&A in the end.

A

Now, let's actually get on going quickly on the opportunities of joining on the unpaid on the community, you can always volunteer for doing a live solution, a demo on the solution or a technical pattern, and within this call basically have it show something which might be useful for the people in a community, because we learn by seeing and and actually having a discussion on those patterns. So today we have two demos, two demos coming up, one from Chris Kent and one from a billing.

A

Your gift after that so Chris will first start around ListView, formatting samples and and tips, and then billing will talk about DevOps within the context of SharePoint framework. After that, the second option for participating always is contribute on github, so being active on. The kids have contribute on an existing samples or new samples and then provide feedback. So using SPF ducks issue list as an example for giving us feedback if something is not working, you're highly disappointed on Microsoft, please tell us why?

A

Why disappointed and how we can help you so we're able to fix those things and that's a really really important thing: don't be disappointed or Microsoft without us, knowing why you're disappointed of Microsoft. So that is absolutely the right thing to do like already kind of a set. If you have few slides on the general announcements kind of a recap, a few slides which are always repeating, and then, if you update on the on the roadmap as well, so I did a small adjustments on the Rotom slide, and then we have two demos.

A

So Chris Kent is gonna talk about list, formatting tips and tricks. I do not know what is today's tips and trick?

A

Hopefully, Chris has something prepared and I I know he is having something prepared and then, after that, filing is going to talk about setting up an usher, DevOps pipelines for sharepoint frame for acceleration so kind of a how to do that and how to make sure that the sharepoint framework solution is automatically deployed to the office 365 tenant for people to start testing, unless I'm completely mistaken, on what willing is actually going to show I think that should be pretty accurate and that is kind of a SharePoint framework topic.

A

But on the other hand, these people, who typically are responsible of DevOps, are not those people who actually write the client-side web parts or SharePoint framework solutions. So it's a slightly different perspective on the SharePoint framework. Now, let's actually get moving on the on the slide. So a few typical, slides and I do apologize that we always keep on having these science in here. But if there's a reason for it, because we always want to make sure that people find what's relevant for them.

A

So the documentation and guidance, a game SSP dev Doc's- and this is the one isolated consolidated, isolated, consolidated platform for everything related on SharePoint development, MSDN redirections should be already in place and I was testing them earlier today. So if you're looking into, for example, client-side API documentation or server-side API documentation, all of those are redirecting already to the docs that myself to come so MSDN is gonna, be shut down, and that's quite a shocking and news.

A

So nobody would have thought that in ten years ago or five years ago, but that's realities of life, that the MSDN isn't really flexible enough platform. So we need to shut it down for so that we move to use the dock stuff. Most of the compact form where people can contribute- and that's a really big thing now already in December, we can actually the pump on the views is related on the MSDN shutdown. So we're already at 1.4 million views earlier today, based on the latest statistics. So quite a nice nice numbers most likely.

A

That view count, however, is dependent on the fact that we might created something on the rest of my stuff comment. There was an automatic view, counts based on the automatic checks, but we'll get it aligned on the following months. The second thing, which is a really important thing to remember and we'll keep on repeating this time of the time of the time. If you have an issue related on anything on SharePoint dev, please go to a kms enlist and reported issue.

A

We are working on an updated process again on this one, so making sure that your you will see when your item is being processed and how is it being processed and it's being tracked properly now we're still seeing some people reporting issues on the Yammer or Microsoft TechNet tech communities and all of that and sure you can have a discussion ratio in Yammer or in Microsoft Tech community, but please always open up the issue in the SPF Docs issue list so that it falls on the official supportability pipeline for SharePoint development.

A

So if you're, seeing anything strange within the SharePoint 2019 dev platform web hooks are something restraints or something else or something which doesn't seem right. Please open the issue and then let's have a discussion somewhere else, because when you open the issue, then it falls on the on the automatic process which we have behind of this SP. Their dogs issue list where our engineers will actually get the messages and it's getting triage automatically now related on the key top issues and related on key table.

A

We're looking into doing some changes and structural changes in a kit. So if we talked about this one few times in a community call just a reminder on this one, but we're looking into actually moving all of the community sample repositories obey from the shipment organization to BMP organization, and so this is github that comes last B&B. It is controlled by the same people so to be a core team, so there is SharePoint engineering is present and plus our MVPs, but we're looking into making sure that.

A

Well, there's a lot of community samples which are slightly older and not all of them are quite up to date, and some of them might have actually some issues and we want to make a kind of a distinction between community samples and officially used reference solutions which Microsoft will currently that they will work on every single version and that's this change is related on the transition. So, as an example is the dev Doc's with ports and SB dibbed sorry SPF affects with parts and SB diff effects, extensions will be moved over to BMP.

A

Repository will be moved over and few other open source initiatives will be moved over to the PNP organization. So mainly we you can think that SP, dev Docs will remain in the in the SharePoint organization and few other repositories, and this like said this is really to kind of a distinct.

A

What is the work related on the open source and community, and what is the work officially support at 100% current date by Microsoft, so the there's a distinction what's coming from where because clearly, this has been some confusing around this one, even though we're trying to be super clear on the messaging, but this will then help on the future on making sure on what's where and how does it actually work?

A

Technically, if you have cloned any of the existing repository, so like SP, dev, FX webparts repository, it will work, your clone will work without any impact on it. When the move will happen, because github is a smart enough to do a redirection automatically.

A

Now, when will this happen, if we will start gradually moving repositories over starting most likely next week, because this week is a super short week well to be fair next week is super short well slightly longer than this week, but in a short week as well, but we start moving repositories over and making sure that everything is working properly. Like I said it doesn't expect our existing clones. But it's this.

A

The main intention of this one is to clarify: what's where and what's being supported and well, what's, what's being provided by Microsoft, what's being provided by the community, so making a clear distinction on that one. Hopefully, that makes sense from a messaging perspective as well, and somebody please tell me yes well on the underlying window, know at the the podcast will be automatically merge in the new location. That is true. So, if you have anything pending, anything moved over, everything will work without any impact or impact at all, so it will be completely seamless transition.

A

Technically, we've done this once already when we, when we move the SharePoint relevant, share points repositories on the office staff to the sharepoint organization, and now we keep on moving them to the BMP organization. You know, except it's just to clarify, what's wearing and how things are moving cool. Let's move on on things! So just a reminder, shipment starting at 1.4, is out so this one's also updated to 1.7 version relatively recently.

A

So, if you're, looking into having a intern solution, which is showing how to do multiple site collection, provisioning, tenant templates, provisioning, cool-lookin of modern sites, have a look on SharePoint starter kit, we will keep on evolving this in the future as well. Right now, it is in the worship, one framework, 1.7 level and it's already using the BMP tenant templates. So basically it's provisioning site, designs and site structure sites, scripts and all of the talent level solutions using two BMP powershell.

A

It isn't fully open source available for you for download or you can install that to your tenant or a dev talent and then have a ready to use a nice modern portal for your consumption, good kind of a quick update on the SharePoint developer roadmap. So we talked about this one already last week in the community call as well, so the shipment framework 1.8. It's the next kind of a big release for SharePoint dev, really the core platform level and release, and this is a plan to get released on the first quarter of 2019 I.

A

Don't want to give you an exact date. What is what we're currently planning? Because, then, you might actually what, if we delay- and you have something to walk down that date and then we delay for few weeks, but my end of the first quarter, 2019 is relatively safe to say, and this one will have a general availability of Microsoft themes: development with SharePoint framework, general availability of single part at pages, GA for isolated web parts and then also GA for provider, hosted solution in SharePoint. So basically a kms teams applications hosted in SharePoint.

A

It will also have some authentication improvements right now we have challenges related on a dulces with rich and mobile clients. So if you're using, for example, the SharePoint mobile client, it has some challenges related on craft access and graph API approvals and all of those are planned to get fixed in the 1.7 and then we're looking into updating in the typescript version to a new version. Whatever is the right, suitable version at the time?

A

Well, we need to lock down the versions relatively fast, because the first quarter is in a few months, so closing in a few months, so relatively fast, when it's locked down these things. Other topics bubbling under a store, an upper apps or story for SharePoint framework still under development well, under planning right now we're getting pretty close on locking down the plan on that one with the scoot.

A

So that means that you could actually provide SharePoint framework solutions, true SharePoint and store, or first using the map source, SharePoint framework library, packet, support, third-party and then looking into having office. Client add-ins built using SharePoint framework at some point. All of that aside under development. The final thing updated thing here which I added here is that updated wrist season and server-side API documentation process is under development right now and do the transition from the MST and the docs don't make certain.

A

We can actually start looking into getting community contributions on top of the existing API documentation, and this is something what we will have a meeting with the docs people early January. So we can hopefully figure out the right process so that they're able to auto-generate some of this stuff and then community can still contribute for the samples in the official documentation, which would be the optimal situation more details on that. One later cute 15 minutes not too bad, because the next item on the agenda is Chris Kent, calling from the future right. Okay,.

C

C

Right now, damn and yeah don't forget it.

A

Got to Matt Damon reference: there we go, sir.

A

You've got it yep, we got it, take it away.

C

Okay, there's a blog I'm officer, Velma, new VP and member. The core team very exciting I have several those formatting tips all rolled up together today as a special late Christmas present or a birthday present, professor. That sounds great sure. Whatever its present sound.

A

Good all right, let's take a look.

C

So what if I got this birthday list here all right? We see that my birthday was yesterday and I had a Hello, Kitty themed party, because I actually share a birthday with my daughter, very exciting. We got Vestas birthday right. That's today, he's working anyway and then Stephan Barratt doesn't have a birthday because he's actually immortal all right. But what, if I, wanted to change this app I wanted to apply some themes to this right to make it look a little better?

C

So that's what we're gonna talk about today, we're gonna talk about how to do some cool stuff with this using some exciting theme, colors right. So if I want to match those theme, colors and I can always come in here and I can format this view all right and I come over here and I've got something all right, so I'm gonna grab I'm gonna do a it's called a view format all right, so I'm gonna apply that to the view itself right so I apply. My schema here and I'm gonna.

C

Add an additional row class right. It's pretty simple here. If I want to apply one here, I could say MS bgcolor, and this is where I got to pick a color. So if we take a look over here on this UI fabric, color site, that's how you build these things. So you're gonna put font, color or BG color border color, then, whatever the color name, you want alright. Where do you get those common names? That's what's down here.

C

So these are all the theme colors and then you'll notice, neutral, colors, here back that out, neutrophils are actually technically theme. Colors as well, which is a little weird. Black and white, are actually theme colors and will adjust based on your theme so down here, though, our more fixed colors. So you can see these actually have a hex code for those colors found there.

A

So we're gonna take a look.

C

At all these and how you can apply all these fantastic things, to make sure that your formats always match your theme and always look good and that's everything else, so we're gonna grab that EMS BG color aren't ready to say this BG color theme primary right, close that, let's add our clothes quickly, maybe that Wow right you'll notice. The first thing is that that's something that games on readable all right, so we can add an MS that font color white preview. That looks a lot better.

C

We save that I'm gonna take a look now if we go and change the look on the site, all right so very pick. One of the dark ones is what I mean by that you'll notice. Now the Texas! Technically it's black! Now, even though we said white right, that's why those neutrals are actually theme based, and that is super ugly, so I'm going to cancel that all right. We can go a little further than that right.

C

So if you come on the entry format that current view all right- and maybe we want to do something where we had a hover style right. So now we got another actually into space for an additional class right, so BG, color team's primary darker sounds good. Let me say hover, so we only want to apply that on a hover so preview that Oh theme not primary theme darker. So the darker and preview that maybe well you get the idea it would work.

C

Oh look at this gonna do MS BG color got it alright preview that there we go so you can see. Now we get some nice stuff going here and, as you start to do this as you go, you can make some really nice-looking things that change styles as you go through it now, if you want to do start start to do things, we're starting conditional right. So if I wanted to say they only mark the ones where there is no birthday applied right.

C

So that's where I can start to add some nice format, so I say it equals. If now I'm gonna say if I want to check that that birthday right is empty or I'm, gonna say string, I'm gonna reference that birthday column birthday, alright equals equals empty string. These are the single quotes inside there then I want you to apply these styles now, because I'm now building these I need to actually wrap those and single puts themselves. Otherwise don't apply anything right.

C

So now, if we say you preview that lets that was signed birthday, construing I did not put the in princey there. We go all right so now, only Stefan Bowers is highlighted right with those kind of things. So you think a little crazy with this, you can get all sorts of cool stuff going. So that's the first one all right. So that's your first tip I'm doing styles here. We're gonna see that a little more elaborate in a way that makes a little more sense.

C

So if we come over here, what if I've got something where now I've got a list here? It's fruit, I've got apples and oranges. These are actually technically content touch with an apple content, type of an orange content type now I want to apply formatting based on that content. All right, so I can do something very similar right here. So I come in here, I'm going to format the current view. All right, I'm gonna grab. Let's grab that schema. Let's paste that over here so got my schema.

C

I'm gonna say, add additional row class, all right so very similar here, but it's dead this time, I'm going to do something based on the content, types and I'm going to say when a reference to content, which is a little strange I want to talk about some of the quirks with this.

C

So if I say, define content type, you'll notice that this is not a part of the view, so things like ie content, type content type ID are available, regardless of of what your view fields are, which is unusual most of the time in view formatting or column format into reference another column. It needs to be a part of the specific view you're on alright.

A

C

Say of content type, this is just the internal name equals Apple all right. Let's do MS BD color red dark, that's a beautiful color right! Otherwise, since it's orange is the opposite when it's a MS, BG color when I say orange, lighter now keep in mind these are case sensitive.

C

Let's do that and then because I'm I also want to do that same thing, where I want that text to look correct, I'm gonna do string concatenation right here in this form on the formulas, I'm gonna, say, plus the space ms font color white, alright close that guy squiggly, let's preview that and we didn't do it. So that's when we just cut and paste the one I already did hey it works magic all right, so we see here so yeah sometimes can your? Can you do else right?

C

So the first part, so the if you've seen these parentheses here. So this is the condition right. If this is true, do the first item here right so the first time here that you put a comma, this is the else right. So if you wanted to do an if-else, all you would do. Is nest another? If statement right here, I've got my else right, so you can have infant number of nested. If statements here, I, don't recommend you go infinite, but you can certainly go several levels deep.

C

That's exactly how you would create a switch statement right. So if you wanted to switch based off of a status column- and you wanted apply it like- maybe four different styles based on that it would just nest those if statements right there in the else parameter got it very exciting. So that's beautiful we've got you know. Our content type is now determining the color we apply. If we wanted to do something, maybe a little more elaborate, that's where we've got a nice sample for you.

C

So if we come over here to our sample repo, that's the SharePoint! Currently it's an SP dead list, formatting right, so we'll paste that link for you. Alright, in the chat there, you go all right now. If you take a look here, we've got a view sample called content type format which will illustrate some of these things. Real quick before I do switch back over here and show you a couple do's and don'ts.

C

So when you reference a content, type and list formatting, you can always reference the content, type ID or you can reference the content type. So the content type ID is going to be a good there's, no squigglies or anything it's just the number with the hyphens it's always available, regardless of what you do. But it is the list, content type ID. So it's not your site. Content type ID with generally you're, not going to care that much.

C

But it's a bit of a pain and if you ever trying to apply this format to any other list right, even we've got that same content type on your site, collection, it's not going to to work and have to change that ID. So that's like it's a thumbs down, do not recommend so the content types just the internal names is the text and it's almost always, if available. So there's a weird little bug right now that when you add content type to your view, if you do that, it will not apply correctly so Content ID.

C

No longer becomes available for you as a reference, so that's a weird quirk, the only one that really works that way right now, but just keep in mind, don't add it to your view. If you're gonna apply it format anyway, there's really very little reason to add that few of you, because you can reference that value regardless, just to show you what I mean on that. If we take a look, so I've got this one here. If I go to simple rows, failure, alright, you can see where I've got the constant type.

C

Here you can see it's not detecting anything. It's just doing that elf condition right and if I go to show/hide columns, all right I take that out fouled in there we go so that's just kind of a weird quirk. Just don't add it. If you don't want to use it got it all right. So now, let's take a look at something: that's a little more elaborate. So if you're coming here to this content, type format, I'm just gonna come in here and I'm gonna grab this thing the whole thing I don't have to download anything.

C

I just go to our repo I'm, just gonna select the whole things right, clear, gonna copy that then they both go over here and we're gonna see a couple. Things switch back to simple rows, all right. Let's format that current view, I'm gonna paste that thing in here boom preview that nice, beautiful, so we're gonna, show you a couple of different things inside this format. They're worth taking a look at the first one is how we're referencing these images. Alright. So how are these images giving reference? So you can certainly upload these.

C

These images are just in the document, library and a folder called fruit. All right, so I've got fruit here and there they all are, and so we're referencing them. If you take a look at the sample itself, I'll see the image Freyr. Alright, so we're just building it shared documents, fruit and we're putting in the type so we're checking the content type and we're then we're depending on with that which call we want to pull that value from right.

C

There's a little convoluted, but the main thing I want to point you to is this: this is a relative link, so there's some disadvantages and advantages to doing this. One advantage is then I can move this around from site to site if I'm relatively certain, where I'm, showing this format and it's not a problem- I, don't have to put in the full URL to the site, otherwise right I've got to put in my tenant I can pull that full URL right because I've got the sites.

C

I can't just put a slash, so the format then very specific to a site so by putting the dot dot, slash, dot, dot, slash right, I'm, doing a relative reference to those images, so that could be really nice when I want to apply this to multiple sites or I want to move this thing around we'll take a look at in a minute. But again, if you're doing things, we're gonna put it on pages and those pages are nest up in folders, then that's going to be causing a problem.

C

If you use this within the webparts, so just something to keep in mind it's one of your options to get away from that hard coding of your full on site URL got it all right, whew. So now the other thing I wanted to draw your attention to right. So if you'll notice here we've got these things they're in different sizes and as I resize this window or I, let's go, you can see when I format the view right things shift around. They move around. We've got a couple of things like that.

C

So there's another really great one where you can see: there's some nice tile format and the sample reflow. You take a look at that, but how is that accomplished? So that's accomplished yeah! That's right here, I'll put stuff in our main element, so we've got a row formatter and our main element type we've got this style and all we're doing. Is this float:left now there's a couple caveats with that. The nice thing is: it makes these things completely dependent if you're going to do that highly recommend. You hide the column.

C

Header hide the selection, because those get extra confusing when you're doing that one caveat as we're finding that there is currently a bug with the paging. So if you've got a large amount of items in your list or your view, don't do the float:left, because there's some issues there or trying to retrieve that kind of infinite scroll and that paging I expect that to be resolved. But for now just be aware of that. One use the float:left, but it's a really powerful way to create a really dynamic, visualization right.

C

It doesn't look at all like I'll standard list view right. So now, let's move on to the next little tip here. So the next tip is that you guys may or may not be aware the column, format and view formatting is fully supported by P and P, or will provisioning so you're able to take these things.

C

So, if you're doing the kind of stuff what we talked about here, where you're putting the relative links right, you're, not using the content type ID, which that list content type, you can grab this whole thing alright and you can move from site to site. So generally, if you're moving a format you can just come in here, you can select all and you can copy that you can paste with other sites.

C

But what happens when you got back if such as you know, specific video, you want to apply, we've got a list with specific columns or in this case, content types and site columns and all that together well perfectly the kind of solution eyes. This whole thing is PNP remote, provisioning. All right. We can see that here so I come over here, I'm going to create a new site. Alright and uh put the communication site sure create a fruit site, see if I have a fruit site already I.

C

Don't all right, perfect sort of finish that and apply that so I've gone ahead and I've extracted a template right. We're not gonna go into details of that. We've gone over that a number of times and I have a link for you. If you want to research, some of that, but it's really just a simple PowerShell command. You're gonna, pull that out so I'm gonna do them a current one and then all I've done is I've gone in that edited slightly.

C

So you can actually see this in the repo for that sample got this fruit template XML file. So this is just a remote provisioning here or you can see our exciting site columns coming over here. Alright, our content types are coming and they're. Our list instance we'll give those content types. I did I did two minor things to this right. Well, I've made it where it's gonna, remove the default item, content type, that's a simple manual edit! You can see here, though this is where our custom formatter, for the view is actually being applied.

C

So the whole view format is right here, right in mine, pretty easy to do, and then the other thing here is I added this files here, which is just going to make sure that our images get added right. So it's just copy one directory to another, all right, so it's copying the local directory. It.

A

By the way, always looks so beautiful when I mix and matching XML and chasten, but.

C

Yeah right yeah these at least this one. It doesn't look so bad. Sometimes you see some of those site designs, some other stuff. That gets a little crazy. Nice thing, though, is like I, didn't write this right. This was generated for me by the their own provisioning. The engine all I did was run. A commander said, get PNP. What is a provisioning template? That's all I ran saved at the XML file. I came in I added this little thing down here. This is normally not necessary, but I had those images.

C

So generally you don't even need to manually edit these things. It's all magic as far as we're all concerned right. Okay, so now I've got my fruit sight or I. Don't have anything on it. It's very sad, very sad, empty sight, I'll break them down here. Alright, so I'm in here so fruit, I'm gonna connect is the online.

C

Reply for me to be provisioning template to give it the path which of this case.

C

So I'm gonna run that guy and all this is doing is doing a differential against the site versus what I've got in my in my template there. My ipv4 is my template and it's applying my content types. It's one of my site columns to find the list. It's adding those content, types to that list instance, and it's applying that view format and it's uploading, those individual image files which you see right now.

C

So it's putting all of that and because I use those relative image, links right and I use the console type internal name ignore that error. That's because I haven't updated. My provisioning template. Alright, my PAP proud shell, alright. So if I come back, though, to the site, alright, so now I've got my fruit side. I'm just refresh here. I should have a fruit list there. It is alright and I, don't have anything in it. But if I had you know a couple of new apple, delicious Wow, we might save that you see now.

C

I have a format, so I'll apply to my brand-new site, so you could easily wrap some of this stuff up, throw it in, alongside with some of your site, designs or site scripts and create a really powerful way to take your formats and make them a little more generic that apply with the themes and apply with those colors that we apply to all across everything. Okay, so that's several tips all in one and here's your resources on that.

C

So, if you want to find out more about those styles, the specific way you had to format those class names, you're going to go to the UI fabric site and you're gonna go to the colors, there's also several things where you can do with fonts.

C

So if you want to take a look at the fonts, you want apply different font weights or font styles or some pre pre-configured pieces. There want to check out our samples there's a ton of samples. A lot of them are using these specific theme classes. Let students see examples of that. You're also going to see this content type format. Again, it's not a very pretty format, but the whole idea is just to see how you're applying those content types.

C

One caveat to note: there is: there's not you know a branching where I say hey. If it's this content type apply this format or if it's, this constant type apply this format you're going to be checking if it's this content type for each individual attribute. So take a look at that. It's just a different way to think about it. But it's one.

C

That's it's helpful to take a look at and really kind of familiarize yourself with that, but you can do a lot of really cool things to get some really dynamic views when you're mixing in those content types and then, if you're interested in what we just showed at the end there it's a little more advanced the PHP provisioning check that out, there's a ton of stuff with that and here's a blog post. That kind of goes over the details of using theme, colors and the UI fabric styles within your list, formatting.

C

Alright, any questions I'll be here in the chat, but that's the main thing I got here. All right, cool.

A

Whoo Oh sometimes Chris. There was a one question from Kieran. Before we move on to the villain, which was around. Can we do date, calculation on column, formatting so could I do something like today, plus five days and then cover up absolutely.

C

So we have a format. That'll do that for you. So we've got a few of.

A

Those I just to stow the presentation.

C

The list formatting repo we've got a couple of those there's one. That's a date conditional format. That's checking against that app now, so there's a magic string called app now that is the current date and time. So it's a little weird when you take a look at some of that in terms of midnight right. So if you're not doing it, your your date is actually the the date at midnight, so 0 0, but you can easily convert that.

C

So what you do to do, that is when you convert that you're going to use this number function. If you want to add to the date, use number put your date inside that function and that's going to give you the millisecond since or something 1970 and then you're just gonna add those days times 24 times, 60 minutes you know times 60 seconds times a thousand and again we have examples of that. But you can totally do cake date, calculation, so you can display different dates or you can use that to calculate hey.

C

Am I, within a 5 day range of a specific date, all that kind of stuff so and if you've got more specific questions about that, I can point you to the exact samples of that. If you just reach out to me on Twitter or wherever else, okay.

A

And it's just a final note on document before we get well in the next presentation, so so : formatting and a view format thing they they're super malleable are super. Let's say flexible, there's two. Let's say how would I put it? There's kind of a two considerations which people should be aware of. One is if you're planning to execute any code in a JavaScript code that is not possible, because that would be a security truth and that would basically enable script injection within a site.

A

So you can only use supported, functions and behaviors, which the column, formatting and beautiful thing is supporting and the second thing what I wanted to? What was the second thing, the the is, the one that if you are provisioning these things from a centrally by a administrator. You need to remember that the end user, as long as the end user has a management permissions on all this. They can go and remove that.

A

So if you want to have a full 100% ownership on making sure that nobody can't actually modify the experience, then you would have to use SharePoint framework because then basically, there's no way for getting rid of the or changing the the rendering format it did. It make sense Chris.

A

Can you translate that in English, please from Finglas to English right so.

C

It's extremely valuable, extremely powerful right. There aren't really, and you need to do full on solutions. I've shown you a way to do some remote provisioning to kind of bundle things up, it's really powerful, but you only need design a little permission. So if you've got something come from an admin level where you're like this column should always display this dominating user shouldn't have the option to change that. That's where you're going to use a field customizer with SharePoint framework or if you need to do something a little more elaborate javascript.

C

You know we're really anything that you for money doesn't do. You can do a lot with it, but there are definite limitations. That's when the field, customizers really gonna, be helpful for you. Yeah thank.

A

You cool I think it's time for willing to let willing go so willing. We can see your screen Dan, so everyone, your Chris and willing just take it away. Yep.

B

So hello guys, my name is winger yeah if an amateur porn developer for a long time. If you see her, if you, if you hear a big round Louisa's, these are my kids singing happy birthday. Vesa downstairs, so don't freak out now today we're going to talk about automated pipelines, so the demo that I will try to show is building from scratch.

B

Roger is trying to take control I'll just reject again, so what we will do is we have a SharePoint framework solution and our source code is in a github repository and we'll link that github repository with Asia pipelines, and then we will bumble and package the solution here in an automated way.

B

Once you submit a new piece of code into your repository and then once we've built the new packages, we will use a simple scripting using the PMP office, 365 CLI, to to deploy it up to our tenant to deploy the changes we've made on on the solution here.

B

So I already have my tenant prepared, and this is the tenant app catalog and my package is already been deployed there and the web part within that package is already being installed on a site within that tenant and it shows version 20 at the end version 12 at the end, we'll have version 13 here. Hopefully if we can set up everything within the time frames. So let's assume that I just manually published up version here and now I want you to create an automated pipeline that everything is fully automated end-to-end.

B

So I don't have to manually, drag and drop here again. So here is my github repository and I had to upload my solution there to save some time and it's called type 1 and it has nothing to do with Azure pipelines. It's not automated. It's just a bunch of code in a github repository and we'll start from here. So the first thing to do is to install the a jar pipelines here and I'll go to the marketplace to show you where that's that's located.

B

So if you go to the marketplace and if you go to deployment apps you'll find your pipelines there. So you can click that one and you can simply install it. So if you haven't done that before you get an install button here, but because I've already installed the freakier, our I already have different buttons here, but it's the free tier and it's good enough for all your experiments. So you can experiment right after demo.

B

What I would do is I will configure that to work with my repository, so I'll go here and I'll say you configure, and you have some details here, but at the bottom you can say: ok configure a sharp eye lines with all my repositories or just select some of the repositories here and that's my preference here so I just add my new repository there.

B

So that repository is not part of the list here and you can see all my previous tests but I'll just select that one on it there once I, save that it will try to redirect me to the Asia DevOps and with Asia DevOps. You need account, so you have to create account with Asia DevOps. You have to login with that account. Then you go through a wizard nice wizard that will link a get up with Asia DevOps.

B

So you have to select my organization here, and this is the correct one and I'll create a new project there and I'll call it pipe one. Exactly as my reports, a repo is in github, then I'll be navigated to a narrow window where, as you can see, it's more like a wizard experience here, you're clicking and you're navigating and that thing will open Asia DevOps with my new project so now I'm in Asia DevOps- and this is my new project here and I'll- have to select my github repo, and this is the correct one.

B

Then, if you try to go not now, we already linked get up here and if you try to go into my github repo and identify what piece of code I have there and if you try to recommend me a configuration, as you can see, it's smart enough and figured out that this. This is an OG S or it has something to do with no GS and I can use it or I can select from a different templates here, even here. So for me, no GS is good enough.

B

I'll just pick it up and then it will generate a MOV file. So the yamen file is my build. So we'll have two pipelines. First pipeline will build our package, our SB pkg package, and the second pipeline will release that package to the tenant. So what I'm doing at the moment is I'm using that EMM file to create my first pipeline, which will be the build pipeline and, as you can see, there is a like a llamo and there is a mark up here and we can easily recognize the trigger master.

B

That means that whenever I push a new code to the master branch, it will trigger that build and if you try to create a new build for me, then the pool is what type of virtual machine I'll be using to build the package, and this will be able to in my case, but you can use Mac or Windows here, but I'll stick to the defaults here that are recommended by them and then the next one will be once we get the virtual machine to do the compute for us it will install node GS, so that was told no G is 8 and after that it will run a script that will say.

B

Npm, install NPM install is nice for us, but we don't need npm build because the sharepoint farm work is using gulp. So after that, an extra an extra step here and I have to say there is another script that I don't need the build here. Instead, I can say test because I have unit tests and the just testing framework will run the unit tests and if they fail, they'll fell the build, so I can replace it with tests here. But after that, I have to do.

B

Go clean, go bumble, ship and go package solution ship, so this will create the SB pkg file there. So that's my next step, but I'm not done yet. I have to do two extra steps to complete the whole flow here. So after do another its task here and- and this is all documented within the document- so you can go on that you're out there and you can see how to build those steps here and the markup and what that is means.

B

But basically the the last step for me is like this: a virtual machine, so virtual machine. There was peanut butter machine for me. They'll build the package, but that package is on the virtual machine and once the build is done, the virtual machine will be closed or deleted or whatever and my package will be gone, so there should be a way for me to store it in a jar devups- and this is the last step here. What I'm saying is I'm saying get it from the virtual machine and store it in a jar.

B

Devops so will be stored that will be stored in a folder called SPF. It's SP, pkg and I can just store it here and use it with my release pipeline or whatever I want to release out of that build. But I need another extra step here and now I'll just paste it here and I'll have another artifact out of that. So this will be my package here, and this will be my release scripts, so basically, I'll create two folders stored in Asia DevOps one will hold the HP pkg and another will hold the release.

B

Script and I'll show you the relay script in a moment, but this is basically a bash file that will connect to the tenant whenever I start building the release pipeline and it will grab the package from Azure DevOps and it will upload it to the tenant. But I'll put it for now here, and this is my build and as you you can see, these are all the steps and I was just safe and run okay, so that will try to that.

B

Will save the Yama file directly in the source control so that can be used everywhere. It immediately goes back to github, saves the ammo file and it starts the process.

B

So it will try to find the available unavailable ubuntu agent and if you are trying to run all these tests, that I used so from the ammo file, so it's initializing the job and then, if you're, trying to install no GS here and then, if you try to do npm, install and that might take a while- and while this is running I'll just show you the deployment script here.

B

So, as you can see the source code, if I refresh you see a llamo file here- and this is exactly what we've built previously, there is the llamo file. Now I have an extra piece of script, which is a bash script and it's using the CL ID. We will run when we have the build and when we have all the artifacts built- and this is how it looks but I'll use that script in a moment.

B

It's just for you, while we're waiting, npm install its it accepts two parameters here then, once we get those two three parameters, it will try to install the office 365 CLI. It will output the version. Then it will try to connect to my tenant using the credentials. Then it will try to add the package to the tenant catalog to the ten top code block. Then it will try to deploy it with a skid feature deployment. That means that the new package will be available for all the sites within the tenant.

B

It's a very simple script and we'll use it when we built the release pipeline. So, let's see what is happening here, it's almost done with NPM install. Then it will try to run the tests because I have tests within my SPF X solution and it runs just any cure. Try to spin up it will try to run just after this is done and if you try to execute the tests, so the execution will start here and it's always good to have any tests.

B

When you have an automated pipeline, because in a case of test failure, you can just fail the build and ask whoever is responsible to fix the solution. So the MPM is stolen. Test is done, and that was very quick, but I can show you that all the test shoots are run here and I had 20 tests and they all passed just for her information and then built and package is done and then it's creating the artifacts.

B

So after is now with the artifacts will get a nice blue button here that says the artifacts are ready, and these are basically two folders with files. The first one is the script that I'll be using in the release. Pipelines and second one is the package itself, so they're saved in Asia or DevOps and now use them in the next step. So this is the build pipeline. It's done and it was successful.

B

Now we have to create a release pipeline that will actually deploy the the package that that's been built, so I'll add a new pipeline here then, unfortunately, we still don't have that yamo experience for release pipelines, but I hope that that soon will be there, so I'll say empty job and I would say that's my dev environment here.

B

So this is the place where you select. Your artifacts and I know that my artifacts are stored in Asia devolves, so I'll just try to find those artifacts here. As you can say, you can pick up artifacts from different providers here, even from Jenkins, but mine are stored here and they're stored in pipe one and then that's important. That's alias that you set up and because my PMP office, T special I scrape uses that alias I'll just replace it there.

B

But this is your alias is basically the folder where your package is okay and then once we have the artifacts here, we can click on that button and enable continuous deployment. That means that, with every build it will deploy to our deaf tenant. If we have a deaf tenant or different vironment I have to do another additional thing after enabled up here as well.

B

So once those two are enabled when every new build is done, it will automatically deploy the package, so no user intervention.

B

What we have to do a little bit more here, so I've clicked two tasks here and have to set up how exactly that will be deployed, so I'll be using a bunch of machines again because I'm using the CLI and I can use whatever I want here, but then I'll add one extra step, so it will find a be a release agent for me, which is a Bunter, and it has to install node again because the CLI is using node, so I'll install in over here and another extra step is after node is installed, we'll run a bash script and the bash script is part of our artifacts that we've just built so I can click on that thing here and I can find my artifacts.

B

So, as you can see, the package is here the script that I'm going to execute is here so just select the scrip here then that screep requires three parameters, so I have to setup the three parameters there and the way to do that is you pass arguments here and those will be taken from that. You can hire code and here, but obviously I cannot hardcore password here. So you have a place where you store variables and I'll. Take them from there and I'll create those three variables there to see just how it works.

B

So I'll create the first variable that is side and I'll paste. My site there, not a variable called email.

B

My mother create a third available that is a password and I'll make it a password field. So you don't see my pass.

B

And we should be good enough to run that thing, so I'll save it, and then we have our pipeline ready. Now the only thing is to just test it. So I'll have to just make a change in my code and what I would do is I'll just change the title here from 12 to 30 and I'll, say git commit and title changed.

B

Then I have to pull from the repository because he Asia they votes modified. My repositories, I, have to say git pull three Bay's. That should be good and then I have to push it to the repository. So once I push it that will go to the master branch, that's saved that will go to the master branch and I'll show you. What is the experience here like I have three commits here and the third commit is in progress. As you can see, the previous build was a success.

B

Now I have another build that it's running and if you click on that dot here you can get more details so or you can go here and it still stays in progress, but you can go directly in Asia pipeline. So I can open that and I will be navigated to Asia pipelines here, and you can see my build running at the moment again. Npm install all these steps will be repeated again and you can see in if I click on my builds, you see that that's my second build because I did it change.

B

My first bill was ok, so that indicates that it's still running after this is done. It will trigger the release pipeline and will see a list of over release pipeline. While this is running, I will show you something else so on the release.

B

It's very quickly already that release and I'll show you that you can have your deaf environment here, but you can clone that one and you can create a QA environment, for example, and for your QA environment is good to have a QA approver, so it doesn't immediately go there, but instead you can see pre deployment approval and you can assign a QA leader, someone to pull the coding QA when the QA sir ready to accept that code. Something else is you can Cologne again and you can have a deaf environment, a production environment.

B

Sorry, it's all the same thing with the production environment. You can set it up, for example, that could be a release, manager, approver or something. So it's not automated there. It will be only automated when it goes from built to death and your different will be always up to date, but then you have approvers here and here and that works very good and let's see what's happening with the build it's still running. Okay, I have two more minutes. Hopefully we will be able to see the change we.

A

Can go slightly longer than that safe needed. So if somebody needs to talk, they can say the the recording afterwards, but I.

B

A

Say this in practice absolutely.

B

Good, what's happening, hi still running okay, almost there I'll make it I'm pretty sure. So here here is my copy look and I deployed an hour ago. After all, these pipelines, automated pipelines that will refresh and my web part, will hopefully refreshed version 13. If I change that we have changed that so, let's see how it goes and.

A

While that's doing that, so let me also clarify the fact that, since we are talking about SharePoint framework web parts and that SharePoint framework web part is even though it wouldn't be using to turn on scope deployment. Whenever you have the new SP PK chief while deployed the tab catalog, it will be automatically after updated. So you don't have to go to the site level and upgrade the web part, because the instance is always coming from the app catalog site collection, and that is a big difference, obviously with SharePoint add-ins vs SharePoint framework.

A

But it gives you the centralized control on what are you actually running.

A

B

The Deaf a release is running, so the build is done and the dev release is running and it says in progress so we'll just check the dev and we won't check the rest, but, as you can see it spin up Ubuntu agent release agent, it installed node. Now it's running the bash script and everything seems pretty good. So far, so at the end that will connect, it will add the the new package there and it's done so.

B

Everything seems good here and if I go to my tenant and if I refresh here you'll see that the time here should be different, it should be a few seconds ago. Let's see there, you go and also the web part on the side. That's been installed, she changed version 13 there you go so 20 minutes automated pipeline and everything seems to be working. Just fine I did integration with github, but you can use Azure DevOps alone, where your git repo is in Asia DevOps. If you will a few more things to notice.

B

This is not a very absolute best practice. For me. It was just to set it up in 20 minutes and show you how it works and we can talk in a separate session. What is the best practice and what is quality gates and what is a pre-flight builds and things like that. So this is not the true best practice, but, as you can see, you can set up something out. I made it in 20 minutes, which is which is great, and it's for free. You can.

B

You can start experimenting even now, I think that's it VESA.

A

There we go. Thank you. Thank you very extremely valuable, and it really shows the simplicity of the whole thing. It's actually surprisingly simplistic. Now it's just sort of couriers had a few questions. What people might be thinking we'll coast a few minutes long and why you see a lie? Why not PowerShell, and do you know that performance impact on using Windows images there?

A

How did you whether to come up with a Ubuntu and CLI your search? Why is that yeah.

B

So valdek face that there is a performance gain when you is Mac I assume when you use Windows, it might be a little bit faster than if you're, using a standard, vs 2017 agent, because they're very like there. There is a lot of going on in a vs 2017 agent, you have Windows, you have Visual Studio msbuild and all these things might like using a simple linux image. My my improve your timing slide yeah.

B

My idea was my idea was to show that if you're using the CLI to you can use everything you can use containers, you can use Ubuntu. You can use whatever you decide. So that was the aim here and it's very easy to use the CLI too, because for me is a get as a good user I'm used to that syntax, I'm used to having get in the command line and the CLI to in the command line.

B

At the same time, it's almost the same syntax and it's easier for me to execute commands like that, because I don't have to open PowerShell for example. So it's my choice basically advantage over partial I. Don't I don't think it's more like choice to your choice, yeah.

A

Yeah matter of a preference so to say, but yeah, that's that's good input for the discussion just to clarify that as well, so you can absolutely build similar kind of things using PowerShell, if that is the preference, but I think that was relatively simple and and well, and we will definitely take you on the further discussion on the best practices and all of that stuff. As part of this call, because I think that's super valuable as well, because you as a team lead or in your company you're, doing this on a day to day basis.

A

So it's a it's a super valuable input for the others to learn as well. Yes, dear, we are now three minutes over the hour. We do apologize once again we're running out of the Q&A time, but we've been having a good, clean, airy discussion in the ion window on the future as well. If you're joining on this call feel free to ask any questions on the item window. It was good to see again that the discussion in the in in the chat was super active.

A

Now we're looking into just a reminder we're looking into moving into the Mike's of teams. At some point it, the transition will be completely seamless for you, except when you click the link on the meeting. It will redirect you to the Microsoft team's UIs and most likely it will ask you to download something if you haven't actually install much of teams, but we will do that when we're 100% sure that it's working properly without any issues.

A

There has been some challenges related on that and that's the reason why we're still using Skype for business and in general, the next SharePoint dev special interest group meeting, is in January 10th and that's when we talk about again, the provisioning entrant scenarios released called a list and column formatting Chris. Well again, just a few tips and tricks in that one and then a few other demos. If you're looking into, are interested on SharePoint framework and excuse me and JavaScript client-side development.

A

The next special interest recall on that one is 3rd of January so a week from now on, Thursday, but that's it for this one and thank you for joining. Thank you Chris and thank you availing for your super valuable input and we will close and our dog on the background is clearly indicating that I need to go and check it out, what's happening on the on the living room. Thank you. Everybody.

A

Thank you and we'll be absolutely in touch bye-bye.