12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【入門】PowerAppsでSharePointリストのフォームをカスタマイズ (1)

Last updated at Posted at 2020-02-02

はじめに

SharePointのリストをPowerAppsを使っていい感じにカスタマイズする為の道のりを記事にまとめます。
勉強しながら記事をまとめている為、投稿後にも更新するかもしれません。

ある程度SharePointの知識がある人向けです。

1. PowerAppsでリストのフォームを開いて発行する

まずは、PowerAppsを起動して、発行するまでをやってみます。

リストからPowerAppsを起動する

[手順]
1. コマンドバーから[PowerApps] > [フォームのカスタマイズ]をクリック

image.png

読み込みが走って、以下の画面に切り替われば、PowerAppsの起動が完了です。

image.png

フォームの画面サイズを変更する

とりあえず、表示する画面サイズを変更してみます。
[手順]
 1. [ ファイル ] > [ 設定 ]をクリック
 2. [ 画面のサイズと向き] を選択
 3. PCで表示することを想定して、横向きに変更します
   向き:横
   サイズ:L
 4. [ 適用 ]ボタンをクリック

image.png

変更をリストに反映する

変更した内容をリストに反映するには
保存→発行の手順で行います。

[手順]
 1. [ ファイル ] > [ 保存 ] をクリック
 2. バージョンに関するメモに「画面サイズを変更」と記入
 3. [ 保存 ] をクリック
image.png

 4. [ SharePointに発行 ] をクリック
image.png

発行済みの場合は、メッセージが以下のように表示されます
image.png

先ほどの編集画面に戻るには左上の「<- 」をクリックすればOK

PowerAppsからリストに戻る

SharePointに戻る場合は、編集画面の左上にある「SharePointに戻る」をクリックします。
image.png

2. フォームの横幅を設定する

1で画面サイズを変更しましたので、フォームのサイズも合わせて変えてみます。

まずはSharePointFormをAppのWidth/heightに合わせます。

[手順]
1. [FormScreen1] > [SharePointForm1]を選択
2. 以下の内容でプロパティを設定する
 width : Parent.Width
 height :Parent.Height
image.png

次に、入力フィールドも設定を変更します。
既存のプロパティに横幅を自動調整してくれる設定があるので、そちらを有効にします。

[手順]
1. [SharePointForm1] 内の各[DataCard]を選択
2. 以下の内容でプロパティを設定する
  WidthFit : true
 ※同等の設定を、右側のGUIからも行えます。
image.png

全ての変更が完了したら、保存して発行します。

3.PowerAppsでカスタマイズしたフォームを削除する

もし、なんか変なことしちゃって、直すことも出来なくなった場合は、
フォームそのものを削除しちゃいましょう。

[手順]
1. [ リストの設定 ] > [ フォームの設定 ]を選択
2. [ 規定のSharePointフォームを使用する]を選択
3. [カスタム フォームを削除します]のリンクをクリック

image.png

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?