JavaScript、CSS による SharePoint サイト カスタマイズ

CI612-H
JavaScript、CSS による
SharePoint サイト カスタマイズ
Illuminate Japan INC. All rights reserved.
CI612-0020
JavaScript、CSS による SharePoint サイト カスタマイズ
はじめに ...................................................................................................... 1
1． SharePoint JavaScript/CSS によるカスタマイズ 概要 ....................................... 2
1.1
カスタマイズにおける JavaScript/CSS の利用シーン ........................................... 3
1.2
SharePoint サイト デザインの基本 .............................................................. 6

既定の画面デザイン .............................................................................. 7

サイト デザインの設定 ............................................................................ 8
2． デザイン カスタマイズ ................................................................................... 14
2.1
CSS/JavaScript によるデザイン変更 ........................................................... 15

デザイン変更を行いたい箇所の HTML 内容を解析 ........................................ 15

解析した内容を利用し、デザインを変更するコードを記述 ................................... 17

CSS/JavaScript の適用 .................................................................... 18

CSS によるサイト デザイン カスタマイズについて ............................................. 23

コンテンツ エディター Web パーツの再利用について ........................................ 24

CSS サンプル ....................................................................................... 26
1).
サイド リンク バー : 非表示 ............................................................... 26
2).
グローバル ナビゲーション : デザイン変更 例① .......................................... 26
3).
グローバル ナビゲーション : デザイン変更 例② .......................................... 27
4).
検索ボックス : 非表示 ..................................................................... 29
5).
サイド リンク バー : デザイン変更 ......................................................... 29
6).
Web パーツのタイトル バー : デザイン変更 例① ...................................... 30
7).
Web パーツのタイトル バー : デザイン変更 例② ...................................... 30
8).
リボン内ボタン : 非表示 (特定のボタンを指定) ......................................... 30
9).
リスト ビュー Web パーツ : 罫線表示 ................................................... 31
10).
リスト ビュー Web パーツ : 列ヘッダー非表示 ....................................... 31
11).
リスト ビュー Web パーツ : 列幅調整 (列名を指定) .............................. 32
12).
注目リンク Web パーツ : 画像サイズ変更 ........................................... 32
13).
コンテンツ検索 Web パーツ : 行間調整 ............................................. 32

JavaScript サンプル .............................................................................. 33
1).
リンク リストのデザイン変更 .................................................................. 33
2).
ページ内の Web パーツ 展開/非展開表示 ............................................. 35
2.2
JS リンク によるリスト ビュー表示変更 ........................................................... 37

JS リンク 基本 ................................................................................. 37

表示カスタマイズ領域 ........................................................................... 38

表示 HTML を直接置き換える .............................................................. 39

表示 HTML を関数の戻り値で指定する .................................................... 40
JavaScript、CSS による SharePoint サイト カスタマイズ

JS リンク サンプル .................................................................................. 41
1).
数値列をプログレス バーで表示 ............................................................ 41
2).
条件付き書式 表示 ........................................................................ 42
3).
テーブル表示 ................................................................................. 43
4).
CallOut を利用したデータ表示 ............................................................ 44
[参考] SharePoint Designer 2013 によるリスト フォーム編集 ................................... 46
3． 機能カスタマイズ ........................................................................................ 51
3.1
SharePoint クライアント API .................................................................... 52

JavaScript API 利用 サンプル ................................................................. 54
1).
リスト アイテムの一覧取得と表示 .......................................................... 54
2).
簡易意見収集 リスト アイテム送信 ....................................................... 58
3).
リスト アイテム クエリ結果 件数表示 ...................................................... 60
4).
リスト アイテム クエリ結果 件数をゲージ表示............................................. 61
5).
リスト アイテム集計結果 棒グラフ表示 .................................................... 63
6).
選択したリスト アイテムのコピー ............................................................. 66
7).
選択したリスト アイテムの一括更新 ........................................................ 69
8).
検索機能の利用 ............................................................................ 70