前回の投稿でも出てきましたが、SharePoint のデザインをカスタマイズする際には「代替 CSS」を設定することがあります。しかしながら、この「代替 CSS」の GUI での設定は「デザイン マネージャー」に含まれており、「発行機能」を有効化したサイトでしか行えません。ただし、発行機能を有効化していないサイトでも API を利用することで設定が可能なようでしたので、お手軽な JavaScript Object Model (JSOM) を利用して設定する方法を試してみました。

さっそくスクリプト

スクリプトからは SP.Web オブジェクトの AlternateCssUrl プロパティを操作します。作成したスクリプトでは、すでに設定された値を呼び出す getCssUrl 関数と、値を設定する setCssUrl 関数を用意しました。

<script type="text/javascript">
function getCssUrl(){
  var ctx = SP.ClientContext.get_current();
  var web = ctx.get_web();
  ctx.load(web);
  ctx.executeQueryAsync(onSucceeded, onFailed);
  
  function onSucceeded(sender, args){
    alert('Site Title:' + web.get_title() + '\nAlternate CSS URL: ' + web.get_alternateCssUrl());
  }
  
  function onFailed(sender, args){
    alert(args.get_message() + '\n' + args.get_stackTrace());
  }
}

function setCssUrl(){
  var ctx = SP.ClientContext.get_current();
  var web = ctx.get_web();
  web.set_alternateCssUrl(document.getElementById('txtAltCssUrl').value);
  web.update();
  
  ctx.load(web);
  ctx.executeQueryAsync(onSucceeded, onFailed)
  
  function onSucceeded(sender, args){
    alert('Site Title:' + web.get_title() + '\nAlternate CSS URL: ' + web.get_alternateCssUrl());
  }
  
  function onFailed(sendar, args){
    alert(args.get_message() + '\n' + args.get_stackTrace());
  }
}
</script>
<div>
  Set AlternateCssUrl as <input type="text" id="txtAltCssUrl" name="txtAlternateCssUrl"/>
  <button onclick="setCssUrl();return false;">Set CSS Url</button>
  <button onclick="getCssUrl();return false;">Get CSS Url</button>
</div>

動かしてみる

スクリプト エディターなどでページに配置すると下図ように表示されます。設定を行うには、テキスト ボックスに設定したいスタイル シートの URL を入力し、「Set CSS Url」ボタンを押します。

20150715-1

うまく設定ができると、ポップアップでダイアログが表示され、設定後の値が表示されます。もちろん、実行したユーザーがプロパティを変更する権限がない場合は設定ができませんので、フルコントロール権限のユーザーで行うのが確実かと思います。

さいごに

このように JSOM や CSOM からも設定を行うことができ、さらには発行機能を有効化していないサイトでも設定が行えるようでした。そこそこ利用できる機会はありそうな気がします。