リスト ビュー Web パーツを他サイトで利用したい

以前本 Blog で 「SharePoint 2013 リスト ビュー Web パーツを他のサイトでどうしたも使いたい」 という記事を UP したことがありますが、今回は同様のことを SharePoint Designer を利用して行う方法のご紹介です。
(1/30 (土) の Japan SharePoint Group 勉強会の LT でお話しさせていただい他内容です)

SharePoint 2010、2013 両方で同じことできます。

1.まずトップページでもどこでもいいので、リストやライブラリを Web パーツとして貼り付けて、[現在のビューの編集] とかツールバーの種類とか、タイトル等の設定を行います。
2.SharePoint Designer でサイトを開き、リスト ビュー Web パーツを貼り付けたページを開きます。
     
3.コード内から対象のリスト ビュー Web パーツを探します。

リスト ビュー Web パーツの開始タグは、<WebPartPages:XsltListViewWebPart runat="ser・・・ からはじまるので、うまくコード内を検索して探してください。
同じページ内にリスト ビュー Web パーツが複数あれば、その分だけ <WebPartPages:XsltListViewWebPart runat="ser ・・ から始まるタグがあります。
その場合、開始タグにマウスカーソル合わせておいて、リボンの [Web パーツ ツール] – [書式] タブ内で、Web パーツのタイトルが確認できます。
  image

4.2010 だとここでリボン内に [リスト ビュー ツール] タブが表示されるので、この手順4はスキップしてください。

2013 の場合、[リスト ビュー ツール] タブを表示するため、[プロパティ] をクリックします。
  image
ブラウザーで利用できる Web パーツの編集画面と同様の画面がダイアログで開くため、なにも変更せず [OK] をクリックします。
    image
その後再度リスト ビュー Web パーツの開始タグコードにマウス カーソルを合わせると、リボンに [リスト ビュー ツール] タブがでてきます。
   

5.[リスト ビュー ツール] – [Web パーツ] タブ内の [サイト ギャラリーへ] をクリックします。  
   image  
6.[サイト ギャラリーへの Web パーツの保存] ダイアログが表示されます。
      名前はエンコードされるので半角で付け直したほうがいいです。[OK] をクリックします。 
7.次のような絶対パスでリストを参照していいかどうか確認するダイアログが表示されるため、[はい] をクリックします。
   image 
8.SharePoint Designer は閉じて OK です。操作で利用したページは保存する必要ありません。
9.同じサイト コレクション内の他サイトを開き、Web パーツを配置する際、[その他] カテゴリーより、配置できます。
   image      

  • SPD でサイト ギャラリーに保存した Web パーツを [その他] カテゴリーから消したい場合、Web パーツ ギャラリーより削除ください。
  • Web パーツ ギャラリーから webpart ファイルをダウンロードし、他サイト コレクションの Web パーツ ギャラリーに UP しても、他サイト コレクションでは利用できません。
    奥田 Bunny
広告

SharePoint Online/SharePoint Server 2013(2010) – リストやライブラリで列を表示する幅を調整したい

ここ最近というわけではないですが、よくいただく質問から第3弾です。

■ 質問内容

    リストやライブラリのビューで、列幅を調整できないか?

    ■ 詳細

入力されたデータ内容 (文字数) により、またブラウザーのサイズにより途中でデータが折り返して表示される場合があり、どうしても折り返して表示したくないデータがあるときです。

そして下図のように列のデータ型によって、折り返して表示されるものとされないものがあります。よく利用しがちな [一行テキスト] は折り返しされますね。下図リストには含まれていませんが [複数行テキスト] も折り返されるほうです。対して [選択肢] や [数値]、[日付と時刻] は折り返しされないようです。

 image

■ 解決方法

まず設定のみではできません。CSS をビューの aspx 内に挿入する必要があります。

1. 列幅を調整したいと思っているビューを開きます。
2. [設定] – [ページの編集] をクリックします。
   image
3. ページが編集モードに切り替わるため、[Web パーツの追加] をクリックし、コンテンツ エディター Web パーツを挿入します。
   image
4. 一番上に挿入されたコンテンツ エディター Web パーツをドラッグ操作で、ビューの下に移動します。
   image

5. コンテンツ エディター Web パーツ内の [ここをクリックして新しいコンテンツを追加] をクリックします。
    そしてコンテンツ エディター Web パーツ内にマウス カーソルをあわせ、リボン内の [テキストの書式設定] タブ – [ソースの編集] をクリックします。 

 ※ コンテンツ エディター Web パーツ内に [ここをクリックして新しいコンテンツを追加] が表示されない場合は、
    まずコンテンツエディター Web パーツの設定画面を表示してください。
    トップページに配置した Web パーツに対して同様のことを行う場合など、サイトのページ内に配置したコンテンツ エディター Web パーツではそうなります。

6. [HTML ソース] に次の CSS コードを追加し、[OK] をクリックします。

<style type="text/css">
.ms-vh-div[DisplayName=’列の表示名を入れてください’]
{
  
width:250px;
}
</style>

       ※ 列の表示名や、列幅は任意に変更
     image

7. [ページ] タブの [編集の終了] をクリックして保存します。
   image

指定した列幅で表示されるように変更されました。
  image

  • この方法を行った場合の注意点
  • まず、SharePoint の既定のスタイル クラス名を利用しているため、SharePoint 側で生成されるクラス名が変わると、たちまち動作しなくなります。たとえば SharePoint Online の場合だと大きな Update とか、SharePoint Server 2016 になったときとか。
    個人的にはおそらく大丈夫だと思います。なぜかって、おんなじコードで SharePoint Server 2010 でも動作するんですよね、コレ。というか 2010 のときから使ってた Tips です。リストの基本はあんまり変わらないかと。もし変わったとしても、列幅が変更になるくらい大したことないですし。

それよりも、これをやると、ビューを開いた際に [アイテム] タブと [リスト] タブが既定で表示されなくなります。ライブラリで行った場合や [ファイル] タブと [ライブラリ] タブですね。

こんな感じ↓
  image

どれでもいいので、リストアイテムを選択すると出てくるのですが。。
  image

微妙ですよね。
コンテンツ エディター Web パーツだけではなく、ビューの aspx 内に Web パーツを追加するとこうなるんですよね。。
これも 2010 でもおんなじです。

もしこうなるのがどうしてもいやだ、でも列幅は調整したいんだ!って場合は、面倒ですが、SharePoint Designer 2013 で同様の CSS を追加してください。

1. SharePoint Designer 2013 で対象サイトを開きます。
2. 左側のサイト オブジェクトより [リストとライブラリ] をクリックします。
3. リストとライブラリの一覧が開くため、対象リストもしくはライブラリをクリックして開きます。
4. 対象リスト、ライブラリが開いたら、[ビュー] カテゴリーより、列幅調整 CSS を挿入したいビュー名をクリックします。
   image
5. ビューが編集画面 (ソースコード) で開きます。ほとんどのコードが黄色い背景で表示されているかと思います。
       これ、コード編集にロックがかかっている状態ですので、[ホーム] タブより [詳細モード] をクリックします。
   image

6.<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> タグ内に CSS を挿入してください。他のタグの間にいれたりしないようにご注意を。
  自信ない方は <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> タグのすぐ下がおすすめ。
   image

7.  上書き保存します。

この方法だと、Web パーツを追加しているわけではないため、リボンタブが既定で表示されない!ってことにはなりません。
  image

以上、リストやライブラリのビューで、列幅を調整する方法のご紹介でした。
さて、最後にちょっと考えてみてください。ここまでやってまで本当にその列幅、調整する必要ありますか?
「はい!」 って自信もてる場合はぜひ活用してやってください。ある程度、標準機能や画面を受け入れて、うまく利用するのが SharePoint の本当の活用です♪

奥田Bunny

SharePoint 2013 リスト ビュー Web パーツを他のサイトでどうしても使いたい

本ブログでも何度か話題にあげてますが、リスト ビュー Web パーツ (リストやライブラリの Web パーツ) は同じサイト内でしか使えない仕様です。
サイトを横断してリスト・ライブラリ データを一覧したい場合、標準機能だとクエリ結果 Web パーツ (コンテンツ クエリ Web パーツ) や、検索結果 Web パーツを利用することになります。
SharePoint 2010 では、SharePoint Designer 2010 を使ったリスト ビュー Web パーツを他のサイトで利用するための裏ワザもあったのですが、SharePoint 2013 ではそのワザも利用できません。

とはいえ、どうしても簡単な方法でリスト ビュー Web パーツを他のサイトで利用したい! という場合に、
SharePoint 2013 の場合、リスト ビュー Web パーツを貼り付けたページを、別のサイトに移動するっていうワザが使えます。

<やり方>

1.リスト・ライブラリを含むサイト内に新規ページを作成する。(サイトのページでも発行ページでもどっちでもOK)
下図はサイトのページの場合です。
LVTips1

2. 作成したページに、リスト ビュー Web パーツを配置し、Web パーツの設定を任意に行う。
またページを保存します。発行ページの場合は [発行] まで行います。
LVTips2

  このあと別のサイトにページを移動後、リスト ビュー Web パーツの設定は基本変更できません。
あわせてリスト ビュー Web パーツ以外の内容を編集してください。
サイトのページの場合、リスト ビュー Web パーツ以外の内容は別サイトへの移動後も変更できますが、発行ページは編集できないのでページ全体を完成させてください。

3.サイトの設定画面 – [サイト管理] – [コンテンツと構造] を開く

4.作成したページ (リスト ビュー Web パーツはっつけたやつ) を参照する。
サイトのページの場合、[サイトのページ] ライブラリ内。発行ページの場合、[ページ] ライブラリ内にあります。
該当ページのメニューより、[移動] をクリックする
LVTips3

5.移動先を指定する。
移動したいサイトの [サイトのページ] ライブラリもしくは [ページ] ライブラリを指定します。
(もともと作成したページの種類に応じて変更ください。画面ショットは [サイトのページ] です)
LVTips4

6.移動処理が終わるまでちょっと待つ

7.移動後のページを開く
サイトのページの場合、こういうときにいつもの [現在のページは、元のテンプレートから・・・・] が表示されますが、[テンプレートの状態に戻します] をクリックします。

他のサイト内のページに、リスト ビュー Web パーツが利用できていることが確認できる!!
LVTips5

繰り返しですが、サイト移動後は、リスト ビュー Web パーツの設定変更がエラーになることがほとんどなので、Web パーツの設定は完成させておくことをお勧めします。

奥田

トップページに配置したお知らせ Web パーツの表示形式 変更 その2

前回の投稿の続きです。
リストの Web パーツをトップページ内に貼りつけた場合、標準では [タイトル] 列のみがアイテムの表示画面へのハイパーリンクにできますが、SharePoint Designer 2010 を利用してその他の列もリンクにする方法について前回の投稿でご紹介しました。

今回は日付列の表示形式の変更方法についてです。

次図のように、日付列の内容が表示されているリスト Web パーツがあるとします。
 listview2-1

1. SharePoint Designer 2010 でそのページを開きます。

2. 日付が表示されている列 <td> タグを右クリックし、[挿入] – [列(右)] をクリックします。
   listview2-2

3. 列 <td> が追加されるので、その中に [データソースの詳細] 作業ウィンドウから [作成日時] など日付列を
   ドラッグ アンド ドロップして配置します。
    listview2-3

4. 追加した日付列の値を右クリックし、[数式の編集] をクリックします。
    listview2-4

5. [数式の挿入] ダイアログが開くので、次のように FormatDate 関数を利用して日付の表示形式を指定します。
  ・
元の数式: $thisNode/@Created (作成日時列の場合)
  ・
編集後の数式:ddwrt:FormatDate(string($thisNode/@Created),1041,3)
  listview2-5

6. もともと表示されていた作成日時列を列単位で削除し、ページを上書き保存

以上の手順で、日付の表示形式を FormatDate 関数で変更できましたRed rose
 listview2-6

奥田理恵でした。

トップページに配置したお知らせ Web パーツの表示形式 変更 その1

こんにちは、奥田です。
今日は先日セミナーにご参加いただいた方からいただいた質問からの投稿です。

<やりたいこと>
トップページにお知らせ リストの Web パーツを配置し、必要な列情報を表示するように設定。
既定で [タイトル] 列がハイパーリンクとなり、クリックすることでアイテムの表示画面が開きますが、タイトル列ではなく他の列をアイテムの表示画面へのハイパーリンクにしたい。

Web パーツ内に表示する列として [タイトル (編集メニュー付きのアイテムにリンク)]、[タイトル (アイテムへのリンク)] を選択することで、アイテムの表示画面へのハイパーリンクとなるタイトル列を表示できますが、タイトル列以外にアイテムへのリンクは表示できません。

<方法>
次のような列を持つお知らせ リストがあることを前提とします。
(お知らせリストに [内容] 列を追加)

タイトル 1 行テキスト
内容 複数行テキスト (リッチ テキスト)
本文 複数行テキスト (拡張リッチ テキスト)
有効期限 日付

listview1 
  → [タイトル] 列ではなく、[内容] 列をアイテムの表示画面へのハイパーリンクにしたいとします。

1. ブラウザーでトップページにお知らせ リストの Web パーツを配置し、表示したい列等の設定を行う。
  
(画面ショットは、[内容] 列と [作成日時] 列を表示、ツールバーなどいらないメニューは表示しないよう設定しています)
   listview2

2. SharePoint Designer 2010 でトップページを開く。

3. Web パーツ内のハイパーリンクにしたい列を選択し、スマートタグから [コモン xsl:value-of タスク] メニューを開き、
    [アイテムへのリンクの表示] をオンにします。

   listview3

4. ページを上書き保存します。

以上の設定で、タイトル列以外の列情報もアイテムの表示画面へのハイパーリンクになりました。
listview4

奥田理恵でした Good luck