前回の続き。今回はビューの書式設定を使ってなるべく綺麗に。
まずは完成画面から。
![](https://i2.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_05.png?resize=362%2C355&ssl=1)
- ステータスに応じた文字色変更
- 申し込みボタンの表示 ⇒受付終了している(定員になった)ものは非表示
- 申し込みボタン押下でフローの実行
デザインはさておき、機能としては結構満足してます。
では、ビューの書式設定のソースを置いておきます。これをコピペなしで書けた自分を褒めてあげたい。階層を意識すればかなり書きやすい。
日付の任意の表示形式変換(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の作り方を。
![](https://i1.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_06.png?resize=308%2C379&ssl=1)
「選択したアイテムの場合」とかいう何を言ってるかよくわからないトリガーで起動出来ました。出力情報を選択すればユーザに入力を促せるようです。この値を元に項目(申込情報)の作成を行います。
セミナー情報については、「申し込み」ボタンを押したアイテム自身のIDを設定するようにすれば自動的に選択した状態になりました。
では実行画面を。
「申し込み」ボタン押下時の画面です。初回実行時にアクセス許可を求められます。作成者以外でも実行できるんでしょうか。どうなんでしょう今興味ないので調べてません。何も考えずに続行を選択します。(左画面はちと古いです)
![](https://i0.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_01.png?ssl=1)
項目の入力画面が表示されます。上がちとイケてませんが目をつぶりましょう。複数行テキストか1行テキストか制御できるんでしょうか。入力したらフローの実行を押します。
![](https://i1.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_02.png?resize=153%2C307&ssl=1)
なんか出ました。
![](https://i2.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_03.png?ssl=1)
リサイクルマークみたいなの押すと結果が出るようです。
![](https://i2.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_04.png?ssl=1)
申し込み情報リストを確認すると登録出来ていました。
![](https://i1.wp.com/muc365.com/wp-content/uploads/2018/11/20181108_07.png?ssl=1)
いやー楽しい。こんなことやってると時間がすぐ流れる。
こういう画面カスタマイズ系の案件ありませんかねぇ。お仕事ください。お金ください。