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

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …

no image

No.9 音声認識からスケジュール登録

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerと音声認識(Web Speech API)の仕組みを利用して、音 …

no image

ViewCreatorの計算式で日付データを操作する例

ViewCreatorを利用するとデータベース等に格納されているデータを簡単に画面に表示することが出来ます。 ViewCreatorについて – intra-mart Accel Platform V …

スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

このCookBookでは、スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法について紹介しています。 Formaの入力チェックプログラムでは以下の2つのチェッ …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

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

RSSRSSRSSRSS