CookBook

FormaDesignerで作成したフォーム内でカーソル遷移を制御する方法

投稿日:

このCookbookでは、FormaDesignerで作成したフォーム内でカーソル遷移を制御する方法を紹介します。
Tabキーを使ったカーソル遷移を考慮し、ユーザビリティが高いフォームを作成しましょう。

完成イメージ


1. 「Add」をクリックしてください。画面遷移後、「Text1」にカーソルが当たります。
2. Tabキーを押してください。以下の順序でカーソルが遷移します。
 「Text1」→「Text2」→「Text3」→「Text4」→「Register」

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/forma/normal/view/list_view/im_cookbook_125152_forma
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 入力アイテムを配置する
  2. 画面アイテム「スクリプト」を配置する
  3. タブインデックスを設定する

1. 画面アイテムを配置する

FormaDesignerでフォームを作成し、入力アイテムやボタンアイテムを配置してください。

2. 画面アイテム「スクリプト」を配置する

画面アイテム「スクリプト」を使用することで、実行画面を開いた際に特定のフィールドにカーソルを当てることができます。

フォームに画面アイテム「スクリプト」を配置し、以下のスクリプトコードを設定してください。
%フィールド識別ID%には、実行画面表示時にカーソルを当てたいフィールドのフィールド識別IDを記述しましょう。

3. タブインデックスを設定する

レシピ1で配置した画面アイテムのフィールドにタブインデックスを設定しましょう。

「フィールド一覧」をクリックしてください。
「タブインデックス」の列に数値を入力することで、フィールドやボタンに対してタブインデックスを設定することができます。

詳細は以下のドキュメントを参照してください。
IM-FormaDesigner for Accel Platform IM-FormaDesigner デザイナヘルプ - 「フォーム・デザイナ」画面の各部の名称と機能

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

BloomMaker で3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法

この CookBook では、IM-BloomMaker を使用して、3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法を紹介します。 ※この CookBook は 2021 Su …

no image

Payara blog のご紹介

この CookBook では Payara のブログについて紹介したいと思います。 以下の URL で Payara に関する様々な記事が投稿されています。 https://blog.payara.f …

BloomMakerとLogicDesignerでWorkflowコンテンツを作成する

このCookBookでは、BloomMakerとLogicDesignerを利用してWorkflowのコンテンツを作成する方法を紹介します。 2019 Winter(8.0.24)で、以下の機能をリリ …

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …

IM-BloomMaker 「ファイルアップロード」エレメントの利用方法

このCookBookでは、 2020 Spring でリリースした「ファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロードするこ …