本日のゴール

本日のゴールは作成したフォームに保存、キャンセル、編集、削除ボタンを実装します。
Webアプリで面倒なのは、画面に繋がりがない点です。
人間から見るとビューとフォームは繋がっていて当然ですが、Webアプリの仕組みでは、どのビューから来たのか？何ページ目から来たのか？という情報はフォーム側は持っていないので、アプリ側で作る込む必要があります。
XPageでは「前のページ」というものがあるので、シンプルに組めば簡単に実装することができます。
【完成イメージ】

保存ボタンを作る

1	【ボタンを配置する】 左メニューのコントロールタブから 「ボタン」コントロール を、ガイド用文字「フッターアクション2」の位置にドロップする。
2	ドロップしたボタンを選択し、プロパティ＞ボタンをクリックする。 下記のプロパティを設定する。 プロパティ 値 名前 btnSave ラベル 保存
3	プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。 プロパティ クラス styleClass btn org_btn org_btn_ primary float-end
4	ブラウザでプレビューし、表示内容を確認する。
5	【イベントを定義する】 イベント＞マウス＞onclieckを選択し、シンプルアクション 「アクションの追加」 ボタンをクリックする。
6	下記のプロパティを設定し、OKボタンをクリックする。 プロパティ 値 アクション 文書の保存 データソース名 document1
7	再度、 「アクションの追加」 ボタンをクリックする。
8	下記のプロパティを設定し、OKボタンをクリックする。 プロパティ 値 アクション ページを開く 開くページの名前 前のページ ターゲット文書
9	【ボタンの表示条件を指定する－編集時のみ表示】 プロパティ＞ボタンをクリックし、可視チェックボックスの横にある◇アイコンから「値の計算」を選択する。
10	スクリプトエディタに下記の式を入力し、OKボタンをクリックする。 【編集モードのみ表示SSJS】 document1.isEditable()
11	ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 編集モードで保存ボタンが表示される 保存ボタンのクリックで、文書が保存される ビューのリンクから文書を開いた際は、保存ボタンが表示されない(参照モード)

キャンセルボタンを作る

1	【ボタンを配置する】 左メニューのコントロールタブから 「ボタン」コントロール を、保存ボタンの終端タグ</xp:button>の後にドロップする。
2	ドロップしたボタンを選択し、プロパティ＞ボタンをクリックする。 下記のプロパティを設定する。 プロパティ 値 名前 btnCancel ラベル キャンセル
3	プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。 プロパティ クラス styleClass btn org_btn org_btn_outline_primary float-end
4	ブラウザでプレビューし、表示内容を確認する。
5	【イベントを定義する】 イベント＞マウス＞onclieckを選択し、シンプルアクション 「アクションの追加」 ボタンをクリックする。
6	下記のプロパティを設定し、OKボタンをクリックする。 プロパティ 値 アクション ページを開く 開くページの名前 前のページ ターゲット文書
7	ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 編集モードで、キャンセルボタンが表示される ビューからフォームを開き、キャンセルボタンをクリックすると、元のビューに戻る

編集ボタンを作る

1	【ボタンを配置する】 左メニューのコントロールタブから 「ボタン」コントロール を、保存ボタンの終端タグ</xp:button>の後にドロップする。
2	ドロップしたボタンを選択し、プロパティ＞ボタンをクリックする。 下記のプロパティを設定する。 プロパティ 値 名前 btnCancel ラベル キャンセル
3	プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。 プロパティ クラス styleClass btn org_btn org_btn_primary float-end
4	ブラウザでプレビューし、表示内容を確認する。
5	【イベントを定義する】 イベント＞マウス＞onclieckを選択し、シンプルアクション 「アクションの追加」 ボタンをクリックする。
6	下記のプロパティを設定し、OKボタンをクリックする。 プロパティ 値 アクション 文書の保存 データソース名 document1
7	【ボタンの表示条件を指定する－参照時のみ表示】 プロパティ＞ボタンをクリックし、可視チェックボックスの横にある◇アイコンから「値の計算」を選択する。
8	スクリプトエディタに下記の式を入力し、OKボタンをクリックする。 【参照モードのみ表示SSJS】 !document1.isEditable()
9	ガイド用文字「フッターアクション2」を削除し、XPageを保存する。
10	ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 表示モードで、編集ボタンが表示される 編集ボタンをクリックすると、文書が編集モードに変更される 編集モードで、編集ボタンが表示されない

削除ボタンを作る

1	【ボタンを配置する】 左メニューのコントロールタブから 「ボタン」コントロール を、保存ボタンの終端タグ</xp:button>の後にドロップする。
2	ドロップしたボタンを選択し、プロパティ＞ボタンをクリックする。 下記のプロパティを設定する。 プロパティ 値 名前 btnDelete ラベル 削除
3	プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。 プロパティ クラス styleClass btn org_btn org_btn_outline_primary
4	【イベントを定義する】 イベント＞マウス＞onclieckを選択し、シンプルアクション 「アクションの追加」 ボタンをクリックする。
5	下記のプロパティを設定し、OKボタンをクリックする。 プロパティ 値 アクション 文書の削除 次に開くページの名前 前のページ 確認テキスト 文書を削除しますか？ データソース名 document1
6	【ボタンの表示条件を指定する－新規作成時：非表示】 プロパティ＞ボタンをクリックし、可視チェックボックスの横にある◇アイコンから「値の計算」を選択する。
7	スクリプトエディタに下記の式を入力し、OKボタンをクリックする。 【新規作成時：非表示SSJS】 !@IsNewDoc()
8	ガイド用文字「フッターアクション1」を削除し、XPageを保存する。
9	ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 新規作成時に削除ボタンが表示されない ビューからフォームを表示し、削除ボタンをクリックすると確認画面にメッセージが表示される 上記画面でOKボタンをクリックすると、文書が削除され元にいたビューが表示される