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

The post Custom View Formatting on Microsoft Lists to show Announcements appeared first on SharePoint Tricks.

Original Post https://sharepoint-tricks.com/custom-view-formatting-on-microsoft-lists-to-show-announcements/