Customize SharePoint List Forms using JSON Formatting (1)

hello everyone this is raza durrani today's video is about customizing sharepoint list forms using the new form formatting options using json we will look at how we can also apply conditional formatting for showing and hiding columns and creating sections in sharepoint forms all by using conditional formulas and json so let's get started with the video but first my introduction [Music] in a modern sharepoint communication or team site if i go ahead and create a new list i now get the option to create a list from templates which are basically microsoft list templates to choose from or i can create my own list from scratch for the purpose of this video i will select the issue tracker template and this will go ahead and create a list in my sharepoint site with the columns that are defined as part of this template along with the column formatting options that come as part of this template so i will create the so i'll go ahead and click create and this now creates an issue tracking list for me in my sharepoint site now what are the options for customizing my list forms if i click on new this will open up the default sharepoint list form behavior and this will list out the columns that have been created for this list and this comes about in a single column format as you can see this form is responsive in nature if i was to reduce the width of my screen you will note that the entire form is responsive now to customize this list form we have the following options so the first option right here is to edit the columns and in this case what you can do is you can go ahead and show hide columns so for example if i would like to hide the column images all i have to do is uncheck this click on save and now the images column will not be a part of the form so you can show hide columns right here also in edit columns you can go ahead and reorder your columns so you can just select a column so i'm selecting date reported and i can drag and drop it to any position of my choice so i can just reorder my columns on the fly right here and when i select save the reordering will take place another thing to note is that you can also define something known as conditional formatting that means you can show and hide columns depending upon specific conditions and for that what you can do is you can plug in simple formulas known as the conditional formulas so let's take one very simple use case so i have the priority column and the issue description column priority is a choice field here so let's say my use cases that if the priority is critical only then the issue description should be available for the user so in order for me to achieve that once again i will head over to edit columns because i want to add the conditional formula to my issue description column right here if i go to the three ellipses i have the option here of editing the conditional formula and right here is where you can plug in your conditional formulas now you don't have to be an expert to plug in your formulas here there's a very nice link here if you select that it will take you to docs.microsoft.com and it basically provides a wide variety of conditional formulas that you can reference and this gives some really good examples with various column types and sharepoint that you can leverage now in my case i have plugged in a very simple conditional formula if the priority column and this requires the internal name of the sharepoint column is equal to critical then true that means show it otherwise false you hide it now if i save this the moment i do this notice that this column now appears grayed out because there's a conditional formula associated with it i will go ahead and save this now the moment i do this here's my new form notice i don't see that column and the moment i pick my priority as critical the issue description column will then conditionally show up so you can add these conditional formulas to any of your columns now the second level of change is around configuring the layout now as you can see this form is in a single column layout if i head over to configure layout this now opens up some new formatting options for us and these formatting options require something known as json and here we have three areas that we can format one is the header second is the body and third is the footer let's first begin with focusing on the body of my form if you look at the documentation for configuring the list form now for the body section of your list forms all you can define here are sections basically grouping your columns and the way you can do that is by writing this very simple json structure which is sections and then you give the display name of your section and then in there you can add the display name of your columns so that the form can then add those columns to the sections that you have provided so right here let's say i go ahead and copy this i will head over to my body formatting option and paste that json end right here so in the details i will go ahead and plug in priority date reported and assigned to and then for the next section i'm going to call this other for example and let's say in this case i just add the status column now if i preview this notice that my form has gone ahead and created sections now notice the first section right here i entered a column called title now i don't have a column called title that's because the template for issue tracker renames the title column to issue so remember you have to put the display names right here so i'm going to just plug in issue right here now if i preview this notice it places issue in the first section the section does not have a display name that's why it doesn't put the header for the section but if i was to add a display name and click preview it will add the section header for me then i've got my details it's added the priority date reported and assigned to based on the json provided and then i have a section called other now notice in this although i just added one column called status it still went ahead and added all the remaining columns that is because the last section that you define any columns that are a part of the form will fall in that last category and that's why it's gone ahead and plugged all those columns in there so this goes ahead and creates this multi-column style layout for me and i can also define my sections i will go ahead and save this and now if i go ahead and click on new to create a new item notice that that multi-column layout format is being applied for my sharepoint list form also the conditional formatting that i put in place will also hold true so for example the priority when it is critical it's going to add the column which is the issue description column and because i did not put that in any specific section it just goes and drops on the last section that i have created now the sharepoint list form here is responsive in nature as well so if the width of my screen decreases notice how the format of the form changes depending upon the real estate that is available on the screen so on a mobile device it's going to look something like this if the width of my screen increases once again it's going to go ahead and based upon the real estate provided create that multi-column form experience for me which is very neat now back to configure layout i can also configure a header and i can also configure a footer in here so let's again go back to the example that has been provided and the documentation just going to go ahead and copy this and i will just paste it in right here now notice right here very simple formatting but it went ahead and added a header right here on the top for me and if i go and insert a footer section based on the sample that has been provided if i preview this notice right here at the bottom of the form it added the footer section for me so you can add headers and you can also get values from the columns of your form now in this case for my issue tracking list i will go ahead first and add two columns one is a multi-line text and i'm gonna call this my commands i'm gonna save this and i will add a second column of type date and time and i'm gonna call this the expected completion date i'm going to save this now if i head back to my form the first step is i'm going to go back to edit columns the first layer where i can define my conditional formatting i'm going to remove the conditional formatting that i applied on the description column and all i have to do is clear the formula and click save so let's say my first conditional formatting is that the expected completion date this column should only be visible to the user if the priority that the user has selected is either critical or high so for that i will select this column go to conditional formatting and plug my formatting formula in there remember you can add multiple conditions like i'm doing right here by stitching two if functions together i will go ahead and save this and this has now applied the conditional formatting to this column the next step is based on the assigned to information that the user provides that means who is this issue being assigned to i only want that user to whom this issue has been assigned to to have the option of updating the status and the commands so for that i would have to apply the conditional formatting first to status and here's what my formula looks like if the assigned to dot email it's a person type column so i can get the email information and compare and check to see if it is the logged in user or not if it is in that case go ahead and show this column otherwise hide this column so here's my conditional formula i will save this and i will apply the same conditional formula to my commands column as well and just like that i have gone ahead and added three simple conditional formulas so i can go and save this next i will go to configure layout and right here for the header i will go ahead and add my conditional formatting let me go ahead and preview this and what this conditional formatting does is it is checking to see the status of this issue if it is completed it puts the green color on top if it is duplicate it's going to put yellow and so and so forth so it's going to apply the color on the top right here depending upon the status of my issue if you look at the json here i have two more elements one is an icon that i've added right here and then i'm adding a text right here which is the text that gets the information from the title column which is my issue column i have to plug in the internal names now the json that i'm plugging in for all of my formulas right here all of those will be available in the description of this video so do check that out if you want more samples around formatting all you have to do is go to the pnp samples that have been provided when all i did is literally went to the column samples and to the github repository and right here there are some really neat samples that you can choose from so this is the changes i made for the header now i will head over to the footer and apply my json for the footer and then head over to the body and for the body i have defined the following sections so now if i go ahead and preview this this is now created those various sections in my form so i'll go ahead and save this let's go ahead and create a new issue in this list so if i create a new issue the color on the top in the header is blue because the status of the issue by default is new so let me go ahead and create a new issue here so i have an issue with my laptop that's not connecting i've plugged in the date reported and the issue description now here comes priority now remember there's a conditional formatting that i applied around priority if priority is critical or high it will show an additional column so let's say i picked the priority as critical notice it added this additional column which is expected completion date so the user can provide the completion date if the priority is critical or the priority of the task is high so let's say i go ahead and define my expected completion date now the next functionality is around assigned to if this task is assigned to the current logged in user then there will be certain columns that will show up and those two columns were the status column and the commands column and both of those columns i have added in a section called action notice that section right now is empty because assign two is empty now if i was to assign this to a user when that user would log in and look at this form those columns would open up right here but let's say i'm assigning the stars to myself notice right now because i am the logged in user and the assigned to is me i get the option now to define the status and also enter the commands so let's say i change the status of this to in progress observe immediately on the top the header has changed to orange because that's the task status for in progress if i change this to completed it's going to change the header to the color depending upon the formula that i plugged in so i've changed this back to in progress putting in some comments right here and i will click on save and just like that the item got recorded in my sharepoint list and if i open this item right here you see all those formatting options that i plugged in still apply including the footer right here which has a link for me to contact the administrator of the system now there are some really neat things right here as well if i was to go to the details tab notice that same formatting applies here as well so that formatting is going to live with the form associated with this sharepoint list so let's say i go ahead and select this item right now if i go to edit columns notice now it shows me the sections and it also shows me the columns on those sections now check this out what i can also do is i can move columns around on the fly let's say i can pick priority and put priority in the information section if i go ahead and save this notice priority now shows up in the information section and if i actually go to the json now and go to the body section notice that the formula the json formula has updated itself so that's really neat once i define my sections and add my basic fields after that i am free to move my fields around literally by just dragging and dropping the fields in the different sections so this is how you can leverage these simple formatting options in sharepoint list forms to directly go ahead and customize your forms so if you want to customize your sharepoint list forms look at your requirements first start with simple customizations if your requirements are showing hiding conditional formatting just use edit columns if you want to create a multi layout style form you have plenty of columns you would like to show and hide of course you want to add a header footer go ahead and leverage both the first two options and finally the third option is customize with powerapps go to this option only if the first two options are not sufficing what you need so choose this option if you want to truly go all out in customizing your form once you select customize in power apps this will open the power app studio and create a basic list form customized app for you right here and in here you have the full power of power apps which means i can even go beyond sharepoint i can connect to any other data source of my choice maybe get data in from sql or any other data source of your choice i can even go ahead and maybe change the theme of my app if you need all-out customization power apps is going to be your answer once you're done with customizing your form just go ahead and save your form in power apps and publish it back to sharepoint now that my form is customized using powerapps and published if i head back to my sharepoint list this time if i go ahead and create a new item notice that it opened that powerapps form right here in the new list form experience now if you want to go back to the standard list form experience in that case you can head over to the list settings go to form settings and right here you can change it back to use the default sharepoint form so the default sharepoint form has those formatting options you can go to powerapps if you want to do not use infopath infopath is under extended support right now and will be deprecated in future so let's say i select the default sharepoint form back again i'm gonna say okay gonna head back to my issue tracking list and now if i go ahead and create a new issue my formatting options are back in place if you enjoyed this video then do like comment and subscribe to my youtube channel also don't forget to hit the bell icon so that whenever i post my new video you get notified about it thank you so much for watching

Channel: Reza Dorrani

Views: 56,421

Keywords: customize sharepoint list forms using JSON, customize sharepoint list form, microsoft, sharepoint, custom sharepoint list form, custom sharepoint form, custom shareoint list forms, sharepoint list formatting json, sharepoint list column formatting, reza dorrani, sharepoint list forms, sharepoint list form customization, sharepoint list form full screen, sharepoint list form formatting, customize sharepoint forms with json, customize forms sharepoint JSON, sharepoint form formatting

Id: y_bdjMRHVmY

Length: 17min 57sec (1077 seconds)

Published: Tue Jan 19 2021

Reddit Comments

[u/TerranIncognito]

When does this feature go into GA?