Adding Footer To The Form

Introduction

 
Welcome to final series of adding footer to the form. This is final series from the below article series
In this article, we will see couple of scenarios.
 

Adding footer note by adding contact information

 
Step 1
 
Now we will apply footer. Click on new form and go to configure layout, and make sure footer is selected.
 
Adding Footer To The Form
 
Adding Footer To The Form
 
Step 2
 
In the JSON text box, enter the following code    
  1. {  
  2.     "elmType""div",  
  3.     "txtContent""='© ' + getYear(@now) + ' Contoso.' + ' Contact hr@contoso.com for any questions'",  
  4.     "style": {  
  5.         "font-size""normal",  
  6.         "border-top-style""solid",  
  7.         "border-top-width""2px",  
  8.         "padding-top""2px",  
  9.         "display""flex",  
  10.         "justify-content""center"  
  11.     },  
  12.     "attributes": {}  
  13. }  
Step 3
 
Click on 'Save'. Now you can see the contact information is added to footer. 
 
Adding Footer To The Form
 

Adding footer note with conditional border color

 
In this section, we will now see how we can change the footer border color based on condition. We will see if the field Complete is checked ‘Yes’ then footer border is ‘green’ else the border color is ‘orange’.
 
Step 1
 
Click on new form and go to configure layout, and make sure footer is selected.
 
Adding Footer To The Form
 
Adding Footer To The Form
 
Step 2
 
Please copy and paste the below code into the JSON text box and click on save.  
  1. {  
  2.     "elmType""div",  
  3.     "txtContent""='© ' + getYear(@now) + ' Contoso Electronics'",  
  4.     "style": {  
  5.         "font-size""flex",  
  6.         "border-top-style""solid",  
  7.         "border-top-width""4px",  
  8.         "padding-top""2px",  
  9.         "display""flex",  
  10.         "justify-content""center"  
  11.     },  
  12.     "attributes": {  
  13.         "class""=if([$Complete]==false,'true', 'ms-borderColor-greenLight') +' ms-fontColor-neutralPrimary' + ' ms-borderColor-orangeLight'"  
  14.     }  
  15. }  
Note
The values of checkbox in SPO or rendered in opposite fashion. I need to set to string ‘true’ when the value is false. The value in the browser is rendered as ‘false’ when actual value is set to true. You can observe the same in attributes section.
 
Step 3
 
Now observe that in the form, when the complete is set to yes, the border font color changes to green. When set to No, the border color changes to orange.
 
Adding Footer To The Form
 
Adding Footer To The Form
 

Conclusion

 
Thus in this article we have seen how to add simple footer as well as conditional footer to form.
 
References
  • https://github.com/pnp/sp-dev-list-formatting/blob/master/form-samples/status-header-footer/status-footer.json#L15
  • https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/yesno-checkbox/yesno-checkbox.json
  • https://github.com/vayin/ListFormatting