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

Download Report