SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Diet Plan Card Formatter

This SharePoint JSON view formatting sample transforms your list items into rich, visually appealing diet plan cards.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated May 3, 2025

Diet Plan Card Formatter formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "hide": true
      }
    ]
  },
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "420px",
      "overflow": "hidden",
      "display": "flex",
      "flex-direction": "column",
      "background-color": "[$BackgroundColor]",
      "box-shadow": "0 4px 12px rgba(0,0,0,0.2)",
      "color": "white",
      "margin": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "relative",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$BannerImageUrl]",
              "alt": "Recipe Image"
            },
            "style": {
              "width": "100%"
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "bottom": "8px",
              "width": "93%",
              "display": "flex",
              "align-items": "center",
              "gap": "8px",
              "padding": "6px 10px",
              "background-color": "rgba(0, 0, 0, 0.6)",
              "border-radius": "8px"
            },
            "children": [
              {
                "elmType": "img",
                "style": {
                  "width": "42px",
                  "height": "42px",
                  "border-radius": "50%",
                  "object-fit": "cover"
                },
                "attributes": {
                  "src": "=getUserImage([$Author.email],'L')"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "color": "#e2d8e8",
                  "display": "flex",
                  "flex-direction": "column",
                  "padding-left": "5px"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Author.title]",
                    "style": {
                      "font-weight": "bold"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Author.jobTitle]",
                    "style": {
                      "color": "#e2d8e8",
                      "font-size": "10px"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "width": "100%",
          "padding-left": "20px",
          "margin-bottom": "16px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-size": "16px",
              "font-weight": "bold",
              "color": "#e2d8e8",
              "margin-bottom": "8px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Benefits]",
            "style": {
              "font-size": "14px",
              "color": "#e2d8e8"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "space-between",
          "gap": "8px",
          "margin-bottom": "10px",
          "width": "96%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$DietType]",
                "style": {
                  "font-size": "13px",
                  "color": "[$ForegroundColor]"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Diet Type",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Duration]",
                "style": {
                  "font-size": "13px",
                  "color": "#ffffff"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Duration",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Calories]",
                "style": {
                  "font-size": "13px",
                  "color": "#ffffff"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Calories",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "padding-left": "20px",
          "margin-bottom": "20px"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$PlanLink]",
              "target": "_blank"
            },
            "style": {
              "display": "inline-block",
              "background-color": "#0078D4",
              "padding": "10px 16px",
              "color": "white",
              "text-decoration": "none",
              "border-radius": "20px",
              "font-weight": "bold",
              "text-align": "center",
              "transition": "background-color 0.3s ease"
            },
            "hoverStyle": {
              "background-color": "#005A8C"
            },
            "txtContent": "Start Plan"
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiondiet-plan-card.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /rowFormatter/children/3/children/0 must NOT have additional properties

From the contributor

How to use this sample

Summary

This SharePoint JSON view formatting sample transforms your list items into rich, visually appealing diet plan cards. Each card highlights a meal or plan with a banner image, author details, key nutritional values, and a prominent call-to-action button. This layout is ideal for health & wellness portals, employee fitness programs, or meal planning lists.

screenshot of the sample screenshot of the sample

View requirements

Column Name Type Description
Title Single line of text Name of the meal or plan
BannerImageUrl Single line of text URL to the header image
Author Person or Group Creator of the plan
Benefits Multiple lines of text Key benefits of the plan
DietType Choice Type of diet (e.g., Keto, Vegan)
Duration Number Duration in days or weeks
Calories Number Caloric value
PlanLink Hyperlink or Picture Link to full plan details
BackgroundColor Single line of text Background color for the card
ButtonBackgroundColor Single line of text Background color for the metric buttons
ForegroundColor Single line of text Text/icon color inside the metric buttons

A PowerShell Script (Create List.ps1) has been provided in the assets folder to provision the list for you.

Note: This script uses PnP PowerShell and requires an environment ready for PnP PowerShell.

Sample

Solution Author(s)
diet-plan-card.json Sudeep Ghatak

Version history

Version Date Comments
1.0 May 03, 2025 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

  • This sample also includes command bar customization, and the "Add new item" button will be hidden.

Keep exploring

More formats like this

Hide All Buttons on Command Bar

This sample demonstrates hiding all buttons on the command bar.

Explore format

Annual Performance Review

This sample demonstrates how to change row data to column format for annual performance review form.

Explore format

Display Edit in Grid View Button in the Command Bar

In the Document Library, the [Edit in grid view] button is hidden under the [...] button. This sample demonstrates displaying the [Edit in grid view] button on the command bar.

Explore format