2022年7月2日土曜日

ウィザードのページを作成し複数ステップの処理を実装する

 ページの作成でウィザードを選択し、複数のステップ(画面)を踏んだ後に値を確定する処理を実装します。

こちらの記事と同じく、表EMPの対話モード・レポートとフォームのページを含むアプリケーションを元に作業を行います。

Always FreeのAutonomous Databaseを使ってアプリケーションを作成しています。最近ADBのAPEXがアップグレードされ、現時点で最新の22.1を使用しています。

アプリケーションの作成を実行します。

まずは元になるアプリケーションが作成できました。

ページの作成をクリックします。


コンポーネントからウィザードを選択します。ウィザードはダイアログの下の方にあります。


ページ定義を行います。

ウィザード名は評価とします。ページ・モードはモーダル・ダイアログとし、各ステップはモーダル・ダイアログが置き換わる形で遷移させます。ステップは3つ作成し、それぞれ上から、給与の設定、手当の設定、確定とします。モーダル・ダイアログなので、ナビゲーションはOFFとします。

作成ウィザードをクリックします。

ページが3つ作成されます。


それぞれのステップとなるページを更新します。

ページ・デザイナでページ給与の設定を開きます。

Wizard Bodyのリージョン給与の設定に、従業員番号を保持するページ・アイテムを作成します。

識別の名前はP3_EMPNO、タイプは非表示とします。ソースのセッション・ステートの保持として、セッションごと(ディスク)を選択します。この設定によりP3_EMPNOに設定された値は、他のページから参照できるようになります。


給与を設定するページ・アイテムを作成します。

識別の名前をP3_SAL、タイプは数値フィールドとします。ラベルは給与とします。ソースのセッション・ステートの保持はセッションごと(ディスク)です。


ページ・アイテムP3_SALに、現時点で保存されている給与を設定します。

ヘッダーの前にプロセスを作成します。

識別の名前は給与の初期化、タイプはコードの実行を選択します。ソースのPL/SQLコードとして、以下を記述します。

select sal into :P3_SAL from emp where empno = :P3_EMPNO;


以上で、ページ給与の設定での作業は完了です。

続いてページ・デザイナで、ページ手当の設定を開きます。

Wizard Bodyのリージョン手当の設定に、手当を設定するページ・アイテムを作成します。

識別の名前をP4_COMM、タイプは数値フィールドとします。ラベルは手当とします。ソースのセッション・ステートの保持はセッションごと(ディスク)です。


ページ・アイテムP4_COMMに、現時点で保存されている手当を設定します。

ヘッダーの前にプロセスを作成します。

識別の名前は手当の初期化、タイプはコードの実行を選択します。ソースのPL/SQLコードとして、以下を記述します。従業員番号として、前のページのページ・アイテムP3_EMPNOを参照します。

select comm into :P4_COMM from emp where empno = :P3_EMPNO;


確定のページを編集します。

変更前の給与、変更後の給与、変更前の手当、変更後の手当を表示する4つのページ・アイテムを作成します。すべてタイプは表示のみです。これらのページ・アイテムは表示のみで他のページから参照することはないため、セッション・ステートの保持はリクエストごと(メモリーのみ)にします。

変更前の給与のページ・アイテムの名前はP5_SAL_PREVとし、ソースのタイプはSQL問合せ(単一の値を返す)、SQL問合せとして以下を記述します。

select sal from emp where empno = :P3_EMPNO


変更前の手当のページ・アイテムの名前はP5_COMM_PREVとし、ソースのタイプはSQL問合せ(単一の値を返す)、SQL問合せとして以下を記述します。

select comm from emp where empno = :P3_EMPNO


変更後の給与のページ・アイテムの名前はP5_SAL_NEWとし、ソースのタイプはアイテム、アイテムとしてP3_SALを選択します。


変更後の手当のページ・アイテムの名前はP5_COMM_NEWとし、ソースのタイプはアイテム、アイテムとしてP4_COMMを選択します。


プロセス・ビューを開き、変更した給与と手当を確定するプロセスを作成します。

プロセスを作成し、Close Dialogの上に配置します。

識別の名前は評価の確定、タイプはコードの実行を選択します。ソースのPL/SQLコードとして以下を記述します。ページ番号3や4にあるページ・アイテムの値を参照しています。

update emp set sal = :P3_SAL, comm = :P4_COMM where empno = :P3_EMPNO;

サーバー側の条件のボタン押下時にFINISHを選択します。


ウィザードに関係するページの設定は、以上で完了です。

ウィザードの画面には、作業の進捗を表示する領域があります。進捗の表示には共有コンポーネントのリストが使用されています。

今回の設定では、評価というリストが進捗の表示に使用されています。


これを開いて、少し修正します。


リスト・エントリの名前がステップ1、ステップ2、ステップ3となっています。これを給与、手当、確定に変更します。

変更したら、変更の適用をクリックします。


ページ・デザイナにて、ページ1の対話モード・レポートのページを開きます。

対話モード・レポートのEmployeesよりリンクされている編集フォームのページを、ウィザードのページが呼び出されるように変更します。

リージョンEmployeesを選択し、プロパティ・エディタの属性タブを開きます。


リンクのターゲットを開き、ページ番号2になっている部分があれば、3に変更します。


以上でアプリケーションは完成です。アプリケーションを実行すると、この記事の先頭のGIF動画のように動作します。

今回作成したAPEXアプリケーションをこちらに置きました。
https://github.com/ujnak/apexapps/blob/master/exports/multi-step-wizard.sql

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完





2022年7月1日金曜日

複数のページを呼び出した後にデータを更新する

 複数のページを呼び出して最後のデータを更新するといった要件は、どのように実装すればよいのかという相談がありました。

以下のような動作をするアプリケーションを作ってみます。


3つのページで実装されています。

最初に開いたページで値を変更します。次に進んで、確認をONにします。確認をONにして次に進むと、変更した値が次のフォームに反映されます。OFFのときは元の値がフォームに反映されます。最後に変更を確定する画面が開き、送信すると値が変更されます。

以下より作成方法を記述します。サンプル・データセットのEMP/DEPTに含まれる表EMPを、テスト用のデータとして使用します。

アプリケーション作成ウィザードを起動します。

名前は複数ステップ更新とし、あらかじめ作成されているホーム・ページは削除します。


ページの追加をクリックし、対話モード・レポートのページを追加します。

ページ名は従業員一覧、表またはビューとしてEMPを選択します。値の編集は行うため、フォームを含めるはチェックします。

ページの追加を実行します。


元のページでアプリケーションの作成を実行します。

アプリケーションが作成されます。最初にページ番号2の編集フォームのページEmployeeを開き、コピーを作成します。


作成メニューを開き、コピーとしてのページを実行します。


次のコピーとしてのページを作成として、このアプリケーションのページを選択します。

次へ進みます。


コピー元ページは2.Employee、新規ページ番号は4を指定します。(後ほどページ番号3として、確認を行うページを作成します。)新規ページ名は確定とします。

次へ進みます。


ダイアログなのでナビゲーション・メニューは不要です。ナビゲーションのプリファレンスはこのページとナビゲーション・メニュー・エントリを関連付けないから変更しません。

次へ進みます。


コピーする際に元のラベルなどは変更せず、同じ値を使います。

コピーを実行します。


ページのコピーが作成されます。


ページ2とページ4の間で、確認を実行するページを作成します。

作成メニューのページを実行します。


空白ページを選択します。


 ページ番号は3、名前は確認とします。ページ・モードとしてモーダル・ダイアログを選択します。オプションの静的コンテンツ・リージョンのリージョン1に確認を入力し、あらかじめリージョンをひとつ作成します。

次へ進みます。


ナビゲーションのプリファレンスはこのページとナビゲーション・メニュー・エントリを関連付けないから変更しません。

次へ進みます。


終了をクリックし、ページを作成します。


確認のページが作成されました。


これから、ページ番号2、3、4と順番に画面が遷移する実装を行います。

ページ番号2から変更していきます。ページ・デザイナにてページ番号2を開きます。

最初にページ・プロパティのダイアログのチェーンをONに変更します。チェーンをONにすると、次に遷移するページがモーダル・ダイアログの場合、ダイアログの上に重ねてダイアログが表示される代わりに、今開いているダイアログが置き換えられます。


ボタンDELETEとCREATEは削除します。


ページ・アイテムをすべて選択し、ソースのセッション・ステートの保持をリクエストごと(メモリーのみ)からセッションごと(ディスク)に変更します。このようにすることで、サーバーに送信されたページ・アイテムはデータベースに保存され、アプリケーション内の別のページから参照できるようになります。

ページ・アイテムは、それが配置されているページ内からの参照に留める方が、デバッグが容易なアプリケーションになります。セッション・ステートの保持をセッションごと(ディスク)とするのは、今回のように遷移先のページが固定されていたり、ページ・アイテムを参照するページが決まっている(今回の例ではデータを確定するページ番号4のみ)ときに限定した方が良いでしょう。


プロセス・ビューを開き、プロセス・フォームEmployeeとダイアログを閉じるを削除します。このページでは、データの操作は行いません。

送信されたフォームのデータは、自動的にセッション・ステートに保存されます。プロセスは不要です。


新たにブランチを作成し、ページ番号3へ移動します。

動作のタイプとしてページまたはURL(リダイレクト)を選択し、ターゲットにページ3を選択します。このページのページ・アイテムの値はセッション・ステートに保存されているので、パラメータとして渡す必要はありません。

サーバー側の条件として、ボタン押下時にSAVEを選択します。


ページ・デザイナで、ページ番号3の確認のページを開きます。

ページ・アイテムを作成します。この値がYのとき、前のページで変更した値を最後のフォームで使用します。

識別の名前をP3_CONFIRMとします。タイプとして切替えを選択します。ラベルは確認とします。ソースのセッション・ステートの保持はセッションごと(ディスク)を選択します。


次のページへ遷移するためのボタンを作成します。

識別のボタン名はB_NEXT、ラベルは次とします。動作のアクションはページの送信です。


先ほどと同様にプロセス・ビューを開いて、次のページへの遷移を行うブランチを作成します。

動作のターゲットはページ4、サーバー側の条件のボタン押下時にB_NEXTを選択します。


ページ・プロパティのチェーンがONであることを確認します。


ページ・デザイナにて、最後にデータを確定するページ番号4を開きます。

最初に主キーP4_EMPNOに、ページ番号2のP2_EMPNOの値を設定します。

プロセスを作成し、初期化フォームEmployeeの前に配置します。

識別の名前は主キーの設定、ソースのPL/SQLコードとして以下を記述します。

:P4_EMPNO := :P2_EMPNO;


最初のフォームで指定した値を、このページに移入します。

プロセスを作成します。識別の名前を変更された値を適用とします。タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。

:P4_ENAME := :P2_ENAME;
:P4_JOB   := :P2_JOB;
:P4_MGR   := :P2_MGR;
:P4_HIREDATE := :P2_HIREDATE;
:P4_SAL := :P2_SAL;
:P4_COMM := :P2_COMM;
:P4_DEPTNO := :P2_DEPTNO;

サーバー側の条件のタイプとしてアイテム = 値を選択し、アイテムにP3_CONFIRM、値をYとします。ひとつ前のページの確認をONにしたときに限り、変更した値が移入されます。ページ・アイテムP3_CONFIRMもセッション・ステートの保持がセッションごと(ディスク)なので、異なるページから値を参照できます。


このページでの値の変更を禁止するため、P4_EMPNO以外のページ・アイテムをすべて選択し、読取り専用のタイプを常時に変更します。


ボタンDELETEとCREATEを削除します。


以上でアプリケーションは完成です。実行すると、記事の最初のGIF動画のように動作します。

今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/multi-step-submit.sql

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完