SharePointで定員制御機能ありの申込機能を作ってみた(4)

前回の続き。今回はビューの書式設定を使ってなるべく綺麗に。

まずは完成画面から。

ステータスに応じた文字色変更
申し込みボタンの表示　⇒受付終了している(定員になった)ものは非表示
申し込みボタン押下でフローの実行

デザインはさておき、機能としては結構満足してます。

では、ビューの書式設定のソースを置いておきます。これをコピペなしで書けた自分を褒めてあげたい。階層を意識すればかなり書きやすい。
日付の任意の表示形式変換(yyyy/mm/ddとか)は出来なくて、決まってるパターンから選ぶしかないっぽい（日付＋時間、日付のみ、時間のみ）。
集計列も表示出来なかったが、これは私の書き方の問題かもしれない。
ポイントはなんと言ってもフローの実行部でしょうか。MS公式の解説があるので難しいことはないです。
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting#create-a-button-to-launch-a-flow

ボタンの表示制御について、個人的には”children”直下に”operator”: “?”、で要素の出し分けをしたかったのですがうまくいかず…結局styleのdisplay値分岐で逃げることに。

{
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "border": "1px gray solid",
      "width": "400px",
      "display": "block",
      "margin": "10px",
      "padding": "15px",
      "font-size": "1.4em"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "txtContent": {
              "operator": "+",
              "operands": [
                "◆",
                "[$Title]"
              ]
            }
          },
          {
            "elmType": "span",
            "txtContent": {
              "operator": "+",
              "operands": [
                "【",
                "[$_x30b9__x30c6__x30fc__x30bf__x30]",
                "】"
              ]
            },
            "style": {
              "color": "=if([$_x30b9__x30c6__x30fc__x30bf__x30] == '受付中', 'blue', if([$_x30b9__x30c6__x30fc__x30bf__x30] == '受付終了', 'gray', 'red'))"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "txtContent": {
              "operator": "+",
              "operands": [
                "日時：",
                "=toLocaleString([$_x958b__x50ac__x65e5__x6642_])"
              ]
            },
            "style": {
              "margin-left": "20px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "txtContent": {
              "operator": "+",
              "operands": [
                "申込み状況：",
                "[$_x73fe__x5728__x306e__x7533__x8f]",
                "名 / ",
                "[$_x5b9a__x54e1_]",
                "名"
              ]
            },
            "style": {
              "margin-left": "20px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "button",
            "txtContent": "申し込み",
            "customRowAction": {
              "action": "executeFlow",
              "actionParams": "{\"id\": \"10aafdf3-83a7-4f70-aaa0-7a5b9d8b8d9f\"}"
            },
            "style": {
              "margin-left": "20px",
              "display": "=if([$_x30b9__x30c6__x30fc__x30bf__x30] == '受付終了', 'none', 'block')"
            }
          }
        ]
      }
    ]
  }
}

次にFlowの作り方を。

「選択したアイテムの場合」とかいう何を言ってるかよくわからないトリガーで起動出来ました。出力情報を選択すればユーザに入力を促せるようです。この値を元に項目（申込情報）の作成を行います。
セミナー情報については、「申し込み」ボタンを押したアイテム自身のIDを設定するようにすれば自動的に選択した状態になりました。

では実行画面を。

「申し込み」ボタン押下時の画面です。初回実行時にアクセス許可を求められます。作成者以外でも実行できるんでしょうか。どうなんでしょう今興味ないので調べてません。何も考えずに続行を選択します。(左画面はちと古いです）