新デザイン版 条件書式プラグイン

フォローする

概要

サンプルで公開している 「レコード一覧で条件書式を設定する」 のJavaScriptプログラムをプラグイン化させましたので紹介します。
kintoneアプリにこのプラグインを追加すると、レコード一覧、レコード詳細画面の表示時にフィールドの条件によって文字色、背景色、文字の大きさを変更することができます。

▼主要なアップデート情報

2017/03/31: 設定項目に行の追加/削除ボタンを追加しました。その他追加機能は「更新履歴」より参照ください。

設定画面

new_conditionformat_1.PNG

設定画面(筆アイコンクリック時のカラーピッカー ※画像はChromeの場合)

new_conditionformat_2.PNG

レコード一覧画面

new_conditionformat_3.PNG

レコード詳細画面

 new_conditionformat_4.PNG

新デザイン版 条件書式プラグイン を利用する

STEP1:フォームを設定する

アプリのフォームを設定します。次のフィールドを配置します。

  • 書式条件フィールド
    条件の比較に使うフィールドを配置します。文字や数値の条件を比較する場合は「文字条件書式」項目、
    日付の条件を比較する場合は「日付条件書式」項目より設定可能です。下記のフィールドを選択することができます。
  • <文字条件書式>
    • 文字列(1行)
    • 数値
    • 計算
    • ラジオボタン
    • ドロップダウン
    • レコード番号
    • 文字列(複数行)
    • チェックボックス
    • 複数選択
    • ステータス(プロセス管理)(※レコード一覧画面のみ反映)

    <日付条件書式>
    • 日付
    • 日時
    • 作成日時
    • 更新日時
  • 書式変更フィールド
    書式を変更するフィールドを配置します。「書式条件フィールド」に記載されている全てのフィールドを選択できます。

STEP2:アプリにプラグインを追加する

アプリに新デザイン版条件書式プラグインを追加します。プラグインの追加方法は、kintone ヘルプを参照してください。
プラグインを追加する

STEP3:プラグインを設定する

  1. アプリ管理画面の「設定」>「プラグイン」を開き、新デザイン版条件書式プラグインの歯車マークをクリックします。
  2. 各項目を設定します。(太字は2017/03/31アップデートにより追加された項目です。 )
    項目名

    必須

    説明
    書式条件フィールド

    必須

    条件を比較するフィールドを選択します。STEP1の「書式条件フィールド」項目に記載されたフィールドを設定できます。
    チェックボックス、複数選択は項目のうち一つでも条件を満たすと書式が変更されます。

    条件式

    必須

    比較条件式に次の値をドロップダウンから選択できます。対象フィールドの値が数字の場合、数字の大小で比較されます。
    <文字条件書式>

    • 条件値を含む
    • 条件値を含まない
    • =(等しい)
    • ≠(等しくない)
    • ≦(以下)
    • <(より小さい)
    • ≧(以上)
    • >(より大きい)

    <日付条件書式>

    • =(等しい)
    • ≠(等しくない)
    • ≦(以前)
    • <(より前)
    • ≧(以後)
    • >(より後)
    条件値  

    書式条件フィールドの値と比較する値を入力します。
    <文字条件書式>

    • どちらも半角数字の場合、数値データとして条件比較を行います。

    <日付条件書式>

    • 今日からカウントする日付を整数で入力し、「前・後」をドロップダウンで選択します。
    • 今日の日付に設定する場合は 0 (ゼロ) を入力します。
    書式変更フィールド

    必須

    書式を変更するフィールドを選択します。STEP1の「書式変更フィールド」項目に記載されたフィールドを設定できます。

    文字色  

    書式変更フィールドの文字色に設定するカラーコードを入力します。
    筆のアイコンをクリックするとカラーピッカーが表示され、選択した色のカラーコードを同じ行の「文字色」に追加します(Chrome, Firefoxのみ対応)。

    背景色  

    書式変更フィールドの背景色に設定するカラーコードを入力します。背景色を変更しない場合は「#」を入力します。
    筆のアイコンをクリックするとカラーピッカーが表示され、選択した色のカラーコードを同じ行の「背景色」に追加します(Chrome, Firefoxのみ対応)。

    文字サイズ  

    書式変更フィールドに設定する文字の大きさを次のドロップダウンから選択できます。

    • 変更なし
    • 小さい
    • やや小さい
    • やや大きい
    • 大きい
    文字装飾  

    書式変更フィールドに設定する文字の装飾を次のドロップダウンから選択できます。

    • 変更なし
    • 太字
    • 下線
    • 打ち消し線

    「+」ボタン

      クリックした行の下に新しい行を追加します。

    「ー」ボタン

      クリックした行を削除します。
  3. [保存]をクリックします。
    ※必須項目(書式条件フィールド、条件式、書式変更フィールド)が全て設定されていない行は無効な行と見なし、保存時に削除されます。
  4. 「アプリの設定」画面で[設定完了]をクリックすると、プラグインの設定がアプリに反映されます。

STEP4:プラグインを利用する

  1. レコードを登録します。
  2. レコード一覧画面及びレコード詳細画面にて設定内容に応じて対象フィールドの書式が変更されます。

サンプルプラグイン

plugin-sdkにアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/conditionformat2」に、今回のファイル群があります。
「conditionformat2」 配下のファイル構成は次のとおりです。

conditionformat2/ 
 css/
  -51-modern-default.css
  -config.css
html/
-config.html image/ -icon.png js/ -config.js -desktop.js manifest.json

プラグインの開発手順 パッケージング を参考に、「conditionformat2」をパッケージングします。

パッケージングしたサンプル

conditionformat2_plugin.zip

更新履歴

2016/02/26 v2.0を公開しました
2016/03/17 v2.1.0を公開しました :背景色を指定できるようになりました
2016/06/09 v2.1.1を公開しました :アイコンと名称を変更しました。ゲストスペース対応及びステータス選択時の不具合修正を行いました。
2016/11/08 v2.1.2を公開しました :「条件値」項目に空文字が入力できるように修正しました。数値を判断するロジックに修正を行いました。
2016/12/12 v2.1.3を公開しました :下記の不具合の修正を行いました。

  • プロセス管理を有効化していないアプリで「書式条件フィールド」、「書式変更フィールド」に「ステータス」を選択した際にエラーが出る不具合
  • レコードが0件の一覧を開いたときにエラーが出る不具合

2017/03/31 v3.0.0を公開しました :下記の機能を追加しました。

  • 設定項目に行の追加/削除ボタンを追加
  • 設定項目のローカライズ対応(英語、中文)
  • 設定に太字、打消し線、下線を追加
  • カラーピッカー対応(Firefox, Chromeのみで利用可)
  • 日付条件書式の条件値の設定方法変更
  • 設定画面でのプロセス管理の「ステータス」項目の設定値の名称を「ステータス(プロセス管理)」に変更
  • プロセス管理が有効でない場合、「ステータス(プロセス管理)」項目を選択できない処理に変更
  • 一覧画面で背景色変更時にborderの枠線を追加
  • その他CSS・ロジック変更等軽微な修正

2017/06/29 v3.1.0を公開しました :下記の機能を追加しました。

  • 文字条件書式「書式条件フィールド」の対象項目として、日付、日時、作成日時、更新日時フィールドを追加
  • 日付条件書式「書式変更フィールド」の対象項目として、「ステータス(プロセス管理)」を追加
  • 書式変更フィールドでチェックボックス、複数選択フィールドを選択した場合、条件未設定で動作するよう修正
  • 日付条件書式の条件値が未入力の場合エラーを表示
  • CSSファイルを51-modern-default.cssに差し替え
  • 設定画面の一部文言変更(英語版のみ)
  • その他ロジック変更等軽微な修正

2017/08/02 v3.1.1を公開しました :下記の機能を追加しました。

  • v2.1.3以前からv3.1.1 にアップデートした際の互換性対応を追加。以下詳細。
    - v3.1.1 でプラグインの設定画面を開いた際にv2.1.3以前で設定した初期値が設定される。
    - v2.1.3以前で設定された設定のままでも条件書式が適用される。
  • その他軽微な修正

制限事項

  • IE8では本プラグインはご利用いただけません。
  • スマートフォンでは、使用することができません。
  • カラーピッカーはFirefox, Chromeのみで利用可能です。その他のブラウザでは動作しないことがあります。
  • レコードを編集すると、書式が解除されます。編集後に書式変更を反映するには画面の更新を行ってください。
  • 複数条件を満たす場合は下の行が優先され、文字条件書式と日付条件書式では日付条件書式が優先されます。
  • レコード一覧の表示形式が表形式の一覧のみ対応しています。カレンダー形式の一覧、カスタマイズの一覧では動作しないことがあります。

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • 本プラグイン内では、一部の処理にDOM操作を含んでいます。アップデートの影響をうける可能性がある実装となっており、参考にする際はご注意ください。
  • 本プラグインをv2.1.3以前のプラグインからアップデートする場合、プラグインの設定画面より設定の再保存を行ってください。

※kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
GP-KIYO

文字条件書式と日付条件書式では日付条件書式が優先されます。 ⇒ 逆の優先もできたら尚良いです

Avatar
山内一真

フィールド一覧から編集ボタンを押す→編集を終了すると、色がデフォルトのままになってしまいます。
更新したり、ソートしなおすと直りますが、少し気になります。

Avatar
cybozu Development team

山内さん
コメントありがとうございます。developer network事務局です。
Isuuesに登録させていただきました。確認します。

https://github.com/kintone/plugin-sdk/issues/8

Avatar
megumi takeda

「ここのフィールドの情報入力は必要ですよ」と表現したく

フィールドが空の時に背景色をつけておきたいのですが、

条件値に何を入れていいかがわかりません。

フィールドは「数値」「文字」の2つを利用しようと思ってます。

初歩的な質問かもしれませんが、教えていただけないでしょうか。

Avatar
cybozu Development team

megumi takedaさん

コメントありがとうございます。developer network事務局です。

現状のプラグインでは条件値に空文字が設定できない状態となっておりました。
こちらissuesとして登録させていただき、アップデートで対応させていただきますので
宜しくお願い致します。

Avatar
cybozu Development team

megumi takedaさん

developer network事務局です。

本プラグインで条件値に空文字が入力できるアップデート対応を行いました。

今後とも宜しくお願い致します。

Avatar
cybozu Development team

M.Nishimuraさん

コメントいただきありがとうございます。developer network事務局です。

>書式変換フィールドにラジオボタンの項目を設定すると下記のエラーが発生します。

こちらの現象について確認しておりますが、エラーが再現しておりません。

下記二点を確認いただけますでしょうか。

  1. 新デザイン対応版条件書式プラグイン以外にJavaScriptカスタマイズやプラグインを適用させているかどうか。
  2. エラーの発生タイミング(プラグインの設定画面orレコード一覧イベントorレコード詳細画面)

宜しくお願い致します。

Avatar
M.Nishimura

 

> こちらの現象について確認しておりますが、エラーが再現しておりません。
> 下記二点を確認いただけますでしょうか。

  1. 新デザイン対応版条件書式プラグイン以外にJavaScriptカスタマイズやプラグインを適用させているかどうか。
  2. エラーの発生タイミング(プラグインの設定画面orレコード一覧イベントorレコード詳細画面)

他にJavaScriptもプラグインも適用していません。
アプリを開いて、最初にレコード一覧が表示されるタイミングでエラーとなります。

Avatar
cybozu Development team

M.Nishimuraさん

お世話になっております。developer network事務局です。

ご確認いただきありがとうございました。

現在も「書式変換フィールドにラジオボタンの項目を設定するとエラーが発生する」事象は再現できておりませんが、
プラグインの設定により類似のエラーが表示されることを確認しました。

プロセス管理の設定がオフになっているアプリで本プラグインの設定項目の「書式変更フィールド」または「書式条件フィールド」に
「ステータス」を設定するとエラーとなり、本項目以外に設定した条件書式が適用されない不具合を確認しました。

以下の設定例を参考に、プロセス管理の設定がオフのアプリでプラグインの設定画面に「ステータス」項目が含まれていないかどうか、確認いただけますでしょうか。

○エラー発生時の設定例


Avatar
M.Nishimura

御教授いただいたとおりでした。 エラーも解決し、表示も問題なくなりました。

Avatar
cybozu Development team

M.Nishimuraさん

お世話になっております。developer network事務局です。

>御教授いただいたとおりでした。 エラーも解決し、表示も問題なくなりました。

ご確認いただきありがとうございます。また、エラーが解決したとのことで何よりです。

該当のエラーに関しましては不具合として修正致します。
引き続きよろしくお願い致します。

Avatar
cybozu Development team

M.Nishimuraさん

お世話になっております。developer network事務局です。

>プロセス管理の設定がオフになっているアプリで本プラグインの設定項目の「書式変更フィールド」または「書式条件フィールド」に
>「ステータス」を設定するとエラーとなり、本項目以外に設定した条件書式が適用されない不具合を確認しました。

こちらの不具合の修正を行いました。
本記事にダウンロードリンクが記載されておりますのでご確認ください。

今後とも宜しくお願い致します。

Avatar
M.Nishimura

レコード一覧画面のインライン編集で、保存した直後は、条件書式が適用されません。

(ブラウザの再表示などでリフレッシュされれば適用されます)

イベント「app.record.index.edit.submit.success」を追加すればよろしいでしょうか。

Avatar
cybozu Development team

M.Nishimuraさん

その挙動は「制限事項」に記載のとおり、仕様となります。

  • >レコードを編集すると、書式が解除されます。編集後に書式変更を反映するには画面の更新を行ってください。

ご指摘のとおり、イベント「app.record.index.edit.submit.success」で更新処理をかければ保存後に適用されるかと思います。

Avatar
BABYMETAL

お世話になります。

プルダウンと数値1数値2の2個を使用して

プルダウン勤務Aと勤務B 数値1のところで レコードの山田さん(勤務A)は数値1(60を入力) 鈴木さんは(勤務B)数値1(40を入力)

数値2では山田さんが60以下なら赤文字

数値鈴木さんが40以下なら赤文字にすることは可能でしょうか

宜しくお願い致します。

Avatar
cybozu Development team

BABYMETAL様

いつもお世話になっております。
cybozu.com developer network事務局です。

やりたいことの内容を拝見しますと、3つのフィールドが登場しておりますので、
こちらのプラグインでは、BABYMETAL様が望まれていることはできません。

プラグインでは2つのフィールドでの設定が可能です。
例えば下記のような設定になります。
 「勤務体系」フィールドが、勤務Aだったら
 「勤務時間」フィールドを、赤文字にする

こちらのプラグインではできないのですが、別の方法として、JavaScript APIを
ご利用していただくことで設定可能だと思いました。

下記の記事は、レコード一覧と詳細画面で、フィールドの条件によって、
セルの背景色や文字色を変更するサンプルになります。
こちらをご参考いただくと実現できるのではないかと思います。

・レコード一覧とレコード詳細画面で条件書式を設定する
https://cybozudev.zendesk.com/hc/ja/articles/202341944

よろしくお願いいたします。

Avatar
goro

いつもお世話になっております。

以下の設定ができなくて、とても困っております。

「提出期限」日付型

これで①この日の5日前なら「背景:黄色」

   ②この日の3日前なら「背景:黄色、文字:赤」

   ③この日を過ぎたら「文字:赤」

ぜひご教授お願い致します。

Avatar
cybozu Development team

goro様

いつもお世話になっております。
cybozu developer network事務局です。

下記のように設定で、ご希望の設定が実現できていますでしょうか?

上記の設定を表示した画面が下記になります。

 

お試しいただけたらと思います。
よろしくお願い致します。

Avatar
goro

cybozu Development team 御中

早速対応していただき、本当にありがとうございました。

私の表現が間違ってすみません。「なら」ではなく、「から」にしたいです。

これで①この日の5日前~「背景:黄色」

   ②この日の3日前~「背景:黄色、文字:赤」

   ③この日を過ぎ~「文字:赤」

例:本日6/9    提出期限:6/13

  「背景:黄色」⇒6/9~6/10の間

 「背景:黄色、文字:赤」⇒ 6/11~6/13の間

 「文字:赤(打ち消し線)」⇒ 6/9以前 ⇒ ここが以下のように、背景も黄色になってしましますが、私がどこが設定間違っているからでしょうか?

教えていただければ、幸いです。

 

 

 

お手数ですが、よろしくお願い致します。

 

goroにより編集されました
Avatar
cybozu Development team

goro様

ご確認いただきありがとうございます。

下記の設定ではいかがでしょうか?


期日の5日前と4日前は、背景黄色+黒文字
期日の3日前~1日前は、背景黄色+赤文字
期日が今日を過ぎたら、赤文字

という設定だと上記になるのですが、認識あっていますでしょうか?

ご確認お願い致します。

Avatar
goro

cybozu Development team 御中

ご対応ありがとうございます。

確認できました。本当に助かりました。

ログインしてコメントを残してください。
Powered by Zendesk