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
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!
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.
Hey,
Thank you for pointing that out. It’s now fixed.
My best,
David Ramalho
Knowledgeable Information. Thanks for discussing with us,
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
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
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
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.
Hi David, Thanks for sharing. It is a greate trik to apply to the list view. But did you get a chance to show just hide the empty list message of “Welcome to your new list …”?
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.
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?
Hi ryan
I have the exact same issue. let me know if you find a solution.
thanks
hi David,
Thanks for sharing your knowledge.
I applied this json code and everything worked fine, except when I hover over the image I don’t see the image that I uploaded. What I see is a little thumbnail, something you see on the internet when the image doesn’t load. is there a specific image format or size that this column supports?
Please advice.
Hi David,
Thank you so much for sharing this with us! I am working on using it for my site and would like to add different types of announcements, such as calendar events. I added this to the json below:
if([$TypeAnn] == ‘Event’, ‘Calendar’))))”
However, that just makes the icon disappear. Is TypeAnn limited to just the four options you’ve included, or is there another way to add announcement types that I’m missing?
I’m having a similar problem changing the colors. If I try to change the hex code for the backgrounds to another color, they just come out white.
I’m new to json, so I appreciate any help I can get. Thanks so much!