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となっています。これを給与手当確定に変更します。

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


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

対話モード・レポートの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新規ページ番号を指定します。(後ほどページ番号3として、確認を行うページを作成します。)新規ページ名確定とします。

へ進みます。


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

へ進みます。


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

コピーを実行します。


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


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

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


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


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

へ進みます。


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

へ進みます。


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


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


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

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

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


ボタンDELETECREATEは削除します。


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

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


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

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


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

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

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


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

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

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


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

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


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

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


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


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

最初に主キー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_CONFIRMYとします。ひとつ前のページの確認ONにしたときに限り、変更した値が移入されます。ページ・アイテムP3_CONFIRMセッション・ステートの保持セッションごと(ディスク)なので、異なるページから値を参照できます。


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


ボタンDELETECREATEを削除します。


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

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

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