SharePoint Online의 현대 UI로 시스템 링크 만들기

하고 싶은 일


  • SharePoint Online 표준 기능을 사용하여 각 시스템에 아이콘 링크를 만듭니다
  • SharePoint Framework는 어렵기 때문에 사용하지 않습니다
  • 외관 설정으로 색이 바뀌고 싶다

  • 목표 이미지





    하는 방법


  • 목록 만들기
  • 열 설정하기

  • Title 열은 링크의 제목을 설정합니다. ex. 메일, 채팅
  • Icon 열은 UI Fabric의 이름을 설정. ex.Mail
  • NewTab 열이 다른 탭에서 열릴지 여부를 설정합니다.

  • 뷰 서식 지정

  • 현재 뷰의 서식에 다음 JSON 복사
    {
      "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
      "hideColumnHeader": "true",
      "hideSelection": true,
      "tileProps": {
        "hideSelection": true,
        "width": "120",
        "height": "120",
        "formatter": {
          "elmType": "a",
          "attributes": {
            "href": "[$URL]",
            "target": "=if([$NewTab] == true, '_blank', '')"
          },
          "children": [
            {
              "elmType": "div",
              "attributes": {
                "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
              },
              "style": {
                "display": "flex",
                "flex-wrap": "wrap",
                "min-width": "120px",
                "min-height": "120px",
                "margin-right": "10px",
                "margin-top": "10px",
                "box-shadow": "2px 2px 4px darkgrey"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "text-align": "center",
                    "margin": "auto"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "attributes": {
                        "iconName": "[$Icon]",
                        "class": "ms-fontSize-su"
                      }
                    },
                    {
                      "elmType": "div",
                      "attributes": {
                        "class": "sp-row-title ms-fontSize-s"
                      },
                      "txtContent": "[$Title]"
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "rowFormatter": {
        "elmType": "a",
        "attributes": {
          "href": "[$URL]",
          "target": "=if([$NewTab] == true, '_blank', '')"
        },
        "style": {
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
            },
            "style": {
              "display": "flex",
              "flex-wrap": "wrap",
              "width": "100%",
              "min-height": "150px",
              "margin-right": "10px",
              "margin-top": "10px",
              "box-shadow": "2px 2px 4px darkgrey"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "text-align": "center",
                  "margin": "auto"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "iconName": "[$Icon]",
                      "class": "ms-fontSize-su"
                    }
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-row-titleA "
                    },
                    "txtContent": "[$Title]"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
    
  • 아이템을 등록해 본다
  • 아이콘 이름은 Office UI Fabric Icons 에서 검색

  • 좋은 웹페이지 즐겨찾기