SharePointのページに下部固定のフッターをつけてみた

SharePointのページにフッターをつけたい場合、通常はマスタページをカスタマイズすることになると思います。
しかし、マスタページをいじれないエンドユーザー・デベロッパーとか、SharePoint Onlineでカスタムマスタページを作りたくない!という場合はちょっと工夫が必要となります。

以下で紹介するのは、JavaScriptでフッター要素をページに追加し、CSSでスタイリングする方法です。
ページのコンテンツが少ない場合はウィンドウの最下部、それ以外はページ最下部に固定で表示されます。
検証した環境はSharePoint2013オンプレミスのチームサイト、ブラウザがIE11、マスタページはデフォルトのseattle.masterです。

できあがりはこんな感じ。
20150624

ソースコードです。

<style>
#s4-bodyContainer {
    position:relative;
    min-height: 100%;
    padding-bottom: 30px;
    box-sizing: border-box;
}
/* footer */
.footer-container{
    position:absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
    background-color:#29629C;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var footerHtml = "<div class='footer-container ms-dialogHidden'>";
    footerHtml += "<footer>© Marineko. All rights reserved.</footer></div>";
    $("#s4-bodyContainer").append(footerHtml);
});
</script>

マスタページはさわりたくないんだよね~、というときに、参考にしてみていただければと思います。

広告

REST APIでログインユーザー情報を取得し、フォームに表示する

SharePoint2013のお話です。

SharePointのフォームにログインユーザーの情報をデフォルト値として設定したいというのはよくある要望だと思います。

私も過去にいくつかポストしてきましたし、
列に現在のユーザー名を表示【2010】 | Me & SharePoint.
列に現在のユーザー名を表示【2013】 | Me & SharePoint.

CSOMでユーザー情報を取得するやり方については、いっつもお世話になっているMVP 太田さんのブログにくわしい解説があります。
ログインしているユーザーのプロファイルを JavaScript で取得する | idea.toString();.

まあ、上の記事だけでも十分なんですが、試しにREST APIを使って実装してみましたのでメモとして残しておきます。

新規フォームの「投稿者」というユーザー列にログインユーザーの表示名、「所属」という一行テキスト列に所属名を表示します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', SetCurrentUserInfo);
    });

    function SetCurrentUserInfo() {
        $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
            contentType: "application/json;odata=verbose",
            headers: { "accept": "application/json;odata=verbose" },
            success: onSuccess,
            error: onError
        });
    }

    function onSuccess(data, request) {
        // アカウント名
        var loginName = data.d.AccountName;
        // 表示名
        var dispName = data.d.DisplayName;
        // 所属情報
        var arr = data.d.UserProfileProperties.results;
        var dept;
        for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i].Key == "Department") {
                dept = arr[i].Value;
            }
        }

        //PeoplePickerに設定
        var PeoplePickerId = $("div[title='投稿者']").attr('id');
        var PeoplePickerInput = $("input[title='投稿者']");
        PeoplePickerInput.val(dispName);
        var PeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplePickerId];
        PeoplePicker.AddUnresolvedUserFromEditor(true);

        //所属を設定
        $("input[title='所属']").val(dept);

    }

    function onError(error) {
        console.log(error);
    }
</script>

こちらのコードを、NewForm.aspxにスクリプトエディタで埋め込めばOKです!
コード的にはCSOMのほうがシンプルなように思いますが、もしRESTを使いたいシチュエーションがあったとき、参考にしていただけるとうれしいです。

サイドリンクバーをアコーディオンメニューにする

前回に引き続き、SharePoint2013のサイドリンクバーのプチカスタマイズです。

サイドリンクバーもエントリ数や第2階層のリンクがふえてくると、画面から見切れてしまうことがあります。
そんなとき、第1階層でアコーディオンで開閉可能にできるといいですよね。

で、jQueryを使ってサイドリンクバーをアコーディオンにする以下のポストを見つけ、
Simple Expand/Collapse for the Quick Launch in SharePoint 2013 or SharePoint Online | Marc D Anderson’s Blog.

これでOK!と思ってたんですが、このコードだとサイドリンクバーのエントリをクリックして他ページに遷移すると、開閉状態がチャラになって全部閉じてしまうという・・・
ちょっと使い勝手がよくないです。

そこで、クッキーで開閉状態を覚えさせるようにしてみました。
クッキーの操作には、jquery.cookie.jsというプラグインを使用しています。

※jquery.cookie.jsの使い方などはこちらをご参考に・・・
jquery.cookie.jsの使い方と簡単なサンプルを紹介します|Webpark.

ソースコードです。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style>
.ms-core-listMenu-verticalBox li > span.menu-item {
    cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
    var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > span, div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a");
    topLevelLinks.prepend("<span class='accordion'><i class='fa fa-caret-right'></i></span>");
    topLevelLinks.closest("li").find("> ul").hide();

    var idx = 0;
    var key;
    topLevelLinks.each(function () {
        key = "expandable" + idx;
        $(this).attr("id", key);
        if ($.cookie(key) == "open") {
            $(this).closest("li").find("> ul").show();
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-down'></i></span>");
        }
        idx = idx + 1;
    });

    topLevelLinks.click(function(e) {
        e.preventDefault();
        var childUl = $(this).closest("li").find("> ul");
        var isVisible = childUl.is(":visible");        
        if(isVisible) {  
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-right'></i></span>");
            childUl.slideUp();
            $.cookie($(this).attr('id'), "close", { path: '/' });
        } else {
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-down'></i></span>");
            childUl.slideDown();
            $.cookie($(this).attr('id'), "open", { path: '/' });
        }
    });
});
</script>

上記のコードを、スクリプトエディタでページに埋め込みます。
できあがりはこんな感じ。
20150608

参考にしていただけるとうれしいです♪

サイドリンクバーにwebフォントでリストマークをつける

SharePoint3分クッキングの時間がやってまいりましたー。
と、いうわけで、またしても3分でできる小ネタをご紹介します。
(SharePoint2013のオンプレ環境、ブラウザはIE11で検証しました)

サイドリンクバーのエントリに、好きなリストマークをつけたい!と思い立っても、画像を準備して表示させるのは結構面倒です。やる気が失せがちです。
そんなとき、webフォントでさくっとリストマークを表示できれば便利ですよね。

というので、定番webアイコンフォント Font Awesome を利用してリストマークをつけてみました。

できあがりはこんな感じです。
20150513

なお、Font Awesomeの基本的な使い方などは、以下をご参考に。
アイコンをWebフォントで表示! Font Awesomeの使い方 [ホームページ作成] All About.

CSSです。

@import "//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css";

.ms-core-listMenu-verticalBox > ul > li:first-child .ms-core-listMenu-item::before {
    content: "\f015";
    font-family: FontAwesome;
    margin-right: 5px;
    width:1em;
}

.ms-core-listMenu-verticalBox ul li ul li .ms-core-listMenu-item::before {
    content: "\f101";
    font-family: FontAwesome;
    margin-right: 3px;
    width:1em;
}

こういうちょっとしたことでも、サイトの雰囲気はずいぶん変わるので、気が向いたときに試してみていただければと思います。

SharePoint2013 注目リンクを丸くしてみた

SharePoint 3分クッキング!ということで、3分でできるカスタマイズをご紹介します。

先日、注目リンクのカスタマイズについての記事をアップしましたが、その続き(?)です。

表題のとおりで、ふつうは四角い注目リンクを、CSSで丸くしてみよう!というものです。
できあがりはこんな感じ。
20150515

CSSです。

.ms-tileview-tile-content, .ms-tileview-tile-content img {
    height: 150px;
    border-radius: 50%;
}
.ms-tileview-tile-detailsListMedium {
    padding: 10px 40px;
}

いい加減なCSSなんで、キャプションの文字列が若干切れてますが、そこはご愛嬌ということで(笑)。
サイトの雰囲気をやわらかくしたいときに、いかがでしょうか?

SharePointのナビゲーションで「最近使った項目」を隠す

GWはひどい鼻風邪で引きこもっていたにもかかわらず、いまだに風邪が抜けません。ずぴー。やれやれ。

前回のポストで、ちょろっとふれたナビゲーションの「最近使った項目」。
図1
これ、表示したくないって時も結構あるんでないかと思います。

しかしながら、2010の時みたいにCSSで隠すのはちょっと難しい(クラス名とか、IDとかついてないのですよ・・・)。
仕方ないので奥の手・JavaScriptで無理やり隠します。

$(document).ready(function() {
    $(".ms-core-listMenu-item:contains('最近使った項目')").parent().hide();
});

コード見ていただければわかりますが表面的に隠しているだけですので、気がむいたときにサイトの設定のナビゲーションから削除してあげたほうがいいと思います。

ついでに、2010から引き続きwikiページライブラリに出てきてしまう例のアレ
図2
も、JavaScriptで隠せます。

$(".ms-core-listMenu-item:contains('更新済みのページ')").parent().hide();
$(".ms-core-listMenu-separatorLine").hide();

サイトカスタマイズの参考になれば・・・。

2013のトップリンクバーをボタン風にデザインしてみた(osloテーマで)

SharePoint2013のトップリンクバーって、なんだか地味ですよね。
そんなところにナビゲーションがあったんだ?!って感じで。

特にosloテーマの場合サイドリンクバーがないだけに、もうちょっと自己主張させてもいいかも・・・、と思い、CSSでボタン風にデザインしてみました。(ついでに「リンクの編集」メニューも隠してみました)

20150427

余談ですが、SharePoint2013だとサイドリンクバーやトップリンクバーにこの「最近使った項目」ってやつが出てしまうのがなんとも・・・しかもこれ最近「使った」ではなく「作った」なんですよね・・・というわけで、これを隠すやり方についてもおいおい書きます。

さて、ソースコードはこんな感じです。

.ms-core-listMenu-horizontalBox {
    padding-top: 20px;
    width: 100%;
}
.ms-core-listMenu-horizontalBox li.static {
    padding: 0.5em 1.5em;
    vertical-align: middle;
    display: inline-block;
}
.ms-core-listMenu-horizontalBox li.static.selected, .ms-core-listMenu-horizontalBox li.static:hover {
    background-color: #0072c6;
}
.ms-core-listMenu-horizontalBox li.static:hover > a, .ms-core-listMenu-selected, li.dynamic:hover .menu-item-text, li.static.dynamic-children:hover > span > span{
    color: #fff !important;
}
.ms-core-listMenu-horizontalBox a.static {
    display: table-cell;
    text-align: center;
}
.ms-core-listMenu-horizontalBox a.selected {
    font-weight: bold;
}
.static.ms-verticalAlignTop.ms-listMenu-editLink.ms-navedit-editArea{
    display: none;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{
    margin-right: 0;
}
ul.dynamic{
    box-shadow: none;
    left: 0 !important;
    width: 150px !important;
    padding: 0;
}
li.dynamic{
    display: block !important;
    width: 100%;
    padding: 5px;
}
li.dynamic:hover{
    background: rgba(136, 179, 215, 0.84);
}
li.dynamic::before,
li.dynamic::after,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
li.dynamic,
.ms-core-listMenu-horizontalBox li.static,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

なお、上記CSSではこちらの記事を参考に、マウスオーバーでボタンの色がフワッと変わるようなエフェクトも入れています。
CSSのみで実装するボタンデザインやホバーエフェクト 20+α | NxWorld.

サイトデザインの参考にしていただけるとうれしいです!