View formattingSharePoint Online

Whiteboard sticky notes

This sample creates a whiteboard-styled sticky notes that displays information. The sticky notes have two sides, so when clicked they show another piece of information.

Get this format View on GitHub

Shared by Anand Ragav
Updated Nov 4, 2022

Sample preview · View original animation

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "220",
  "width": 200,
  "hideSelection": false,
  "fillHorizontally": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card sp-card-borderHighlight"
    },
    "style": {
      "width": "200px",
      "height": "220px",
      "border-radius": "5px",
      "background-color": "[$Color]",
      "white-space": "normal",
      "padding": "4px 4px 4px 4px",
      "font-size": "13px",
      "flex-direction": "column",
      "justify-content": "center"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-css-borderColor-neutralLight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "justify-content": "center",
              "flex-direction": "row"
            },
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "white-space": "normal",
                  "padding": "4px 4px 4px 4px",
                  "font-size": "=if(@isSelected==true, , '16px', '18px')",
                  "font-weight": "500",
                  "color": "black",
                  "justify-content": "center",
                  "flex-direction": "column",
                  "align-items": "center"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if(@isSelected==true, '[$About]', if([$Title]!='Empty', '[$Title]', ''))"
              },
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "a",
                    "attributes": {
                      "title": "Learn more",
                      "href": "[$Link]",
                      "target": "=if([$Link] == '', '', '_blank')"
                    },
                    "style": {
                      "padding": "4px",
                      "color": "#2952FC",
                      "pointer-events": "=if([$Link] == '', 'none', 'auto')",
                      "text-decoration": "=if([$Link] == '', 'none', 'auto')",
                      "display": "=if(@isSelected==true && [$Link] != '',  'inline', 'none')"
                    },
                    "txtContent": "[$Link.desc]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "220",
  "width": 200,
  "hideSelection": false,
  "fillHorizontally": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card sp-card-borderHighlight"
    },
    "style": {
      "width": "200px",
      "height": "220px",
      "border-radius": "5px",
      "background-color": "[$Color]",
      "white-space": "normal",
      "padding": "4px 4px 4px 4px",
      "font-size": "13px",
      "flex-direction": "column",
      "justify-content": "center"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-css-borderColor-neutralLight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "justify-content": "center",
              "flex-direction": "row"
            },
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "white-space": "normal",
                  "padding": "4px 4px 4px 4px",
                  "font-size": "=if(@isSelected==true, , '16px', '18px')",
                  "font-weight": "500",
                  "color": "black",
                  "justify-content": "center",
                  "flex-direction": "column",
                  "align-items": "center"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if(@isSelected==true, '[$About]', if([$Title]!='Empty', '[$Title]', ''))"
              },
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "a",
                    "attributes": {
                      "title": "Learn more",
                      "href": "[$Link]",
                      "target": "=if([$Link] == '', '', '_blank')"
                    },
                    "style": {
                      "padding": "4px",
                      "color": "#2952FC",
                      "pointer-events": "=if([$Link] == '', 'none', 'auto')",
                      "text-decoration": "=if([$Link] == '', 'none', 'auto')",
                      "display": "=if(@isSelected==true && [$Link] != '',  'inline', 'none')"
                    },
                    "txtContent": "[$Link.desc]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample creates a whiteboard-styled sticky notes that displays information. The sticky notes have two sides, so when clicked they show another piece of information.

screenshot of the sample

View requirements

Type	Internal Name	Required
Single line of text	Title	Yes
Multi lines of text	About	Yes
Single line of text	Color	Yes
Hyperlink	Link	No

You need to use the Gallery View.
Color should be set to the HTML color code or color name. Example of set value, #9CAAF1, pink.

Sample

Solution	Author(s)
whiteboard-sticky-notes.json	Anand Ragav

Version history

Version	Date	Comments
1.0	November 04, 2022	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

None

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Course Training Tile Cards

Picture Link Tiles - Collapsible

Icon Link Tiles