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

• Creating list from existing list template
• Adding Logo to your list form
• Modifying the body of the form
• Adding the footer note (this article)

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.

 

 

 

Step 2

 

In the JSON text box, enter the following code    

{
    "elmType": "div",
    "txtContent": "='© ' + getYear(@now) + ' Contoso.' + ' Contact [email protected] for any questions'",
    "style": {
        "font-size": "normal",
        "border-top-style": "solid",
        "border-top-width": "2px",
        "padding-top": "2px",
        "display": "flex",
        "justify-content": "center"
    },
    "attributes": {}
}

Step 3

 

Click on 'Save'. Now you can see the contact information is added to footer. 

 

 

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.

 

 

 

Step 2

 

Please copy and paste the below code into the JSON text box and click on save.  

{
    "elmType": "div",
    "txtContent": "='© ' + getYear(@now) + ' Contoso Electronics'",
    "style": {
        "font-size": "flex",
        "border-top-style": "solid",
        "border-top-width": "4px",
        "padding-top": "2px",
        "display": "flex",
        "justify-content": "center"
    },
    "attributes": {
        "class": "=if([$Complete]==false,'true', 'ms-borderColor-greenLight') +' ms-fontColor-neutralPrimary' + ' ms-borderColor-orangeLight'"
    }
}

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.

 

 

 

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