SharePoint Onlineモダン表示「リストのプロパティ」Webパーツで リスト Webパーツと連動したプロパティ画面が作れる

sharepoint online Webpart List Property
「リストのプロパティ」Webパーツ、使うかな?...このパーツ。「リストのプロパティ」単独では動かず、「リスト」Webパーツと連動して プロパティ表示するパーツです。クラシック表示のリストで スタイルを「プレビュー ウィンドウ」にしたときのような動きです。

サイトページの編集で、「リスト」Webパーツを追加して、「リストのプロパティ」Webパーツを追加して、それぞれのパーツを設定します。「リスト」Webパーツは タイトルだけなど 最小限の列だけを表示しておいて、「リスト」Webパーツで アイテムを選択すると 「リストのプロパティ」Webパーツに選択したアイテムのプロパティが表示されます。
sharepoint online Webpart List Property sample

残念ポイント(その1)は、複数のアイテムを選択すると (まとめて)編集・保存の画面になってしまう点です。表示だけ っていう ケースでは使えないですね。
sharepoint online Webpart List Property zannen 1

残念ポイント(その2)は、アイテムが選択されていないときに 固定のメッセージが表示されてしまう点です。せめて 空白にして欲しかった。
sharepoint online Webpart List Property zannen 2

残念ポイント(その3)は、リスト接続のパラメータを指定する前に[...]をクリックする点です。最初は[接続]を押しても パラメータが指定できずに悩みました。
sharepoint online Webpart List Property zannen 3

他にも...リストプロパティで複数行テキスト列の右側に[鉛筆マーク]が表示されるが、クリックしても無反応...などの不具合があり、まだまだ 実運用に耐えられる仕上がりではない感じです。

標準ビューだと 右側プロパティウィンドウなどが固定サイズになるので、その代替として ページに「リスト」Webパーツと「リストのプロパティ」Webパーツを貼って...自前のビューみたいなページができたらうれしいのですが...。おしいっ!


SharePoint Onlineモダン表示「ボタン」Webパーツで 簡易リンクができる

「ボタン」Webパーツ、名前だけを聞くと 「もしかしたら カスタマイズに使えるかも?」っと淡い期待を抱いてしまったりするのですが...残念ながら リンクに毛が生えたぐらいのWebパーツです。
SharePoint Online Webpart Button

サイトページの編集で、「ボタン」Webパーツを追加して、設定します。ボタンラベル、ボタンリンクを指定するだけのシンプル設計です。
SharePoint Online Webpart Button sample

設定を保存して 動作を確認すると...ボタン クリックすると ボタンリンクで指定したURLに画面遷移するというシンプルな動作です。Ctrlキーを押しながらクリックすると 別タブで開くので 普通のリンクです。

ナビゲーションリンクの色合いを サイトの外観に合わせる場合には 使えるかな...。

ボタンラベルの色あいやフォントはサイトの外観に追従。その他、フォントサイズなどは 指定できないという潔さ...これからオプション等が増えていくことを期待しています。


SharePoint Online モダン表示「コール トゥ アクション」Webパーツで 画像付きの簡易リンクができる

「コール トゥ アクション」Webパーツ、名前だけを聞くと どんなWebパーツなのか 解りにくいのですが...背景画像があって その上にタイトルテキストとリンクボタンがある構成で、少しリッチなURLリンクという感じです。
SharePoint Online Webpart CallToAction

サイトページの編集で、「コール トゥ アクション」Webパーツを追加して、設定します。タイトル文字、背景画像、ボタンラベル、ボタンリンクを指定するだけのシンプル設計です。
SharePoint Online Webpart CallToAction sample

設定を保存して 動作を確認すると...ボタン クリックすると ボタンリンクで指定したURLが別タブで開くというシンプルな動作です。

ページのヘッディングに使う方法や、パーツを脇の方に置いて特集ページへのリンクで使う方法などが考えられます。

背景画像は横長の画像で フォーカルポイントは指定できますが、ちょっと癖がある感じですので サイズ(縦横比)や 画像の中心がある場合には 注意が必要です。

タイトル文字の色あいや、フォントサイズなどは 固定仕様という潔さ...これからオプション等が増えていくことを期待しています。


SharePoint Online モダン表示の Webパーツ一覧 2019年10月版

SharePoint Online モダン表示のWebパーツ一覧」で 2017年11月から 2019年2月まで Watchしてきましたが Webパーツの追加/変更/削除が多くて...このサイトの更新が滞ったままで すみませんでした。

そして 久しぶりに Webパーツを調べてみると、Webパーツ数は 41 になってました。
SharePoint Online Modern UI WebPart

以前は Webパーツの選択画面内にあった セクション(1段組み、2段組みなど)は別メニューに変わっていますね。
SharePoint Online Modern UI Section

Webパーツのカテゴリ(おすすめ、テキスト、メディア、コンテンツ、検出など)も増えて、少し整理されつつあるようですね。カテゴリごとのWebパーツは以下の通りです。

<おすすめ>
・テキスト
・画像
・ファイルビューアー
・リンク
・埋め込み
・強調表示されたコンテンツ

<テキスト、メディア、コンテンツ>
・Bing 地図
・Kindle インスタント プレビュー
・Office 365 ビデオ
・Stream
・YouTube
コールトゥアクション
・スペーサー
・テキスト
<検出>
・クイックリンク
・サイト
・ドキュメントライブラリ
・ヒーロー
・ページのプロパティ
・リスト
リストのプロパティ
・強調表示されたコンテンツ

<コミュニケーションとコラボレーション>
・Microsoft Forms
・Twitter
・イベント
・グループ予定表
・ニュース
・ハイライト
・ユーザー
・会話

<ビジネスとインテリジェンス>
・Power BI
・クイックグラフ
・サイト アクティビティ

<コネクタ>
・Microsoft PowerApps(プレビュー)

<その他>
・カウントダウンタイマー
・コードスニペット
ボタン
・マークダウン
・世界時計


新しいWebパーツ 4つぐらいありますので、評価せねば。
コール トゥ アクション
ボタン
リストのプロパティ
・世界時計

Webパーツが 41あるからといって...すべてを使って理解するのは 大変なので、SharePoint Onlineがはじめての方や モダンUIに慣れていない方は、まず 『よく使う モダン表示 Webパーツ TOP10』から 覚えていくとよろしいかと。
第01位 ドキュメントライブラリ
第02位 リスト
第03位 イベント
第04位 ファイルビューアー
第05位 ニュース
第06位 強調表示されたコンテンツ
第07位 ヒーロー
第08位 テキスト
第09位 クイックリンク
第10位 画像ギャラリー


第1位から10位までのWebパーツを使いこなしたら、あとは...お好みですが こんな順番でSharePoint知識を拡げるがよろしいかと。
第11位 天気
第12位 カウントダウンタイマー
第13位 世界時計
第14位 Bing地図
第15位 埋め込み
第16位 コールトゥアクション
第17位 ボタン



SharePoint Online モダンUI カウントダウンタイマー Webパーツ

SharePoint Online モダンUIのWebパーツに、カウントダウンタイマーが追加されました。
SharePoint Modern UI Count down Web part

カウントダウンタイマー Webパーツの使用例

カウントダウンタイマー使用例×3、作ってみました。

2019年10月01日 消費税10%まで
表示:日。背景画像を薄っすらと。
sharepoint Countdown Webpart display 1

2020年01月14日 Windows Server 2008, R2 延長サポート終了日まで
表示:日、時、分。濃い目の画像は文字が読みにくい。
sharepoint Countdown Webpart display 2

2020年07月24日 東京オリンピックまで
表示:日、時、分、秒。秒まで表示するとチカチカする。
sharepoint Countdown Webpart display 3

カウントダウンタイマー Webパーツの設定例

カウントダウンタイマー Webパーツの設定パラメータは、以下の7つが指定できます。
(1)日付と時刻
(2)カウントの方向
(3)タイマーの表示方法
(4)Call to action
(5)背景画像
(6)オーバーレイの色
(7)オーバーレイの透明度

SharePoint Countdown Webpart setting 1

カレンダーが英語だったり、「Call to action」が英語だったり、リリース直後ということで...。

(1)日付と時刻
カレンダーで、「年月日時分」が指定できます。

(2)カウントの方向
「カウントダウン」、「カウントアップ」の2つから選択できます。
カウントダウンタイマーWebパーツという名前なのに「カウントアップ」があるのが面白いところですね。
東京オリンピックなどのイベントまでの日数であれば「カウントダウン」でできますが、イベントの日を過ぎたらマイナス表示になるんですかね?
何かを始めたイベント日からの経過日数であれば「カウントアップ」を使うんですかね。

(3)タイマーの表示方法
「日」、「日、時間、分」、「日、時間、分、秒」の3つから選択できます。
前述の通り「秒」を使うと 安売りサイトのようなチカチカした感じになります。
「日」を使うと 日単位なので 動きが解りにくく 地味な感じになります。

(4)Call to action
オフ/オンの選択です。
オンにすると、リンクテキストとURLが指定できて Webパーツの説明部分にリンクが追加されます。
SharePoint Countdown Webpart setting 2
Webパーツのタイトル、残り日数、説明を読んだユーザーが、このリンクをクリックして 詳細なWebページで情報を閲覧するような流れが作れますね。

(5)背景画像
背景画像が指定できます。画像がないと お寒い感じなので 指定した方がいいですね。
背景画像を指定すると、「(6)オーバーレイの色」と「(7)オーバーレイの透明度」が指定できるようになります。

(6)オーバーレイの色
背景画像の上に 白背景黒文字を乗せるか、黒背景白文字を乗せるかのオプション。

(7)オーバーレイの透明度
中庸を求めるオプション。
透明度を100にすると 背景画像が見えなくなる。
透明度を0にすると 文字が読みづらくなる。



【最近の投稿記事】



SharePoint Online
Office 365/SharePoint Online事始め,ライセンス
Office 365やるってよ |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  E5プラン | 
Office 365/SharePoint Online関連の書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 
Office 365製品、サービス
sway, cortana, delve |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing |  Microsoft 365 Roadmap |  Bookings | 
SharePoint Online リスト/ライブラリ(クラシック)
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  アイテムはレコードです |  イベントのエクスポート |  既定ビュー破損 |  バージョン管理の改悪Update |  複数行テキストのリッチテキスト | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ |  サイトフィード(ニュースフィード)データ出力 | 
SharePoint Online リスト/ライブラリ/ページ(モダン)
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow |  新規メニューの編集 | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー |  モダン Webパーツ一覧 |  コールトゥアクション |  ボタン |  リストのプロパティ | 
SharePoint Online サイト(モダン)
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 |  新しいサイトロゴ | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online 外部共有
外部ユーザー共有 |  外部共有サイト、外部ユーザー |  外部ユーザー削除 Remove-SPOExternalUser |  外部ユーザーの定義とライセンス付与の要否 |  共有の設定オプションが増えた |  サイトコレクション共有設定 | 
SharePoint Online 移行
Notes情報表示 |  Notesデータ移行 |  Sharegateインストール |  Sharegateファイル移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont PnP PowerShell
PnPの概要 |  テナントバージョン取得 | 
SharePiont + PowerApps
PowerAppsリンク集 | 
SharePiont Online 動作仕様
制限値が気になる |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイドリンクバー |  直打ちURL |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  SharePoint Online 10 GB/User増量 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  SharePoint管理センター Preview |  データ移行ツール |  サイトページ機能 |  SharePointホームページ |  管理者の業務範囲 |  記憶域の管理 |  クォータの増量要求 |  クラシックモード制限の無効化 |  通知・設定・ヘルプ |  SharePointホーム画面 | 
SharePiont Online 不具合
Webページ破損 |  サイトコレクション削除 |  おすすめ エラー |  外観変更エラー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  発行インフラストラクチャー機能 Trouble |  ダウンロード最小化戦略の問題点 |  日時がSeattle時間になる問題 |  サイトコレクション削除後の保存期間 |  Webパーツコマンドバー文字が重なる |  日本語対応がひどい | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センターUI |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ |  Office 365 ホーム |  OneDrive削除アクティビティメール |  Projectホームページ |  Teamsチームサイトのアクセス権限 |  O365管理センター メニュー |  ASPX,HTMLファイル表示差異 |  Teamsデスクトップクライアント設定 |  Office Online自動保存と自動編集 |  Microsoft Search |  OneDriveページパラメータ |  SharePoint+Teams+O365グループ |  Officeアプリアイコン | 

SharePoint全般
SharePoint概要
SharePointとは? |  アーキテクチャ |  サイトテンプレート |  リストテンプレート |  Webパーツ |  アクセス権限 |  SharePoint用語集 | 
SharePoint構築 Tips
リスト名(URL) |  ライブラリ名(URL) |  フィールド名(内部名) |  ビュー名(ファイル名) |  リストテンプレート(ワークフロー削除) |  大きなリストの問題 |  アイテム一覧の列幅 |  機能とWebパーツ |  フィールドデータ型 |  禁則文字 |  隠しリスト表示 |  管理パス |  サイト内の列 |  サポート期限 |  PDFをブラウザで開く |  URLエンコード・デコード |  日時の絶対値表示 |  エクスプローラーで開く |  パブリック・個人用ビュー | 
SharePoint開発 Tips
開発の概要 |  開発者ダッシュボード |  MSDN URL |  RESTインターフェイス |  ページパラメータ IsDlg |  ビジュアルアップグレード |  機能(Feature) |  2010開発者向けの資格 |  2013開発者向けの資格 |  ページパラメータ contents |  リソースファイル |  リスト/ライブラリGUID |  テーマ |  トレースログ |  PowerShell文字コード |  SharePoint Framework | 
search this site.
SharePoint Online書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 


SharePointモダン リスト
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow |  新規メニューの編集 | 
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePointモダン Webパーツ
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー |  Webパーツ一覧 |  コールトゥアクション |  ボタン |  リストのプロパティ | 
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePointモダン サイト
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 | 
ひと目でわかる SharePoint Server 2016


ひと目でわかるPowerAppsノンコーディングでのビジネスアプリ作成入門 (マイクロソフト関連書)

SharePoint情報サイト
Tech community(SharePoint)
Tech community(OneDrive)
SharePoint Developer blog
SharePoint Developer Center
Support Team Blog
SharePoint Technical Note
ILLUMINATE JAPAN Blog
AvePoint Japan Community
idea.toString();
からめもぶろぐ。
Office 365 & PowerX
SPeed LAND 365
Art-Break:Tech


   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  水族館 |  仏像 |  論語 |  般若心経 |  庭園 |  二十四節気 |  菜根譚 | 
   SharePoint活用 |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS