HomeMicrosoft 365SharePoint List and Microsoft List 💥 Form 💥 Formatting

SharePoint List and Microsoft List 💥 Form 💥 Formatting

This is a summary of the GitHub repository to format Microsoft List Forms in SharePoint Online or to format Microsoft List in Microsoft Teams.

This is the list as per 18/03/2023. I’ll update it regularly.

Getting started with : wrapped-body

Link

Wrapped Form Body

By default, uncustomized list forms display the fields in a single column. This is generally fine, but sometimes you may want to use more horizontal space and have your fields wrap. This is not technically a format but rather a body layout. No columns or sections are specified meaning that this can be applied to any form and it won’t change the order of display or what columns are visible it simply adds the wrapping.

screenshot of the sample

Wave header and footer

This sample demonstrates how to display waves in the header and footer of a form. Waves are displayed using SVG.

screenshot of the sample

Status Header and Footer

This sample shows a customized header and footer for a form with a Status column with possible values ‘Thinking about it’, ‘Working on it’, ‘Done’, and ‘Nevermind’.

This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.

This sample shows a customized header and footer for a form with a Status column with possible values ‘Thinking about it’, ‘Working on it’, ‘Done’, and ‘Nevermind’.

This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.

screenshot of the sample

Ribbon Header

This sample demonstrates displaying a ribbon in the header. The values of the Title column are displayed in the ribbon.

screenshot of the sample

Event Itinerary Header

This sample shows a customized header for the item form used in the “Event itinerary” list template.

screenshot of the sample

This format is intended for the Header Format of the form body in the Configure Layout panel. The body layout shown in the screenshot can be obtained by configuring sections within the Body panel (not included in this format).

Dashed Line Header

This sample displays the Title and Description values in the heading and decorates them with dashed lines. If the Description value is empty, it will be hidden.

dashed-line-header-text-left.json 

Blank header

Link

- Advertisement -

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CONNECT FOR MORE CONTENT

DO NOT MISS THOSE ARTICLES

Recent Comments