View formattingSharePoint Online

Timeline

This sample formats your SharePoint list view to look like a timeline.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Nov 17, 2020

Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

2 definitions

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/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "absolute",
      "left": "= @rowIndex * 300 + 'px'",
      "display": "flex",
      "flex-direction": "column",
      "width": "300px",
      "height": "200px",
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "[$Title]",
        "style": {
          "display": "flex",
          "width": "90%",
          "height": "60%",
          "align-items": "center",
          "justify-content": "center",
          "font-size": "20px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "width": "100%",
          "height": "40%",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "135px"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "30px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "customCardProps": {
              "directionalHint": "bottomCenter",
              "isBeakVisible": true,
              "openOnEvent": "click",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "200px",
                  "width": "450px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "height": "20%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "display": "flex",
                      "align-items": "center",
                      "padding-left": "40px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]",
                    "style": {
                      "height": "80%",
                      "width": "90%",
                      "padding-top": "10px"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "135px"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "absolute",
      "left": "= @rowIndex * 300 + 'px'",
      "display": "flex",
      "flex-direction": "column",
      "width": "300px",
      "height": "200px",
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "[$Title]",
        "style": {
          "display": "flex",
          "width": "90%",
          "height": "60%",
          "align-items": "center",
          "justify-content": "center",
          "font-size": "20px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "width": "100%",
          "height": "40%",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "135px"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "30px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "customCardProps": {
              "directionalHint": "bottomCenter",
              "isBeakVisible": true,
              "openOnEvent": "click",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "200px",
                  "width": "450px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "height": "20%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "display": "flex",
                      "align-items": "center",
                      "padding-left": "40px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]",
                    "style": {
                      "height": "80%",
                      "width": "90%",
                      "padding-top": "10px"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "135px"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "height": "150px",
      "width": "400px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "width": "50%",
          "text-align": "center"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
          "height": "100%",
          "width": "50%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "30px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "customCardProps": {
              "directionalHint": "rightCenter",
              "isBeakVisible": true,
              "openOnEvent": "click",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "200px",
                  "width": "450px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "height": "20%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "display": "flex",
                      "align-items": "center",
                      "padding-left": "40px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]",
                    "style": {
                      "height": "80%",
                      "width": "90%",
                      "padding-top": "10px"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "height": "150px",
      "width": "400px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "width": "50%",
          "text-align": "center"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
          "height": "100%",
          "width": "50%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "30px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "customCardProps": {
              "directionalHint": "rightCenter",
              "isBeakVisible": true,
              "openOnEvent": "click",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "200px",
                  "width": "450px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "height": "20%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "display": "flex",
                      "align-items": "center",
                      "padding-left": "40px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]",
                    "style": {
                      "height": "80%",
                      "width": "90%",
                      "padding-top": "10px"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          }
        ]
      }
    ]
  }
}

.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 formats your SharePoint list view to look like a timeline.

screenshot of the sample

timeline-horizontal.json screenshot of the sample

View requirements

Column Name	Type
Title	Single Line Text
Description	Multi Line Text

Sample

Solution	Author(s)
timeline.json	Tetsuya Kawahara
timeline-horizontal.json	Tetsuya Kawahara

Version history

Version	Date	Comments
1.0	October 17, 2020	Initial release
2.0	November 17, 2020	Added horizontal-timeline-format

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.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

Key Dates Timeline Checklist

Image Grid

Travel Tweets Board