SharePoint Listsとドキュメント ライブラリを組み合わせたビューをPower Appsで作る part-2

# はじめに
このブログは[SharePoint Listsとドキュメント ライブラリを組み合わせたビューをPower Appsで作る](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)の続き。

https://qiita.com/DEmodoriGatsuO/items/ad1642d4189479112cfa

途中で力尽きました・・・。

このテーマに伴い、
1. **SharePoint Listsのカスタマイズ**
1. **Power Appsの関数による調整**

上記が残っています。
これについて解説していきましょう。

# SharePoint - Lists ・ ドキュメントライブラリをカスタマイズする
さて、Power Appsによるビューを作成しましたが、**これどうやって起動するの？**
という課題が出てきてしまいます。

ここで実行することが、SharePoint Listsの列・ビューのカスタマイズです。

参考とするリンクはこちら

https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

https://github.com/pnp/List-Formatting/tree/master

[Microsoft 公式 learn](https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration)と[Microsoft 365 プラットフォーム コミュニティ（PnP）のGitHub](https://github.com/pnp/List-Formatting/tree/master)です！

Microsoft 365 プラットフォーム コミュニティのSharePointカスタマイズの情報は見ているだけで、**SharePointでこんなことできるの！！** と衝撃を受けます。

**ブックマークすることをお勧めします。**
また今回のSharePointのカスタマイズも、こちらのリポジトリのコードを活用します。

リポジトリの主が、[Microsoft MVP てっちゃん (Tetsuya Kawahara)](https://twitter.com/techan_k)です。
**本当に凄い！尊敬いたします！！**

https://twitter.com/techan_k

https://mynote365.hatenadiary.com/

## SharePointのビューをカスタマイズする

:::note info
本編とはずれた自己満足の領域です
:::

不要であれば、やらなくていい内容です。
ビューをJSONで見栄えを整える、という方法になります。

[Microsoft 公式learn](https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration)を参考に、

https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

**Before**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/c3bf9d13-8d17-c744-e937-1abc1b18f4a0.png)

**After**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/0b11f802-85c7-5a43-82b5-9c44ecc84d12.png)


```json:ヘッダー
{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Warning12",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Incident details of ' + [$Title]"
                }
            ]
        }
    ]
}
```

```json:本文
{
    "sections": [
        {
            "displayname": "Infomation",
            "fields": [
                "事件ID",
                "Title"
            ]
        },
        {
            "displayname": "Detail",
            "fields": [
                "担当者",
                "発生日時",
                "区分"
            ]
        },
        {
            "displayname": "",
            "fields": [
                "概要"
            ]
        },
        {
            "displayname": "",
            "fields": [
                "ハイパーリンク"
            ]
        }
    ]
}
```

**映える!!**
**JSONのメリットとして、起動がメッチャ速い！**

:::note info
添付ファイルは「リストの設定」で非表示にしています
:::

Fluent UI Iconのリンクは下記を参考に！

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons


## SharePointの列をカスタマイズする
### 1. サムネイルの作成

:::note info
本編とはずれた自己満足の（以下略
:::

列を追加 > 1行テキストでタイトルと`Thumbnail`と入力するだけで、サムネイルがでます。
広く知られている技のようですね。

https://www.illuminate-j.jp/blog/spolibrary-thumbnail

この上をいく技はコチラのリポジトリを参照！

https://github.com/pnp/List-Formatting/tree/master/column-samples/file-thumbnail

**So Cool!!**

## 2. Power Appsの起動ボタンを作る

**やっとかよ！**
コチラを参考にして、列の書式をカスタマイズします。

https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting#create-clickable-actions


ListsではId列の書式カスタマイズができないため、ボタン用の列を設けます。
`列の書式設定`にて下記の通り、カスタマイズします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/78b8056f-35c3-f3cf-999d-42403d20060a.png)

```json:Lists
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "width": "120px",
        "height": "26px",
        "border-radius": "3px",
        "cursor": "pointer",
        "display": "flex",
        "align-items": "center",
        "justify-content": "space-evenly",
        "margin": "5px",
        "text-decoration": "none"
      },
      "attributes": {
        "class": "sp-field-quickActions",
        "iconName": "PowerAppsLogo",
        "href": "='https://apps.powerapps.com/play/e/default-hogehogehogehogeItemId='+ [$ID]"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Power Apps !"
        }
      ]
    }
  ]
}
```

ドキュメント ライブラリでは`case`という参照列をボタンにしてしまいましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/9ab65160-d418-e11d-583a-dc0dcff67a16.png)

```json:ドキュメント ライブラリ
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "width": "120px",
        "height": "26px",
        "border-radius": "3px",
        "cursor": "pointer",
        "display": "flex",
        "align-items": "center",
        "justify-content": "space-evenly",
        "margin": "5px",
        "text-decoration": "none"
      },
      "attributes": {
        "class": "sp-field-quickActions",
        "iconName": "PowerAppsLogo",
        "href": "='https://apps.powerapps.com/play/e/default-hogehogehogehogeItemId?ItemId='+ @currentField.lookupValue"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Power Apps !"
        }
      ]
    }
  ]
}
```

`href`の値は、Power AppsのWebリンクです。
こちらにパラメーターを仕込んでいます。`?ItemId'=+ "[$ID]"`の部分ですね。
これにより、Power Appsに値を渡すことができます。

`Power Apps`の`Param関数`です。
そちらを見ていきましょう。

#### その他、参考
[SharePointのリストの書式設定に関する値](https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1)は下記のブログが参考になります！

https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1


# Power Apps
[前回作成したPower Appsのビュー](https://qiita.com/DEmodoriGatsuO/items/ad1642d4189479112cfa)をSharePointで選択した行に紐づく情報を集約するため、SharePointから渡されたパラメーターから、制御します。

活躍する関数は[Param関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-param#param)です。

## Param関数
**Power AppsのWebリンクの末尾にパラメーターを付与して、Power Appsの起動時に値を渡せる関数**。
リンクによって、Power Appsの最初の画面、ステータスを変えたりと、便利な関数です。

関数の使い方を深堀している記事は下記が非常に参考になります。
[MicrosoftのMukaiさん](https://twitter.com/KumikoMukai_jp)と[公式Learn](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-param#param)ですね。

https://twitter.com/KumikoMukai_jp

https://qiita.com/kumukai/items/aaf0de5e6c9c782b3a33

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-param#param

## Power Apps側の設定
リンクに`パラメーター`が付与されているので、それをキャッチする仕様にしましょう。
`App`の`OnStart`に下記の関数を仕込みます。

```plaintext:OnStart
If(!IsBlank(Param("ItemId")),Set(ItemId,Value(Param("ItemId"))),Set(ItemId,1))
```

今回私が設定しているパラメーターの名前は`ItemId`です。
If文でパラメーターの有無を調べています。
elseは完全に妥協ですね。

あとは、[前回作成したPower Apps](https://qiita.com/DEmodoriGatsuO/items/ad1642d4189479112cfa)のFormやギャラリーの値を変更するだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3a12c531-d2c8-f2fd-1c31-a3c8d5595010.png)

```plaintext:Item
First(Filter(CaseFiles,ID = ItemId))
```

```plaintext:OnSelect
Launch(First(Filter(CaseFilesDocs,フォルダーである=true,case.Value = Text(ItemId))).アイテムへのリンク)
```

```plaintext:Items
Sort(Filter(CaseFilesDocs,フォルダーである=false,case.Value = Text(ItemId)),Category.Value)
```

データ型は、とりあえず`Value()`と`Text()`を使って、無理やり整合性をとっています・・。

:::note warn
データ型の調査は及んでいないとこがあります・・・。
完了次第、アップデートしますので、ごめんなさい🙇
:::

**しかし、これによって準備！**

# SharePointからPower Appsを起動
選択したSharePoint Listsの行ID、ドキュメント ライブラリで入力されている参照しているIDからPower Appsが起動できます。

![タイトルなし 13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/2f4b9c79-6162-741a-4c7d-49baf25c93b9.gif)


入力箇所が分散することによるやり辛さは決して否めません。
**しかし、製品の機能を調べ、効率の良い運用を考えることもユーザーの腕の見せ所だと思います。**

特に**SharePoint**は、

- ファイルサーバーをそのまま置き換えて、
- ファイルサーバーと同じような運用をする

**この場合、やり辛いばかりか、Power AppsやPower Automateを中心としたクラウドの恩恵を受けられません。**

考え方を少し変えるだけで、とんでもなく業務が楽になるかもしれません。
そんなTipsを挙げていきたいと思います。

**メリークリスマス！**
**よいお年とPower lifeを！**

**Microsoft 365活用、一緒に楽しみましょう♪**