Blog链接:https://blog.51cto.com/13969817

Modern Site 有一个内置的天气Web Part,但不幸的是,它不允许值显示黑白天气,这里提供一个解决方案,类似于Windows天气贴图。
解决方案:构建自定义SharePoint List,自定义视图格式,Power Automate和Web Part。
首先,我们来创建SharePoint List包含以下column,用来承载每个location的温度。
• Title:城市名称
• Condition:当前条件
• Temperature:温度
• Today:用于存储当天的最高和最低温度和条件
• Tomorrow:用于存储第二天的最高和最低温度
• Background:背景图

创建list后,转到List Setting页面,并编辑All Items视图,使ID列可见,这是Power Automation中flow所必须的。
填写城市和背景基本信息,如下图所示:
image.png

其次,我们来创建一个Flow来获取每个城市的天气,以Beijing为例,操作步骤如下所示:

  1. 打开Power Automate,然后新建Scheduled Cloud Flow,如下所示:
    image.png

  2. 为Flow提供一个名称Beijing,定义开始时间并定义一个小时的重复事件,然后点击“Create”,如下所示:
    image.png

  3. 为MSN Weather填加所有可用的actions:Get Current Weather、Get Forecast for today,Get Forecast for tomorrow,如下所示:
    image.png
  4. 创建6个变量(Variable)来存储来自MSN天气动作的信息:Today High、Today Low、Today Conditions、Tomorrow High、Tomorrow Low、Tomorrow Conditions,如下所示:
    image.png
    image.png

  5. 添加Update Item,定义存储Weather List的Site Collection地址,List名称,以及ID等信息,如下图所示:
    说明:对于今天和明天,使用concat公式连接today和tomorrow的值,如下面的示例所示:
    concat(variables('todayHigh'),'º/',variables('todayLow'),'º ',variables('todayConditions'))

image.png

  1. 点击“保存”,其他Shenzhen和Shanghai按照相同的步骤创建flow即可。

最后,格式化SharePoint List View,具体操作如下:

  1. 针对天气的List,新建View,选择“gallery”,并勾选“发布成Public View”,如下所示:
    image.png
  2. 展开View设置,点击“Format Current View”,并点击底部的“Advanced Mode”,复制如下JSON:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "hideSelection": true,
      "width": "250",
      "height": "250",
      "formatter": {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "inline-block",
              "min-width": "250px",
              "min-height": "250px",
              "margin-right": "10px",
              "box-shadow": "2px 2px 4px darkgrey"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "[$Background]"
                },
                "style": {
                  "height": "250px",
                  "max-width": "250px"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "margin-top": "10px",
                  "height": "250px",
                  "width": "250px",
                  "bottom": "0",
                  "padding-top": "10px",
                  "background-color": "rgba(0,0,0,0.5)"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "text-align": "left"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "color": "#fff",
                          "margin-top": "10px",
                          "margin-left": "10px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "55px",
                          "line-height": "55px"
                        },
                        "txtContent": "=[$Temperature]+'º'"
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Title]",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "margin-top": "10px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "25px",
                          "line-height": "25px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Condition]",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "20px",
                          "line-height": "20px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "Today",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "margin-top": "20px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "14px",
                          "line-height": "14px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Today]",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "14px",
                          "line-height": "14px",
                          "margin-top": "5px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "Tomorrow",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "margin-top": "20px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "14px",
                          "line-height": "14px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Tomorrow]",
                        "style": {
                          "color": "#fff",
                          "margin-left": "10px",
                          "width": "250px",
                          "top": "0",
                          "font-size": "14px",
                          "line-height": "14px",
                          "margin-top": "5px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  3. 单击Preview以确保正确应用格式,然后单击Save
    image.png

若有需要,也可以在Site Page页面,添加该List的Web Part,使其呈现更加明显,便于用户访问。

谢谢大家的阅读。