SharePoint Online/SharePoint Server – アンケートの質問内で画像を利用したい
よくいただく質問から第4弾です。
■ 質問内容
アンケートの質問内で画像とかハイパーリンクを利用したい
■ 回答
標準機能の範囲ではできませんが、簡単な JavaScript を入れることで質問内での画像の挿入やリンクの挿入は可能です。
さらに JavaScript を挿入した状態でリストテンプレート化することで、再利用もできます。
下記リスト テンプレートはサンプルです。
・ SharePoint Online および SharePoint Server 2013 用
・ SharePoint Server 2010 用
サンプルの リスト テンプレートについて
アンケートがベースになっており、質問内に画像の挿入や、ハイパーリンクの挿入が行える内容です。
■ サンプルのリスト テンプレート展開方法
サイト コレクション内のリスト テンプレート ギャラリーに、上記よりダウンロードしたリスト テンプレートファイル (stp) をアップロードします。展開作業後、サイト コレクション内で利用可能です。
1.トップ レベル サイトのサイトの設定画面を開き、[Web デザイナー ギャラリー] 内の [リスト テンプレート] をクリックします。
2.リスト テンプレート ギャラリーが開いたら、ダウンロードしたリスト テンプレートファイル (stp) をアップロードします。
■ サンプルのリスト テンプレート 利用方法
リスト テンプレート ギャラリーに展開すると、そのサイト コレクション内の全サイトでアプリ作成時のテンプレートとして利用できます。
1.追加したテンプレートを利用して、アンケートをサイト内に作成します。
2.質問を作成する際に、下記を利用ください。
● 画像を質問内に挿入したい場合
あらかじめサイト内の任意の場所に画像ファイルをアップロードしておき、質問内に
startimg_画像ファイルパス_endimg と入力
● ハイパーリンクを質問内に挿入したい場合
質問内に startlink_ハイパーリンク先_endlink と入力
■ カスタマイズ内容について
SharePoint Designer を利用し、NewForm.aspx および EditForm.aspx に JavaScript を挿入しています。質問文章内の下記文字列を次のように変換しているだけです。
・ startimg_ → <img src=
・ _endimg → />
・ startlink_ → <a href=”
・ _endlink → “ target=”_blank”>クリックして開く</a>
サンプルなので、あんまり細かいところまで作りこんでいません。
たとえば、1質問内に画像やハイパーリンクはそれぞれ1つずつしか挿入できないです。
あと DispForm.aspx はカスタマイズしていないので、回答内容を表示する画面では画像やハイパーリンクには置き換わりません。そのあたりも対応してみたい場合や、画像やハイパーリンクだけではなく、それ以外の要素を含めたい場合は SharePoint Designer で JavaScript を編集してください。
NewForm.aspx は新規で回答する際の回答フォームです。EditForm.aspx は再編集する際の回答フォームであり、新規で回答する際にも、[ページ区切り] を利用している場合は2ページ目以降の回答フォームとして利用されています。JavaScript 内容をご自身でさらに変更加える際には、同じコードを NewForm.aspx および EditForm.aspx 両方に入れてくださいね。
以上、奥田でした
SharePoint 関連コース
- CI635-H SharePoint Server サイト構築
SharePoint Server のサイト管理やサイト構築を行う方を対象に、サイト構築や運用管理に必要となる基本スキルやサイト構築方法を習得いただけるコースです。これから SharePoint の管理を行う IT 管理者の方や、サイト管理やサイト構築を行う担当者の方に最適です。Subscription Edition に対応しており、アップデートによる新しい機能やこれまでとの差異も含めて解説! - CI639-H SharePoint Server から SharePoint Online への移行 – SPMT 実践
Microsoft が提供する無償ツール 「SharePoint Migration Tool」 による、オンプレミスの SharePoint Server (2016 / 2019) から、SharePoint Online を中心とした Microsoft 365 環境への移行方法を解説します。SPMT を用いた一連の移行手順を体験することで、ツールの設定方法やログの読み方、移行後の検証作業など、実運用に直結するスキルを習得いただけます。 - CI620-H SharePoint Framework 開発 基礎
SharePoint Framework (SPFx) を利用すると独自の Web パーツ開発や、ヘッダー・フッターのカスタマイズなど、さまざまな独自機能を開発し、追加することが可能です。これから SharePoint Framework の開発を行う方を対象に知っておくべき内容を 2 日間に集約して体系的に解説!