魁!! ITブログ

比較的素人向けです。「扇風機、新しいの買っちゃおっかなっ」くらいのノリで「これからちょっと勉強してみようかなっ」くらいの方々向けです。玄人には無駄な時間を費やさせてしまうかもしれません。ご了承ください。

【No.4-MicrosoftTeamsとPowerAppsとPowerAutomateを使ってスケジュールのステータス変更】を実装してみた。その4だよん。

おつかれっすー

あーどもどもおつかれっすぅー

 

なんて会話が社内のあちらこちらで交わされるようになりましたね。
陽気な方々は。

私は基本的に全部人に合わせて生きているので、

そんなパーリーピーポーにも

「おぃっすー」

的な感じで答えるんですが、

内心「何この人こわい」

なんて思いながら返答しています。

 

アキヒサです。

どうもです。

 

 

そんなアキヒサですが、

いずれは北海道に移住したいと考えています。

理由?

涼しいから。

あーでも逆なのかなー。

沖縄行った方が、

日常が暑いから少しの涼しさでも

めっちゃ涼しく感じたりするのかなー。

 

なんで唐突にそんな事言い始めたかって?

はてなブログさんが「今週のお題」とか出してくるからさあ。

答えてやろうじゃあねぇかと思ってよぉ。

 

f:id:NagoyaITAdmin:20210707111537p:plain

はてなブログさんが毎回出してくる「今週のお題」。住みたい場所?

 

おら答えてやったぞゴルァ。

何かしてくれるんだろうなぁ!

えぇ?おい!

はてなブログさんの社内には、

毎週このお題だけを考えるだけの仕事をする人がいるんだろうか。

やりたい。

その仕事やりたい。

 

そうだね、僕なら

 今週のお題:好きなインターネットブラウザは?

だね。

第一回目は。

どうだい?

盛り上がりそうだろう。

 

第二回目は

 今週のお題:100兆円あったら?

 だな。

とてつもねぇ発想出してくるやつが出てくるだろうから、

興味津々よ。

「全部貯金」ってヤツが出てきたら、

ぶん殴ってやる!

 

まわせまわせ!

経済を!

グルグルとぉ!

 

え?僕?

僕かい?

僕はねぇ、全部カレーパンにしようかな。

100兆円分。

ジャ〇おじさんも困り果てるだろうね。

カレーパ〇マンの中身を補充できないくらい

カレーも買い占めてやるぜ。

 

f:id:NagoyaITAdmin:20210707130634p:plain

ジャ「ごめんよぉカバ〇君。カレーパンだけは無いんだぁ。
   カレーパンは、アキヒサさんのところでもらってきておくれ」

カバ「使えねぇオジサンだな!」

 

みたいな事になったらどうしよう。

まあ、いいか。

メインのアンパ〇マンでさえ、

愛と勇気だけが友達だって言ってるくらいだし。

実態がないから、実質ゼロじゃん。

アンパ〇マンのお友達ゼロ。

友達ゼロってことは、

カレーパ〇マンとも、お友達レベルには到達してないってことだろう?

 

じゃあ別にカレーパ〇マンが復帰できなくなっても、

アニメは続けていけそうだね。

頑張れ。

 

じゃ、いこう。

本題。

~~~ 本題 ~~~

※注※
本内容は私個人の意見や見解等であり、大変恐縮ですが記載内容に関して
誤りがある可能性がございます。
そのような場合、御連絡いただけましたら早急に訂正いたしますので、
よろしくお願いいたします。

 

その1 ー 前々々世。作りたいシステムを発表。

その2 ー 前々回。PowerAppsのロジックの作りこみは別にするかもしれないけど
         とりあえず画面周りをそれっぽくする。

         ここまではノーコードで出来たね!

その3 ー 前回。PowerAutomateでの色々。

         PowerAppsと、PowerAutomateでの色々。
          ここが下手すると2週にわたるかもしれないね。
          軽く考えてみても条件分岐とかややこしそう。

         このあたりが一番のハード回。ローコードが必要な部分。

その4 ー 今回。前回の続きだよ!

         ログインユーザーのスケジュール取得までは前回でやったから、

         管理者用画面と、実際にスケジュール情報を更新するやつ。

         今回で終わるといいね!
         次回まで続いたらゴメン!

その5 ー 次回。なんだろう。打ち上げパーリーでもしようか。

            各自、つけてみそかけてみそを持参の上、

           みそパしよ。みそパ。

 

さて、まずは前回までの振り返り。

前回も記載した実装手順はコレなんだが

1.ログインユーザー情報取得
 (PowerAppsの機能を使って、ログインしてるユーザーの情報をゲット)

 1-1.PowerAppsのホーム画面でユーザー情報を取得

 1-2.取得したユーザー情報からユーザー名(表示名)を表示させる。

2.スケジュールの取得

  (PowerAppsのホーム画面のボタンで、PowerAutomateを起動。
   ログインユーザーの24時間以内のスケジュールを3件ゲットして、
   またPowerAppsちゃんにデータを連携してあげる。)

 2-1.PowerAutomateを作成

 2-2.PowerAppsからPowerAutomateに渡す情報を決める

 2-3.PowerAutomateをガッツリ作りこむ

 2-4.PowerAppsのボタンにPowerAutomateを起動する様にしてあげる

 2-5.PowerAutomateから受け取った情報を、そのままだと使いづらいから
     色々加工して、PowerAppsのビュー画面に表示させる。

3.管理者用画面

 (管理者画面を加工して、凡例の色を指定出来る様にする)

 3-1.DataVerseに新しいテーブルを作る

 3-2.Screen1の画面にDataVerseの各フィールドの値を指定する

4.ビュー画面

 (DataVerseにある凡例の情報をギャラリーに表示させて、

  2-3のPowerAutomateでとってきた情報をギャラリーに表示)

 4-1.DataVerseにある凡例のテーブル情報をギャラリー1に表示

 4-2.PowerAutomateで取得したスケジュール情報の値をギャラリー2に指定する 

5.フォーム画面

 (ビュー画面で選択した情報を表示して、
  変更させたい凡例の色を選択させる。)

 5-1.ビュー画面で選択された情報を、加工してフォーム画面に表示

 5-2.凡例のギャラリーに、PowerAutomate起動用の四角形を付ける

 5-3.データ加工用のPowerAutomateを作る(最初の方だけ)

 5-4.ギャラリーに追加した四角形のOnSelectかなんかに、
     PowerAutomate起動用のロジックを書く

 5-5.PowerAutomateをめちゃくちゃする

 5-6.PowerAutomateで変更した内容を、DataVerseに保存ぬ

 5-7.DataVerseに保存した値をフォーム画面に表示させる

 

この実装手順の 2.スケジュールの取得 まで終わって、

今回は 3.管理者用画面 からだね。

 

さて、ここでいきなりちょっと寄り道。

前回まではユーザーとして使う時の流れをまったく

気にしてなかったから、今回は改めて

このアプリをユーザーが使う手順を考えてみよう。

 

・・・

 

 

・・・・・・どう?

 

 

・・・・・・・・・考えきれた?

 

そう、正解。

きっと、こんな感じになるはずさ。

 

 == ホーム画面 ==

  1.PowerAppsのHomeScreen的な画面にあるボタンをクリックすると

  2.PowerAutomateが動いて、ログインユーザーの24時間以内の情報を取得

    してきて、PowerAppsちゃんに値を返してあげる。

 == ビュー画面 ==
  3.取得されたスケジュールの情報をビュー画面のギャラリーに表示

  4.ついでに管理者画面で指定された凡例の情報をギャラリーに追加。

  5.ギャラリーからスケジュールを選択

  == フォーム画面 == 

  6.スケジュールの変更したい内容を選択肢で選択させて

  7.ボタンを押すとPowerAutomateが動いてスケジュールの変更

  8.何から何へスケジュールが変更されたのか、DataVerse上に情報を残す

  (9.)再度スケジュールを選択した時、
    DataVerseに履歴情報があるスケジュール場合、
    フォーム画面に履歴も表示される

 

まあ、実際は別にみんなの好きに作ってくれてもいいんだけどね。

PowerAppsは、自由だから。

Notesアプリと同じくらい自由に作ってくれたまえ。

うん。

寄り道は終わり。

 

で。

前回までで既にビュー画面にもフォーム画面にも最低限必要なフィールドは

配置済みだから、あとはちょちょっとやるだけでいけそうだから大丈夫。

(玄人向け。まあ玄人はこのブログ読んでないけど。)

 

初心者の諸君にも、安心してほしい。

さほど難しい事はしていない。

前回の続きはこちら。

 

3.管理者用画面

 (管理者画面を加工して、凡例の色を指定出来る様にする)

 3-1.DataVerseに新しいテーブルを作る

まずはこれだね。

今までもこの部分は端折ってきたんだけど、

今回遂に実装するよ!

今まで端折ってきたのは、

単純に

激甘だから。

すげぇ簡単。

はい、じゃあアプリの開発画面開いてー。

 

ゴメンやっぱウソ。

前回やった

「ビルド」→「全てを表示」

を開いてもらえる?

f:id:NagoyaITAdmin:20210629170324p:plain

前回はこんな感じでクラウドフローを選んだよね。

今回は・・・そう。

テーブル。

テーブルを開いてほしい。

これ。

f:id:NagoyaITAdmin:20210708111930p:plain

「全てを表示」→「クラウドフロー」じゃなくて「テーブル」

皆大好きテーブルのお時間だよ!

僕はねえ、丸テーブルが好きー!

四角いテーブルは、テーブルの角っこにふとした瞬間に足とかぶつけると

すごい憎たらしくなっちゃうから。

 

だからもう僕は今言いたい。

テーブルの角っこは全部グミで作ったらどうだろう。

ぶつけても痛くないし。

おなかすいたら食べれるし。

 

ん?

何だい?

さっさとPowerAppsで使うテーブルの話しろって?

わかったわかった。

 

また今度な。

 

うそ。

ごめんね。

さすがにまだ疲れてないから、

もうちょっと頑張ります。

で、まあ新規でテーブルを作って欲しいの。

わかるよね?

f:id:NagoyaITAdmin:20210708112653p:plain

「新規」→「テーブル」を選ぶ

さて。

じゃあ出てきたダイアログ的なやつに、

こんな感じで値を指定してもらいたい。

 

f:id:NagoyaITAdmin:20210708113217p:plain

表示名:LegendForTeams プライマリの表示名:Category

表示名ってのは、このテーブルの名前だね。

好きな文字列でもかまわないよ。

プライマリ列ってのも、僕がこれにしただけなので、

別になんでもかわまない。

ただ、良い子のみんなは後でちゃんとわかりやすい様に、

命名してあげてね。

 

出来たかな?

どうだい?

ちょっと驚いてるかい?

そう。

列の設定なんて1つしかしてないのに、

いっぱい出てきたよね。

f:id:NagoyaITAdmin:20210708113634p:plain

テーブルを作ったら、他にもいっぱい出来ちゃった。

これがPowerAppsちゃん達のすごいとこでさ。

予め「これ、いるんだろ?好きに使えよ」

みたいなハードボイルドさで自動的に色んな部品を作っておいてくれるわけ。

以前は「エンティティ」って名前だったんだけどさ。

「テーブル」って名前に変更になって「あ、表ね」って

わかりやすくなったよね。

最初は何かの呪文かと思ったよね。

 エンティティ

アキヒサはエンティティを唱えた。

半径50cm以内にいるユーザーの防御力が100下がった。

 

みたいなさ。

 

うん。

で。

列の追加をしてみよう。

こんな感じで。

f:id:NagoyaITAdmin:20210708114400p:plain

列の追加:Condition-Category

 

僕はCondition-Categoryという列名にした。

ここの列には、このアプリの管理者さんが設定する箇所で、

OnTimeで設定している凡例の条件を指定したいと思う。

 

まあ今回は「分類」のみの条件だけど。

OnTimeでは「件名」とか「公開方法」とかが

凡例の設定で指定できるんだけど、

OnTimeさんが動画内で使ってるやつはどうか知らないけど、

今回はめんどちょっと時間がないから分類のみでいく。

 

さて、じゃあもう一つ、列を作ってみよう。

何が必要だと思う?

そう。

正解。

実際の色だよね。

これは添付ファイルを表示させる感じで実装できるんじゃないかと思うの。

と、ゆーことで、まずはこんな感じで作ってみました。

f:id:NagoyaITAdmin:20210708115400p:plain

列の追加。LegendColor。データ型は「イメージ」を選択。

はい。

列の設定終わり。

でもね、油断しないで。

画面右下にさ、「テーブルの保存」ってあんじゃん?

アレ押さないとダメ。

f:id:NagoyaITAdmin:20210708115649p:plain

「テーブルの保存」ボタン。嘘でしょ?とか思うけど、自動保存してくれないかも。

なんかね、僕の場合だけかもしんないけどね。

消えちゃった。

ちょっと列追加して、しばらく保存しないまま、

この画面でブラウザ放置してたら。

いやほんと。

僕だけかも。

しれないけど。

マジで。

だから、皆はちゃんと保存しておこうね。

僕みたいに・・・ならないようにね・・へへっ・・

 

 

じゃ、まずは軽くデータ作ってみる?

f:id:NagoyaITAdmin:20210708120208p:plain

あるよね。「データを編集する」ボタン。それそれ。

出てきた?

f:id:NagoyaITAdmin:20210708120258p:plain

追加した列が出てきたー。本能のまま、値を入力しよう。

気が早い人はもう入力してみちゃったかな?

さすがだねぇー

仕事が早いねぇー

僕は慎重派なので、

ちょっと寄り道します。

 

恒例のOnTimeさんのデモサイトを見に行きます。

https://ontime.ontimedemo.com/ontimegcms/desktop

すると、デモサイト上では今こんな感じで凡例を設定していますね。

f:id:NagoyaITAdmin:20210708120627p:plain

OnTimeさんのデモサイト。左下に凡例を表示させました。

いっぱいあったんで、途中までしか画像撮らなかったけど。

ってか、ゴメンね。

ちょっとここで脱線すんだけどさ。

SAML認証ってるんだよね、OnTimeさん。

今いつもの感じでさっきのURLでログインしようとしたらさ、

勝手にMicrosoftのログイン画面にリダイレクトされたよね。

f:id:NagoyaITAdmin:20210708121025p:plain

OnTimeさんのデモサイト行ったら、Microsoft365のログイン画面出てきた。

んで、cream@ontimedemo.com さんでログインしたら、

OnTimeの画面に切り替わりやがるの。

すげぇ。

・・・またOnTime勉強しなきゃ・・・

 

はい脱線終わり。

で、デモサイトの凡例の設定内容はわかったので、

これをもとに、さっきのテーブルの値を埋めていこうと思う。

うぉりゃあ!

f:id:NagoyaITAdmin:20210708121640p:plain

デモサイトの凡例の情報をテーブルに書き写した。

おや。

みんなも気づいた?

LegendColor の列、ファイル添付出来ねぇじゃねぇか。と。

なんだよバーロー。

気持ちはわかる。

編集させろよ。

と。

f:id:NagoyaITAdmin:20210708121909p:plain

「読み取り専用」じゃねぇよ。編集させろゴルァ!

まあ落ち着いて聞いて欲しい。

そんなわけない。

そんなわけないんだよ。

だって、列作ったんだよ?

イメージって選択肢があったから、それ選択して作ったんだよ?

編集できなかったら、そもそも作れるはずない。

そう。

編集はできる。

ここ以外で。

 

準備はいいか!

ついてこい!

 

あ。今いじったデータは画面右下の「閉じる」で閉じといてね。

 

 3-2.Screen1の画面にDataVerseの各フィールドの値を指定する

よし。

さっそく今作ったDataVerseの列の値をそれぞれ画面に指定していこうと思う。

まずは今度こそPowerAppsの開発画面開いてー。

 

PowerAppsを、開いてほしい。

そう、Teams上のPowerAppsアプリの開発画面。

きっと今こんな感じになってるよね?

f:id:NagoyaITAdmin:20210708122458p:plain

今までスルーしてきた、アプリ作成時に自動で作成されてたScreen1ちゃん。

こいつを、そのまま使う。

Screen1のままじゃアレだから、AdminScreenとかに名前変えておいてもいいね。

 

で、EditForm1とやらを選択して、画面右側のプロパティで

データソースからテーブルで、さっき作ったテーブル名を選択しよう。

f:id:NagoyaITAdmin:20210708123355p:plain

さっき作ったテーブルを選択ぅぅぅぅ!

できた?

そしたら、画面の左の縦長のやつと、そのちょっと右上に

赤ーい✖が出てきたね!

ちょっとドキッとするよね!

ごめんね!

焦らずについてきて!

左っ側の✖印を押すと「数式バーの編集」みたいなの出てくるから、

それを押して欲しい。

すると下の画面みたいに「データソースの選択」が出てくるはず。

f:id:NagoyaITAdmin:20210708123511p:plain

BrowseGallery1にもさっき作ったテーブルを指定。

そう。

わかっちゃったね?

ここでもさっきと同じ、テーブル名を指定してあげよう。

するとどうだい?

僕らをドキっとさせる赤いバッテンがいなくなったよね。

 

しっかーも!

さっきつくったデータ、表示されてないかい?

f:id:NagoyaITAdmin:20210708124025p:plain

さっき作った凡例の情報が出てきてるよね?

やったね!

なんにもコード書いてないのにね!

ここまでできちゃった。

そしたら、画面右上にある「プレビュー」ってやつを押して欲しいんだ。

f:id:NagoyaITAdmin:20210708124340p:plain

「プレビュー」を押してね

どうかな?

開発画面じゃなくて操作できる画面にかわったよね?

そしたら、右上に用意されてる鉛筆アイコンをクリックしよう

f:id:NagoyaITAdmin:20210708124607p:plain

編集ボタンっぽい、鉛筆アイコンを押そう

編集画面になっただろうか。

そうなんだよ。

ここで編集できるんだよ。

f:id:NagoyaITAdmin:20210708125256p:plain

「タップまたはクリックして画像を追加」ですって。

こんな編集用のボタンまで最初っから用意しておいてくれるんだよ、

PowerAppsちゃんは。

すごいよね。

 

で、早速画像を追加したいんだけど、

よく考えたら画像を用意してないよね。

そこで、僕はこんなのを用意してみました。

f:id:NagoyaITAdmin:20210708125556p:plain

みんな大好きエクセル先生。OnTimeさんのデモサイトとは若干違うけど。別にいいよね。

このセルを画像で保存して、7個の画像ファイルを作りました。

で。

早速さっきのところで画像を選択してみる。

f:id:NagoyaITAdmin:20210708125848p:plain

来客 用の赤色。

右上のチェックマークで、保存してみたらこんな感じ

f:id:NagoyaITAdmin:20210708130018p:plain

保存した!出来た!画面左のところにも画像表示されてるぅ!

よーし、この調子でどんどん保存してみよう!

君なら出来る!

f:id:NagoyaITAdmin:20210708130230p:plain

やってやった!7個画像を保存してやったぜ!

誰でも簡単にできたね!

おめでとう。

 

あれ?DataVerseで作った列名を全然使ってない!

そうなの。

凄いんだよPowerAppsちゃん。

なんにも指定しなくても、勝手にこんな感じでやってくれちゃうんだから。

 

すげぇ時代にきたもんだ。

じゃ、次いっちゃおか。

 

4.ビュー画面

 (DataVerseにある凡例の情報をギャラリーに表示させて、

  2-3のPowerAutomateでとってきた情報をギャラリーに表示)

 4-1.DataVerseにある凡例のテーブル情報をギャラリー1に表示

さてさて。

舞台はうつって、ビュー画面にいこう。

みんな、ビュー画面はどんな感じになってるかな?

僕は今こんな感じなんだけど。

f:id:NagoyaITAdmin:20210708130937p:plain

ビュー画面。Screen名はViewScreenにした。

ここまで手順を追ってきてくれてる人達は、

単にギャラリーを2個ポンポンっっと配置してるだけだと思うのね。

 

そこで、上のギャラリーを選択して、
さっきのテーブルを指定しちゃおうか。

f:id:NagoyaITAdmin:20210708131420p:plain

またテーブルを選択!

f:id:NagoyaITAdmin:20210708131556p:plain

ちょっと拡大した。すごい。ここでもノーコードでここまでできちゃう。

うん。できた。

でも、背景色のせいか、ちょっとアレなので、

アレを追加してあげました。

 

四角形。

そう。

四角形を追加。

して、高さを1にして、横幅も広げた。

f:id:NagoyaITAdmin:20210708134231p:plain

ギャラリーの中に四角形を追加して、高さを1にして仕切り線的なアレにした。

思うんだけど、普通に線引けたりするのかな?

するとどうでしょう。

f:id:NagoyaITAdmin:20210708134534p:plain

あとは君のセンスの見せ所。

多少は見栄えが良くなった・・・気がするよね。

うん。個人的にはね。

じゃここはもう終わりね。

簡単だったね。

 

 

 4-2.PowerAutomateで取得したスケジュール情報の値を
     ギャラリー2に指定する
 

さて。

実はここが第1の難関箇所でもある。

ゲットしといたユーザーのスケジュール情報を、

コレクションに入れて、ギャラリー内に情報を表示させる

のである。

これが、ちょっとややこいのである。

読者の皆様は、前回の記事の内容を

覚えていてくれているだろうか。

HomeScreenの「スケジュール一覧へ」ボタンの

OnSelect にPowerAutomateを動かすロジックを書いたことを。

 

nagoyaitadmin.hatenablog.com

 ここらへん。

2-3 あたり。

f:id:NagoyaITAdmin:20210708150823p:plain

HomeScreenの「スケジュール一覧へ」ボタンに
PowerAutomateを動かすロジックを書いたはずだ。

改めて前回実装した内容を確認するね。 

 ① ユーザー情報をPowerAutomateに渡す。

 ② PowerAutomateが動いて、ユーザーのスケジュール情報を取得する。

 ③ スケジュール情報を、コレクションとしてテーブル形式で保存する。

 ④ ビュー画面へ画面遷移する。

 の様な実装がされているはずだ。

具体的には

== ここからOnSelectの中身 ==

Set(
UserSchedDataStr,{
StringData: 'Ver1-24H以内のスケジュール取得'.Run(
JSON(
{
item1UserDisplayName: UserDisplayName.Text,
item2USerID: UserIDStr.Text,
item3UserID2: UserIDStr.Text,
item4EMail: UserEMail.Text
}
),
JSON (
{
item11UserDisplayName: UserDisplayName.Text,
item12USerID: UserIDStr.Text,
item13UserID2: UserIDStr.Text,
item14EMail: UserEMail.Text
}
)
)
}
);

ClearCollect(
UserSchedDataForView,
Split(
AutomateOutPut.Text,
"`"
)
);
//UserSchedDataForViewを`で区切り
Remove(
UserSchedDataForView,
Last(UserSchedDataForView.Result)
);
//最後にできてしまう、不要な空白データを削除
ClearCollect(
UserDataCol,
{
No: "1",
Title: '1stSched-Title1'.Text,
StartTime: '1stSched-StartTime1'.Text,
EndTime: '1stSched-EndTime1'.Text,
DocID: '1stSched-SchedID1'.Text,
Categories: '1stSched-Categories1'.Text
},
{
No: "2",
Title: '2ndSched-Title1'.Text,
StartTime: '2ndSched-StartTime1'.Text,
EndTime: '2ndSched-EndTime1'.Text,
DocID: '2ndSched-SchedID1'.Text,
Categories: '2ndSched-Categories1'.Text
},
{
No: "3",
Title: '3rdSched-Title1'.Text,
StartTime: '3rdSched-StartTime1'.Text,
EndTime: '3rdSched-EndTime1'.Text,
DocID: '3rdSched-SchedID1'.Text,
Categories: '3rdSched-Categories1'.Text
}
);
Navigate(ViewScreen)

== ここまで ==

こんな感じならOK。

 

さて、じゃあここからは、

前回作ったPowerAutomateの作り方次第でもあるんだが、

PowerAutomateが返してくれた値を

切ったり貼ったりして、

上記の一番下のところ、 

  ClearCollect(
 UserDataCol,
 {
 No: "1",
 Title: '1stSched-Title1'.Text,
 StartTime: '1stSched-StartTime1'.Text,
 EndTime: '1stSched-EndTime1'.Text,
 DocID: '1stSched-SchedID1'.Text,
 Categories: '1stSched-Categories1'.Text 
 },
 {
 No: "2",
 Title: '2ndSched-Title1'.Text,

 ・・・

の部分で指定している UserDataCol というテーブルに、

それぞれ列の値を指定してあげたいと思う。

既にロジックの中を御覧いただければわかるんだが、

分解した情報を 

 No の列に "1"
 Title の列に  '1stSched-Title1'.Text,
 StartTime の列に  '1stSched-StartTime1'.Text,
 EndTime の列に '1stSched-EndTime1'.Text,
 DocID の列に '1stSched-SchedID1'.Text,
 Categories の列に '1stSched-Categories1'.Text

 って、指定してるんだよね。

1~3件分のスケジュールをね。

 

ってことは、だ。

もう既にテーブルが作られていて、

そのテーブルの中に情報が入っているという状態。

じゃあどうすればいいかっちゅーと、

もう勘のいい人はわかるね?

 

そう。

配置したギャラリーのデータソースに、テーブルを指定するだけ。

僕と同じロジックにしてきた人であれば、UserDataCol でいいと思う。

f:id:NagoyaITAdmin:20210709124157p:plain

下に配置してあるギャラリーに、データソースを指定していくぅっ!

指定できたら、きっと今回は思う様な表示にはなっていないと思う。

君のセンスにお任せしても良いんだが、

あくまでもサンプルとして僕の例をここに置いておくね。

== ギャラリーの部品の上から3行に対して ==

1行目

 ThisItem.Title

2行目

 Left(Text(DateTimeValue(ThisItem.StartTime, "ja"),"[$-ja]yyyy年mm月dd日"),12) &
"          " & Mid(Text(DateTimeValue(ThisItem.StartTime, "ja"),"[$-ja]yyyy年mm月dd日 HH時mm分"),12) & " ~ " & Mid(Text(DateTimeValue(ThisItem.EndTime, "ja"),"[$-ja]yyyy年mm月dd日 HH時mm分"),12)

3行目
 ※3行目は左に短いラベルと、右に長いラベルを置きました。

 左のラベル

  "分類:"

 右のラベル

  If(ThisItem.Categories = "" ,"[未設定]", Substitute( Left(ThisItem.Categories,Len(ThisItem.Categories)-1), "$", ","))

== ここまで ==

といった感じで列の値をそのまま使うんじゃなくて、

ここでちょっと文字列をいじくって見やすい感じに加工してみました。

f:id:NagoyaITAdmin:20210709125415p:plain

こんな感じになりました。

でも、やっぱりちょっと見づらいので、また色々細工していきましょう。

例の四角形を使って仕切り線をつくってみました。

f:id:NagoyaITAdmin:20210709131053p:plain

仕切り線を追加してみました・・・が、なんかかっちょ悪いですね。

うん。

もう、ね。

わざとだから。

 

センスない感じにしてるのは。

 

君の作品を輝かせるために、わざとこんな感じにしてるんだから。

 

とはいえ、どうだい?

スケジュール情報をこんな感じに表示できちゃってるよね?

やったね!

あとは、実際にスケジュールの情報を変更する実装ができればほぼ完成だね!

 

で、一応次のフォーム画面に行く前に、一つだけやっておこうか。

今設定したギャラリーに、フォーム画面へ移動するための

矢印アイコンでも配置しておこう 。

f:id:NagoyaITAdmin:20210709132953p:plain

矢印を追加した。

で、ゴメンあともう一個。

矢印アイコンを配置したのはいいけど、

ユーザーとしては、わざわざ矢印アイコン押すのがめんどくさい人が

いらっしゃるから、更に一つ四角形をかぶせておくんだ。

f:id:NagoyaITAdmin:20210709133203p:plain

四角形をかぶせた

で、まあ塗りつぶされてっと意味わかんないから、塗りつぶしをなくしてあげて、

更にこの四角形に対して、OnSelectでフォーム画面に画面遷移するように

実装しよう。

f:id:NagoyaITAdmin:20210709133456p:plain

OnSelectにNavigate追加 & 色を透明に。

で、ちなみに後で気付くとおもうんだけど、

このままだと使う時にマウスポインタをこの四角形にところに持っていくと、

選択行だけ色がかわっちゃうから、

プロパティ右下のここの色もおしゃれな感じで変えておこうね。

f:id:NagoyaITAdmin:20210709133801p:plain

何がおしゃれなのかは僕にはわからないが、
カーソルを合わせた時(ポイント時)は透明度80%の白色にしたりとか?

押された状態を60%の白色にしたりとか?

自分で決めてくれい!

 

よし、じゃあオシャレ完了!

 

残りはフォーム画面の作りだね!

5.フォーム画面

 (ビュー画面で選択した情報を表示して、
  変更させたい凡例の色を選択させる。)

 5-1.ビュー画面で選択された情報を、加工してフォーム画面に表示

 5-2.凡例のギャラリーに、PowerAutomate起動用の四角形を付ける

 5-3.データ加工用のPowerAutomateを作る(最初の方だけ)

 5-4.ギャラリーに追加した四角形のOnSelectかなんかに、
     PowerAutomate起動用のロジックを書く

 5-5.PowerAutomateをめちゃくちゃする

 5-6.PowerAutomateで変更した内容を、DataVerseに保存ぬ

 5-7.DataVerseに保存した値をフォーム画面に表示させる

 

 

・・・どうする?

いっちゃう?

 

・・・やめとく?

 やめと・・・こうか。

 

今日はもう疲れただろ?

 

無理することない!

無理することないよ!

 

ゆっくりいこうよ!

うん、ゆっくりいこ。

 

ね。

 

ね!

 

お願いだよう。

 

また来週ぅ!

来週で実装完了予定だよ!

~~~ 本 題 終 了 ~~~

 

 

その1 ー 前々々世。作りたいシステムを発表。

その2 ー 前々回。PowerAppsのロジックの作りこみは別にするかもしれないけど
         とりあえず画面周りをそれっぽくする。

         ここまではノーコードで出来たね!

その3 ー 前回。PowerAutomateでの色々。

         PowerAppsと、PowerAutomateでの色々。
          ここが下手すると2週にわたるかもしれないね。
          軽く考えてみても条件分岐とかややこしそう。

         このあたりが一番のハード回。ローコードが必要な部分。

その4 ー 今回。大変だったね。

         ログインユーザーのスケジュール取得までは前回でやったから、

         管理者用画面と、実際にスケジュール情報を更新するやつ。

         今回で・・・終わらなかったね!

         

その5 ー 次回。  なんだろう。打ち上げパーリーでもしようか。

            各自、つけてみそかけてみそを持参の上、

           みそパしよ。みそパ。

           みそパ。
           とか言ってる場合じゃなかったね。

           いざ最終局面へ!

           フォーム画面の設定と、

           PowerAutomateでスケジュールの変更ロジック実装!

           

次回は 来 週 更新予定!         

  乞 う ご 期 待 !

 

 

あー疲れた。 

読む方も疲れたよね?

でも、書く方もそこそこ疲れるんだよ?

俺も読みたい。

漫画読みたい。

コーラ飲みたい。

アイス食べたい。

 

・・・あ。そうだ。

漫画喫茶に住みたい。

 

ほな来週。