今日の日付との比較に基づいてSharePointリストの日付フィールドを色分けするにはどうすればよいですか?

1
mdevm 2018-11-08 21:59.

日付値を含む「有効期限」という日付列を持つSharePointリストがあります。

いくつかのJSコードを使用して、最初に日付の値が今日と等しいかどうかを確認し、等しい場合は赤で強調表示します。

誰かが同じJSコードを手伝ってくれませんか。

ノード:私はSPOnlineを使用しています。

前もって感謝します。

4 answers

3
Ganesh Sanap 2018-11-09 09:03.

最新のUIの場合

はい、jsonフォーマットを使用してSharePointオンラインのフィールドに条件付きで色を付けることができます。

次の例では、アイテムのExpirationDate内の値が現在の日付/時刻より前の場合、現在の日付フィールドを赤で色付けします。

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "div", "debugMode": true, "txtContent": "@currentField", "style": { "color": "=if([$ExpirationDate] <= @now, '#ff0000', ''"
   }
}

出典:列の書式設定を使用してSharePointをカスタマイズします。

クラシックUIの場合

リストビュー、リストフォーム、および検索結果のレンダリングエンジンを表すクライアントサイドレンダリング(CSR)を使用できます。次のアプローチを検討することをお勧めします。

以下の例は、日付値に基づいてリスト行を強調表示する方法を示しています。

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

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

        // get today's date
        var today = new Date();
        // zero out the time portion so we will only compare days
        today.setHours(0,0,0,0);

        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {

            // get the date set in your date YourDateField
            var itemDate = new Date(rows[i]['ExpirationDate']);
            // zero out the time portion so we only compare days
            itemDate.setHours(0,0,0,0);

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);

            if (itemDate >= today) {
                row.style.backgroundColor = '#ED9898';
            }
        }
    }
  });
});

詳細と、リストビューのJSLinkにこのコードを追加する方法については、私の回答「アクティブステータスで行を強調表示する方法」を参照してください。

ソース:

  1. SharePoint 2013クライアント側レンダリング:リストビュー。
2
LZ_MSFT 2018-11-09 09:43.

クラシックUIでは、次のコードをリストビューのスクリプトエディターWebパーツに追加して実現できます。

<script type="text/javascript">
(function () { 
    // Create object that have the context information about the field that we want to change it's output render  
    var fieldContext = {}; 
    fieldContext.Templates = {}; 
    fieldContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Expiration_x0020_Date": { "View": fieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
})(); 

// This function provides the rendering logic for list view 
function fieldTemplate(ctx) { 
    var expirationDate = ctx.CurrentItem[ctx.CurrentFieldSchema.ExpirationDate];
    // Return html element with appropriate color based on priority value 
    if(new Date(expirationDate) <= new Date()) {
        return "<span style='color : red'>" + expirationDate + "</span>";
    }else {
        return expirationDate;
    }    
}
</script>

1
naijacoder 2018-11-09 09:04.

計算列またはjsリンクを使用できます。以下のリンクの例を参照してください

カスタムリストのテキストの色を変更するための計算列

0
Chris G 2020-03-10 23:49.

オンプレミスのSharePoint2013に適用される、または新しいSharePointの従来のエクスペリエンスで使用できる例をここで共有したいと思います。スクリプトをサイトアセットライブラリに保存し、jslinkを使用してリストビューに接続しました。(ページの編集>リストWebパーツの編集>その他> JSリンク:〜site / SiteAssets / ColorListDate.js)

Javascript:

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
    //internal column name between double quotes on the next line. If your column name has a space in its internal name use "_x0020_" in place of the space. 
        "My_x0020_Date": {
            "View": ColorCodeDueDate
            }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function ColorCodeDueDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.My_x0020_Date);
    MyDateVar.setHours(0,0,0,0);

    var today = new Date();
    today.setHours(0,0,0,0);

    var then1 = new Date();
    //use this to set how many days you want var then to be.
    then1.setHours(0,0,0,0);
    then1.setDate(then1.getDate() + 1);

    var then3 = new Date();
    then3.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then3.setDate(then3.getDate() + 3);

    var then4 = new Date();
    then4.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then4.setDate(then4.getDate() + 4);

    // if there's no due date don't render anything. Also update the column names in the else statements below. If your column name has a space in its internal name use "_x0020_" in place of the space.
    if (MyDateVar < today) {
        return "<div style='background-color:red;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) { 
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then3.getTime()) { 
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar >= then4) {  
        return "<div style='background-color:green;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
}

最終結果(今日は私のスクリーンショットで3/10/20でした)

私を助けた情報源

  • この郵便受け :)
  • JavaScriptでの日付の同等性の確認に関するこのブログ: http://adripofjavascript.com/blog/drips/checking-date-equality-in-javascript.html

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

誰かがこのナンバープレートを取得するために490万ドルを費やした

誰かがこのナンバープレートを取得するために490万ドルを費やした

著者による画像。(グラフィック:パガニ、エミレーツオークション)少数のナンバープレートは、UAEの主要なステータスシンボルです。

ドナルド・トランプは、攻撃用武器ではなく、シリア人に対する禁止案でオーランド銃乱射事件に対応します

ドナルド・トランプは、攻撃用武器ではなく、シリア人に対する禁止案でオーランド銃乱射事件に対応します

ドナルド・トランプは、「過激なイスラムテロに正直である」ことをすぐに祝福した後、トゥデイのショーに呼びかけ、日曜日の早朝に50人が死亡したような大量射殺を防ぐために何をすべきかについて話し合った。オーランドのパルスナイトクラブ。トランプは、情報収集の改善の必要性を強調しました(「何らかの理由で、彼らはこれらの人々を報告しておらず、間違っていることがたくさん起こっていることを知っています」と彼は言い、「彼ら」が誰であるかを明確にしませんでした)。

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

Tomorrow's Kitchen シリコンストレッチ蓋 12個パック | $14 | アマゾン | プロモーション コード 20OFFKINJALids は基本的にキッチンの靴下です。常に迷子になり、二度と閉じられない孤立したコンテナーが残ります。しかし、蓋が伸びて、残った容器、鍋、フライパン、さらには大きなスライスされた果物のすべてに適合するとしたらどうでしょうか? その非常に特殊な蓋を失うことを二度と心配する必要はありません。

あなたの最高のワシントン DC ハックを教えてください

あなたの最高のワシントン DC ハックを教えてください

このコラムでは、ロサンゼルスやラスベガスなど、いくつかの産業都市をハッキングしました。今こそ、軍産複合都市の時代です。

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

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

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

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

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

Language