MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

【Microsoft Lists】リストフォームに波を表示してカッコよくしてみた🌊

f:id:tecchan365:20210907115914p:plain

リストフォームの見た目をカッコよくするために、上図のようにリストフォームのヘッダーとフッターに波を表示してみました。

以下に書式設定の JSON を掲載しておきますので、興味があれば設定してみてください。
設定方法は、こちらの Microsoft Docs を参考ください。

ヘッダーの書式設定

f:id:tecchan365:20210907120020p:plain

{
    "elmType": "div",
    "style": {
        "width": "100%"
    },
    "children": [
        {
            "elmType": "svg",
            "style": {
                "fill": "currentColor"
            },
            "attributes": {
                "viewBox": "0 0 10 2",
                "class": "ms-fontColor-themePrimary"
            },
            "children": [
                {
                    "elmType": "path",
                    "attributes": {
                        "d": "M0,1 C4,3 6,-1 10,1 L10,0 L0,0 Z"
                    }
                }
            ]
        }
    ]
}

フッターの書式設定

f:id:tecchan365:20210907120114p:plain

{
    "elmType": "div",
    "style": {
        "width": "100%"
    },
    "children": [
        {
            "elmType": "svg",
            "style": {
                "fill": "currentColor"
            },
            "attributes": {
                "viewBox": "0 0 10 2",
                "class": "ms-fontColor-themePrimary"
            },
            "children": [
                {
                    "elmType": "path",
                    "attributes": {
                        "d": "M0,1 C4,3 7,-1 10,1 L10,3 L0,3 Z"
                    }
                }
            ]
        }
    ]
}

謝辞(Thanks)

I got the idea for this formatting from the following Twitter reply. Thank you very much André Lage 😆🙏

At first I tried my best to create a wave in the view formatting, but I ended up with something I didn't understand😅

f:id:tecchan365:20210906071016p:plain