コンポーネント勉強会でデモってたボタンコントロールの作り方を書いてみる

こんばんは。声だけイケメンあきらです。

声だけって自分で書くのも覚悟はいりますが、リアルで言われたことがないということは、声もイケメンじゃないということでしょう。

ははっ!

 

さて、先日登壇した「コンポーネント祭」で見せたデモ内容でも載せまして、

ここに訪れた奇特な方に披露したいと思います。

powerapps.connpass.com

実はあのデモすごいテキトーに作ったんです。

色とか大きさとかテキトーにも程がある。

ワイのデザインはあんなもんじゃない!

映像を見返して「ダセェ」の一言だったので作り直します。

ちなみにワイは「透明度」を巧みにつかっています。

 

作ったもの

作ったのは「コンポーネントでメニューボタンつくった!」ってやつです。

「えっ?わざわざコンポーネントで?wwwwwwアホじゃんwww」って思われる方いるかもしれませんが、

あなたがたが考えてるボタンとは違うんです。

私は1つボタン挿入するだけなんて満足しないんだから!

下のようなオシャレに見えるボタンを作りましたー

f:id:hanakuso365:20210904011628p:plain

 

レイヤーで考えるとこんな感じですね。

f:id:hanakuso365:20210904012432p:plain

1.フツーに作ると

普通に作る場合は

  1. ボタン作成
  2. ボタン複製してちょっとずらす
  3. 上の透明度を上げる
  4. label作成
  5. グループ化
  6. コピペ

で作成できます。

ボタン作成

まずオーサリングメニューからボタン作ります。

プロパティはこんなん。

f:id:hanakuso365:20210904014012p:plain

ボタン複製してちょっとずらす

そのままですねー

複製してずらして、

下のボタンの色とフォントを設定する。

こんな感じです。無効時のFillを黒にして70%くらい。

モードを「無効」に。

f:id:hanakuso365:20210904014641p:plain

上の透明度を上げる

透け感!ですね。

ガラスをイメージしてます。

高級感だしていく感じですね。

上のFillを60%くらいに。

f:id:hanakuso365:20210904014112p:plain

label作成

スタイリッシュな感じで作ってきたので、

説明はきちんとつけなきゃね!ここ日本だし!筆記体読めないし!

f:id:hanakuso365:20210904015118p:plain


グループ化

一個作れたらとりあえずグループ化しましょう。

f:id:hanakuso365:20210904015236p:plain


コピペ

コピペしましょう。

スタンプみたいにペタペタはって、Labelとbuttonを編集しよー

で完成。

f:id:hanakuso365:20210904020851p:plain

はい、メンドクサイでしょう?

ボタン1つつくればええやん!開発工数無駄にかけんなよボケェって思うでしょう?

3倍速でつくればいいんですよ。

 

2.Galleryで作る

さっきのやつGalleryでつくっちゃいましょう。

こうやって作ってる人あんまり見ないんだな。

ってことでかく!

Gallery作る

まずはGalleryつくります。今回は縦フォームで作ります。

 

さっきのパーツを1つ入れる

当然1つしか作れないですけど、とりあえずそんな感じで。

 

テーブルを直打ち

前の勉強会で知ったけど、直打ちしても作れること知らない人多いんですね。

 

テーブルを扱うときはブラケットと呼ばれる『 [ ] 』で配列全体を、カーリーブラケット『 {} 』で行全体を表します。

下のテーブルを

Items=[
    {
        txt: "Today",
        txtjp: "本日の" & Char(10) & "予約"
    },
    {
        txt: "Customer",
        txtjp: "顧客一覧" & Char(10) & "予約"
    },
    {
        txt: "Karte",
        txtjp: "カルテ"
    }
]

 

これで下の表のようなテーブルが出来上がります。

f:id:hanakuso365:20210904021146p:plain

 

この一行一行がレコードってやつですね。

Galleryに直打ちの場合だとThisitem.Value.「列名」

という風に呼び出すと反映されます。

f:id:hanakuso365:20210904021238p:plain

f:id:hanakuso365:20210904021323p:plain

3.コンポーネントで作る

そしてやっとコンポーネント!

やっときた!

Navigateプロパティとラベルの引数を指定するだけで出来上がる!

誰でもこのオシャレボタンを実装できる!

っていうコンポーネントを作っちゃいます。

 

作成

まずTemplateを新しく作成してさっき作ったGalleryをコピペします。

そしてコンポーネントをGalleryのサイズに合わせておきましょう。

f:id:hanakuso365:20210904021900p:plain

 

「新しいカスタムプロパティ」をクリック

表示名、名前、説明を付けて、Data型をテーブルにします。

ほんで保存。

するとプロパティが出来上がります。

f:id:hanakuso365:20210904022229p:plain

 

作成したカスタムプロパティに記述します。

型の記述なのでtext型はダブルコーテーションで作る。

Screen指定の場合はコンポーネント上で指定できる唯一のScreen名の「App.ActiveScreen」を使用

※Hiroさんに教えてもらいました!感謝!だいすき!

f:id:hanakuso365:20210904023312p:plain

 

GalleryのItemsプロパティに「コンポーネント名. カスタムプロパティ名」を記述

f:id:hanakuso365:20210904023651p:plain

 

上のボタンのプロパティに以下記述

Text=ThisItem.Value.txt
OnSelect=Navigate(ThisItem.Value.Navi,ScreenTransition.Fade)

labelのプロパティに以下記述

Text=ThisItem.Value.txtjp

 

これで完成です。

 

反映

画面に戻って呼び出してみましょう。

オーサリングメニューからカスタム→先ほど作成したコンポーネント名を追加

f:id:hanakuso365:20210904024810p:plain

 

するとTextが入っていない空のGalleryが出てきます。

プロパティに先ほど設定したカスタムプロパティが存在するので、

関数バーで編集しましょう。

f:id:hanakuso365:20210904024912p:plain

 

次のようにカスタムプロパティにテーブルを記述すると、その内容が反映します。

Gallery_table=
[
    {
        txt: "Today",
        txtjp: "本日の" & Char(10) & "予約",
        Navi:Screen1
    },
    {
        txt: "Customer",
        txtjp: "顧客一覧" & Char(10) & "予約",
        Navi:Screen2
    },
    {
        txt: "Karte",
        txtjp: "カルテ",
        Navi:Screen3
    }
]

 

f:id:hanakuso365:20210904025433p:plain

 

Navigateもきちんとテーブルの値の通りに反映され、画面移動しますのでScreen2とScreen3を作成して試してみてください。

 

おわりに

コンポーネントって機能の処女作だったので、身近なところでいきました。

実際そんな工程は効率化されてないけど、「デザインアイデアの保存」ができるというのがいい!

テーブル自体が初学者にはしんどいという話も聞くので汎用性はないかもしれませんが、

コンポーネント入門にはいいのではないでしょうか?

 

それではまた明日。