代替 CSS の設定を JavaScript で行う

SharePoint 2013

2015.07.15

前回の投稿でも出てきましたが、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>