Custom View Formatting on Microsoft Lists to show Announcements

Announcements are a big part of a SharePoint landing page and there are a few options out there either using out-of-the-box webpart or you can build an SPFx webpart. A few days ago, I was looking for an example using List formatting and I couldn’t find it on the community repo. Therefore I decided to create this sample which should be available soon on the community Git Hub of List Formatting.

The first step is to create a list (you can put any name) and then add a few columns which we going to use to be easier to add new announcements going forward. The columns are:

  • Title -> Single line of text
  • Description -> Multi lines of text
  • RemoveDate -> Date and Time
  • TypeAnn -> Choice with the options: Error, Success, Info, Warning
  • ImgHover(optional) -> Picture

Now you need to go and format the current view and add the following JSON:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideColumnHeader": true,
    "hideSelection": true,
    "debugMode": false,
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "min-width": "15vw",
            "max-width": "19vw",
            "padding-bottom": "20px",
            "display": "=if([$RemoveDate] <= @now, 'none', '')"
        },
        "customCardProps": {
            "formatter": {
                "elmType": "div",
                "children": [{
                    "elmType": "img",
                    "attributes": {
                        "src": "[$ImgHover]"
                    }
                }],
                "style": {
                    "display": "=if([$ImgHover], '', 'none')",
                    "height": "200px",
                    "width": "200px",
                    "cursor": "pointer",
                    "font-size": "14px",
                    "padding": "14px",
                    "align-items": "stretch"
                }
            },
            "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"
                    }
                }
            ]
        }]
    }
}

When you click to Save the current JSON formatting, your view should transform into a similar look to the below image when you’re in the Microsoft Lists.

View when on Microsoft Lists

Because we saved, it as a View, we can now use that on a SharePoint page where the list was created. You just need to go to the page where you want to have the view, add the List Web Part to the page and then select the list you created and then pick the view you use to apply the JSON format.

Git Hub: List-Formatting/view-samples/announcements-format at master · pnp/List-Formatting · GitHub

10 Comments

  1. J said:

    This is really great and I can see a lot of uses for these. Thank you for sharing!
    One item to call out…the JSON needs updated to reference TitleAnn instead of TypeAnn or the instructions just above the JSON needs to be updated to TypeAnn instead of TypeAnn for the choices column. Other than that, it worked perfectly!

    December 3, 2021
    Reply
    • J said:

      My apologies, a correction of my own.

      …or the instructions just above the JSON needs to be updated to TypeAnn instead of TitleAnn* for the choices column.

      December 3, 2021
      Reply
      • David Ramalho said:

        Hey,

        Thank you for pointing that out. It’s now fixed.

        My best,
        David Ramalho

        December 10, 2021
        Reply
  2. Knowledgeable Information. Thanks for discussing with us,

    January 2, 2022
    Reply
  3. Rick DeFoe said:

    This is great. One question I have. When the Announcement list is empty you get a big box on the page where the webpart is with the message “Welcome to your new list. select the New button to get started”. I have had this situation before which has made using list formatting for certain webparts not usable. Has anyone come up with a solution to remove this message when the list is empty?
    Thanks
    Rick

    January 24, 2022
    Reply
    • David Ramalho said:

      Hey Rick,

      Yes, I did have that ask in the past by some clients and I will put that on a blog post maybe that way is easier.
      The short answer is that you need to do is create an item on the list and then on the list formatting make the item with that title to be display:none.

      Eg: Let’s assume, we have a yes/no called hideWelcome, create an item and put that value to true.

      "display": "=if([$hideWelcome], 'none', '')"

      My best,
      David Ramalho

      January 24, 2022
      Reply
      • Rick said:

        Thanks, that’s a simple enough fix. Hopefully Microsoft will come up with a more elegant way. Maybe an option in the webpart properties to “Hide when empty”, like on some of the other webparts they have.

        Rick

        January 26, 2022
        Reply
      • Ingeborg said:

        Hi David, great trick to get rid of the empty list message. I want to use this “display: none” conditional trick in a regular list view, without using rowformatter. How can I appy that? I’m a bit lost in the list view JSON.

        March 24, 2022
        Reply
  4. Nils said:

    Thank you for the solution. Is there a way to set a custom background colour for the list webpart itself. The background is what, but I want to add the webpart to colored section.

    March 22, 2022
    Reply
  5. Ryan said:

    This is great David, thank you! I have a question or two about this. First, for the image, you say to make the column type “picture”. Currently my SP online has a choice of “picture”, which I am using, and I hope this is the same. My biggest issue is that none of my images ever display when hovering, I just get an image icon. I’ve tried with jpg, png, gif, and all different sizes, but it always just displays the generic image icon. Any ideas? Is it possible to have the image display on the card without having to hover?

    April 5, 2022
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *