【SharePoint Online】モダンUIをカスタマイズして検索ボックスを配置する
先日業務上、モダンページにカスタムした検索ボックスを配置したいという要望がありました。
これについて、調べるまで「モダンページはカスタムできない!」と考えていましたが、
実際にはそんなことなく、裏技的な方法で対応することができました。
参考にさせて頂いたサイト様:idea.toString();
[埋め込み]WebパーツでHTMLを埋め込む
まず、この方法で JavaScript を埋め込んだページを[埋め込み]Webパーツで表示させるには、
サイト コレクションの設定を変えておく必要があるようです。
簡単に言うと制限の解除です。以下を実行しましょう。
(ア) Connect-SPOService -Url <管理センターURL> -Credential <管理者アカウント>
(イ) Set-SPOSite <サイト名> -DenyAddAndCustomizePages $false
検索ボックスのためのコードを書いていく
注意点として、ただのページ作成であるためJSOMは利用できないということです。
どうしても利用したいという場合にはREST APIを使う必要があります。
<pre class="wp-block-preformatted"><html dir="ltr" lang="ja-JP">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>検索ページ</title>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
<link rel="stylesheet" href="//static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
<script type="text/javascript" src="//static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<script type="text/javascript">
var sitePath = "【サイト名】" + "/_layouts/15/search.aspx/siteall?q=";
function SearchPage(query){
var queryString = document.getElementById(query).value;
window.open(sitePath + queryString);
}
</script>
</head>
<body>
<form name="form1" id="id_form1" action="">
<input type="text" id="txt1" placeholder="検索したい文字を入力してください。">
<input type="button" value="検索" onclick="SearchPage('txt1');">
</form>
</body>
</html></pre>
もう1点注意点として、ページ上への表示に iframe が利用されるため、
CSS も自分で作成しておく必要があることです。
今回は、参照先サイト様と同様にOffice UI Fabric JS を利用しています。
作成したページはASPXの拡張子として保存しておきましょう。
ページに貼り付ける
さて、あとは作成したファイルをサイトにアップロードし、[埋め込み]Webパーツで参照してあげるだけです。
これでやっと検索ボックスをページに貼り付けることができました。

今回は以上となります。
その他にもモダンの開発にはSP Frameworkを利用すればアプリレベルでの開発等も行えます。
ですが敷居が高いのでここらへんは追々やっていこうかなと思います。
それではまた。
Discussion
New Comments
こんにちは、
検索ボックスを追加したく、この記事を参照させていただきました。
しかし、作成したASPXファイルをsharepointにアップロード、[埋め込み]Webパーツとして追加しましたが、「このファイルには、表示できるプレビューがありません」とういうエラーが発生し、検索ボックスの表示はできませんでした。
もし原因がわかりましたら、ご教示いただきますと嬉しいです。
※ASPXのコードにつきまして、記事のコードをコピーさせて、「sitePath 」のみ変更しました。
よろしくお願いいたします。
rikyo様
確認が遅れて申し訳ありません。
aspxが利用できない問題は、基本的にページのカスタマイズが行えない環境であることが多いです。
念のため確認ですが、カスタムスクリプトの許可は行っているのかご連絡ください。
(ア) Connect-SPOService -Url <管理センターURL> -Credential <管理者アカウント>
(イ) Set-SPOSite <サイト名> -DenyAddAndCustomizePages $false
情報が少ないのでこれ以上のことが分からないのですが、解決する助力をさせて頂ければと思います。