コルネと学ぶコンポーネント

コルネと学ぶコンポーネント 【JPAUG】 Power Apps オンライン勉強会 ～コンポーネント祭り～ コルネ 2021/07/31 1

自己紹介 Name コルネ Twitter @koruneko32767 Blog コルネの進捗や備忘録が記されたなにか YouTube Korune Ch. コルネ - YouTube 2

• https://twitter.com/koruneko32767
• https://koruneko.hatenablog.com/
• https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

公開中/公開予定のコンポーネント koruneko/PowerApps-Custom-Functions pnp /powerfx-samples ConvertBaseNumber CustomMenuComponents CollisionDetection-functions CustomDataTableComponents 3

• https://github.com/koruneko/PowerApps-Custom-Functions
• https://github.com/pnp/powerfx-samples

今回はなにを話すの？ 私がここ数ヶ月コンポーネントを触ってきた中で得た知見を皆さんに共有 この勉強会をきっかけに皆さんがコンポーネント作成に嵌ってくれたら嬉しい 4

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 5

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 6

コンポーネントを使うとなにができるの？ コンポーネントを利用することで • 普段利用している複雑な式を予め定義することができる • 組織/プロジェクト内で使用する 共通のコントロールの組合せを作成することができる ex)ヘッダー/フッター、検索メニュー… 7

コンポーネントを使うとなにができるの？ 予め式やコントロールの組合せを定義できるとなにが嬉しいのか？ • 開発時間を短縮することができる • デザインを統一させることができる • 改修が容易になる場合がある 8

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 9

コンポーネント作成者と利用者 コンポーネントの作成者には ある程度のスキルが求められます。 では利用者は？ 内部ロジックまで理解する必要がある？？ 一部の人(作成者、管理者、保守者)が 理解できていればOK それぞれのレベル に合わせた役割を ※個人的な見解です 10

コンポーネント作成者と利用者 皆さんの意見も聴かせてください！ https://forms.office.com/r/ppWkUTnPtQ 11

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 12

コンポーネント作成の際の注意点 コンポーネントを作成するときは ”コンポーネント ライブラリ(プレビュー)” から作成しましょう。 13

コンポーネント作成の際の注意点 この方法は”廃止済み”の機能になります • これまでの方法 挿入 > カスタムからコンポーネント操作 コンポーネントの保存場所も通常のアプリと同じ場所 14

コンポーネント作成の際の注意点 • 新しい方法 “アプリ”タブからではなく“コンポーネント ライブラリ”タブから作成しましょう 15

コンポーネント作成の際の注意点 コンポーネント ライブラリに関する詳しい説明は Hiroさんが行うのでこの資料では説明を割愛します。 16

コンポーネント作成の際の注意点 プロパティに対して動作を設定 したい場合は設定を変更しましょう。 17

コンポーネント作成の際の注意点 コンポーネント内に配置したボタンに コンポーネント使用者がNavigateなどの 任意の関数を設定できるようにするには プロパティの型に”動作”を指定します。 しかし“動作”が選べない!! 18

コンポーネント作成の際の注意点 “動作”プロパティは現在実験的な機能なので設定から “拡張コンポーネントのプロパティ”をオンに設定しましょう。 “動作”が選択可能に! 19

コンポーネント作成の際の注意点 ちなみにこちらの設定は “拡張コンポーネントのプロパティ”という名前の通りカスタム プロパティに パラメーターを設定したい場合にもオンにしなくてはいけない項目です。 20

コンポーネント作成の際の注意点 レコード/テーブルを利用する際は フィールドを意識しましょう。 21

コンポーネント作成の際の注意点 コンポーネント作成時にパラメータでレコードを定義 (プロパティは単純にパラメータの値を返すだけにしています) 22

コンポーネント作成の際の注意点 コンポーネント作成時に定義したフィールドと異なるフィールドを設定することはできない。 23

コンポーネント作成の際の注意点 コンポーネント作成時にパラメータでテーブルを定義 (プロパティは単純にパラメータの値を返すだけにしています) 24

コンポーネント作成の際の注意点 コンポーネント作成時に定義したフィールドと異なるフィールドを設定することはできない。 ただし、レコード全てでみたときに対象フィールドが設定されていれば問題はない。 25

コンポーネント作成の際の注意点 パラメータのオプションと必須について 26

コンポーネント作成の際の注意点 コンポーネントのパラメータでは対象のパラメータを 必須にするかどうかを設定することが可能です 27

コンポーネント作成の際の注意点 ”office365ユーザー”コネクタの`SearchUser`を例に挙げます。 これはパラメータはそれぞれオプションになっているので以下のように パラメータを渡すことができます。 28

コンポーネント作成の際の注意点 同じことをコンポーネントで行おうとするとエラーとなります。 29

コンポーネント作成の際の注意点 コンポーネントのオプションに設定した値は以下の 関係性を持っていることに注意してください。 オプション1 オプション2を設定したい場合は必須 オプション2 オプション1が設定されていれば設定可能 30

コンポーネント作成の際の注意点 変数の利用について 31

コンポーネント作成の際の注意点 コンポーネントの中では 〇Set ×UpdateContext ×Collect ×ClearCollect となり、`Set`のみが使用可能です。 ただしコンポーネント内で定義した`Set`はコンポーネント内でのみの利用に限定 されます。 32

コンポーネント作成の際の注意点 AutoHeight の利用に関して 33

コンポーネント作成の際の注意点 ①②は”ライブラリ コンポーネント”から読込 ③④は”カスタム”から読込 ①③は常にtrue ②④はトグルにより表示/非表示を動的に制御 ③ ④ ② ① ① ② ③ ④ 34

コンポーネント作成の際の注意点 コンポーネントのVisibleを動的に変更すると・・・ コンポーネント内に設定したコントロールのAutoHeightが正しく動作していない！ 35

コンポーネント作成の際の注意点 AutoHeightをtrueにしても、数式バーのHeightの値自体は変わらない。 ここの値を参照しちゃっている？ 36

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 37

コンポーネント作成の際の推奨事項 コンポーネントはコンポーネントライブラリに作成しましょう。 38

コンポーネント作成の際の推奨事項 ※コンポーネントライブラリを使用しない場合のはなしです コンポーネントに使用するコントロール名は [コンポーネント名] _コントロール名 の形にしましょう。 公開されているコンポーネントでは、上記の命名規則でコンポーネントが作成されている場合のものがあ りますが、これはコンポーネントのインポート/エクスポートのやり方では、コンポーネント内のコントロールと コンポーネントを読み込んだアプリ側でのコントロールとで命名を一意にする必要があったからです。 コンポーネントライブラリを利用する場合は、このような制限はないので従来の命名規則で問題ないです。 39

コンポーネント作成の際の推奨事項 コンポーネント内のコントロールの座標/サイズは動的に指定しましょう。 コンポーネント内のコントロールのサイズをマジックナンバーで指定すると、利用者がコンポーネントの サイズを変更した際にデザインが崩れてしまいます。 `Parent`などで親要素を参照して値を決めるなどするとよいです。 40

Agenda 1.コンポーネント使うとなにができるの？ 2.コンポーネント作成者と利用者 3.コンポーネント作成の際の注意点 4.コンポーネント作成の際の推奨事項(個人の見解です) 5.知っておくと便利そうなテクニック集 41

知っておくと便利そうなテクニック集 添付ファイルコントロールをコンポーネント化して コントロールを利用しやすくしましょう。 42

知っておくと便利そうなテクニック集 カスタムプロパティでコンポーネント内の子要素 を参照できるのは”出力”タイプだけです。 43

知っておくと便利そうなテクニック集 カスタム関数で変数を利用したい場合は With 関数を活用しましょう。 44

知っておくと便利そうなテクニック集 入力パラメータに記載したコメントはコンポーネント 利用時にはコメントは表示されないので、きちんと 説明欄に記載を行いましょう。 45

皆さんもコンポーネント 公開してみませんか？ 46