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

申請画面で設定した特定の期日までは承認が行えないフローの作成方法

このCookbookでは、申請画面で設定した特定の期日までは承認が行えないフローの作成方法を紹介します。 アクション設定の表示モード変換を使用し、承認可能日の前後で承認ボタンの表示有無が切り替わる画面 …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

no image

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

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

no image

スマートフォン版スケジュール画面から添付ファイルをダウンロードする方法

このCookBookでは、「intra-mart Accel Collaboration」のスケジュール機能において、スマートフォン版の画面から添付ファイルをダウンロードできるようにする方法について紹 …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

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

RSSRSSRSSRSS