SharePoint Online 列表视图分组

Posted 2023-03-05 霖雨

　　前言

　　我们在使用SharePoint Online列表视图的时候，经常会被要求分组，这是一个非常常见的需求。

　　同时，也有用户说你们分组以后的效果，太单调了，能美化一下么？好吧，安排！

　　正文

　　1.先编辑一下列表视图，做一下分组，如下图：

　　2.我们看一下默认分组的效果，其实也还好，就是有些朴素了，如下图：

　　3.我们继续编辑列表格式，选择高级模式，如下图：

　　4.在高级模式下，输入我们需要美化的JSON，如下图：

　　5.看一下美化以后的分组吧，有图片、文字、背景，是不是比之前好看了很多，哈哈。

6.分享一下我们用到的JSON，大家有需要可以学习一下：

    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "groupProps": 
        "headerFormatter": 
            "elmType": "div",
            "style": 
                "flex-wrap": "wrap",
                "display": "flex",
                "box-sizing": "border-box",
                "padding": "4px 8px 5px 8px",
                "border-radius": "6px",
                "align-items": "center",
                "white-space": "nowrap",
                "overflow": "hidden",
                "margin": "1px 4px 4px 1px"
            ,
            "attributes": 
                "class": "=if(@group.fieldData == '分组一', 'sp-css-backgroundColor-blueBackground37',if (@group.fieldData == '分组二', 'sp-css-backgroundColor-successBackground50','sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary'))"
            ,
            "children": [
                    "elmType": "img",
                    "attributes": 
                        "src": "https://linyus.sharepoint.com/sites/DevelopSite/Shared%20Documents/group.jpg"
                    ,
                    "style": 
                        "max-width": "24px",
                        "max-height": "24px",
                        "margin-top": "2px",
                        "border-radius": "2px"
                    
                ,
                
                    "elmType": "div",
                    "children": [
                        "elmType": "span",
                        "style": 
                            "padding": "5px 5px 5px 5px",
                            "font-weight": "500"
                        ,
                        "txtContent": "@group.fieldData.displayValue"
                    ]
                ,
                
                    "elmType": "div",
                    "children": [
                        "elmType": "div",
                        "style": 
                            "display": "flex",
                            "flex-direction": "row",
                            "justify-content": "center"
                        ,
                        "children": [
                            "elmType": "div",
                            "txtContent": "='有 ' + @group.count + ' 条项目'",
                            "style": 
                                "font-weight": "500"
                            
                        ]
                    ]
                
            ]
        
    

View Code

　　结束语

　　一个非常有意思的开箱即用功能，满足客户小小的虚荣心，不错不错~你掌握了么？