SharePoint でブラウザから newform.aspx をカスタマイズする
はじめに
社員同士の情報共有とかコラボレーションとか言われるようになって久しいですが、自分がいわゆる SIer っぽい仕事をしなくなって導入とか運用という観点から Microsoft 製品と関わることもほとんどなくなっていた昨今。時代の流れか（？）今いる組織にも SharePoint ベースのチームサイトが導入されました。Notes から SharePoint への移行という SIer あるある案件でしたが、よくある話で素のまま使うのはちょっと…ということでどちらかというとエンドユーザー側の、権限が制限された中でどこまでカスタマイズができるのかなと探っていたのでした。
今回は、SharePoint のリストやライブラリで新しいアイテムを追加するときに表示される newform.aspx をソースコードを編集することなくカスタマイズできることが分かったのでその話です。
実行環境
- SharePoint Server 2013 (管理者ではないので詳細バージョンは不明)
- IE11 (11.0.85、お察しください)
- Microsoft Edge (Ver. 41.16299.665.0)
実際に動作を確認したのは SharePoint Server 2013、オンプレミス版ですが、SharePoint Server 2016 および SharePoint Online でも同じ機能、画面はあるので利用可能だと思います。特に Online はオンプレミス版よりも制限が大きい可能性が高いので使えるかもしれません。
最近のブラウザには開発者ツールが搭載されているので、newform.aspx を制御している CSS ファイルを特定するのは全然難しくないのですが、CSS を編集するのは影響範囲も大きいですし、そもそもサーバー上にあるファイルを直接編集する権限もない、そういう環境です。同じ理由で代替ファイルをアップロードする方法も使えません。
ちなみに Sharepoint をカスタマイズしたことがある方の中には SharePoint Designer というツールがあることをご存知の方がいらっしゃるかもしれませんが、SharePoint Designer は 1) ファイルサイズが大きすぎて社内のネットワークからダウンロードできない（負荷が大きくなるとかそういう理由で遮断される）。 2) インストールできない。という残念な条件が整っていたため利用できませんでした。このブログは 21 世紀平成最後の年に書かれています。
あと、SharePoint Designer は 2013 のバージョンで終了、今後は Microsoft Flow を使ってねという話もありますし、こういった使い方を知っておくのもいいかと思います。
本文を書くテキストボックスの横幅が狭い
ことの発端は、主に情報共有などのためにノウハウや技術情報を書くにあたってアイテムを作成する際に、本文を書くためのテキストボックスの幅が規定では 386 px、日本語ではわずか 33 文字で改行されてしまいます。縦はスクロールバーではなくテキスト量に合わせて伸びるのでまだましですが、できるなら横幅をもっと広くしたいという要望でした。
それで、結論から言うと次の手順でテキストボックスの幅を広げることが可能です。
- 新しいアイテムを作成する際に本文のテキストボックスの幅を広げたいリストまたはライブラリを開き、[リスト] タブから [フォーム Web パーツ] をクリックし、[既定の新しいフォーム] を選択します。
- [新しいフォーム] の編集ページが開いたら、[メイン] 領域内にある [Web パーツの追加] をクリックします。
- 追加する Web パーツの [カテゴリ] 項目から [フォーム] を、[パーツ] 項目から [HTML フォームの Web パーツ] を選択し、[追加] をクリックします。
- [HTML フォームの Web パーツ] の右端にあるドロップダウンリストから [Web パーツの編集] をクリックします
- 画面右端に表示された Web パーツの編集メニューの [フォーム コンテンツ] 項目から [ソースエディター…] をクリックします。
- [テキスト エディター] ウィンドウが開いたらはじめから書き込まれている内容をすべて削除し、後述の内容を入力して [保存] をクリックします。
- [テキスト エディター] ウィンドウが閉じたら、Web パーツ編集メニューの下部にある [適用] ボタンをクリックし、書き込んだ内容が反映されていたら [OK] をクリックして編集を終了します。
- さらに [ページ] タブにある [編集の終了] ボタンもクリックして [既定の新しいフォーム] の編集を終了します。
テキスト エディターに書き込むコード
<style type="text/css" >
/*width (幅) の値は任意です。*/
.ms-rtefield {width:800px;}
</style>
コードの解説
見ての通りでただ1行追加するだけの話なのですが、.ms-rtefield はリッチテキストフィールドのことで、これを指定した場合、SharePoint でいうところの [複数行テキスト（かつリッチ テキスト）] の列の横幅が上書きされると思われます。つまり厳密には同じページに [複数行テキスト（かつリッチ テキスト）] の列が複数ある場合はそれらすべてに影響します。
一方、同じページにある [1行テキスト] の横幅には影響がありません。影響がないということは Web パーツの列のすべての横幅がそろわないということでもありますので、[1行テキスト] のテキストエリアがやたらと横に伸びても横幅をそろえたい場合は .ms-long の横幅を指定すれば影響範囲がもう少し大きくなります。
実際にこの設定を行った後に、広がったテキストボックスの部分のソースを見てみると、body 要素に直接上の内容が書き込まれており、いわゆるカスケーディングの優先順位の仕組みを利用して通常は外部 CSS ファイルで指定されている内容を特定の部分だけ上書きしているように見えます。SharePoint Server のディレクトリにある newform.aspx ファイルを直接確認したわけではありませんが、おそらく設定を変更したタイミングで対象のリストのディレクトリにある newform.aspx ファイルの更新日時が変わっていると思います。
他にもやってみた
完全に余談ですが、構造が複雑なので要素を特定するところは意外に骨が折れるものの案外簡単に設定を上書きできるんだなと思い、単なる思い付きで [保存] ボタンの色だけ変えてみようかと思って追加したのが以下のコードです。
テキスト エディターに書き込むコード
<style type="text/css" >
/*background-color (背景色) の値は任意です。*/
input#ctl00_ctl33_g_c8d55b6b_5167_4750_b0cb_e1d95eb871ba_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem {background-color:#69f0ae;}
input#ctl00_ctl33_g_c8d55b6b_5167_4750_b0cb_e1d95eb871ba_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem:hover {background-color:#9fffe0;}
</style>
何だこれはと思うかもしれませんが、各 newform.aspx にある [保存] ボタンはそれぞれ個別の id が割り当てられており、特定の [保存] ボタンの背景色のみを変更する場合はこういう可読性の低い指定をしないといけませんでした。上の本文のテキストボックスも同様に、そこだけの設定を変える場合はこういった個別の id を指定する必要があります。newform.aspx が参照している CSS ファイルを見ると input[type=submit] という要素もあるのですが、これで指定してしまうと、当たり前ですが同じ要素のボタンは全部色が変わります。ご利用は計画的に。
注意点として
見ての通りファイルの内容を書き換える機能ですので、セキュリティの観点からルートのサイトコレクション上では利用できません。カスタムスクリプトを実行するような機能を実装した Web パーツをルートのサイトコレクションに設置したい場合は、グローバル管理者の権限でサイトの設定を変更する必要があるようです。詳細は Missing web part and features in office 365 から。
