Back to view formats
View formattingSharePoint Online

Announcements

This sample formats your view to look like a Announcements card with a similiar style to Viva Connection Cards when on a SharePoint Page. In Microsoft Lists it will also show an image that you can connect with the Announcement.

Announcements 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",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "min-width": "15vw",
      "max-width": "19vw",
      "padding-bottom": "20px",
      "display": "=if([$RemoveDate] <= @now, 'none', '')",
      "color":"black"
    },
    "customCardProps": {
      "formatter": {
        "elmType": "div",
        "style": {
          "display": "=if([$ImgHover], '', 'none')",
          "height": "200px",
          "width": "200px",
          "font-size": "14px",
          "padding": "14px",
          "align-items": "stretch"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=getThumbnailImage([$ImgHover], 200, 200)"
            },
            "style": {
              "max-width": "100%"
            }
          }
        ]
      },
      "openOnEvent": "hover",
      "directionalHint": "leftCenter",
      "isBeakVisible": false,
      "beakStyle": {
        "backgroundColor": "white"
      }
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "border-radius": "8px",
          "box-shadow": "#00000022 0px 1.6px 3.6px 0px, #00000022 0px 0.3px 0.9px 0px",
          "display": "flex",
          "font-size": "1rem",
          "background-color": "=if([$TypeAnn] == 'Error', '#fdeded', if([$TypeAnn] == 'Success', '#edf7ed', if([$TypeAnn] == 'Warning', '#fff4e5', '#e5f6fd')))",
          "line-height": "1.43",
          "padding": "6px 16px",
          "align-items": "center",
          "flex-flow": "wrap"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "=if([$TypeAnn] == 'Error', 'ErrorBadge', if([$TypeAnn] == 'Success', 'Completed', if([$TypeAnn] == 'Warning', 'warning', 'info')))"
            },
            "style": {
              "padding-right": "10px",
              "font-weight": "700",
              "color": "=if([$TypeAnn] == 'Error', '#ef5350', if([$TypeAnn] == 'Success', '#4caf50', if([$TypeAnn] == 'Warning', '#ff9800', '#03a9f4')))"
            }
          },
          {
            "txtContent": "[$Title]",
            "elmType": "div",
            "style": {
              "font-weight": "700",
              "margin-bottom": "0.35em"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Description]",
            "style": {
              "padding-left": "26px",
              "flex-direction": "column"
            }
          }
        ]
      }
    ]
  }
}

From the contributor

How to use this sample

Summary

This sample formats your view to look like a Announcements card with a similiar style to Viva Connection Cards when on a SharePoint Page. In Microsoft Lists it will also show an image that you can connect with the Announcement.

screenshot of the sample

screenshot of the sample on a Modern page

View requirements

Column Name Type Internal Column Name
Title Single Line Text Title
Description Single Line Text Description
TypeAnn Choice (Error, Success, Info, Warning) TypeAnn
RemoveDate Date and Time RemoveDate
(optional) ImgHover Image ImgHover

Sample

Solution Author(s)
announcements.json David Ramalho

Version history

Version Date Comments
1.0 December 1, 2021 Initial release
1.1 September 17, 2023 The new Image column can now be created, and the use of the Image column is now common when using images. Therefore, changed the type of ImgHover column from Picture column to Image column.
1.2 November 1, 2024 Fixed image path and black text for dark theme.

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.