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

IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法

このCookBookでは、IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法を紹介しています。 本稿では、案件単位にIMBoxのダイレクトメッセージ(以降DM)を作成し、 …

no image

Cassandra の Docker を作成する。

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

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

no image

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

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

no image

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

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

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

RSSRSSRSSRSS