SharePointの入力フォームで列名の下にDescriptionをもってくる

半年ぶりの更新です(ひゃーーー)。
てゆーか最近SharePoint2007に携わっているので、ネタないんです・・・
はやく2016さわりたい~!!!

というわけで小ネタをちょっとだけ。

SharePointの列にはDescriptionを設定できます。入力例や注意事項を記載したいときに便利です。
pic20160927-1

でも、デフォルトのDescriptionの場合、入力欄の下に配置されるので見落とされがちなんですよね。
また、URLも貼れたりしますが、表示文言を自由に設定してハイパーリンク化はできません。

そこで、JavaScriptでDescriptionに書きたい内容を列名の下に持ってきてみました。
pic20160927-2

ソースコードです。
こちらをコンテンツエディタwebパーツでNewForm.aspxとEditForm.aspxに埋め込んでください。

コード内の”Body”のところはDescriptionを置きたい列名に適宜変更してくださいね。
ちょっとしたことですが、ユーザビリティーの向上につながる・・・かも?

広告

SharePointのリストフォームに採番機能をJavaScriptで実装する

この世にはようかんぱんなるものがあることを知り気になって仕方ないのですが、そんなことはどうでもいいですね。

さて、だいぶ間が空いてしまいましたが久々の更新です!
いぜん、ページにビューカウンタをつける方法をポストしましたが、意外とよく読まれているようなので、気を良くして応用編(?)です。

SharePointのリストアイテムに、システム的に振られるIDではなく、独自ルールで採番したカスタムIDを振りたい!という要望はよくありますよね。
そこで、ページビューカウンタと同じやり方で、採番機能を実現してみました。
新規フォームで見るとこんな感じ。
20151217

実装方法です。
事前に「counter」という名前の採番用カスタムリストを同じサイト内に作成しておきます。
採番用カウンタは、Titleフィールドをそのまま使います。
新規フォーム作成時に、採番用リストから番号を取得し採番フィールドに表示、保存時のアクションでインクリメントした番号を採番用リストに返す仕組みです。
なので、新規フォームをキャンセルした場合は、インクリメントされません。

以下、ソースコードです。
こちらをNewForm.aspxにコンテンツエディタwebパーツで埋め込んでください。

SPServicesjQuery使ってます。

さらにちょっとした小技として、

21行目:カスタムIDの数値部分を桁固定0埋めで表示
23行目:採番フィールドを読み取り専用にする
24行目:採番フィールドがフォームの最初のフィールドでもフォーカスを当てない

などを盛り込んでおります。

なお、EditForm.aspxには以下を埋め込んでおきます。

検証環境は2010ですが、2007、2013でも動くと思います。
参考にしていただけるとうれしいです!

SharePointサイトをレスポンシブ・デザインにするときの情報源

こんにちは。世間は夏休み真っ盛りですが、私は絶賛仕事中です!!
電車が空いててうれしいぞ!!!

さて、ここのところSharePointサイトをモバイルでも美しく表示できるようにするべく、いろいろと実験していたのですがそのとき参考にした情報を備忘録として載せておきます。

基本的な前提と方針は、
・バージョンはSharePoint2013
・SharePoint Onlineへのマイグレーションも見据え、カスタムマスタページは作らない
(参考:Latest Advice on Office 365 Branding | Microsoft Trends.)
・よって、デバイスチャネルも使わず、レスポンシブデザインで設計
・とはいえ、JavaScriptは使いたいのでマスタページでのJavaScriptの参照は(しぶしぶ)許容する
といったところです。

デフォルトマスタページを使い、CSSだけで何とかするやり方はもうほぼこれでOKではないかと。
Making seattle.master Responsive | Our SharePoint Experience.

レスポンシブなCSSグリッド・システムを導入するやり方。まだ試してないけど、そのうちやってみたいと思います。
Apply grid system to SharePoint using SUSY | Stefan Bauer – n8d

マスタページをいじくらずにviewportを設定する裏ワザ。
Add viewport meta without editing the master page | Stefan Bauer – n8d.

グローバルナビゲーションをモバイルではアコーディオンメニューにしたい!
巷にあふれるプラグインをしつこくいろいろ試した結果これがよさそうです。
レスポンシブメニューを作成できるjQueryプラグイン「MeanMenu」 | たすデザイン.
具体的な導入方法は、いずれ別のエントリで書きます。

JavaScript内でユーザーエージェントを判別したいとき。
2015年版JavaScriptユーザエージェント判別・判定.

viewportの設定になやんだら?
もう逃げない。HTMLのviewportをちゃんと理解する – Qiita.

マスタページをいじくらずともサイト全体にカスタムJavaScriptを適用するにはこんなやり方もあるです。
JavaScript を使用して SharePoint サイト UI をカスタマイズする.
MSの推奨はたぶんこれ。私はまだ試してないです。アドイン作れとか言われると、とたんにハードルが・・・(汗)

新たにいい情報が出てきたら、今後も追加していく予定です。
また、こんなのも参考になるよ!なんてのがあったらTwitterでもなんでもお知らせください。

コンテンツクエリ 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で作ったとは思えないパーツに仕上がりそうですね。

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

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