Kintone UI Componentのカスタマイズ事例｜アプリ活用研究会

固定された記事

kintone UI Componentの実装（本番環境への導入方法と注意点）

kintone UI Componentとは kintone UI Component（以降「KUC」と略す場合もあります）は、kintone カスタマイズでの UI 開発などで「kintone のフォームのパーツを自作する」ためのライブラリです。 JavascriptコードでKintoneライクなフォームのパーツを自作できます。通常、Kintoneのフィールドの設定値（例：ラジオボタンの選択肢等）は、Javascriptで変更することはできません。しかし、kinto

別アプリ参照で３階層動的絞り込みドロップダウン

やりたいこと kintoneで別アプリのレコードを参照したドロップダウンリストで、大分類と小分類を選択して、分類項目に一致するアイテムだけを絞り込み選択できる3階層動的絞り込みドロップダウンリストを実装したい。この様な要望を頂きましたので、kintone UI Component v1のDropdownを利用して作成してみました。デモ画面１デモ画面では、別アプリ（商品メニュー）のレコード値の大分類、小分類、商品名の値を外部参照してをドロップダウンリストの値にしてい

アプリのテーブルに入力補助機能を付加する

やりたいこと Kintoneアプリのテーブル中のフィールドに入力補助機能を付けたい。具体的には、テーブルの各項目にプレイスホルダー（代用文字）やツールチップ（吹き出し型のヒント）を実装したい。標準機能のテーブルでは、この様なカスタマイズは出来ませんので、本稿では、kintone UI Component v1のTableを利用してカスタマイズ版のテーブル（ＫＵＣ版テーブルと呼びます）を作成する事例を紹介します。ＫＵＣ版テーブルの役割はテーブル枠機能だけなので、他のコ

文字列複数行フィールドに入力支援機能を追加する

やりたいこと Kintoneアプリの文字列複数行フィールドに、入力でユーザーが迷わない様に入力例を表示する「placeholder（代用文字）」を実装したい。「placeholder」とは、入力フィールド空欄時に「入力例」として表示される半透明のテキストのことです。表示されているだけで入力値にならないテキストです。標準機能では文字列（複数行）フィールドに「placeholder」を付ける機能は無いので本稿では、kintone UI Component v1のTex

文字列1行フィールドに入力支援機能を追加する。

やりたいこと Kintoneのアプリは、直感的に使えるＵＩ（ユーザーインターフェイス）を備えていますが、それでも入力方法に迷うユーザーの為に入力支援機能を画面上で表示できると良いですね。例えば、Kintoneアプリの文字列１行フィールドに、入力でユーザーが迷わない様に入力支援機能（代用文字、ツールチップなど）を追加します。今回は「placeholder（代用文字）」の実装方法を紹介します。「placeholder」とは、入力フィールド空欄時に「入力例」として表示され

アプリに操作ガイドのツールチップを実装する

やりたいこと Kintoneアプリの操作でユーザーが迷わない様に、操作方法のガイド等を表示する「ツールチップ」を実装したい。標準機能ではアプリのフォームに「ツールチップ」を付ける機能は無いので kintone UI Component v1のコンポーネントTooltipを利用して実装します。「ツールチップ」とは、kintoneの基本操作のアイコンにも表示される吹き出し型のヒント文字のことです。デモ画面デモ画面では、タイトル文字の入力方法をツールチップで表示して

時刻フィールドの開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の時刻フィールドは入力範囲が00:00～23:59のフルタイムで時刻選択も30分間隔であり、この設定を変更することはできません。参照：Kintoneヘルプ／時刻しかし、時刻の表示範囲を会社の営業時間内に制限したり、時刻選択の間隔をもっと細かくしたいという現場ニーズはあると思います。 kintone UI Component v1を利用すれば、時刻の開始～終了範囲を変更したり、時刻選択の間隔を自由指定できる時刻フィールドを作成できます。

日時フィールドの時刻開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の日時フィールドは日付と時刻の入力支援ツール（Picker）が使える入力部品ですが、時刻部分の入力範囲が00:00～23:59のフルタイムで時刻選択も30分間隔であり、この設定を変更することはできません。参照：Kintoneヘルプ／日時しかし、時刻部分の表示範囲を会社の営業時間内に制限したり、時刻選択の間隔をもっと細かくしたいという現場ニーズはあると思います。 kintone UI Component v1を利用すれば、日時フィール

¥1,000

別アプリの値を参照するドロップダウンリストの実装

やりたいこと kintone UI Component v1を利用して、別アプリのレコード値を参照できるドロップダウンリストを作成します。ルックアップフィールドのドロップダウンリスト版を作るイメージです。標準ドロップダウンリストは、リストから値を選択する入力パーツで、入力の手間を省いたり入力値の表記ゆれを防止するために用いられますが、予めフォームの設計で値リストを作成しておく必要があります。しかし、社内資産や消耗品リストなど同一内容のドロップダウンリスト値を設置した

ラジオボタンで動的に変化するドロップダウンリストの実装

やりたいこと kintoneアプリで、ラジオボタンの値を変更するとリスト値が動的に変化するドロップダウンリストを設置します。仕組みとしては、フォームのラジオボタンの値で別アプリのレコードを条件検索して、ドロップダウンリストの値として動的に取得・表示します。この機能は、kintone標準機能のドロップダウンリストでは出来ません。 kintone UI Component v1を利用したJavascriptカスタマイズ例です本稿では、標準のドロップダウンリストと区別するた

選択肢が変化するラジオボタンの実装

やりたいこと kintone UI Component v1を利用して、他フィールドの値で選択肢が変化するラジオボタンを設置するカスタマイズ例を紹介します。 kintone UI Componentについて本稿では標準ラジオボタンと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版ラジオボタン」と呼びます。まずは、以下のデモ画面をご覧ください。カスタマイズ版ラジオボタンのデモ画面デモ画面は、上の「支店選択」が標準のラ

選択肢が変化するチェックボックス

やりたいこと kintone UI Component v1を利用して、他のフィールド値の変更で選択肢が変化するチェックボックスのカスタマイズ例を紹介します。今回は、ドロップダウンリストの「会議種類」を変更すると「会議参加者」のチェックボックスの選択肢が変化するアプリを作ります。 kintone UI Componentについて本稿では標準のチェックボックスと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版Chekbo

チェックボックス項目の選択可／不可を条件で制御する

やりたいこと kintone UI Component v1を利用して、チェックボックスの値条件で項目の選択可能／不可を制御するカスタマイズ例を紹介します。 kintone UI Componentについて本稿では標準のチェックボックスと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版Chekbox」と呼びます。まずは、以下のデモ画面をご覧ください。 KUC版チェックボックスのデモ画面デモ画面では、チェックボックスの

アプリに現在日時を入力するボタンとダイアログを実装する

やりたいこと kintone UI Component v1を利用したボタンとダイヤログ（情報ウィンド）を組み合わせて、ボタンクリック時の現在日時をアプリの日時フィールドにセットする処理を実装してみました。「現在日時取得」ボタンをクリックしたら、ダイヤログ（情報ウィンド）を表示してダイヤログの［OK］ボタンを押したら、現在日時を取得してセットし［キャンセル」ボタンを押したら現在日時の値を空白にリセットします。デモ画面以前、現在日時を記録するボタンを設置するカスタ

Kintone UI Componentのカスタマイズ事例

フォローしませんか？

記事一覧