PowerAppsを使ったSharePoint リストフォームのカスタマイズ例 (2018年度)

SharePoint リスト フォームは PowerApps でカスタマイズできるようになっています。

どんなものができるかということですが、過去に公開した記事や Twitter に投稿した内容を含め、いくつか例がたまってきたので並べてみます。一部は作り方を載せていますが、掲載していないものもありますが。

[PowerApps] 事例 - SharePointリストで管理する受講者履歴

弊社では定期的に Office 365 および SharePoint 関連の研修を行っていますが、受講する方が過去にどういったコースを受講していただいたかなどを確認するために、「受講履歴」を Shar...

 


[SharePoint Online] モダンサイトのカスタムテーマ

SharePoint のモダンサイトではカスタム テーマを作成できるようになっています。

作成したテーマはテナント全体で共有する設定であるため、テーマの登録は SharePoint Online の管理者である必要があります。

が、登録してしまえば、サイトの所有者やデザイン権限を持っいるユーザーはサイトごとに好きなテーマを適用できます。

詳しくは下記のURLを参照してください。

SharePoint サイトのテーマ

試しにいくつかカスタム テーマを作成して適用してみました。テーマは "和" 。和の色味でいくつかしっとりしたデザインにしてみました。少しでも参考になれば。

Theme-01

Theme02

Theme03

Theme04

Theme05

おまけで宣伝

サイトのデザイン、カスタマイズなどを扱っている研修コースは下記のリンク先を参照してください。

「オフィスアイ オリジナル研修」 SharePoint Online モダン ポータルサイトの設計・デザイン・展開 ワークショップ

ちなみに、弊社のオフィスアイ ラーニング ポータルでは上記で紹介した各デザインの JSONスキーマを公開しています(For Developerプランのみ)。


[SharePoint Online] サイトページのセクション レイアウトの例

モダンサイトでサイトページを作成するとき最近気に入っているレイアウトの使い方をご紹介します。

セクションのレイアウト

今のところ私が気に入ってよく使うのが、3分の1が左の列というレイアウト構成です。このレイアウトにして左側には章ごとの見出しのみ書いておきます。右側に本文というパターンですね。詳しくは下記のビデオで確認してみてください。音声はありません。

この構成のセクションを繰り返していき、メリハリが足りないときにはセクションの背景に色を指定します。この構成だと見やすく、しかも画面サイズを小さくしても、見出しが担保されます。使いやすい構成だと思うのでお勧めです。

画像などについて

ところで、画像Webパーツの取り扱いについて少し補足を。このWebパーツの扱いが最初慣れないのではないかと思います。このWebパーツは配置すると、その列の幅いっぱいに表示されます。クラシックサイトの利用経験がある方は特にサイズを指定したくなるところでしょうが、レスポンシブ Webデザイン対応を考えると下手にサイズ指定はしない方がよい。もちろん、将来的にはもしかしたら細かいサイズ指定などができるようになるかもしれませんが、今の SharePoint サイトはとにかくエンドユーザーでも手軽に使えるように変わってきています。従来のサイトのように、あまり細かい設定があると、結局ユーザーが覚えきれないというところもありました。そういう意味ではユーザーフレンドリーだとも言えます。

ということで、まずはレイアウトの仕方で工夫するのが得策です。


SharePoint Framework で作成したWebパーツを Teams タブとして利用する

たまには、バリッと開発寄りの記事を書きます。

SharePoint Framework を使うとモダンサイトはもちろん、クラシックな SharePoint サイトでもクライアント サイド実行の Webパーツを独自に作成できます。

この Framework は現在はSharePoint Framework 1.7 (2018年11月リリース)が最新で、もうすぐ v 1.8 がリリースされるところまで来ています。v 1.7で追加された目玉機能の一つがプレビュー機能ではあるものの、"SharePoint Framework for Teams Tabs" のサポートです。

SharePoint Webパーツを Teams のタブとしても利用できるようにするというもの。

2019-03-04_16-39-25

作り方の大まかな流れは次の通りです。

  1. Yeomanジェネレータ実行時に --plusbeta オプションを指定してスキャッフォルディングする
  2. Teams フォルダーが生成される
  3. 通常通り Webパーツコードを記述していく
  4. Gulp bundle --ship および Gulp package-solution --ship を実行する
  5. Teams フォルダー内のファイルを Zip 化し、Teams 側へアップロード
  6. アプリをタブとして追加

では、分かりにくいであろうところを少し補足していきましょう。

まず Yeoman ジェネレータですが、v1.5 から --plusbeta オプションが追加されました。このオプションを追加することでプレビュー段階の機能を試せるようになっています。Teams タブとして利用するにはこの --plusbeta オプションが必要です。

>yo @microsoft/sharepoing --plusbeta

ソリューションパッケージを Ship モードで作成すると下図の通り Teams フォルダー内に manifest.json と Teams内で使用する既定のアイコンが2つ用意されます。

SPFxTeamsTabSolutionInVSC

このフォルダー内のファイルを手動で単純に ZIP化します。

これをTeamsのチーム所有者が下記の場所からアップロードするだけです。

2019-03-04_16-19-07

アップロードが終わると、アプリ一覧に SPFx アプリが表示されます。

2019-03-04_16-19-47

あとは、SharePoint サイト上で Webパーツが動作し、同じものがTeams内でも動作することを確認してみましょう。ちなみに、デモのアプリはカレント SharePoint サイト内のライブラリ一覧を取得するようにしています。Teams 内で動作させているように見えるこのアプリですが、実体となるコードは SharePoint側でホストされることになるため、同一サイトを利用しているTeamsのチーム上でも同じ結果が得られます。


[SharePoint Online] RSS Webパーツと PowerApps

SharePoint のモダンサイトでは RSS Webパーツを利用したくても、コネクターとして提供されているうえに、Office 365 グループに接続されていることが前提になってしまっています。コミュニケーション サイトを前提にポータルを作るとなると、Office 365 グループ接続はしないでしょうし、仮に Office 365 グループに接続されていたとしても、このコネクター自体、あまり使い勝手がよくありません。

実際に同様のご質問を、以前、研修時にも頂きました。

さて、今のところ最善策として取り得る選択肢の一つは SharePoint Framework を使って独自に Web パーツを作るかということですが、これもいきなりはハードルが高い。そこで手軽に利用することを考えると PowerApps アプリとしてページに埋め込んでしまうというのも一つの手です。

実際に作成してみているのが下記のページです。PowerApps の公式 Blog の RSS フィード("https://powerapps.microsoft.com/en-us/blog/feed/")を読み込んでいます(細かい話ですが、"New!" アイコンは発行日が今日から一週間以内かどうか簡単な判定式を書いて表示しています。基本的な手順だけではアイコンまでは表示できないのでご注意を)。

RssPowerAppsBlog

ちなみにSharePoint Framework に関しては React コントロールを使った Webパーツの紹介およびソースコードが最近実施された SharePoint Developer Community (PnP) の Community Demo でも公開されています。

PowerApps アプリの作成

大まかな手順は次の通りです。

  1. 空の携帯電話レイアウトからキャンバス アプリを作成
  2. データソースとして RSS コネクターを追加しておく
  3. OnStart もしくはメインスクリーンの OnVisible に次の式を指定
    ClearCollect(feeds,RSS.ListFeedItems("https://powerapps.microsoft.com/en-us/blog/feed/"))
  4. ギャラリーコントロールを配置し Items プロパティに feeds コレクションを設定
  5. 画面上部にHtmlテキスト コントロールを配置し、Galleryで選択したアイテムの Summary 部分を表示

もちろん、細かい微調整はするのですが、大体は上記のような感じで作成します。さらに言えば、SharePoint リストの RSS フィードは利用できませんので注意しましょう。そもそも、SharePoint リストなら、PowerApps から SharePoint コネクターを使えばリストデータは取得できるため RSS フィードは利用する必要がありません。

音声はありませんが、手順をビデオにしているので参考になれば幸いです。