mojalog

SharePoint(moss2007)ネタが続きます。SharePointといえば、ほぼノンコーディングで何でもできますよーといったMSのグループウェアで、その柔軟性もものすごいものです。ですが、どれだけノンコーディングで色々できるといっても、カスタマイズしなければならない要求はいくらでも出てきます。でてくることは問題ないのですが、

• どうやって
• どこに
• 安全に

カスタマイズする方法を考え始めるといろいろと難しい問題があります。その割には、SharePointではそういった「裏側からこうやったら」色々いじくれるよーといったエントリはまだまだ少ない気もします。ググってみてもほしい情報はなかなか転がっていません。
が、つい最近のことなのですが、山崎 愛さんのSharePoint Technical Noteを発見してから結構お世話になっております。SharePointの開発をやる方にはお勧めのエントリがたくさんありますよ。

今日は、SharePoint Desinger 2007 を使用した ASP.NET コントロールとデータビューの連携というエントリをみて、影響を受けまして、

• 任意の
• 複数のライブラリを
• 同じページに
• 非同期で

表示させる方法をポストしたいと思います。
これを実装すると上記のスクリーンショットのようになるのですが、静的なHTMLに書いてドキュメントライブラリに放り込んでもよいですし、リンク先のSharePointTechnicalNoteさんにも記述があります、SharePointデザイナから[ファイル]メニューから[新規作成]-[マスタページから作成]で作成したaspxに埋め込むと、見栄えがよいです。

使ったのは、２つのウェブサービスと、ExtJSのgridウィジェットです。このウィジェットは高速でかなり強力ですので、SharePointで持っているビューを時として凌ぐ使いやすさがあります。
スクリプトは以下のタグの直後に差し込んで使ってみてください。HTMLで書く場合はどのように表現してもOKです。

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

ExtJSは以下のスクリプトのソースに合わせて任意のドキュメントライブラリに格納してください。

それでは簡単にソースを解説します。
まず、ライブラリ名をフォームから取得してLists.asmxのGetListウェブサービスに渡します。このウェブサービスで取得するのはリスト・ドキュメントライブラリのフィールド名です。
フィールド名はDisplayNameと、StaticNameというアトリビュートで、返ってきたXMLに入ってきます。DisplayNameはそのまま表示されるフィールド名ですが、StaticNameは裏で持っているフィールド名を一意にするidといったところでしょうか。この取得したフィールド名を次のウェブサービスに投げて実際のアイテムを刈り取っていくという作業です。
実際のアイテム取得は以前のエントリでも触れたLists.asmxのGetListItemsです。詳しくはそちらを参照していただければと思いますが、GetListで取得したStaticNameに準じてライブラリのフィールドを制御しています。ですので、基本的にはライブラリやフィールドに依存しないつくりになっています。
ExtJSのgirdはjavascriptのArrayでも表現することができます。gridで表示される値は、属性（type:日付や数値など）も考慮されていますが、今回は属性を意識したつくりにはしていません。というわけで、スクリプトを以下に記します。

<link rel="stylesheet" type="text/css" href="http://<yourSitePath>/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="http://<yourSitePath>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://<yourSitePath>/ext/ext-all.js"></script>
<script type="text/javascript">
// onloadでレンダリングさせたい場合
// _spBodyOnLoadFunctionNames.push( "getList" );
var httpInst = window.XMLHttpRequest ? new XMLHttpRequest() : ( function() {
    try        { return new ActiveXObject( "Msxml2.XMLHTTP" );    }
    catch( e ) { return new ActiveXObject( "Microsoft.XMLHTTP" ); }
})();

function getList() 
{
    var listGuid = "";
    if( ( listGuid = document.getElementById( "listguid" ).value ) == "" ){
        return;
    }

    httpInst.open( "POST", "http://<yourSitePath>/_vti_bin/Lists.asmx", false );
    httpInst.setRequestHeader( 'Content-Type','text/xml; charset=utf-8' );
    httpInst.setRequestHeader( 'SOAPAction','http://schemas.microsoft.com/sharepoint/soap/GetList' );
    var postBody = '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><GetList xmlns="http://schemas.microsoft.com/sharepoint/soap/"><listName>' + listGuid + '</listName></GetList></soap:Body></soap:Envelope>';

    httpInst.onreadystatechange = function()
    {
        if ( httpInst.readyState == 4 ){
            xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
            xmlDoc.async = false;
            xmlDoc.loadXML( httpInst.responseText );
            listInfo = xmlDoc.selectSingleNode( '/soap:Envelope/soap:Body/GetListResponse/GetListResult/List' );
            var urlLink = listInfo.getAttribute( "DefaultViewUrl" );
            urlLink = urlLink.replace( "AllItems.aspx", "" );
            var libTitle = listInfo.getAttribute( "Title" );

            rowsItem = xmlDoc.selectNodes( '/soap:Envelope/soap:Body/GetListResponse/GetListResult/List/Fields/Field' );

            var xmlStaticNm = new Array();
            var xmlDispNm = new Array();
            for( idx = 0; idx < rowsItem.length; idx++ ){
                if( rowsItem[ idx ].getAttribute( "Hidden" ) == null &&
                    rowsItem[ idx ].getAttribute( "StaticName" ) != "LinkTitleNoMenu" &&
                    rowsItem[ idx ].getAttribute( "StaticName" ) != "LinkTitle" )
                {
                    xmlStaticNm.push( rowsItem[ idx ].getAttribute( "StaticName" ));
                    xmlDispNm.push( rowsItem[ idx ].getAttribute( "DisplayName" ));
                }
            }
            getListItems( listGuid, xmlStaticNm, xmlDispNm, urlLink, libTitle );
        }
    }
    httpInst.send( postBody );
}

function getListItems( listGuid, xmlStaticNm, xmlDispNm, urlLink, libTitle )
{
    var fieldRefData = '';
    var dataAry = new Array();
    var headAry = new Array();
    var clmnAry = new Array();

    for( idx = 0; idx < xmlStaticNm.length; idx++ ){
        fieldRefData = fieldRefData + '<FieldRef Name="' + xmlStaticNm[ idx ] + '" />';
        headAry.push( { name: xmlStaticNm[ idx ] } );
        clmnAry.push( { header: xmlDispNm[ idx ], width: 90, sortable: true, dataIndex: xmlStaticNm[ idx ] } );
    }
    httpInst.open( "POST", "http://<yourSitePath>/_vti_bin/Lists.asmx", false );
    httpInst.setRequestHeader( 'Content-Type','text/xml; charset=utf-8' );
    httpInst.setRequestHeader( 'SOAPAction','http://schemas.microsoft.com/sharepoint/soap/GetListItems' );
    var postBody = '<?xml version="1.0" encoding="utf-8"?><soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope"><soap12:Body><GetListItems xmlns="http://schemas.microsoft.com/sharepoint/soap/">' + 
    '<listName>' + listGuid + '</listName>' + 
    '<viewName></viewName>' + 
    '<query><Query><Where><Gt><FieldRef Name="ID" /><Value Type="Counter">0</Value></Gt></Where></Query></query>' + 
    '<viewFields><ViewFields>' + fieldRefData + '</ViewFields></viewFields>' + 
    '<rowLimit>100</rowLimit>' + 
    '<queryOptions><QueryOptions/></queryOptions>' + 
    '<webID></webID>' + 
    '</GetListItems></soap12:Body></soap12:Envelope>';

    httpInst.onreadystatechange = function()
    {
        if ( httpInst.readyState == 4 ){
            xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
            xmlDoc.async = false;
            xmlDoc.loadXML( httpInst.responseText );

            rowsItem = xmlDoc.selectNodes( '/soap:Envelope/soap:Body/GetListItemsResponse/GetListItemsResult/listitems/rs:data/z:row' );

            for( idx = 0; idx < rowsItem.length; idx++ ){
                var fieldDataList = new Array();
                for( sdx = 0; sdx < xmlStaticNm.length; sdx++ ){
                    var curItem = rowsItem[ idx ].getAttribute( "ows_" + xmlStaticNm[ sdx ] );
                    curItem = ( xmlStaticNm[ sdx ] == "ID" ) 
                        ? '<a href="' + urlLink + 'DispForm.aspx?ID=' + curItem + '">' + curItem + '</a>'
                        : rowsItem[ idx ].getAttribute( "ows_" + xmlStaticNm[ sdx ] );
                    fieldDataList.push( curItem );
                }
                dataAry.push( fieldDataList );
            }

            Ext.onReady( function(){

                var reader = new Ext.data.ArrayReader( {}, headAry );
                var store = new Ext.data.Store({
                    reader: reader,
                    data: dataAry
                });

                var grid = new Ext.grid.GridPanel({
                    store: store,
                    columns: clmnAry,
                    width: 540,
                    height: 200,
                    stripeRows: true,
                    title: libTitle
                });

                grid.render( 'grid-example' );
                grid.getSelectionModel().selectFirstRow();

            });
        }
    }
    httpInst.send( postBody );
}
</script>
<input type="text" id="listguid" /><input type="button" value="参照リストの追加" onclick="getList()">
<div id="grid-example"></div>