編集フォームでフィールドをRead Onlyにする

SharePoint2010のお話です。

申請ワークフローなど作っていると、あるステータスになったらこのフィールドは申請者にはいじらせたくないとか、そういう場面にぶちあたることがあると思います。

その場合、InfoPathフォームを使うとかいろいろあるかと思いますが、既定のリストフォームでJavaScript(というかjQueryですね)でがんばってみました。
(InfoPathはそのうちお亡くなりになりますし・・・)

以下、choiceフィールドの例です。

$("select[Title='列名']").attr("disabled", "disabled");

読み取り専用を解除したい場合は、

$("select[title='列名']").removeAttr("disabled");

簡単ですね?!

ボタンの無効化もこれでいけます。
1行テキストや複数行テキストの場合は「disabled」の代わりに「readonly」属性でもいけます。

えと、フォームにJavaScriptを適用するやり方は、この記事なんかをご参考に・・・

広告

サイトのコンテンツと構造でページをコピーする

SharePoint2010のネタです。

2010からチームサイトのトップページがwikiページとなり、WYSIWYGで編集できるためエンドユーザーでもページの編集がいろいろできるようになりました。
そうなると、ページ内にトップナビゲーション風リンクボタンやらバナーを貼ったりした部分をどのページでも固定で表示させたいよね~という欲がでてきます。

なんで、きれいにレイアウトしたページをひな形として、コピーして使えれば便利ですよね。
実は、サイトの設定にある「コンテンツと構造」画面を使えば、ページがコピーできちゃいます。

pagecopy

普通に同じページライブラリ内にコピろうとすると、同名ファイルがあるからコピれないよ!と怒られますので、事前に退避用のページライブラリを作っていったんそちらにコピー、リネームしてから再度元のライブラリにコピーしなおさなければならないのが若干面倒ですが・・・

こうやってページのコピーができればレイアウトもずれないので、マスタページをいじれなくとも同じLook&Feelのページが作れて便利です。

あ、あとたぶんサイトコレクションの機能で発行インフラストラクチャが有効化されてないとだめかとおもいます。念のため。

JavaScriptなど外部ファイルをページに読み込む

今まで何の説明もなくjQueryをページに読み込んでおいて・・・などと書いてましたが、ちょっとおさらい。

カスタムCSSやjQueryプラグインなど外部ファイルを読み込むやり方はいろいろとあるのですが、エンドユーザーでできるものとしては

  1. Designerでカスタムマスタページを作成、参照する
  2. サイト内のライブラリにファイルを置き、コンテンツエディタwebパーツにリンク
  3. コンテンツエディタwebパーツのHTMLソースに直書き
  4. スクリプトエディタwebパーツで直書き(SP2013)

といったところでしょうか?

Designerを使えない環境だったりすると必然的に2,3,4になるのですが、3は、まあ、やりません・・・書いても消えちゃったりするしね・・・
4は、パパっと確認したい時などはやっちゃってますが、なにせエディタが貧弱なのでスクリプトの量が増えてくると厳しいものがあります(間違って消しちゃったりすると元に戻せませんしね・・・)

だもんで、2010でも2013でも一番よくやるのは2ですが、
A Dummies Guide to SharePoint and jQuery–Getting Started.
この記事を読んでふむふむと思い、以来サイトコレクションのルートサイトにカスタマイズ用のファイル専用置場をつくり、そこで一括管理するやり方をとっています。

※この方のブログで以下の記事なんかもjQuery使ってなんかやりたーい!というときのとっかかりになるかと思います。
The SharePoint & jQuery Guide –

ファイル置き場としてStyleLibraryやSiteAssetsをつかっちゃってもいいかとも思いますが、自分がカスタマイズしているのでないファイルとごちゃまぜになるのが嫌で・・・
丸見えでいいの?!という方もおられると思いますが、一般ユーザーさんには閲覧権限しかつけなければ間違って消される心配もないしねーと、そんなにアクセス権には気を使ってません(汗)

ちなみに、専用のライブラリを作る場合、バージョン管理を有効にしたほうがよいようです。
どうも、そうしないとファイルの修正が反映されない(ブラウザキャッシュを消去してもダメ)ことがあるらしく・・・

ま、でなくてもバージョン管理は有効にしておいた方がいいですよね。
ヘンなコードを書いてバグってしまったときでも、すぐ戻せますので(笑)

編集フォームでコンテンツタイプのドロップダウンを非表示にする

SharePoint 2010のお話。
ちょっとしたワークフローをカスタムリストで作成したときのことです。

申請部門から管理部門へ申請が渡ったとき、管理部門でリストのコンテンツタイプを切り替えて、管理用のフィールドを表示させる仕様にしたのですが、そのまま何もしないと、申請部門の人がフォームを編集状態にしたときにもコンテンツタイプ切り替え用のドロップダウンが表示されてしまいます。

contentType

さわんなよー!という運用でもよかったのですが、できるものなら隠したい。というのでJavaScriptでがんばってみました。
管理部門グループ以外のメンバがフォームを編集状態にすると非表示になる仕組みです。

あっと、以下のコードjQueryと私の愛してやまないSPServices使ってますので・・・

var currentuser = $().SPServices.SPGetCurrentUser();
var ct_str;
if (_spPageContextInfo.currentLanguage == "1041") {
    ct_str = "コンテンツ タイプ";
} else{
    ct_str = "Content Type";
};

var groupname = ”管理部門グループ名”;
$().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: currentuser,
    async: false,
    completefunc: function (xData, Status) {
        if ($(xData.responseXML).find("Group[Name=\'" + groupname + "\']").length == 0) {
                $("tr:has(select[title=\'" + ct_str + "\'])").not("tr:has(tr)").hide();
        }
    }
});

P.S.
こちらに参加してみようかと・・・
SharePointの入門~活用~Enterprise までの濃い1か月間の勉強会Monthly第一弾

いい年して人見知りなので、その場にフリーズしてそうですが。

SharePointでスクロールするとトップへ戻るボタンを表示してみた

SharePointのグローバルナビゲーションは固定ではないので、コンテンツが下へ長くなったときスクロールしてくと消えてしまって何気に不便です。
特に、SP2013のosloテーマなどサイドリンクバーを表示しないテーマの場合、また最上部までスクロールしてかないと他のページやコンテンツへ飛べません。

そこで、巷のwebサイトでよく見かけるような、ある程度スクロールしたら「TOPへ戻る」ボタンを表示させようと思い、

jQueryでスクロールすると表示する系いろいろ

などみつつちょいちょいと書いてみたのですがうまくいかず。

どうも、SharePointではスクロール位置をwindowオブジェクトで取れないっぽいのです。
困ったー!と、四苦八苦のすえ、、、
以下のコードでスクロール位置が取れ、実装できました!

HTML

<p id="page-top">
   <a href="#nav">TOP</a>
</p>

CSS

#page-top
{
    position: fixed;
    bottom: 20px;
    right: 50px;
}

#page-top a
{
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 8px 0;
    text-align: center;
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#page-top a:hover
{
    text-decoration: none;
    background: #999;
}

JavaScript(jQuery使ってます)

var topBtn = $('#page-top');
topBtn.hide();
$('#s4-workspace').scroll(function () {
    if ($(this).scrollTop() > 400) {
        topBtn.fadeIn();
    } else {
        topBtn.fadeOut();
   }
});
topBtn.click(function () {
    $('#s4-workspace').animate({
        scrollTop: 0
    }, 500, "swing");
    return false;
});

ちなみに、2010ではトライしてないのですが、上のやり方でいけるんでしょうか・・・??
【追記】
SharePoint2010でも、#s4-workspaceでスクロール位置がとれました!
なので、2010でもこのコードでトップへ戻るボタンが表示できます。

現在のサイトURLを取得するJavaScriptスニペット

すぐ忘れちゃうのでメモ。

”http://” + window.location.host + _spPageContextInfo.webServerRelativeUrl

※2007の場合は、webServerRelativeUrl の代わりにL_Menu_BaseUrlを使うとよいようです。

Using _spPageContextInfo to Determine the Current SharePoint Context in Script

他にもいろいろな取得方法があると思いますが、とりあえずこれで動いてるっぽいです。

しかし、SharePoint界では

site = サイトコレクション
web = 個別のサイト

になるという、この言い回しにいまだに慣れません・・・