The Power Users introduction to jQuery

This session will teach you the basics of using CSR, JavaScript, JSLink, and jQuery concepts.
Okay, we get it. You’re not a developer, but there so many cool things you can do with jQuery and JavaScript in SharePoint!
Maybe you found that script on that blog that you copy and pasted and just can’t get to work. It looks so easy though.
Why should developers have all the fun?

In this session, learn how you, a Power User can take advantage of some of the awesomeness that is client side scripting in SharePoint. You’ll learn:
– How to use some plug and play scripts on the internet to create tabbed web parts, customize SharePoint forms and more
– Do’s and don’ts that will help you figure out why that script isn’t working on your site

MSDN reference: https://msdn.microsoft.com/en-us/libr…

[00:00:01] Hello everyone and welcome. I’m Laura Rogers and this is SharePoint Power Hour. This is a weekly show we do every Wednesday at 11:00 central SharePoint Power Hour is for SharePoint 2013, SharePoint Online with Office 365, SharePoint 2016. Lot of different topics that we cover. Usually the gist is that this is going to be for more power users and business users and not necessarily a lot of programming or hardcore technical things that we do. So today our topic is going to be this concept of client side rendering and jQuery with Mark Rackley is here. He’s going to be our presenter so he’s that we go way back. We’ve known each other like seven years or something like that and we’re both Microsoft MVPs. And so you see I think you and I are the only ones in the chat. I don’t know if any anybody else is going to be joining today but a little tidbit. Do you remember Steven and Ryan that were on my team when we worked at Rackspace. Well they actually work for Mark now they joined his company so hoping to get them in here too. But I’ll go ahead and switch over to you and let you introduce yourself and go ahead with our topic. And oh and everybody we’re in the Slack channel so I put a link to in the description for the YouTube video to request to join it. If you’re not in it yet and if you’ve already been invited to this channel it’s either you miss or not slacked that comment. IW Minter is my own point training company. [1:33.0]

[00:01:35] So over to you Mark All right. Can you hear me OK. [5.0]

[00:01:42] All. So yeah. Thanks for allowing me to come on the show. We reached out briefly about doing something with clients advertising and JS link. And I said well why don’t we put all spin on this. Why don’t we do something a new session I’m creating That’s called a power users intro to jQuery which it’s along the same concepts of quiet said rendering where as when you use JS link you’re changing the way the web part is rendered. What we’ll be doing today is kind of going through the same process a set of rendering a web part differently we’re going to render the page differently. We doing things to the entire page in this session this is like I said it’s a brand new session so it might suck. You know but hey we’ll give it a shot. But it’s meant to kind of give those power users some basic concepts and some basic understanding of how these scripts work so that they can use them and maybe debug some of their problems because the thing is that users are are finding scripts from my blog and from other places on the web in the near 3M and into their sites without really understanding what they’re doing. And by doing that they’re not taking into account that if they fell for scripts on the page that they may be conflicting with each other and they may cause other issues you can’t just do that you have to have some sort of understanding of what’s going on there. So that’s kind of our I wanted to go with this. [1:21.3]

[00:03:04] So I guess we’ll go to my slides I’ll kind of go into the session and do some talking I am trying to keep an eye on the slide general here in case people have questions if I’m missing a question that’s important. [9.6]

[00:03:14] Laura you can now right now if a great call Let me share my screen let me know if you don’t see it for some reason or if it’s just not showing very well. [11.4]

[00:03:25] I do live in Arkansas so you know you’re not there. [5.3]

[00:03:31] We got internet and you know what. Sometimes they forget to feed the hamsters and the little wheels don’t run as much. So it’s just you know we don’t work too well sometimes. So anyway here we go. Yes. Too much rain. [11.9]

[00:03:43] And I think the my two favourite things right. [3.6]

[00:03:49] All right. [0.3]

[00:03:50] So let’s get this OK. [10.3]

[00:04:00] And it’s showing on the other monitor. Man it’s just never going smoothly is it. [4.7]

[00:04:05] You are right what are you guys since I see this like that part. You know it’s the actual presentation of you know so let’s. [34.8]

[00:04:42] Can either force PowerPoint to go to that screen or you can just share the other screen. [5.2]

[00:04:48] You know I’m a developer. We don’t know how to do things like that. Yeah let me just force the screen was so much I had the slide show time. [11.3]

[00:04:59] Thank you. [12.8]

[00:05:14] Usually you can pick your monitor right there maybe it’s because you’re already in. [3.0]

[00:05:18] You know what I did. I have no idea what I did but we’ll go with that. So yeah a little about me before we get started. I worked for a company in Cincinnati Ohio called peer group. [9.7]

[00:05:29] And as Laura said we actually hired both Ryan and Steven who used to work for Laura and they’re awesome We’re really really happy that they came on board. I’ve been in development now for over 20 years. I’ve been using SharePoint since 2007 no more since I think 2008 maybe 2009. I organised an event in Branson Missouri culture when I lose a and I blog write and speak and I like bacon. So feel free to follow me on Twitter at Irakli. My blog is SharePoint he’ll come and there’s just other information about me so kind of what we’re into. [33.7]

[00:06:03] We kind of kind of give you a intro before about where we’re going to talk about. We’re gonna talk about how you should do some of these things and best practices and we’ll go through some demos to hopefully be more interesting for you guys. So what are you doing is again enhancing the pages in SharePoint using Javascript and J.A.G. and we’re going to do this by just adding a script to a document library or on a web page on a page that points to that script. This is really cool because you can do so much with just a little effort into things like dashboards custom forum animations and overall just make your SharePoint sites a lot more usable and visually appealing so they don’t look like SharePoint. The reason I like this approach is because SharePoint get you most of the way there. It can do 85 percent of what you need. A lot of applications to do it’s got it takes 30 days storage takes care of your security authentication. It’s got a built in workflows. It’s got built in forums and stuff it does so much for you. The problem is it doesn’t always lay things out in a way that makes sense as an application that doesn’t tie everything together very well. But using things like J.A.G. and Javascript you can start to tie all these pieces together to make it a more seamless application and makes things more visually appealing easier to use if you know what you’re doing it’s pretty simple to do so. [1:17.2]

[00:07:20] And also with a with a push to the cloud it’s the stuff it’s just getting more and more important because it’s it’s you know you’re not deploying code to the server you’re not deploying anything. And it works in the cloud, and with the new SharePoint framework coming out it’s going to take the same principles and just put it in a more managed context to make it even easier for developers to maintain the sort of functionality. So there’s a lot going on there. So you as a power user what you’re going to be doing is you’re going to be uploading files or a file to a document library somewhere you want to make sure that your users have read access to this document library and then you’re going to create the page in SharePoint you’re going to drop a web part on that page and then it’s going to point to that script we upload it and that’s all there is to it. From a really basic standpoint. So let’s go through a quick demo and just so you can see how easy it is to actually get started and to really go through several demos and it will start off with the most basic you still hear me OK and everything. [1:01.0]

[00:08:22] Yeah we’ve got one. Greg made a comment. Kind of an initial question and you might address this. Anyway he said he found that when referencing jQuery CD ends and a Master Page sometimes script such as hillbilly tense don’t seem to want to work unless directly referenced in the script itself. Any one experience. [19.5]

[00:08:42] it’s possible that I’ve seen issues like that when an minimal Dallas strategy is enabled. That’s a feature on your sites. It it can cause issues with scripts being loaded properly so try to Savely not to see if that helps. And it’s true there are two types of people those who like they can and those are wrong. So yeah I agree Greg. Would that be something I would look at. Otherwise I’m not really sure if you can give me some information I can dig into. I’ve not seen that happen before. I’m also guessing I’m not doing anything wrong because it’s always possible I do something wrong. [36.7]

[00:09:22] So here are my SharePoint site. And one way to do is I’m going to be using a code editor I like to use tools to go code this is just a look at my scripts. Don’t get too scared by the script. And I am going to load for you guys kind of the most simple script you can ever have when you’re using J.A.G.. So what we’re looking at here is a script in this script I’m referencing jQuery the J.A.G. library. And then I have this little function here called JRA document ready. You don’t really need to know anything you don’t understand about this is this is where code gets executed rescript tickets executed after the page loads. And then here’s another alert that’s going to fire up. Number two that’s going to happen as soon as the scripts load. So this is the developer free Navellier. Don’t worry too much about what the script does just want to show you guys how we’re going to actually get this into the site. [59.7]

[00:10:22] So I’ve got the simple script and I’m going to save it to my folder I created here for the power hour and will column just query one Doug. Yes and I’ll save that. So now when it comes into my SharePoint site for my SharePoint site I’m going to go into my site assets library you know the first time I saw the new psychologist’s page was during a session that was fun. So we’re the assets library. [33.5]

[00:10:57] I’m just going to drag and drop my file into the library. [4.3]

[00:11:04] And so now we’ve added this file to the library so I can come back into SharePoint one way it’s like Pontins going to my site page is and I’m going to add web page and wait for a second. [28.9]

[00:11:33] Call this page Power Hour. [1.8]

[00:11:46] And now I’m going to add a web part to this page. [1.8]

[00:11:50] And I’m going to add a media and content content editor web part and I’m going to edit the web part and then overhearing the content links section of the web part properties I’m going to put the path to that file that we upload that was inside assets. So that was side assets and I think we called Jake Query. Jay Yes and I’m going to fly back there so I can apply and actually reload the page and it’s going to execute that script. [31.8]

[00:12:22] Mark this looks like a similar concept to using with just less web parts using the JSE Lingfield to put a reference to a JSF file is it kind of just the same concept of pointing to a file on the page. [14.5]

[00:12:37] It’s the same concept except that this file is not necessarily just a script it’s where we’ve got CSSA references in there and we’ve got HVM mail in there and we’ve got other javascript’s So it’s more than just javascript at this point. So good to know. [15.1]

[00:12:53] Yep. Apply here and it should stop in my alerts. Know this is the way things go when you do it and those should be popping alerts here. I mean look at my. So anyway that’s how you descriptive age you should be getting there but it’s not. [17.6]

[00:13:11] We’re not going to go to the debugging session since this is a power user session. The concept being that you have a script you have that script located somewhere and you add it to work and so to. Get to web page linked to that script. [12.6]

[00:13:24] And that’s that strictly executing on that page so let’s talk a little about some best practices. [9.5]

[00:13:33] I’m going to go into some more. I was working with as well. [5.1]

[00:13:45] Now it’s back on the other. [0.9]

[00:13:48] This is like my family do Power Hour. I always manage to screw something up that has never screwed up before. [6.5]

[00:13:55] Right. You know it’s it’s just OK I’ll just do this for you because you guys can see the slides. OK. So. [5.9]

[00:14:01] So if you’re if you’re a power user and you’re playing with scripts you’re doing stuff with scripts. There are some things to think about. You want to understand some of the basics. Right. Because a lot of these times these scripts are made up of multiple files. Some of those files may be stored in a document library on your system. Some of those files may be stored elsewhere. You understand where those files are and make sure you have access to those files and you have read access to all of those files are located. And if you are referencing a file like a query make sure you don’t reference that file more than once like you may have J.A.G. in your master page. Well then don’t load it again on your page because that can cause conflicts and that can cause issues for you later on. And then in fact if the other thing is if you have scripts for my blogs use or like for my scripts for my blogs on the same page don’t expect that to work because they’re all referencing the same scripts and they’re all referencing different scripts and they may have similar function names and if you’ve got two scripts have the same function name or the same variable name that can overwrite the other and just cause a mess. So you know don’t don’t go out there download tens of scripts on a page then contact support because it doesn’t work because that really gets the support people kind of angry. [1:12.1]

[00:15:14] So you actually can get a couple of questions. Right. That said my settings I kind of write out I think that was a minute ago when you were in Visual Studio maybe and then Jensens you find that sometimes when you put in your constant editor disables your ribbon icons I’ve had this happen when you use the Arel help or channel new form when you go into SharePoint designer. [22.6]

[00:15:40] Know I have not had a commander disable my ribbon icons had it to wear if you add a cartoon editor to a page the list view on it that list you know gets the focus by default and you actually have to click on that list view for it to get the ribbon options for the list. So maybe that’s what’s going on there but just by adding a constant What part of not how to disable before. So yeah. But this stuff is also levellers. There is quirks with this stuff if you add a script to the page it has the ability at that point to hide things on the page that stript you’re adding may hide the ribbon entirely it may do something to the page so you can kind of understand what that script is doing. So to that end I wanted to give you guys kind of a tutorial about the layout of a script. And so I have a scriptorium and this is actually from one of my blogs and I wanted to kind of explain the different sections of the script so you can understand what you’re seeing here. So the section up to the top with the red box here that is the script references I’m talking about this is saying that we’re loading these other files because we need these other files in order for the rest of the script to run and this is where it’s important that if you’re referencing you create your master page you don’t want to also reference it here as well. [1:26.3]

[00:17:06] So this example I’m referencing jQuery I’m rushing another library called masonry referencing another library that has all my functions and they’re called Pay dot app launcher. [11.4]

[00:17:18] Is there a way that they’d be able to tell if their master page is referencing jQuery if they’re not the ones who created it. [6.6]

[00:17:24] So are some developer ways but the easiest way would be to just have a view page source and then look for a query in the page source if you see it there. There’s a good chance of being at by your master page. [10.9]

[00:17:38] That makes sense. Yes. OK. [2.1]

[00:17:42] So in the next section then I have highlighted here. This is where you have your style sheets. So this could be just whatever CSSA that your libraries may need or services says that you’ve created yourself if you want a reference at external such stylesheet sheet that’s what that section is and then we have some actual style that’s in line in the script itself. So this is I have a specific style created for something called a paint app tile and it’s in that style tags and you can see really making fun of my script. So yes this is the style and this kind of style is how things are. And I’ll get to this quickly so the power users don’t fall asleep. You’re going to have some HTL in your script and so here I have it on the page and it’s just in nature you know. Is it a best practice refaced J.A.G. and a master page. I actually like referencing J.A.G. with a custom action and that puts it into the master page because it allows you to activate and deactivate a feature to actually create create accosts cycle action. Another way to do that. Yeah and you can do that that’s actually still support in office 365 because it’s not code it’s just ex-MIL. So that works out really well. But putting in the master page is is also an option. But that is for scripts that are going to be deployed across the entire site collection. So in each script you reference in your master page is actually going to be loaded on every single page. [1:18.2]

[00:19:00] So you don’t want to do that with a script that usually when you use on a couple of pages is there a way to check to see the scripts being loaded to check the references already loaded. Yes there are some jQuery you can execute to check to see if the script is loaded and if not voted on a manically. You can also used what’s called a script link. You would have to put that in your master page using SharePoint designer visual studio. And what a scripting does is it make sure that if a script is already loaded it will learn it against something you can look at. But then the other part of the script we have here is this is the actual javascript within the script tags is the jaws that’s getting executed. So I’ve got to script reference as we got to see a set of references we get to see assess where H.T. mail we’ve got actual script on this file here so that’s all the different pieces of it. [48.7]

[00:19:51] So let’s just get some examples in Deimos that’s too much code. I’m laughing at the Bill Clinton gift because I’m from Arkansas. Right. So he did not deploy that crowd. OK. [12.9]

[00:20:05] So the first thing you want to do is do probably one of my most well-known blog posts and that is putting SharePoint web parts into tab’s says I probably get the most questions about this one. And seems to have the most people seem to know this from the most so let’s go ahead and show us in action so you can see how this works. [22.5]

[00:20:28] So if we go to the Web site this link so here in the blog posting we will walk you through the entire process of using these tabs. [24.5]

[00:20:53] But at the end of the day what you want is you want this script right here. If we LOEG this or we can view it. What I’m doing in the script is like I’m doing a script references that we saw before and referencing the scripts we need. And then I have some CSA us then I have a timeout element that holds my tabs. And then I’ve got the script piece which is responsible for creating the tabs. So if you want to actually create tabs with your ship point page what you do is you would take the script and let me save it locally or call it abs tight J.S.. [39.5]

[00:21:35] And I’m going to go into my SharePoint site and hopefully the script will actually work this time. It’s not left to the debugging fortune or the session. So I have a site here I want to add a couple of web parts to this site we just delete this part them would add a part for those two tasks. [31.7]

[00:22:10] So some tasks and then I’ll add another part for I’ve got this list called paint apps online that we’re apart you know if we want these web parts to appear in tabs we have to do is add a web part to the page it’s going to be media and content content editor web part. [18.7]

[00:22:31] And now I am going to edit the lead part and I’m going to reference that file we uploaded inside assets. [10.2]

[00:22:55] Is that what I did at the wrong library site assets or did I even imply that you’re paying a lot. Yeah yeah I did it. Somebody actually upload the file. So pay attention OK. If you’re not pay attention how can you expect your audience to pay attention. Why. It’s not stuff it’s like how a power user does Deb stuff. [21.3]

[00:23:17] It is. I need to know that. [1.4]

[00:23:20] All right so now I’m applying the script then love it when I have to troubleshoot things that I screw up while I’m doing live demos because it is easy to troubleshoot. [9.7]

[00:23:30] Well actually that’s a thing or two sometimes I put them in on purpose but I can see by adding that script to the page that we actually have our parts and apps now. And this script has a couple of other things you can do to it you can specify if you only one specific web parts to the tabs. So only only of that tasks web part to be in tabs I can uncomment this piece of code here. [21.8]

[00:23:53] And I can say if I just point tasks where part of the tab. So if I make that change and save it and you upload the script you upload this isn’t to replace queenship point or one drive. All right. So I replaced it. [36.7]

[00:24:30] Now though the page and you see that only the tasks are the tab the abstract the tab balance. [10.4]

[00:24:42] That’s great. [0.5]

[00:24:43] Thank you. And there’s a lot of things you can do with the web part you can actually put multiple web parts within the same tab so if in case you guys want to see that let’s go ahead and just so you know that’s not smoke and mirrors. If you use this part of it you can say I want to give my tab a title or call this I just call it hillbilly tab. That’s what they’re known as hillbilly tabs. And then the title of each web party meant to be there. [29.2]

[00:25:12] Someone asks to be there and I want hate hate apps to be there. So I make that change. Stay that and you upload it again. [17.6]

[00:25:31] Well the thing I like about this how easy it is to make changes as you just update a file replace the file. [5.5]

[00:25:49] I see you’re using the new doctor to live your experience. [3.2]

[00:25:53] I’m not enjoying it honestly but yes I am in this instance it’s that I like to have the pop up saying do you want to replace it. [7.1]

[00:26:00] I don’t like having to click on the conflict and then saying yeah I said that’s kind of a pain. But yes this is in a document library experience. All right. So refresh that if I didn’t break anything. [12.1]

[00:26:14] You say it now both web parts are in that tab. So there are some things you can do with that to kind of customise what’s going on there. All right so that’s our first in a the questions are going to the next time a I don’t think there are any. [16.7]

[00:26:31] OK. So the next couple of demos are actually from updated blog posts so unless you’ve been. So these may be nudity but there are some some cool stuff that I thought was that I would show you guys. So one of the things that I find customers to ask for a lot are digital signatures. It seems to one of those requirements that just always pop up and I’ll make these sites available to you actually. But the off I’m just like sure but there’s always this recommendation always this requirement we want digital signatures and we try to explain to users. But you’ve got be modified by it and you get the modified date. There is your digital signature like no no we need a physical signature. That’s what we need. So I thought how I could do this with J.A.G. to make it easy for users to get that without spending the money to do so. And I came up with a solution for my blog to implement this one and this is actually even easier to implement if we come into the site here and let’s say we want to implement signatures on the tasks list. So in order to do that which is going to go into your list settings for whatever list or library that you want to use for your signature. Because what we need to do is we actually need to add a field to store that signature. In fact I’ve already got this field on here. I’m going to go ahead and delete it so you can see it happen from the very beginning so you know I’m not making anything up. [1:22.6]

[00:27:55] I don’t like smoke and mirrors I like oh it actually does work. So here’s my task list getting out of the box tasks list to create a column we call a signature. [9.3]

[00:28:06] It’s going to be a multiple lines of text field and it’s going to be plain text. I must say that so now I’m going to go to these forms for my task list so when I go to the list tab up here and go to the default new form and this opens the new form in the page and going to add a web part to this page and instead of adding the content editor web part I am going to add a script editor part to this one story and a script editor part edit the snippet and then grab the references from my blog post so that I copy that paste those in there and started adding and also the same thing for the display form some form or its default display form. [1:11.4]

[00:29:22] I’ve got the script editor on here that’s exact same script references for the display form as well. [5.1]

[00:29:32] All right so now for my tasks the record a new task I now have a signature box here. And if I click on the pencil icon it brings up a screen that says sign below and you can actually sign that click OK and you can see actually store it in that signature text box that is so cool so they can. [24.5]

[00:29:57] They could use like on a tablet or something they can use their finger a but on the computer they could just use their mouse. [5.0]

[00:30:02] Yeah exactly. If you’ve got a surface you can use the surface to do it as well. So it’s your mouse ditcher it’s your screen which so if you want to do without it that storing it as an image I guess you’re you know it’s not because it’s and that’s I’ll show that to you. So if you see this entry that was created it’s actually storing it in the signature field that multilane the text field as an encoded base 64 string. So it’s not actually stored as an attachment it’s stored as something that you would download as an image it’s just text. So when we go to view it we can also view that signature right that the display form that it’s showing with a script reference it’s able to show that signature as well. [46.2]

[00:30:55] Any questions about that one. [1.0]

[00:31:04] Thanks Larry. Appreciate it. All right. So there’s no question I get to the next one so I guess one of the things people ask you about this one is that I want to do this one. [8.2]

[00:31:13] How do you know when to use the constant editor versus the other thing on that. [4.3]

[00:31:18] So for the script that’s Here’s the thing with a script editor may go look at the page and you can you can see this. So if we look that’s a great question by the way. So if I look at the snippet for the script editor I am it is just references to scripts. If I want to put additional information in this script editor I could but then it’s only on this page. So if I’ve got the same script that I want to use on for pages and I use the script editor and I need to make a change to these references already to make a change to add some HTL or something else here I’ve got to make that change. All five pages. However if I use a content editor or web part that references one file and that one file references all the same stuff I just make this change this one file. And that means every content or web part that references this one file get updated automatically. So for instance I used a script editor because I was just adding references to other scripts and I’m never going to change this script. I never got to go in and change this script editor web part. That’s the concept. [1:14.3]

[00:32:33] You’re not putting the code in the content editor or web part itself you’re just putting a link to where the code that one code file lives as opposed to the script editor where you have to put the code itself. Yes right. Yes that’s I think I just regraded what exactly what you just said in different words. [20.1]

[00:32:54] You know if it helps you understand it better then. Thank you very much. I speak. I have to remember that I speak dev. speak. [7.2]

[00:33:01] Kind of but we make more power user I mean you can translate. Like what. Devs can talk to humans and you can. [6.9]

[00:33:10] It’s called lots of shipwrights. [1.3]

[00:33:14] All right. [0.3]

[00:33:14] So the next we’re going to do which is also from the more recent blogs I keep jumping like that is a video portal. [14.5]

[00:33:29] So one of the cool things about SharePoint and Office 365 is that you have a video portal. I go into my site here and I go to my waffle. I have a link for my video portal and this is where you can store a lot of your videos and really liked about the video portal is that the process as all your videos. So when you upload it it’ll Stream much better than if you ever tried to store video in a document library. So it’s it’s a very it’s a great way to have videos. You can have different channels so you have all your training videos there. Or maybe smirking videos. But the problem is you got to go to your video portal to actually get to these videotapes. You can embed them one in the time on your SharePoint site but it’s not dynamic at all. It makes it a little painful for adding lots of videos or changing videos. But there is an interface into the video a portal which can allow you to bring those videos down into your SharePoint site. And that’s what I’m doing with this next blog post. So [1:01.8]

[00:34:31] again this blog post walks you through it. There’s even a video that shows you what I’m about to show you here gives you more information if you want to do this as a developer you understand what’s going on. But at the end of the day to make this work. All [11.6]

[00:34:42] I have to do is come to my SharePoint site edit the page and when parts of the page this give me a new page or could be an existing page an existing page here and I’m going to again add that script editor web part and I’m going to edits the web part and at the snippet and take those script references directly from my blog and paste them in here. [44.4]

[00:35:30] Page So now I have this these links up here and these links are for each channel that I have access to in the video portal. So if I click on one of these channels and it shows me all those tiles that we saw from the video portal and it’s actually EHLO the some nails for the first time so the first time it loads has to look those. And now also when you move your mouse over it you get the flip of that will tell you more information about the video. [28.2]

[00:36:01] You can change to other video channels if you want to go back. [5.4]

[00:36:07] That is very cool. [1.1]

[00:36:08] You can also type in there’s a filter option here so you actually search for instance video if you want to you know you have a life. You can actually filter and find when you’re looking for. [9.3]

[00:36:18] And then when you click on it and actually start playing the video and their dialog window and you can even take this full screen if you want to. [12.5]

[00:36:33] So I say seeing it full screen just like you normally do. [3.5]

[00:36:41] So yeah so that’s that. [1.4]

[00:36:44] There’s also modify this for users so that instead of having a pop up box to see the videos we put the videos in a dialog or an area above the channels and it starts actually playing the most recent video. There’s a lot once you learn the DV side of it you can start to customise these things and make them do what you want to do. So any idea how to get only certain shows to show. Yeah there is a it’s actually a few calls I have to make here using the code that Dev part of it. The first one is set is to hey says hey give me that your Elsmere be a portal. And then from then I say hey give me all my channels so you get actually when you do that hey give me all my channels you can say well I only want to view these channels or automate. So I’m looking just for the training videos. So once I found the training videos now give me the videos for training automatically without having user click on it. So again it some more heavy stuff to do it but it’s all part of the API that you can go in and do that yourself. Just for instance I had to display all the channels and you have to click on the channel to display the videos for that channel which you can automate all that neither questions. All right. So what is next. [1:14.6]

[00:37:59] It’s another one I have is I have another blog post it’s similar to the tab web parts but it actually allows you to put your SharePoint forms into tabs because from it really ugly people don’t like the way those look. [13.7]

[00:38:13] So what we can do is go to this blog post there I found this OK am I going too fast my way to do it. [15.4]

[00:38:30] Yes. I love it. I love the way you’re showing all these examples. I guess just you know in like 10 or 15 minutes or so when we wrap it up I just kind of will just do like a high level overview of like the high level concepts again and after they’ve seen all the cool stuff that you can do. I do have one question about this one with the forms. So you and I chatted right before this started and we’re talking about. And I was asking you what’s the difference between. We’re talking about CSR versus genius link versus Jake Query and what really is the difference and I don’t know I’m not a dev but so we were you’re saying that japes link is you know that’s the little setting that you see in web parks that came out in SharePoint 2013 that’s fairly new and yes we’re applying code in a specific form or web part. So this one that you’re showing now is applied to a form right. So would this be something that you could do as a jazz link or how how does that work. Mike I don’t know. [59.7]

[00:39:30] I don’t think you have access to just like on a form if you did you could make that better. I don’t think we have access to a chair asleep but maybe that’s a come and check that and just say it right. Yeah. [13.2]

[00:39:43] But if you do X just like you could do this it’s just like oh but the other thing about this which I really like is this works in 2007 and 2010. So you know you can use just like two separate Wheaton’s this point. [11.9]

[00:39:55] Good point. [0.3]

[00:39:55] Now that’s for all those people out there still in 2010. You can do all of this stuff in 2010 as well. [5.1]

[00:40:02] So the basics of this script is that you take the script and you put it on your someone your forms and SharePoint it will turn it into tabs. And the way this works. Let me get the script. You can see it better is that you tell it in this little tab info section what you want how you want your tabs to be laid out the way you do this is you tell it between these squiggly lines what do you want the title the title of your first tap to be. And then there’s a size field here that means how many fields do you want on your first tab. [40.2]

[00:40:43] So it doesn’t matter the layout of your form how many fields you have and this script doesn’t really know anything about your form other than what you want the title of a specific tab to be and how many fields you were on that tape. So in the default example there’s three tabs the first half will have three fields. [18.5]

[00:41:02] Second type web form fields and the third tab will have five fields stuff I save the script call it have a filing cabinet and Ray J us link is there on a photo is OK. [18.0]

[00:41:21] Well there you go saving yourself for this. I’ve never used with just like them. You know guess because I’m a Davy to go to a genius file right. [11.5]

[00:41:32] Yeah. Just push a just file so I’m not sure if Jason is looking for specifically just javascript because I’m using both aged hemol and references. So I’m not sure if chastely how well JS link likes that. They say it may say no I’m looking for purely a javascript file that has nothing with javascript and it means that maybe. So I’m going to go back to this task’s form. [24.0]

[00:41:59] First I can upload the script again so I can site assets I have a file file and that’s able to decide assets. [11.0]

[00:42:10] Now I’m back in my tasks list and I am going to go to the display form and I’m going to the going to lead this script and they’re and I want to add a content editor with a part. [23.0]

[00:42:34] See I didn’t want to mess with having both those scripts in there because they do reference the same scripts and so I’m not going to blindly just add both of them expected to work and we don’t have that much time left for me to go to you and say hey here’s exactly I make them both work together. [12.3]

[00:42:47] But you can see that when I edit the script editor web content editor part I’m going to point it to site assets have a fine J.S. but that’s because for me I have to have one more dot dot slash and you can put the full path or the relative path to the scripts and this content like so now on the display from if I go to display a task it’s got the first three fields in the title field. [54.7]

[00:43:42] It’s got the next for the second Tau second tab and the next five. There’s only four left but the next five and the third tab. So this is how you can get those SharePoint forms in tabs. [12.9]

[00:43:56] That’s in addition to that you to put them in the correct order so that don’t fall on the right tabs. [3.7]

[00:44:00] Right right exactly. So you go on your list view settings and you can change the order of your fields or if you have to change the order in the Content-Type itself. But that’s where you specify the order you want those fields to appear. Again I wanted this to be as dumb as possible so that it is generic it’s possible for your for different scenario. So each to the name of the tab. And how many fields depend on each tab which is the order from the list decide what those fields actually are. [24.1]

[00:44:30] Any questions are. [0.8]

[00:44:34] All right. So we’re down to 15 minutes left. We want to see a couple more details or do you want to kind of wrap things up a little bit of what you want to do because I’ve got a few more I can go through and I’ll make the Slotnick available to you guys afterwards that you can get some play with it. [15.7]

[00:44:50] I don’t know any one more demo. And then like a high level overview of where all the major pieces parts are and kind yeah like that. [6.4]

[00:44:58] So let’s do one more and this one is going to be using one of the libraries I used actually for the video for the video portal we saw to give yourself kind of a personalized tiles in your SharePoint site similar to promote the links. But it was promoted links is that you know by default you’ll get one row of promoted links in there not respond at all. [25.7]

[00:45:25] Using this script you can have multiple rows and it’s responsive and what’s really cause I like to do things like personalized little by adding some permissions to it. That you see that the files that you’re that you care about. [14.7]

[00:45:41] Now we have a couple of questions. They realize that they’re going to lose you in a few minutes and look at like a billion fans and here are not as great as do arrest. Plus Jason Paul and anyone that says you show your promoted links so do a restoration. [18.8]

[00:46:00] What do you mean. I actually did that for the video portal. So what specifically are you asking for there Greg. And can you show your promotor links. Are you saying can you can you use this same script to show your links. The answer is absolutely yes. You’d have to tweak it a little bit or you’d have to tweak it a little back. Actually I thought about rewriting it to use promotors links list that make more sense if enough people ask to do that I might but it’s useless. Basically the same formations that promoted links. If I had had more forethought I probably just sort of made it work out with the provided links. But for this example the way it’s written now you create a different list with certain fields in it. [40.9]

[00:46:41] We didn’t do a whole SharePoint power hour about the javascript around customizing the promote link so I’ll put a link to it in there and you feel free to proceed with whatever demo you were going to do though. [10.5]

[00:46:55] Well I mean it’s you guys are kind of like taking the steam out of this now it’s like gosh protip links you know. So anyway I’m giving you guys our time. [9.2]

[00:47:04] So I get the blog post walk through the steps and we have this script that basically allows you to specify although there are things you can do with this script to specify how the size of those tiles. So they don’t have to be all the same. You don’t have to have them the height of the promoter links you can choose them to be smaller or bigger however you want to. So when you have the script and things you can specify is the width and height of the tiles. [26.0]

[00:47:32] So I’m going to do a Save As here and not just call it I’ll start japes. [8.5]

[00:47:41] And what this script is looking for is it’s looking for a specific list in your site. And like I said it’s based on the same information that promoted links and it had I thought about it more it would have just used promoted links list but was using is a list that has a title field that has the title of the tab a link field for the link of where it goes to a picture field for what picture you want to show. And then the order field for what order do you want it to be in. [26.4]

[00:48:09] So I’ve got this list set up with two different items in here so I can go to a page on my site content’s getting my site pages it’s can we actually go back to empower our page that we had and when to edit the page and I’m going to go and change this reference after I upload it again. [31.5]

[00:48:44] So I took the step of putting the thought aside as such you have to make sure your I know I can point this to tiles client and I’m going to lead to each other when parts or leave them it’s fine. [25.6]

[00:49:11] So now those titles which again are similar to the promoed links but there are going to be responsa. [10.3]

[00:49:21] So if you know you make the page smaller and reload it they’re going to be able to go into multiple rows like the actually the minimum length is too wide. Let me go in here now. [13.9]

[00:49:36] Micheaux you guys have changed this to say I make the tiles bigger I start to change setting it. [10.5]

[00:50:05] Now the tiles are bigger and you see they took up the extra row because it needed to vary size as it goes out. [5.2]

[00:50:11] People love tiles don’t you agree. They do. They really do and it’s just like you know they like tiles they like. [5.7]

[00:50:18] They like image rotators tiles and image rotators are crazy about him last. [4.3]

[00:50:23] You can do it this descriptives you can change the show title to a false change that’s a false save and re upload it. [11.0]

[00:50:44] What do you think of the new to the library. You or somebody you want to spite me. [8.3]

[00:50:52] Well I like the way it is. Just if I picture some in use or something that’s being completely new to SharePoint like if I picture my mom trying to use SharePoint I can see that the new document library experience at all is more obvious and makes more sense just like a typical end user just trying to work with files that’s political that’s very political. [18.9]

[00:51:14] So I set that show titled to false. So you see you know the titles are listed on the tabs with setting that false on the page that just shows the icon. So it doesn’t show those titles. So that’s something know she can do this. [11.6]

[00:51:27] So yeah. So there’s that. [1.4]

[00:51:35] Funny probably too late now. I was looking at just getting arrested for particular I didn’t see it filtering ID equals for a couple of shows to show that data. Yes probably little bit to me but I could definitely I could point to point you to some blog post Greg on how to do that. That’s not that’s not true Harry. But you probably a little outside the scope of this session. [22.6]

[00:51:59] All right so let’s recap what we learned about the concepts about where things are and basic things to know about what CSR and stuff CSR is not as opposed to server side I guess CSR is not incorrect I think it just evokes a different image to people or in their minds people who do it. I’m going to stop the screen cheering we can just chat I guess. [25.8]

[00:52:25] Yeah let’s stop the screen share there yeah. [8.7]

[00:52:34] Oh whoa whoa. You didn’t need to see that much of me in the show will. Well yes she’s been hanging out the whole time. [9.5]

[00:52:46] Not Ryan and Steven so busy just like crack the whip on them and were they couldn’t come. [5.7]

[00:52:52] I did invite. [0.5]

[00:52:53] I didn’t like Steve and then again just in my room I was a slave driver. You know like a slave driver at all. I appreciate that. So yes so what. What did we learn today. I don’t know. I’m not in the know. [15.7]

[00:53:09] So I think we learned that you can do some pretty cool stuff by just uploading a file to a document library adding web page and then linking to that file that you uploaded. But hopefully you also understand that you can’t just throw lots of stuff together in the same page and expect it to work. One of the follow up I don’t usually tell people is if if you really think this stuff is cool and you want to do more with it I do some work workshops on the subject so you could learn from that. And also pleural site has some online videos to get you started with H.M.S. SS and Javascript and then doing those things you can really learn how to do these things because you can do it which you did becomes pretty endless. It’s very cool. [41.4]

[00:53:51] So what if I would if I wanted to learn like the basics so I’m not a programmer and I want to learn javascript and just the syntax and how to put things together so that I can at least be able to take some other people’s code into and know how to tweak it. [13.5]

[00:54:06] So I would say probably go to cross-site. It’s they they had a lot of ideas for a lot of different technologies and not to shirtsleeve gusher voices videos but they’ve also got like stuff for javascript H.M.S. assassins a lot of intro stuff. So it’s it’ll start you from the very basics because you do have to you I mean you have to learn the basics of development. You get little things like loops and variables and functions and I’ve been doing it for so many years I take for granted that it’s not common sense to some people so I would definitely check out some of their videos. Someone also said he likes code school so that might be a good one. [40.3]

[00:54:47] I wonder if Virtual Academy has a minister. [2.4]

[00:54:51] What’s your question I don’t have that basic because at first it was no coding background. You got to get those basics down to understand what’s going on there. [9.1]

[00:55:01] Just a good old fashioned javascript book like Job script for Dummies or you know you can do I don’t do much book learning because that’s why if I want to fall asleep at night I pick up a technical book and after the first paragraph I’m like. So the videos you know I like to get to do things I like to see things work much better for me. [18.4]

[00:55:21] Oh. All right. Well yeah and we have another power hour that we did whatever it was it last year with you where you talked about your product that you created is performs right. [10.6]

[00:55:32] Yes there is. We have a product called Stratus forms and it actually takes all these same concepts but allows you to create custom forms in SharePoint using CSSA javascript NHT. And I kind of market as a lightweight info pass replacement because it has a lot of the same functionality that info path does that you can do out of the box cyclopean content and things like that. And I also have some folks that you can do in it will pass it all you can do field level encryption. So if you have a screen and referrals on a form you can encrypt just that field very easily where only certain people can see it. [36.0]

[00:56:08] And I know this some stuff like that but I like to think one’s better. And plus if a path is dying I don’t like it. It’s not a it’s not a mystery that I’m not a fan of the path but it’s free to it’s free to people over and over again. Yeah. Well the bottom line is people have to figure out if a path alternative they’re just going to have to do anything Ukraina footpath now you’re going to have to recreate at some point. [26.6]

[00:56:35] Yeah. Speaking of that next week’s show we have click on get me there. Next week’s show is going to be. We’re going to do another one in a third party product forums your views like we did yours and we did came to an end text and a couple of other info wise. We have been using it with a customer recently in an office 365. Their product called improvised ultimate forms. It is awesome to be demolished that for power hour next week in showing you all that that entails. [30.4]

[00:57:06] So thanks everybody for coming. Thanks for coming mark. And I put my power. Our schedule is a permanent place now on my blog on the under the resources tab. [13.0]

[00:57:20] Our schedules so instead of just having it be a blog post kind of floating around in there. [4.5]

[00:57:26] All right. Thanks Joe ever come in to. And I guess we’re all see you all next time. [5.0]

[00:57:32] Yes thanks friends. If I can say one more thing yeah I am curious. Tell us how this flowed for power users if it made sense. Because I’m doing this as a session. So if you guys have any criticism have any thoughts if you’re able to follow it out. Love your feedback. Just be nice because I cry easily so don’t be too needy. Not that I would like to narrow that window. [19.0]

[00:57:51] Yeah we’re we’re still in there chatting. Yeah we had up to 50 live viewers Mark. That’s very cool. Very popular. You’re very popular. Well you know I’m eye candy. We’ll see you later. Thanks everybody. Bye. [14.9]

[58:04.2]