コンテンツクエリ webパーツでアイテムをダイアログで開く

社内ポータルをSharePointでつくっている場合、コンテンツクエリwebパーツ(cqwp)でサイトコレクション内のお知らせを集約してトップページに表示・・・なんてことはよくやりますよね。

で、cqwpだと、ふつうアイテムのタイトルをクリックすると、同一ウィンドウ内でクリックしたアイテムの表示画面へ遷移していきます。
これを、PCで表示したときはダイアログで開き、モバイルで表示したときは同一画面内で遷移するようにカスタマイズしてみます。
PCでの表示イメージはこんな感じ。
20150708

さて、cqwpのカスタマイズに関しては、Microsoft MVP山崎さん執筆の以下の良記事がありますので、まだコンテンツクエリwebパーツいじったことない・・・という方はまずご一読ください。
若干古い記事ですが、2013となった今でも十分通用する内容で、cqwpをカスタマイズしよう!なんて場面ではもはやバイブルといってよいと思います。
コンテンツ クエリ Web パーツ (1.複数サイトから「お知らせ」を取得する) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (2.今日の日付を表示する) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (3.更新日時と本文を取得する) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (4.本文から不要なタグを削除する) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (5.表示部分を整える) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (6.リンク機能を修正する) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (7.任意の列で並び替える) – SharePoint Technical Notes.
コンテンツ クエリ Web パーツ (8.タスクの一覧を取得する) – SharePoint Technical Notes.

では、上記の記事をひととおり眺めていただいた、という前提で・・・
おもむろにソースコードです。

ItemStyle.xslの、コンテンツクエリwebパーツで使いたいスタイルの「<div class=”link-item”>」のaタグ部分を以下のように書き換えます。

<div class="link-item">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
    <!--<a href="{$SafeLinkUrl}" title="{@LinkToolTip}">-->
    <a onmouseover="javascript:this.style.cursor='pointer';" onclick="OpenModalDialog('{$SafeLinkUrl}','{$DisplayTitle}')"  title="{@LinkToolTip}">
        <xsl:if test="$ItemsHaveStreams = 'True'">
            <xsl:attribute name="onclick">
                <xsl:value-of select="@OnClickForWebRendering"/>
            </xsl:attribute>
        </xsl:if>
        <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
            <xsl:attribute name="onclick">
                <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
            </xsl:attribute>
        </xsl:if>
        <xsl:value-of select="$DisplayTitle"/>
    </a>
    <div class="description">
        <xsl:value-of select="@Description" />
    </div>
</div>

※ItemStyle.xslを編集したら、忘れずに発行しましょう。

次に、コンテンツクエリwebパーツを配置したページに、スクリプトエディタで以下のJavaScriptを埋め込みます。

<script>
function OpenModalDialog(url, title) {
    if (navigator.userAgent.search(/iPhone/) != -1 || navigator.userAgent.search(/iPad/) != -1 || navigator.userAgent.search(/iPod/) != -1 || navigator.userAgent.search(/Android/) != -1) {
        location.href = url;
        return false;
    }
    var options = { title: title, url: url };
    SP.UI.ModalDialog.showModalDialog(options);
}
</script>

以上でOKです!
検証したのはSharePoint2013ですが、使っている手法は2010のころからあるものばかりなので、2010でも動くと思います。
(2010の場合は、スクリプトを外部ファイルにして、コンテンツエディタwebパーツでページにリンクしてください。)

上で紹介したcqwpのカスタマイズと組み合わせれば、ちょっとcqwpで作ったとは思えないパーツに仕上がりそうですね。

広告