Kintoneで作成したアプリは、直感的に使えるUI(ユーザーインターフェイス)を備えていますが、それでも入力方法に迷うユーザーの為に入力支援機能を画面上で表示できると良いですね。
アプリのフォームに入力方法をガイドする支援機能を追加することでUX(ユーザー体験)を向上しますので、Kintoneアプリの操作経験が少ないユーザーでも入力作業がスムーズになる効果が期待できます。
今回は、Kintoneのアプリフォームに、入力方法の支援機能として、入力例の文字列表示やヒントの吹き出しを追加するカスタマイズ例を紹介します。
以下の商品マスタ登録のデモ画面は、各入力フィールドに入力例の文字列(プレイスフォルダー)の表示と、入力方法のヒントがバルーン表示される機能(ツールチップ)を実装したカスタマイズ例です。
フィールドが未入力状態で表示されている半透明の文字がプレイスフォルダー(代用文字)です。
フィールドにマウスオーバーすると表示されるヒントの吹き出しがツールチップです。
各フィールドの入力幅や文字色、ツールチップの文字色・背景色をCSSコードでカスタマイズしています。
![](https://dejitora.jp/wp-content/uploads/2024/04/7e7c2d534627eda6214218bf9ac420bd.gif)
上記デモ画面のフォームは、kintone UI Componentを用いてカスタムなUIを構築しています。
この様なカスタマイズがご希望の方は、当サイトの「Kintoe人材育成」上級コースの受講をご検討下さい。
上級コースの受講者には、特典で当サイトのカスタマイズテンプレートを3種類まで無償でご提供しています。
自分でカスタマイズしてみたい方へ
今回紹介したカスタマイズで使用しているkintone UI Componentは、以下の2種類です。
詳しい利用方法が記載されているページを紹介します。
![](https://ui-component.kintone.dev/ja/img/kuc_box_yellow.png)
![](https://ui-component.kintone.dev/ja/img/kuc_box_yellow.png)
#kintone #Javascropt #カスタマイズ