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

ワークスペースとファイルライブラリ機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …

no image

Cassandra の Docker を作成する。

この CookBook では、Cassandra の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Cassandra の Docker イメージを作成します 実行し …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

no image

Azure 上に iAP を構築する方法

  この CookBook では、Azure の Virtual Machines 機能を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法につい …

no image

IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法

このCookBookでは、IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法を紹介しています。 単票および表形式の帳票出力を行います。 完成イメージ …

まだデータがありません。

RSSRSSRSSRSS