SharePointサイトにタイルUI(w/ カスタムリスト)

13336 ワード
SharePoint SharePoint テキストリンク

やりたいこと

サイトにタイルのっけて、それをリンクにしたい。
（注目リンクパーツではなく）

やったこと

  • サイトにカスタムリストを用意して、そこにタイルの色と、画像のURLを記載
  • ページ側ではScript editorで、SPServicesをつかってリストデータを取得
  • Contents editorではタイルの見栄えを調整（ホバーしたら1.1倍に拡大している）

こんな感じ



ホバーするとおっきくなる

リスト側。いらないフィールドもあるが、それはCAMLでとらなければいい。

コード

ScriptEditor
<div>title</div>
<script src="jquery.minのpath" type="text/javascript"></script>
<script src="jquery.SPServicesのパス" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "XXXXXX",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Open In New Window' /><FieldRef Name='Order' /><FieldRef Name='imageURL' /><FieldRef Name='color' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='Order' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var order =parseInt(($(this).attr("ows_Order")));
                var imageURL = ($(this).attr("ows_imageURL"));
                var bgcolor = ($(this).attr("ows_color"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var liHtml = "<div class='Tile' id='Div"+order+"' style='background-color: "+bgcolor+ "'>"+"<a href='"+ href +"'>" + "<img width='150' alt='' src='"+imageURL+"'/> </a></div>";
                $("#Content").append(liHtml);
            });
        }
    });
});
</script>
<div id="Content"></div>

SPServicesでList itemとってきて、そのあとにdivに子要素を生成しているだけ。

ContentsEditor
<style type="text/css"> 
div.Content{
 width: 100%;
}

div.Tile{
 position: relative;
 height: 150px;
 width: 150px;
 background-color: #38A3DB;
 margin: 10px;
 float: left;
}

div.Tile a{
 position: relative;
 height: 150px;
 width: 150px;
 float: left;
}

div.Tile img{
 position: relative;
 height: 150px;
 width: 150px;
 float: left;
}

div.Tile:hover{
 -webkit-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1); 
 background-image: url("/SiteAssets/white_vpvot.png");
 background-repeat: no-repeat;
 background-position: right top;
 opacity: 0.75;
}
</style>

これまたもう少し綺麗にできそうだがまずはこんな感じ。

Reference