【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を利用すればアプリレベルでの開発等も行えます。
ですが敷居が高いのでここらへんは追々やっていこうかなと思います。

それではまた。

JavaScript, Office365, SharePointHTML, モダンUI, 検索

Posted by ebonight