Introduction:
Instead of using PowerApps Customized Forms in SharePoint, we can use the JSON formatting to create conditions, i.e., show/hide fields and change the structure of Input fields. It helps us avoid using PowerApps, and we can perform the functions quickly by using JSON formatting.
We will create an Issue Tracker list in this demo and apply JSON formatting to it.
Forthis demo,wearegoing to usetheIssue Trackertemplate List.
Follow thebelow given stepsto create the list:
1]Click on the New option and select the List from the drop-down menu to create a new list.
2]Create alistusingthetemplateIssue Tracker.
3]Finish creating the list.
AddNew Columns
After creating the list, we create columns.
1]Create the columnnamedComments,usingthe optionSingle LineofText.
2]Create a column named Expected Completion Date of type Date andTime.
AddColumnsToSeparateSectionsUsing JSON Formatting
1]Now, wehave createdalist.Open the list and click on New.
2]Attheextremetoprightcorner,click on the icon and choose Configure Layout.
3]A popup will open,as shown below. From the dropdown,choose Body.
Paste thisJSONin thebody!
{
sections: [
{
displayname: Issue,
fields: [
Issue
]
},
{
displayname: Details,
fields: [
Priority,
Assigned to,
Date reported
]
},
{
displayname: Other,
fields: [
Status,
Issue description,
Days old,
Issue source,
Images,
Issue logged by,
Comments,
Expected Completion Date
]
}
]
}
This JSON will separate the columns into three sections.
If you look carefully at JSON,you will come to know that the displayname shows the name of the section;for instance,displayname: Other.It willcreate thesection withthe headingOther,asshownin the picture.
fields: [
Status,
Issue description,
Days old,
Issue source,
Images,
Issue logged by,
Comments,
Expected Completion Date
]
The fields will show the columns to be entered in the section.
As we can see in the picturebelow,thereare three sections.
These pictures correspond to the JSONformatting that we applied earlier.
Show/Hide Fields based onconditions
In PowerApps,we can show/hide fields based on theconditions;fortunately,the same can be achieved using JSON formatting.To show/hide fields,perform the following actions:
- Click on New.
- Click on the option at the top right and choose Edit Columns, as shown in the picture.
3]A popup willappearshowingthe fields.Click on the three dots of any field and choose Edit Conditional Formula.
For this example, we have chosen the Issue Description Field.
Type this in the popup:
=if[[$Priority]==Critical,true,false]
The condition that we have written translates as follows.
If the field Priority hasavalue equal to Critical, then showtheIssueDescriptionfield;otherwise,do notshow.
Let usshowanotherexample.
Open the Edit Conditional Formula for Expected Completion Date and type this.
=if[[$Priority]==High,true,if[[$Priority]==Critical,true,false]]
This conditiontranslates as follows.
If the field Priority has a value equal to Critical or High, then show the Expected Completion Date field; otherwise, do not show.
As you can see in the picture below, the fieldsExpected Completion Date and Issue Description are not showing asthepriority is setasempty.
Ifweenterthe priority as critical,then the fields of Issue Description and Expected Completion Date become visible,asshown in the picturebelow.
Conclusion:
If we want to apply styling to the SP list and show/hide fields, we can use JSON object instead of using PowerApps.
If you have any questions on this blog, reach out to us using the comment box below! We will be happy to assist you.
You can also reach out to our BOLDEnthusiaststhrough our contact usform.
Happy reading!