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

フォローする

新デザイン対応及び機能拡張を行った「新デザイン版 条件書式プラグイン」が公開されました。
新規に条件書式プラグインを利用する場合は「新デザイン版 条件書式プラグイン」の利用を推奨します。

Index

概要

サンプルで公開している 「レコード一覧で条件書式を設定する」 のJavaScriptプログラムをプラグインにする手順を紹介します。
作業の詳細は kintone プラグイン開発の準備をご確認ください。
2016/02/26:本プラグインの新デザイン対応及び機能拡張を行った「新デザイン対応版条件書式プラグイン」が公開されました。

完成イメージ

このプラグインを利用したアプリのイメージです。

アプリ

設定画面

サンプルプラグイン

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

conditionformat/
 css/
-51-jp-default.css
-config.css html/
-config.html
image/
-icon.png
js/
-config.js
-cpick.js
-desktop.js
manifest.json

ご注意事項

  • サンプルプラグインは、その動作を保証するものではありません
  • サンプルプラグインの技術的なサポート等は行っていません

プラグインファイルの構成

フォルダ:css

  • 51-jp-default.css
    サイボウズが提供しているプラグイン設定画面のスタイルです。
  • config.css
    プラグイン設定画面調整用のスタイルです。

フォルダ:html

  • config.html
    プラグイン設定画面のHTMLです。

    条件書式を表示するために次のフィールドを設定する画面にしています。

    • 書式条件フィールド
    • 条件式
    • 条件値
    • 書式編集対象フィールド
    • サイズ
    • 一覧背景色

フォルダ:img

  • icon.png
    プラグインのアイコンです

フォルダ:js

  • config.js
    プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。
    • 「保存」ボタンが押された時に、未入力項目がある場合警告を表示する。
    • 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
    • 「キャンセル」ボタンが押された時に、前の画面へ戻る。
    • 既にプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • cpick.js
    プラグイン設定画面のカラーパレット用プログラムです。
  • desktop.js
    条件書式のプログラムです。(PC用のみ)

フォルダ:manifest.json

プラグインのマニュフェストファイルです。

パッケージング

作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、「conditionformat」をパッケージングします。
今回は「_work」フォルダを作成し、その中に「package.sh」を追加して実行します。 

コマンド例)
$ cd work
$ ../_work/package.sh ./ 

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

conditionformat1_plugin.zip

インポートと設定

  1. 設定画面より、ダウンロードした「plugin.zip」をkintoneシステム管理画面より読み込みます。
  2. 適用するアプリの設定画面より、プラグインをインストールします。
  3. プラグインの設定画面より、条件書式を設定するフィールドを設定します。

「入力値チェックプラグイン」のチュートリアル にプラグインの適用方法と動作確認を紹介していますのでご参考下さい。

制限事項

  • スマートフォン用のブラウザには対応していません。
  • こちらのプラグインは旧デザイン用であり、新デザインでは動作が保証されません。新デザイン版の条件書式プラグインはこちら

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

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

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

Avatar
makin

文字条件書式は全く問題ありませんが、
日付条件書式で、「○日後から」「○日前から」に数値を入れても、期待通りには動きません。

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