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

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

関連記事

BloomMakerで動的承認ノードを利用したWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、動的承認ノードを利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerとLogicDesignerでWork …

no image

ViewCreatorのヘッダやフッタに配置するリンクのURLに計算結果を埋め込む方法

本記事では、ViewCreatorのヘッダやフッタにリンクを埋め込む際に、関数を利用する方法をご紹介します。 この方法を利用すると、パラメータ文字列に「今日日付」を受け渡すといったことが実現できます。 …

no image

Azure 上に iAP を構築する方法

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

no image

物理マシン 1 台で Resin のクラスタリング環境を構築する

この CookBook では、物理マシン 1 台で Resin のクラスタリング環境を構築する手順について紹介しています。 Resin のクラスタリングを構築するには通常複数台のマシンが必要ですが、D …

no image

No.7 Excel 出力 → 他システム(別サーバ)連携

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、ファイルサーバ等他のサーバと連携し、別サーバ上のファイルを更新できます。 ロジックフローの …

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

RSSRSSRSSRSS