SharePoint Foundation2013の列の値に基づいてアイテムの行を色分けする

23
dspencer 2015-02-23 18:32.

というフィールドを含むカスタムリストがありますStatus。でAllItemsビュー、Iは、カラーコードの値に基づいて、各ラインアイテムを希望しますStatus。これは、SharePoint DesignerまたはSharePoint自体で行うことはできますか?

4 answers

25
Vadim Gremyachev 2015-02-24 02:53.

SharePoint 2013では、Client Rendering Mode (CSR)リストビュー、リストフォーム、および検索結果のレンダリングエンジンを表すいわゆるが導入されました。あなたの仕事のために次のアプローチを検討することをお勧めします。

CSRを使用して行を強調表示する方法

以下の例は、ステータスに基づいてリストタスク行を強調表示する方法を示しています

テンプレートコード:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Not Started' : '#FFF1AD',  
          'In Progress' : '#FFD800',
          'Completed' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 

});

変更を適用する方法

変更を適用する方法には、少なくとも2つのオプションがあります。

  1. WebパーツのJSLinkプロパティ経由
  2. Script Editor/ Content EditorWebパーツを介してJavaScriptテンプレートをページに配置します

2番目のオプションを使用して変更を適用する方法は次のとおりです。

  1. ページを編集モードに切り替えます
  2. Script EditorリストビューWebパーツのすぐ下にWebパーツを追加します。
  3. scriptタグコードを使用して指定したコードをスクリプトエディタにラップして、次のように配置します。<script type="text/javascript">{Template JS code goes here}</script>
  4. ページを保存する

結果

CSRに精通するには、次の記事をお勧めします。

  • SharePoint2013でのクライアント側レンダリングの概要

  • SharePoint 2013クライアント側レンダリング:リストビュー

2
404 2015-02-24 01:47.

はい、JSLinkと呼ばれるSP2013の新機能を通じて可能です。

JS Linkを使用すると、ユーザーはJavaScriptファイルへの参照をWebPartプロパティとして追加し、WebPartsのビュー、リストフォーム(表示、新規、編集)、およびイベントでのフィールドとアイテムのレンダリングを制御できます。jsファイルを使用する前に、 JavaScriptファイルを新しいJavaScript表示テンプレートとしてサイトのマスターページギャラリーにアップロードすることをお勧めします。JavaScript表示テンプレートコンテンツタイプには、ターゲット要素(ビュー、フォーム、Webパーツなど)の指定に役立つ特別なサイト列が追加されています。 。)JavaScriptファイルのカスタムレンダリングが実装される場所。

前後は次のようになります–

初期リスト–前にカスタムリストを作成する

結果のアイテム

これを実現する方法のステップバイステップのプロセスについては、このリンクを参照してください。

の代わりにctx.CurrentItem.Salesstatusリスト内のフィールドの内部名を参照できます。

2
Danny '365CSI' Engelman 2015-02-24 21:57.

マイクロソフトは、バージョン2016以降でこれらすべてを無効にしましたが、古いSPバージョンと非モダンエクスペリエンスでも引き続き機能します。

参照:2017年6月13日MicrosoftはSharePoint計算フィールドでのHTMLマークアップの処理をブロックしました-同じ機能を取り戻す方法


元の答え:

よろしければ:

  • 常にMicrosoftSharePoint2013の方法に従う
  • 別のJavaScriptファイルを書く
  • SharePointのどこかにアップロードする
  • 実行したい場所にJSlink接続を作成する
  • または余分なウェブパーツをいじります

それならCSRが最良の選択肢です

もし、あんたが:

  • 2010年以降に機能している(そしてSP2010で機能している)ものを使用することを恐れないでください
  • 表示ロジック用に個別のファイルを作成したくない
  • ビュー列が表示されている場所に関係なく機能するソリューションが必要
  • リストテンプレートでラップできるソリューションが必要
  • 1つのページに同じリストの複数のビューがある場合でも機能します

次に、JavaScriptロジックを計算列に追加できます。

データ型を数値に設定すると、HTML / JavaScriptが評価されます

計算列「ColorStatus」を作成します。数式を貼り付けます。

=[Status]
"<img src=""/_layouts/images/blank.gif""  "
&" onload=""{"
&"  this.parentNode.parentNode.parentNode.style.backgroundColor="
&"  ({"
&"    'Not Started':'#FFF1AD',"
&"    'Draft':'pink',"
&"    'Reviewed':'lightgreen',"
&"    'Scheduled':'lightcoral',"
&"    'Published':'none',"
&"    'Final':'limegreen',"
&"    'Expired':'indianred'"
&"    })['"&[Status]&"']"
&" }"">"

そして、データ型を数値に設定します。
デフォルトのビューに追加コンテンツタイプに追加
ないでください(または数式がフォームにテキストとして表示されます)。これはビューでのみ機能します。

それがどのように機能するかについての詳細な説明: http://www.viewmaster365.com/#/How

もちろん、欠点もあります。
最大の問題は、HTML / Javascriptのコンテンツがアラートメッセージにテキストとして表示されることです。

楽しい部分は、&[Status]&部分でSharePoint Formulaのスキルをすべて使用して、必要な結果を得ることができることです。

1
Juan Pablo Pussacq Laborde 2015-02-24 02:57.

Javaスクリプトで解決できます。Laura Rogers @ WonderLauraのブログにある別の例。

リンク:SharePoint条件付き書式

画像:

お役に立てば幸いです。

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

OxyLEDの新しい15ドルのモーションセンシング常夜灯はどこにでも貼り付けられますが、充電が簡単です

OxyLEDの新しい15ドルのモーションセンシング常夜灯はどこにでも貼り付けられますが、充電が簡単です

私たちの読者は、何千ものOxyLEDのT-02モーションセンサーライトストリップを何年にもわたって購入してきましたが、充電するのが面倒だと感じた場合、新しいT-04は素晴らしいアップグレードのように見えます。T-02のように、 T-04は、付属の粘着ストリップを介して基本的にあらゆる表面に取り付けることができ、暗闇での動きを検出すると自動的に点灯します。

ハンソロ映画セットの写真は、新しいスーツと新しい乗り物を明らかにします

ハンソロ映画セットの写真は、新しいスーツと新しい乗り物を明らかにします

ユニバーサルは、フランケンシュタインの怪物を見つけるのに近いかもしれません。新しい撮影映像でアクマンの舞台裏をご覧ください。

ドナルド・トランプが解雇されたばかりのFBI長官ジェームズ・コミー

ドナルド・トランプが解雇されたばかりのFBI長官ジェームズ・コミー

写真:AP大統領ドナルド・トランプは、連邦捜査局長官のジェームズ・コミーを解雇したばかりです。火曜日の声明で、ホワイトハウスは、トランプが「両方の副検事総長ロッドの明確な勧告に基づいて行動するコミーをオフィスから削除したと述べましたローゼンスタインと司法長官のジェフセッション。

テオドリック大王は、過去の言語と政治的概念に隠された野蛮な将軍でした

テオドリック大王は、過去の言語と政治的概念に隠された野蛮な将軍でした

ウィキメディア・コモンズ経由西部のローマ帝国の中央機関が崩壊し、5世紀の間に州が分裂し、独自の道を進んだとき、新しい王国が出現しました。今日、私たちはこれらの新しい政治単位を特定の野蛮人グループで特定する傾向があります:ガリア南西部の西ゴート族、ガリア北部のフランク人、英国のアングロサクソン人、北アフリカのヴァンダル人。

バレンタインデーにユーカリのシャワースチーマーで「最高の睡眠」を贈りましょう。

バレンタインデーにユーカリのシャワースチーマーで「最高の睡眠」を贈りましょう。

BodyRestore ユーカリ シャワー スチーマーは、Amazon で 11,000 を超える 5 つ星の評価を得ています。セルフケアが必要な人へのバレンタインデーのギフトとして、ホームスパ製品を贈りましょう。

この「邪悪な吸引力」を備えたこの250ドルのハンドヘルド掃除機は、Amazonで75%オフになりました

この「邪悪な吸引力」を備えたこの250ドルのハンドヘルド掃除機は、Amazonで75%オフになりました

多くのAmazonの買い物客がUmlo H6ハンドヘルド掃除機を推奨しており、現在スーパーセール中です. ハンドヘルド デバイスには HEPA フィルターが装備されており、複数のアタッチメントが付属しています。Amazonで75%オフのときにハンドヘルド掃除機を購入する

オクタヴィア・スペンサー、「ザ・ヘルプ」共演者のシシー・スペイセクが17歳で映画のインターンをした後、彼女のことを「実際に」思い出したと語る

オクタヴィア・スペンサー、「ザ・ヘルプ」共演者のシシー・スペイセクが17歳で映画のインターンをした後、彼女のことを「実際に」思い出したと語る

オクタヴィア・スペンサーは、ヘルプで一緒に共演するずっと前に、シシー・スペイセク主演の 1990 年の映画「ロング・ウォーク・ホーム」でインターンとして働いていました。

ジュリア・フォックス、「マスカラ」がTikTokユーザーの性的暴行コードだったことを知らなかったことを謝罪

ジュリア・フォックス、「マスカラ」がTikTokユーザーの性的暴行コードだったことを知らなかったことを謝罪

ジュリア・フォックスは、彼女のTikTokで共有された応答ビデオで、「本当に申し訳ありません。今、本当に年齢を示しています」と述べました。

メリック・ガーランドはアメリカに失敗しましたか?

バイデン大統領の任期の半分以上です。メリック・ガーランドは何を待っていますか?

メリック・ガーランドはアメリカに失敗しましたか?

人々にチャンスを与えることは、人生で少し遅すぎると私は信じています。寛大に。

良いものと醜いもの: 2022

良いものと醜いもの: 2022

もうわからない。何が「ヒット」かを正確に判断することは、もはやほとんど不可能に思えます。

楽しみのために — 2022 年のトップの新しい音楽再生

楽しみのために — 2022 年のトップの新しい音楽再生

ついに!私の 2022 年のトップ ニューミュージック プレイへようこそ。私は毎年これを共有して、友達とつながります。

ヒーズ・オール・アイヴ・ガット

ヒーズ・オール・アイヴ・ガット

あなたの心をチェックしてください。私たちの心はしばしば迷います。

Language