CookBook

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

投稿日:2018-08-02 更新日:

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。
本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタンが現れ、スクロールではなくボタンの操作で先頭へ戻る機能を想定しています。
また、先頭へ戻るとボタンは画面から消えます。

サンプルでは、汎用アイテム「ボタン(イベント)」を利用していますが、表示アイテム「イメージ」を利用しても同様な機能が実現できます。
イメージは、画像を利用するためデザインに関係なくイメージで「先頭へ戻る」を実現できます。
他のボタンアイテムとデザインが被り、区別して使いたい場合には表示アイテム「イメージ」を利用してください。

完成イメージ


表示する項目が多く縦長い画面でスクロールすると画面の右下に「先頭へ戻る」ボタンが現れ、ボタンの操作で先頭へ戻ると画面からボタンが消えます。

完成サンプル

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

レシピ

  1. BIS定義を登録する
  2. 汎用アイテム「ボタン(イベント)」を配置する
  3. 汎用アイテム「スクリプト」を配置する
  4. アクション設定のカスタムスクリプトを追加する

BIS定義を登録する

スクロールが発生する画面を作成します。

汎用アイテム「ボタン(イベント)」を配置する

画面に汎用アイテム「ボタン(イベント)」を配置し、スクリプトに先頭へ戻る処理を実装します。
初期表示イベントのカスタムスクリプトでボタン(イベント)の位置を右下に調整するので、配置位置は任意です。
サンプルでは、ボタン(イベント)を特定するために最初に配置することを前提としています。
IM-BIS for Accel Platform IM-BIS デザイナヘルプ - ボタン(イベント)

汎用アイテム「スクリプト」を配置する

画面に汎用アイテム「スクリプト」を配置し、スクリプトに「先頭へ戻る」ボタンの表示、非表示の制御を実装します。
IM-BIS for Accel Platform IM-BIS デザイナヘルプ - スクリプト

アクション設定のカスタムスクリプトを追加する

アクション設定のカスタムスクリプトにスクロールでも「先頭へ戻る」ボタンの位置が固定されるように実装します。
IM-BIS for Accel Platform IM-BIS 仕様書 - アクション設定

-CookBook
-,

執筆者:


comment

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

関連記事

no image

Formaの実行画面でアクセスログを収集する

このCookBookでは、Formaの実行画面で、アクセスログを収集する方法を紹介します。 サンプルでは、登録画面を開いた時点とデータ登録を実行した時点で、ログを収集します。 ログを収集することで、登 …

no image

IMBox の「Like!」を別のキャプションにする方法

この Cookbook では、IMBox の「Like!」を別のキャプションにする方法を紹介します。 具体的には、「Like!」を「確認」に変更する方法を紹介します。 この Cookbook では、日 …

no image

ジョブを作成して定期実行する

このCookBookでは、以下の開発モデルでジョブを作成する方法と、作成したジョブを指定した時刻に定期実行する方法を紹介します。 ・スクリプト開発モデル ・JavaEE開発モデル いずれのモデルでもジ …

no image

完了したワークフロー案件の登録データをメンテナンスする方法

このCookBookでは、IM-BISとIM-FormaDesignerで作成したワークフロー案件の登録データを編集する方法を紹介します。 一部制限はありますが、IM-FormaDesignerのアプ …

no image

画面にインジケータ(ロード中のアイコン)を表示する

任意の処理を行った際にインジケータを表示する方法をご紹介します。 インジケータは、アイコンを用いて任意の処理中であること(ロード中であること)を画面に表示します。 インジケータを利用することで、任意の …

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

RSSRSSRSSRSS