Power AppsとPower AutomateでSharePoint Onlineにニュースを投稿する（SharePoint REST API利用）

#はじめに

Power Appsから、SPOサイトへニュースの投稿する方法を記載します。

仕組みは、Power Appsでニュースの内容を記入し、Power Automate経由でニュースを投稿します。

Power Automateには、「SharePointにHTTP要求を送信します」のアクションが存在します。
これはSharePoint REST APIが利用でき、他に用意されたSharePointアクションでは不可能なことを実現できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/4e60cc85-9e61-46d8-e00e-1d651de7ce94.png)

[SharePoint REST APIのDOCSはこち](https://docs.microsoft.com/ja-jp/sharepoint/dev/sp-add-ins/get-to-know-the-sharepoint-rest-service?tabs=csom)


#ニュース登録画面の作成（Power Apps）

タイトル、ニュースに貼り付けるイメージ、本文（リッチテキストエディター）、ラジオボタンを用意しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5e42b28e-c7c5-5905-a5b8-240be02e1e0c.png)

ラジオボタンでは、ニュースカテゴリを選択できるようにしています。
これは、SPOサイト上で、分類分けしたニュースをそれぞれのWebパーツに表示するためです。

###SPOサイトでWebパーツ毎に表示するニュースを分ける方法

SPOサイトにて、ページ（サイトのページ）より、一覧の「＋列の追加」で列を追加し、選択肢を設定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/4113c652-14eb-c2f2-87b9-0850fd092409.png)

SPOホームでは、各ニュースWebパーツにフィルター設定し、各パーツ毎に以下スクショの設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/d75ebf36-b4a6-eea0-929a-5fd247f28143.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/6a4ae2bf-f9a8-ce12-9b4c-43a49027eb9a.png)


#ニュースの投稿フロー作成の前にテンプレート作成

実際にニュース投稿フローを作成する前に、ニュースのテンプレートを作成する必要があります。
ニュース投稿は、サイトページをニュースに昇格（PromoteToNew）することで実現します。
ですが、私が調べた限りでは、現時点でPower Automatからサイトページを新規作成する手段が見つかりませんでした。
よって代替案として、「ページテンプレート」からコピーすることで、サイトページを作成します。

ニュースWebパーツで、[ニュースの投稿]を選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5c049c47-80fc-ba8a-daed-4873fd81b87d.png)

タイトルと本文に任意の文字を入力し、[テンプレートとして保存]します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/8b7c95d7-a096-da7f-68f4-942587d13988.png)

サイトのページの[Templage]ディレクトリにテンプレートが作成されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/34fb4ddd-72b4-c7e6-1991-e30135d5dc47.png)

#ニュース投稿フロー作成（Power Automate）

####トリガーを作成

トリガーは[PowerApps(V2)]です。
Power Appsから受け取る項目は、登録画面に合わせ、

- タイトル
- ニュースに貼り付けるイメージ
- 本文（リッチテキストエディター）
- カテゴリー

に加え、

- 更新者

です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/00b322ff-7a95-07dc-d24b-6d275bb7fbe0.png)

####サイトページ名の設定

サイトページのファイル名を設定します。任意になりますが重複しないようにしてください。
（私は日時を設定しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/23520f09-5c74-db87-eb72-02554e7933b9.png)


####テンプレートからサイトページをコピー

上記で作成したテンプレートから、サイトページをコピーします。

Sharepointの[SharePoint に HTTP 要求を送信します]を選び、
[サイトのアドレス]には投稿するサイトを選択
[方法]にはPOSTを選択

URLには

__api/web/getfilebyserverrelativeurl('[テンプレートファイル]')/CopyTo(strnewurl='[コピーするサイトページファイル]',boverwrite=false)_

具体的には下記のように設定してください

```
_api/web/getfilebyserverrelativeurl('/sites/DEMO1/SitePages/Templates/template.aspx')/CopyTo(strnewurl='/sites/DEMO1/SitePages/@{variables('Timestamp')}.aspx',boverwrite=false)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/ddbfcc89-28e4-e348-ef6b-7d0c9f311f27.png)


####アイテムID取得

上記で作成したサイトページのアイテムIDを取得します。
以後のコピーしたサイトページの編集を行うために必要です。
Sharepointの[ファイルメタデータの取得]を利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/946cd9c0-cbfa-e424-9878-ee4db81cb955.png)

####チェックアウト#1

コピーしたページを編集するために、チェックアウトします。
Sharepointの[SharePoint に HTTP 要求を送信します]を選び、

URLには

__api/sitepages/pages([サイトのアイテムID])/checkoutpage_

```
_api/sitepages/pages(@{outputs('ファイル_メタデータの取得')?['body/ItemId']})/checkoutpage
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/edcb94ee-786a-0192-843f-3664a0d60531.png)


####コピーしたページの編集

テンプレートからコピーしたサイトページを編集します。

Sharepointの[SharePoint に HTTP 要求を送信します]を選び、
[サイトのアドレス]には投稿するサイトを選択
[方法]にはPOSTを選択

URLには

_api/sitepages/pages([サイトのアイテムID])?['body/ItemId']})/savepageasdraft_

```
_api/sitepages/pages(@{outputs('ファイル_メタデータの取得')?['body/ItemId']})/savepageasdraft
```

ヘッダーは下記です

| 項目 | 値 |
|:-:|:-:|
|  content-type | application/json;odata=verbose  |
| accept  |  application/json;odata=verbose |

ボディに設定する値は、ブラウザの開発者ツールから取得すると手っ取り早いです。

ニュースの投稿で、作成したテンプレートからニュースを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/afa88b86-1fde-5d97-df0c-ce7793af1bcc.png)

ここでF12キーを押下し、ブラウザの開発者ツールを起動します。

[ネットワーク]を選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5129cc1f-d314-8483-fb3d-72034424bfae.png)

[ニュースを投稿する]を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/ca9e459b-6c7b-63df-46f3-c22d791d7094.png)

[SavePage]を選択し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/eb154b5c-ddde-dc2f-e893-07cf2bbc526f.png)

[ヘッダー]を選択し、要求ペイロードの[ソースの表示]を選択
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/9872a48e-e22d-f2ab-b601-7a8604f8d32a.png)

[要求ペイロード]の内容を、Power Automateのボディにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/146b6169-bb80-92d9-b117-3d182a43a5a8.png)

下図の位置に、トリガーの[PowerApps(V2)]からのパラメータをセットし、ニュースページの内容を編集します。
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/d18b40e8-2cd9-8822-d6d9-112d968bc9a1.png)

####チェックアウト#2

ページをニュースに昇格するために、再度チェックアウトします。
設定内容は上記の「[チェックアウト#1](https://qiita.com/MiyakeMito/private/daac741625c9fc58686e#%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%A2%E3%82%A6%E3%83%881)」と同様です。

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5a2135f7-cc2c-2f74-a0aa-9fb710097c45.png)

####ニュースへ昇格

テンプレートからコピーしたサイトページを編集します。
Sharepointの[SharePoint に HTTP 要求を送信します]を選び、
[サイトのアドレス]には投稿するサイトを選択
[方法]にはPOSTを選択

ヘッダーは下記です

| 項目 | 値 |
|:-:|:-:|
|  content-type | application  |
| accept  |  application/json;odata=verbose |

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/008100e3-c738-17fa-5a4a-5f4a8ba4bb64.png)

####ニュースカテゴリの設定

上記で説明した、ニュースをカテゴリで分類する場合は、カテゴリの設定を行います。
今回はカテゴリを設定していますが、ページのタイトル「Title」の変更なども可能です。
ニュースカテゴリを設定しない場合は不要です。

Sharepointの[SharePoint に HTTP 要求を送信します]を選び、
テンプレートからコピーしたサイトページを編集します。
[サイトのアドレス]には投稿するサイトを選択
[方法]にはPOSTを選択
ヘッダーは下記です

| 項目 | 値 |
|:-:|:-:|
|  content-type | application/json;odata=verbose |
| X-HTTP-Method | MERGE |
| IF-MATCH | * |

URLには、

__api/web/lists/GetByTitle([サイトのアイテムID])?['body/ItemId']})_

```
_api/web/lists/GetByTitle('サイトのページ')/items(@{outputs('ファイル_メタデータの取得')?['body/ItemId']})
```

ボディには、

```
{
    "__metadata": {
        "type": "SP.Data.SitePagesItem"
    },
    "category": "@{triggerBody()['text_2']}"
}
```
"SP.Data.SitePagesItem"のうち、"SitePages"の部分は、ニュースアイテムが存在するページ名になりますので、カスタマイズしている場合は都度変更が必要です。


**"category": "@{triggerBody()['text_2']}"の部分には、ページの各プロパティが指定できますが、現状では「タイトル」「ナビゲーションのロゴ」「説明」のみ更新が可能なようです。**


https://docs.microsoft.com/ja-jp/sharepoint/dev/features/hub-site/rest-getbyid-method

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/c2ea59bf-32fc-a8ef-16e3-d43f50cb7450.png)

####ニュースの公開

最後にニュースをPublishします

Sharepointの[SharePoint に HTTP 要求を送信します]を選び、
URLには、

_api/sitepages/pages([サイトのアイテムID])?['body/ItemId']})/Publish

```
_api/sitepages/pages(@{outputs('ファイル_メタデータの取得')?['body/ItemId']})/Publish
```


![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/bb60864d-2574-1f5b-1c3e-b0791e78dac2.png)