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

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

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

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

no image

IM-BloomMaker グラフエレメントのツールチップのフォーマットを指定する方法

このCookBookでは、Accel Platform 2020 Winter でグラフエレメントに追加された「tooltipPointFormat」プロパティについて紹介しています。 「toolti …

BloomMakerとLogicDesignerでWorkflowコンテンツを作成する

このCookBookでは、BloomMakerとLogicDesignerを利用してWorkflowのコンテンツを作成する方法を紹介します。 2019 Winter(8.0.24)で、以下の機能をリリ …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

RSSRSSRSSRSS