【社内ポータル】お役立ちリンク＆備品検索アプリ
Step 5 / 5
[完了] 操作性の向上とお役立ちリンクアプリの開発
使いやすいアプリへの仕上げを行い、お役立ちリンクアプリも開発します。
ヘッダーの整理
- 備品一覧のHeaderContainerを選択し、左メニューの「挿入」>「ディスプレイ」から「テキストラベル」を選択します。
- Labelの「ディスプレイ」>「テキスト」に「備品検索アプリ」と入力します。
- 「ツリービュー」でLabelをTextInpuの上に移動させて並び替えます。
- Labelの「フォントサイズ」を
App.Width * 0.03、「Height」をParent.Height、「Width」をParent.Width / 2 - 10にします。 - TextInputの「X」を
Parent.Width - Self.Width、「Width」をParent.Width / 2 - 10にします。 - Labelを右クリックしてコピーし、備品詳細のHeaderContainerを選択後、右クリックで貼り付けます。
- 作成されたラベルの「テキスト」を「備品詳細」に変更します。
お役立ちリンクアプリの開発
お役立ちリンクアプリは、備品検索アプリと同じ構成にします。
- 備品一覧を右クリックし、「画面の複製」を実行します。
- Screenの名前を「お役立ちリンク」に変更し、HeaderContainerのLabelも「お役立ちリンクアプリ」に変えます。
- MainContainerのGalleryを選択し、キャンバスの「データ」を押下後、「データソースの選択」>「お役立ち陸サンプル」を選択します。
- Galleryの「Item」に下記を入力します。
If(
IsBlank(TextInput1_1.Text),
お役立ちリンクサンプル,
Filter(
お役立ちリンクサンプル,
TextInput1_1.Text in 概要
)
)
- FooterContainerのキャンバスで＋マークを押下後、「ボタン」を選択します。
- Buttonの「テキスト」には「備品管理アプリ」を入力し、「OnSelect」には下記の式を入力します。
Navigate(備品一覧)
Tips: 一度作ったものは、コピーや複製をすると開発が早く進みます。
お役立ちリンクアプリのテスト
- お役立ちリンクのScreenを選択し、アプリのプレビューを実行します。
- テキストエリアに「ツール」を入力すると、「概要」にツールの単語を含むアイテムのみが表示されます。
- 「備品管理アプリ」のボタンを押下後、同アプリに遷移することを確認します。
備品検索アプリとお役立ちリンクアプリをつなぐ
- 備品一覧のFooterContainerに、「お役立ちリンクアプリ」に遷移するボタンを作成します。
※テキストが長いため、「Width」は250に変更します
Navigate(お役立ちリンク)
リンク詳細画面の作成
- 備品詳細のScreenを右クリックし、「画面の複製」を実行します。
- 複製されたScreenを「リンク詳細」に名前変更し、HeaderContainer > Labelの「テキスト」も「リンク詳細」にします。
- リンク詳細のMainContainerで、FormViewerの「ディスプレイ」>「データソース」を「お役立ちリンクサンプル」に変更後、「データカードの置換」を実行します。
- データベースが切り替わった後、「フィールド」はTitle、サイト名、リンク名、概要を除き、削除します。
※誤って削除した場合、左上の「フィールドの追加」から復帰可能です - 「詳細設定」>「Item」に下記を入力します。
Gallery2_1.Selected
リンク一覧とリンク詳細をつなぐ
- お役立ちリンクのGalleryで、NextArrowの「詳細設定」>「OnSelect」に下記を入力します。
Navigate(リンク詳細)
リンクのアドレスをテキストからURLにする
Power Apps側でリンクをアクティブにするためには、SharePointの項目列をハイパーリンクにする必要があります。
お役立ちリンクのリンク列は「1行テキスト」のため、「ハイパーリンク」に変更します。
- SharePointの右上の歯車を選択し、「リストの設定」を押下します。
- 「列」にある「リンク」を押下し、「列名」を「_リンク」に変更します。
- リストの画面で「列の追加」>「ハイパーリンク」を選択し、「リンク」列を作成します。
- リストメニュー上部の「グリッドビューで編集」を押下し、「_リンク」列の1行目のセルを選択後、Shiftを押しながら10行目のセルを押下します。
- Ctrl+Cでコピーし、「リンク」列の1行目を選択後、Ctrl+Vで貼り付けます。
- 「グリッドビューの終了」を押下後、「_リンク」列の「列の設定」>「編集」から削除します。
- Power Apps側で左メニューの「データ」>「お役立ちリンクサンプル」のデータを右クリックし、「最新の状態に更新」を実行します。
- リンク詳細のFormViewerで、「ディスプレイ」>「フィールド」を押下後、「リンク_DataCard#（カスタム）」を削除し、「フィールドの追加」から「リンク」を追加します。
Tips: SharePointの一括操作はグリッドビューを有効活用します。
リンクのテスト
- お役立ちリンクのScreenからアプリのプレビュー後、任意のアイテムを選択し、リンクの値がURLになっています。
- URLをクリックし、該当のWebサイトへ外部アクセスすることを確認します。
