SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Contact Cards

This is a sample of a complex format that customizes the entire display of a row. The goal is to illustrate several key principals including:

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 22, 2018

Contact Cards 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/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "16px",
      "max-width": "930px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$JobTitle]",
                    "style": {
                      "display": "=if([$JobTitle] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Company]",
                    "style": {
                      "display": "=if([$Company] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "row",
                  "flex-wrap": "wrap",
                  "align-items": "flex-end"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "display": "=if([$Email] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover",
                      "href": "='mailto:' + [$Email] + '?body=Dear ' + [$Title] + ',\r\n'"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Mail",
                          "class": "ms-fontColor-themePrimary"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Email]"
                      }
                    ]
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "display": "=if([$Phone] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Phone",
                          "class": "ms-fontColor-themePrimary"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Phone]"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "310px",
          "min-width": "205px",
          "margin-top": "8px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "href": "='https://www.google.com/maps/place/' + if([$StreetAddress] == '', '', [$StreetAddress] + ',') + if([$City] == '', '', [$City] + ',') + if([$State] == '', '', [$State]) + if([$ZipCode] == '', '', ' ' + [$ZipCode]) + '/'",
                  "target": "_blank"
                },
                "style": {
                  "height": "100%"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "='https://maps.googleapis.com/maps/api/staticmap?center=' + if([$StreetAddress] == '', '', [$StreetAddress] + ',') + if([$City] == '', '', [$City] + ',') + if([$State] == '', '', [$State]) + if([$ZipCode] == '', '', ' ' + [$ZipCode]) + '&size=200x60&key=AIzaSyDKNauYNcs4ZOq7sQMWYDyz1x82l00ek34'"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$StreetAddress]",
                "style": {
                  "display": "=if([$StreetAddress] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$City] == '', '', [$City] + ', ') + if([$State] == '', '', [$State] + ' ') + if([$ZipCode] == '', '', [$ZipCode])",
                "style": {
                  "display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "txtContent": "No address provided",
                "style": {
                  "display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'block', 'none')"
                },
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "max-width": "310px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "Notes:"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Notes] == '', 'none', 'block')",
                  "padding-left": "8px"
                },
                "txtContent": "[$Notes]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Notes] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No notes entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "share"
                },
                "attributes": {
                  "title": "Share",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Share"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "delete"
                },
                "attributes": {
                  "title": "Delete",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Delete"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "attributes": {
                  "title": "Edit",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Edit"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "title": "See more details",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "ContactInfo"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitioncontact-cards.json

From the contributor

How to use this sample

Summary

This is a sample of a complex format that customizes the entire display of a row. The goal is to illustrate several key principals including:

  • Responsive layout through flexbox
  • Conditionally showing elements based on fields having values
  • Providing placeholders when fields are blank
  • Row Actions
    • Opening the information panel (defaultClick)
    • Editing the list item (editProps)
    • Deleting the list item (delete)
    • Sharing the list item (share)
  • Use of theme color classes to ensure the format displays as intended regardless of theme (light, dark, custom, etc.)
  • Use of font size and weight classes to match O365 styles
  • Integration of maps
  • Disabling of selection (hideSelection)
  • Removal of the list header (hideListHeader)

screenshot of the sample

Map API key

The key provided in the template (the ugly text after &key) should be changed to your own FREE API Key. This will ensure you don't receive errors from over usage of a shared key. Getting a key takes 2 minutes and is FREE: Get API Key

Note: Failure to switch the key to your own key leaves you open to future issues as other users use this key or if this key were to be revoked.

Map preview fails to appear?

Most likely you need to enable the HTML Field Security on your site. For details, see: Allow or restrict the ability to embed content on SharePoint pages

View requirements

All fields below should be part of the view, but only those marked with Required need to have values:

Type Internal Name Required
Single line of text Title Yes
Single line of text JobTitle
Single line of text Company
Single line of text Email
Single line of text Phone
Single line of text StreetAddress
Single line of text City
Single line of text State
Single line of text ZipCode
Hyperlink Picture
Multiple lines of text Notes

Sample

Solution Author(s)
contact-cards.json Chris Kent

Version history

Version Date Comments
1.0 August 22, 2018 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 format takes advantage of CSS Flexbox to help make it responsive:

Responsive Screenshot

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