画面から画面へ

一覧と明細が別々の HTML ページになっている画面です。行をクリックすると明細のページに遷移し、「一覧へ戻る」で一覧に戻ります。

動作

一覧で絞り込み、行をクリックすると、明細のページに遷移してその受注が表示されます。

明細で再読み込みすると、一覧に戻されます。渡された値は一度読むと消えるので、明細に表示する値が無いためです。明細のページを直接開いた場合と同じ扱いです。

「一覧へ戻る」を押すと、絞り込みとスクロール位置が遷移前の状態で一覧に戻ります。

ストレージを使う理由

一つのページの中で表示を切り替えるだけなら、選択された受注番号はアクタのフィールドに持てます。受注管理の画面はそうしています。

別の HTML ページに遷移すると、明細のアクタが動き始める時点で一覧のアクタは存在しません。渡す値はアクタの外、ここでは sessionStorage に置きます。

渡す値

一覧は、行がクリックされたときに、受注番号と戻り先の情報を書いてから遷移します。

Once at: 'detail' putJson: (Json object: {
  #code -> (Json str: code).
  #back -> (Json object: {
    #filter -> (Json str: filter).
    #top    -> (Json int: top) }) }).
Loc assign: 'detail.html'.

書いてから遷移します。順番が逆だと、書くアクタが存在しません。

明細は受注番号だけを受け取り、データはサーバから取得します。一覧が持っていたデータを渡すと、時間が経過している場合に古い値を表示するためです。

一度だけ読める値

Once take: は読み取りと削除を一つの操作にしてあります。読むだけの操作はありません。

明細で再読み込みすると渡された値が無いので、一覧へ戻します。読んだら消えるストレージが、そのまま画面の仕様になっています。

戻るときは、戻り先の情報を書き戻します。一覧はそれを一度だけ読んで、絞り込みとスクロール位置を復元します。

テスト

ページ遷移とスクロール位置の復元は、本物のブラウザでテストしています。行をクリックして明細の番号を確認し、再読み込みで一覧に戻ることを確認し、戻ったときの絞り込みとスクロール位置を確認します。