SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Twitter Timeline

This sample formats your SharePoint list view to look like Twitter. If you are using the Microsoft Flow Templates to track tweets in a SharePoint list, this is a great way to format your list so that it looks more like Twitter.

Get this format View on GitHub

Shared by April Dunham
Updated Aug 2, 2019

twitterFormat
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/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "flex-direction": "column",
      "align-items": "stretch",
      "box-sizing": "border-box",
      "border-width": "1px",
      "border-left-width": "1px",
      "border-style": "solid"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "center",
          "box-sizing": "border-box",
          "padding": "5px 5px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "1 0 300px"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "[$TwitterProfilePic]",
                      "title": "[$TweetBy]",
                      "target": "_blank"
                    },
                    "style": {
                      "border": "1px solid #808080",
                      "border-radius": "50%",
                      "left": "50%",
                      "width": "48px",
                      "height": "48px",
                      "margin-left": "15px",
                      "float": "left"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-black",
                      "target": "_blank",
                      "href": "[$ProfileLink]"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "margin": "8px 0",
                      "font-size": "1.2em",
                      "font-weigth": "bold",
                      "padding-left": "18px",
                      "padding-right": "10px"
                    },
                    "txtContent": "[$TweetByFullName]"
                  },
                  {
                    "elmType": "span",
                    "attributes": {
                      "class": "ms-font-xl"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "color": "gray",
                      "margin": "8px 0",
                      "font-size": "15px",
                      "font-family": "Helvetica"
                    },
                    "txtContent": "@"
                  },
                  {
                    "elmType": "span",
                    "attributes": {
                      "class": "ms-font-xl"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "color": "gray",
                      "margin": "8px 0",
                      "font-size": "15px",
                      "font-family": "Helvetica"
                    },
                    "txtContent": "[$TweetBy]"
                  },
                  {
                    "elmType": "span",
                    "attributes": {
                      "class": "ms-font-xl"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "color": "gray",
                      "margin": "8px 0",
                      "margin-left": "8px",
                      "font-size": "15px",
                      "font-family": "Helvetica"
                    },
                    "txtContent": "."
                  },
                  {
                    "elmType": "span",
                    "attributes": {
                      "class": "ms-font-xl"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "color": "gray",
                      "margin": "8px 0",
                      "margin-left": "8px",
                      "font-size": "15px",
                      "font-family": "Helvetica"
                    },
                    "txtContent": "[$TweetFormattedDate]"
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-font-m"
                    },
                    "style": {
                      "line-height": "1.5em",
                      "margin": "8px 0"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "margin-left": "85px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "txtContent": "[$FullTweet]"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "padding": "4px 88px",
          "line-height": "1.5em",
          "display": "flex",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "span",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "vertical-align": "bottom",
                  "margin": "0 9px 0 1px"
                },
                "attributes": {
                  "iconName": "BranchCompare"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$NumbRetweets]"
              },
              {
                "elmType": "a",
                "style": {
                  "vertical-align": "bottom",
                  "margin": "0 9px 0 20px"
                },
                "attributes": {
                  "iconName": "ShareiOS",
                  "target": "_blank",
                  "href": "[$LinkToTweet]"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiontwitter-timeline.json

From the contributor

How to use this sample

Summary

This sample formats your SharePoint list view to look like Twitter. If you are using the Microsoft Flow Templates to track tweets in a SharePoint list, this is a great way to format your list so that it looks more like Twitter. For more info on Flow Templates that take Tweets and add them to a SharePoint list check out this template: https://us.flow.microsoft.com/en-us/galleries/public/templates/e78571e5c70e4806a18eeacba5a897c8/save-tweets-that-include-a-specific-hashtag-to-a-sharepoint-list/

This sample features the following:

  • Responsive layout through flexbox
  • Shows the number of retweets
  • Share icon which takes you to the Tweet in Twitter so you can like, retweet, etc
  • The Person's name is a hyperlink to their Profile
  • Pulls in Twitter Profile Pictures

screenshot of the sample

Screen Capture of working Links

Twitter Format Screenshot

View requirements

Type Internal Name Required
Single line of text Title Yes
Single line of text TweetBy Yes
Single line of text TweetByFullName Yes
Date Time TweetDate Yes
Calculated Column TweetFormattedDate Yes
Hyperlink TwitterProfilePic Yes
Hyperlink ProfileLink Yes
Hyperlink LinkToTweet Yes
Multi Line of Text FullTweet Yes
Number NumbRetweets Yes

You need the TweetFormattedDate Calculated Column so that it only shows the current month name spelled out and date (not the year or time). The formula for this calculated column is below:

=TEXT(TweetDate,"mmm d")

Sample

Solution Author(s)
twitter-timeline.json April Dunnam

Version history

Version Date Comments
1.0 August 2, 2019 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.

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format