SharePoint JSON Formatter (App) Tutorial

hello all this is a video tutorial for the SharePoint helper app as displayed on the left here that I've been developing it should be used for creating the JSON conditional formatting for modern SharePoint lists it'll help guide power users through it if they haven't done it or don't do it too often but also greatly reduce the amount of time it takes to develop it by experts as well so I hope you find it useful to get started I'll talk about the Help button on the top right underneath it will find quite a few useful links the first one being the JSON formatting documentation by Microsoft for the purposes of this initial tutorial I'm going to assume that you know how to do this and show you how that have functions and hope you find value in it so there's also the SharePoint fabric link as well to take you to that but I'll show you that later as well and the JSON lint site is very useful as we move forward in this I'll show you you know things get pretty complicated so I do have the ability to use functions but as you can see it gets pretty intense down here I don't format it very properly so if you just copy and paste it at an endpoint into face-on lint it'll make it nice and pretty for you so it's a pretty useful link other than that I do have the app specific video tutorial for that you're watching right now as well as the source code for this app as well so all that can be found under help and just to give a general layout of the app you know I do have some quick ads here that I'll get into later some templates that are pre-built we do have the element type and the text content field here as well as a little help button that gives you contextual help so this value will be displayed in each cell because it's talking about the text content if I do a type test here and copy and paste it as I'm formatting this title field all the fields now say test right it does have the ability to use variables which I'll get into later functions and math as well as and and that's it so you know moving forward we do have the attributes properties and customer actions available as displayed here but the children element I'll show you a workaround I don't have it implemented at this point I would like to clean up the code base first so that's just a general introduction of the Apple I do have the reset and copy to clipboard buttons down here so at any point you can reset or a copy to the clipboard so you know I hope you find this useful and now I'd like to talk about some very important aspects to this app that should be noted so we do support variables functions and math so mainly the multiply divide add or concatenate with the plus plus subtract with minus minus and parentheses to support order of operations all that stuff is included and I'll show you an example in a minute but we also have functions and so this number function is going to be very useful if you're trying to do any type of math this is very important so if I wanted to show 5/3 it's showing strings here right and so you're trying to divide two strings and it doesn't really understand what's going on right nothing is displayed so what we can do is we can wrap that into a number function and this will evaluate at this point to one point six six and just to show you that you can also do some order of operations I'll take this which is saying five divided by three plus two and you see it's three point six six but if I wrap it in parentheses the three plus two so now it's five divided by three plus two it does respect those parentheses and it displays one so if you try to do any math on either in this field or if you have you know some kind of you know their field here right you know another another column then you can do math using that number function and just as a side note with those variables they you know they're right here so you can kind of see how to use you know other field names or the current field right you can see the look of value and some properties for the people pickers right the ID title email so you can use that as well you'll see down here that this is very crazy that does not format very properly so if I copy and paste it as we get more complicated you can validate it and it'll just pretty it up so you can actually read what's going on here so that's very useful another thing to note as we move forward is that rules are read from top to bottom okay so when we move into this and we start adding conditions which I'll show you later if we add you know the first condition and then the second condition they're read from top to bottom and that should be noted for you know it you should already know this if you play around with JSON but I just wanted to point it out because you know you have a conditional operator and then if it's true then it's displaying this value and then if it's false then it comes down and continues so I just wanted to point that out and you know we'll jump into this a little bit more now hello so now I would like to talk to you already well I already have talking about the variables functions in math that is supported but I'd like to give some examples so we do have variables for example now and you know if you do that you'll see that we are now displaying the date and time the current date time we also if you look at the help have available functions so it'll kind of tell you what it does right to local date string displays a date and type with just a date right so if I wrap that now function in here and copy and paste it just like in regular JSON you'll see that it only displays the date we can also change that and say time right so now it's displaying only the time at this point we can take a look at some templates so if I wanted to look at the data bars from 0 to 1 and data bars from 0 to 100 Microsoft documentation shows an example for data bars so I think 4 there is it's only 0 through 100 because it takes the current fields value right here if I have a percent complete field it takes the current fields value and we'll set it as the width percentage right so that is one template that I have available you can also select from 0 to 1 because if I just paste the same formula here it doesn't work at all right so basically you have to use from 0 to 1 and you see it does some formula here right so for the width it's saying that the value of the width should be the current field value times 100 all right and then you want to concatenate that with the percentage character and then if we paste that and preview it you can see that now all of these fields look proper right and we can also come up to the top and say oh for the text content the current fields value is being displayed if I want to concatenate that with the percentage sign I can now display that here and now all these fields values have the percentage sign I can add a space and you know so that way there's a space now it looks kind of weird but that's the that's the point is that you can start using some of these math functions to concatenate and do whatever you want to do so there's that we also have the completed in progress and late template so here I'll kind of talk about how you can use these templates for your benefit right so if we have the status field here and you can use them to learn and format this field we can copy to clipboard right and now paste that in and you'll see that late and in progress are now colored red and yellow well why didn't it do complete here we say completed if the current field is equal to completed and it's going to be this color green but this field is equal to complete so if I just click this to select it I can come up here and change the formula to when the current field is equal to complete then it's going to be green and if I click Edit condition you'll see that it just changed I'll copy to the clipboard and now paste it and it's complete now what if I want to add another one if I just deselect this by clicking on it I could say the current field is equal to not started and that's going to be orange and add a new condition copy this to the clipboard and now very easily we now have the orange displayed here so if you wanted to you know play with that you can also add new CSS properties as well here we can add a say border radius to 25 pixels just to show that you know it can kind of just round it off a little bit so now we just added the border radius you can you can add we also have quick add up here so quick add if you select a template it will reset the entire form to this template but with click add it's just going to add these properties to it right so we can have the you know bold font and then we add bold font we just kind of get pasted here we go now everything's bold so you know very quickly you can kind of play around with this and see what fields look like so that was just a quick introduction to templates and how some of these CSS properties work I'll talk about these in more detail in the next video at this point I'd like to talk about the attributes CSS properties and customer actions and their layout so if I select any one of these so it will come up with a value or a name here then you can use for an example for attributes that'll let you use a tree after gate class icon' name and then the value that you want to assign to that for property is contextual help so if you wanted to select the drop-down it'll say oh do you want to use the background color or font size border-radius you know any of these but you're not limited to you with them so if you type in opacity the way will start uh it will start displaying down here as well so you you can type in you're not limited to these and there are actually a lot so if I look at the documentation and scroll all the way they're pretty close to the bottom here all these CSS properties are available so some of them more useful than others but if you if you want to use any of them then and you can just type them in you're not limited to this list for the property help you can select help here it should open w3schools to that specific one so this is opacity if you have the background color selected you select help it'll go to background color so on and so forth and then for the value in the background color or color it should open a you know XML color picker so you can start selecting you know any of these colors and just typing those and it'll give you an idea of what it will look like so if we wanted to do a quick example of how to use this I'll set the element type to a because I want to set an a trap and right now I will set it to google.com and if I set add another attribute for the target it'll give me a you know recommendation of what can be used here so like a blank and I can paste it in and nothing's being displayed because I don't have anything here it's a blank field and I'll type go to Google and at this point you'll see a go to Google link I can select it and it takes me to Google so there's that now customer actions work very similarly they have you know actions they have action parameters and it'll give you an idea of what you want to do so if you just copy and paste your flow ID into here you can trigger a flow and yeah that's pretty much the general layout of how this works so next I'll talk about conditions as we move forward so in the previous example I gave a go to Google quick example for how to use a traps and add attributes so I'd like to talk about CSS properties and this add condition field that you can add to any attribute any property any custom row action down here and it's it's all it'll add a conditional logic to your JSON that lets you make it a little bit more customizable so for example I'll use font size just because it's a pretty obvious example you know if I want to say everything is going to be 120 50% the original font I can show that here and go to Google gets a little bit bigger so let's say I wanted to add a conditional logic to it it's going to take the first operand so it says if the current field is equal to you know some other value then it's going to use this value here so what I'm actually going to do is utilize this help button here and you'll see in variables that you can use a field name right so I already have the field name here mapped out for task name it's the field directly to the right so the task name field here so if I wanted to say okay if for the current row if the task is equal to task 1 then I want to make this 125 percent then I add this new condition and copy and paste this code and then now for every field only if the task is 1 then it's going to be a hundred and fifty percent and so you can add other CSS properties and say ok well I want to make the you know background color and then add another condition for these background colors and say ok if the and will stay the same field if the task name field is equal to tasks whew then I want to make this yellow and then we'll just add one more and we'll say if it's three then we'll make it green and if I copy this to clipboard and then paste it here you'll see that task two is now yellow task three is now green and then you know you can do that for any of these attributes so you know for this example if you had task one or task of two then you can change the href here you can concatenate in that field so let's say you wanted to say okay well I want to also concatenate to this field you know it's going to take me to google.com slash you know the field task name field and if I use this now in preview and select it you'll see that it's taking me to task percent twenty is a space right so that's just how its URL encoded it's not fun but so it's not just clicking on that took me to task 1 task 3 will take me to the URL for task 3 so you know you can catenate and can use variables just like that as well so that's just an example but yeah so that's how you can use conditions if I wanted to change some of these and say okay well task 2 you know what instead of yellow I want to make it a different color so I can select the the condition that I want to modify and then change that to maybe orange and select edit condition and so now you see it's orange if I copy this to the clipboard and paste it now it's orange right if you want to add more after that just know it's kind of it's kind of hard to know maybe I'll add a little arrow here to note that it's selected but just click it to deselect it then then you can just start adding more fields so I'll just say if 1 or 3 is equal to 3 then I'll make you know red and so that will or should make all the other fields red because if you note at the very top remember I say rules are read from top to bottom and that's just basic knowledge for this JSON stuff you know rules are read from top to bottom so it's orange and then green and then red the logic for tasks to never reaches this for that for that field if that makes sense so you know if I wanted to come over here to the JSON lint and show you this really fast these question mark fields you know I assumed you guys have knowledge but I'll just show you so these question mark fields are conditional operators and it says if this condition is true so if task name is equal to two is true then it's going to be orange here and then the logic stops there so for that row as it continues if it's equal to three then it's going to be this field or this color which is going to be green and then everything else is going to be red so that's just a little bit of information on that and how conditions work now I'd like to talk about children I do not have the functionality in the app yet you want to really clean up the code base before that happens as I've extended it a few times and just like to clean it up so in the interim there is kind of a workaround solution if I just remove this text content and have a div here I will show you how you can kind of build it from scratch or not from scratch but at least from you know you can you can build it outside of the app and use the app to build all the pieces inside so if you just have a children attribute here just like we have style or attributes or customer actions we can start dropping in the output of this app into each child element or each child object so for example if I wanted to add a span that says test and then maybe add a new attribute you know that's an icon I can click on the help here and it knows that I'm looking at the icon name and it'll surface this which says hey follow this link and you can look at the fabric icons that are available so you know you might not know him from heart but you can follow that link and if you scroll down you'll see a whole bunch of icons that you can use here for example this as your logo will copy that on the left hand side they have brand icons if you scroll down there are several brand icons that you can look at as well as the localization has some more you know arrows and such that you can use so if I just take this and copy and paste it here to use the azure logo I can set a new CSS property and set the color equal thread and then you know just kind of playing around it I can also add a class so just similar to icon name you can select the help when the class is selected and it'll tell you hey you know you can use SharePoint fabric SharePoint framework classes but also they have animations and typography that are available as well so if I select animations and scroll down they do have for example the slide left in class that I can add here and if I copy this to the clipboard I can start adding these children elements alike beautify I can copy and paste this and so it just slid in from the left to that as your logo if I wanted to reset this now and say okay well now I want to add you know a link that will take me to Microsoft I can add a new CSS property I can add a border and it gives me an example of what I might want to do is select to expose solid black and you know I can add a new attribute that says it's an href to Microsoft comm as well as opening it in a new tab as well so if I copy and paste this I can take this is the previous output right here and if I just want to append another child element I just put a comma copy and paste the output again I'll beautify it for you guys and you know you need to copy and paste this code to your app and there you go so now you have two Microsoft with the border around it and then the Apple the test comes in with the animation if I select to Microsoft it opens in a new page to Microsoft so you can you can kind of get an idea of how children elements work they kind of just append on to each other in in this sense and you know that's how you build them I will hopefully have functionality in the app whenever I find time but I do want to clean up the code base so that's a nice workaround for now so at this point I'd like to talk about two useful actions one is adding flow capability workflow capability to your JSON list as well as cleaning up some long text field so just to get started if we select button here and I want a quick add of a Microsoft flow it already adds action and action params execute flow and flow ID here all I need to do is copy and paste my flow ID which I already have open it's a super simple flow it just it just runs and runs an email but I just copy and paste that and paste it into the flow ID here and then I'll just say we run flow for this item and if I copy and paste this you'll see now there's a run flow for this item you can jazz up this button if you'd like as well you can add a background color to blue you can you know select put a radius edit to like 15 you can you know the quarter to 2 pixels solid black I mean this is not going to look very pretty but you get the idea you can pretty easily you know format your button or do whatever you want to do for this that's pretty intense so maybe you want to save light blue you know so just kind of play around to get the way that you want and then if I save this now I have this button here that will run the flow for me or at least our flow but it's kind of bad I always have issues with this there we go so it's just starting on the left hand side it shows JSON demo which is the name of my flow and then you know I can select to run it if I wanted to add conditions here for action parameters I can select flow ID and you know maybe I want one flow ID for you know if the task is equal you know if the task name field is equal to one and then maybe I want a condition that says if it's equal to two I want to run a different flow so these two items would run different flows based on the button click you could do stuff like that if you really wanted to you know but like I said you can add conditions to any of these properties alright one last thing that I wanted to mention which people might find pretty useful is for these multiple lines of text field and modern lists they always get cut off and so you know how do you resolve that if I select the text overflow option here there is a text overflow property called auto it will automatically you know make this look a little bit prettier but multiple lines of text fields have no format here you can't find the formatting options so I have to go to the gear and select list settings and then in the multiple lines of text field I'll just open it in a new tab and copy and paste this to here and if i refresh it'll show me all of it but it might be too long depending on the field name right so depending on the amount of text that you have here it might be kind of ridiculously long so you can add another property called max height and just set it to you know some arbitrary length or height that you would like and then if I you know copy and paste this again just playing around with it to get it the way that I want then you know it'll be that height and then it'll be a scroll bar so you know 70 M might be too small but you know you get the idea so that's also pretty useful and something somebody asked for me recently as well yeah so that's that's uh you know something that you can use so this concludes the SharePoint helper your demo and tutorial so let me know any suggestions in the comments of this video a couple things that I haven't mentioned if you add new attribute new CSS properties these on the left hand side grow so you'll be able to try to keep track as you as you build more you know where all these are for customer elections and properties and then eventually the children that I will add on the left hand as well so it'll be more useful then for any individual item you can select the X to delete them if you select clear all from any specific category it'll also clear all those out so you know again feel free to comment on this video suggestions I have a lot of things that I'd like to work on if you have any suggestions for templates that you think other people might find useful any other features or functionality I'm definitely working on this in my whatever time I can so bear with me as I implement other features but at this point I think it's fully functional in a sense that it will definitely help you speed up development and if you just play around it's kind of fun so thank you very much for watching I have a wonderful day

Channel: Alec M

Views: 15,149

Keywords: SharePoint, JSON, Modern List, Conditional Formatting, Web App

Id: 6vT4oGr2ZKU

Length: 28min 54sec (1734 seconds)

Published: Sat Aug 04 2018