連続講座

連続講座⑧　フォームを作る①：フォームのレイアウト

T.Hayashi 2021年11月11日

本日のゴール

今日は入力フォームを作ります。
XPageの標準コントロールは文字小さめでスマホ対応していませんが、BootstrapのCSSクラスを使えば文字が大きめでスマホ対応した入力画面を作ることができます。
※スマホ対応、レスポンシブ対応については、Season2で記載予定。
【完成イメージ】

フォーム用のCSSクラスを追加する

1	リソース＞スタイルシートから「css/original.css」を開く。
2	フォーム用のCSSクラスを追加し、スタイルシートを保存する。ソースは、【オリジナルCSSクラス⑥】を参照。

【オリジナルCSSクラス⑥】

/* form */
.org_label {
  border-left: solid 3px var(--main_color);
  padding: 5px 10px;
  color: #6c757d;
}

.org_min_h100{
  min-height    :100px;
}

.org_text_center{
  display: flex;
  align-items: center;
}

フォームを作る①

XPageを選択し
「新規XPage」
ボタンをクリックする。

XPageに名前をつけ、OKボタンをクリックする。

名前	keiji_frm
コメント

プロパティ＞データをクリックし、追加ボタンからDomino文書をクリックする。

データソースプロパティのフォームで
「frmKeiji」
を選択する。

先ほど作ったXPageからデータタグ<xp:this.data>の前のタグをコピーし、貼り付ける。

【レイアウトをコピーする】
データタグの終端データタグ</xp:this.data>から、ビューパネルタグ
<xp:viewPanel>の間のタグをコピーし、貼り付ける。

ビューパネルタグの終端<xp:viewPanel>から、XPageの終端タグ
<xp:View>の間のタグをコピーし、貼り付ける。

action bar用の終端タグ</div>の後ろにフォーム用のHTMLタグを追加する。
ソースは、【フォーム用ひな形HTML】を参照。

ブラウザでプレビューし、表示内容を確認する。

【タイトルフィールドを配置する】
左メニューのコントロールタブから
「編集ボックス」コントロール
を、ガイド用文字「フィールド1」の位置にドロップする。

ドロップした編集ボックスを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	Subject
表示タイプ	文字列

プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

プロパティ	クラス
styleClass	form-control

ガイド用文字「フィールド1」を削除し、XPageを保存する。

ブラウザでプレビューし、表示内容を確認する。

【本文フォールドを配置する】
左メニューのコントロールタブから
「複数行編集ボックス」コントロール
を、ガイド用文字「フィールド2」の位置にドロップする。

ドロップした複数行編集ボックスを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	Memo
表示タイプ	文字列

プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

プロパティ	クラス
styleClass	form-control

プロパティ＞複数行編集ボックスをクリックし、オプションに下記の値を指定する。

プロパティ	クラス
行	8

※複数行編集ボックスの高さを指定

ガイド用文字「フィールド2」を削除し、XPageを保存する。

ブラウザでプレビューし、表示内容を確認する。

【添付ファイルフィールドを配置する】
左メニューのコントロールタブから
「ファイルのアップロード」コントロール
を、ガイド用文字「フィールド3」の位置にドロップする。

ドロップしたファイルアップロードを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	fileBody

プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

プロパティ	クラス
styleClass	form-control

イベント＞選択して実行＞onchangeイベントをクリックし、サーバーオプションを選択する。

プロパティ	値
サーバーオプション	すべて更新

【解説】

添付ファイルの選択で「すべて更新」を実行するのは、複数の添付ファイルを選択するためです。

画面を再読込することで、選択したファイルが「ファイルのダウンロードコントロール」に表示され、次のファイルを選択することができるようになります。

左メニューのコントロールタブから
「ファイルのダウンロード」コントロール
を、先ほど配置した「ファイルのアップロード」の下にドロップする。

ドロップしたファイルのダウンロードを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	fileBody

プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

プロパティ	クラス
styleClass	form-control

プロパティ＞ファイルのダウンロードをクリックし、オプションに下記の値を指定する。

プロパティ	クラス
添付ファイルがない場合は非表示	(チェックをつける)
サイズ	(チェックをつける)
更新日	(チェックをつける)
種類	(チェックなし)
作成日時	(チェックをつける)
削除を許可	(チェックをつける)

ガイド用文字「フィールド3」を削除し、XPageを保存する。

ブラウザでプレビューし、表示内容を確認する。

【計算結果フィールドを配置する】
左メニューのコントロールタブから
「計算結果フィールド」コントロール
を、ガイド用文字「フィールド4」の位置にドロップする。

ドロップした計算結果フィールドを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	ModifiedDateTime
表示タイプ	日付/時刻
表示形式	日付と時刻
日付スタイル	デフォルト(2021/10/31)
時刻スタイル	デフォルト(20:59:31)

※日付、時刻スタイルの日時はサンプル

ガイド用文字「フィールド4」を削除し、XPageを保存する。

左メニューのコントロールタブから
「計算結果フィールド」コントロール
を、ガイド用文字「フィールド5」の位置にドロップする。

ドロップした計算結果フィールドを選択し、プロパティ＞データをクリックする。
下記のプロパティを設定する。

プロパティ	値
使用するバインドデータ	単純データバインディング
データソース	document1
バインド先	ModifiedKanjiName
表示タイプ	文字列

ガイド用文字「フィールド5」を削除し、XPageを保存する。

ブラウザでプレビューし、表示内容を確認する。
【解説】
この段階では計算結果フィールドの値が表示されません。
XPageでは、計算結果フィールドの実行タイミングを指定する必要があります。

XPage全体をを選択し、プロパティ＞データタブにある、下記の値を指定する。

プロパティ	値
フォーム検証の実行	両方

ブラウザでプレビューし、表示内容を確認する。

【解説】
「最終更新者」にサーバー名が表示されるのは、フォームの計算式(@UserName)がサーバー上で実行されているため、正常です。
この後の章で、値を書き換えます。

【フォーム用ひな形HTML】

<!-- form body -->
<div class="row">
  <div class="col-lg-2">
    <label class="org_label">タイトル</label>
  </div>
  <div class="col-lg-10">
    フィールド1
  </div>
  <div class="col-lg-2">
    <label class="org_label">本文</label>
  </div>
  <div class="col-lg-10">
    フィールド2
  </div>
  <div class="col-lg-2">
    <label class="org_label">添付ファイル</label>
  </div>
  <div class="col-lg-10">
    フィールド3
  </div>
  <div class="col-lg-2">
    <label class="org_label">最終更新日</label>
  </div>
  <div class="col-lg-4">
    フィールド4
  </div>
  <div class="col-lg-2">
    <label class="org_label">最終更新者</label>
  </div>
  <div class="col-lg-4">
    フィールド5
  </div>
</div>

フォームを作る②

フォームのタイトルは新規作成時には「新規作成」、編集時には登録した「タイトル」が表示されるように変更します。
ログインユーザーをデフォルト値として書き込みます。
保存、キャンセルボタンなどのアクションボタンを配置する領域を追加します。

【フォームタイトルを設定する】
左メニューのコントロールタブから
「計算結果フィールド」コントロール
を、ビュータートルの位置にドロップする。

プロパティ＞値をクリックする。
使用するバインドデータで「JavaScript」を選択し、

新規作成時は「新規作成」
既存文書は「タイトル」

が表示されるSSJSを記入する。

【フォームタイトルSSJS】
@If(@IsNewDoc(),”新規作成”,@GetField(“Subject”))

ビュータイトルを削除し、XPageを保存する。

ブラウザでプレビューし、表示内容を確認する。
※タイトルが表示されるか？はビューをフォームの関連付け後に行う。

【共通関数を定義する】
コード＞スクリプトライブラリを選択し、
「新規スクリプトライブラリ」ボタン
をクリックする。

スクリプトライブラリに名前をつけ、OKボタンをクリックする。

名前	ssjsCommon
コメント
タイプ	サーバーJavaScript

※拡張子(js)は自動的に追加されるため、名前には拡張子をつけない

ユーザー名をキーに、別名を取得するSSJSを記述する。
ソースは、【Common-ユーザーの別名を返すSSJS】を参照。

【デフォルト値を設定する】
コード＞スクリプトライブラリを選択し、
「新規スクリプトライブラリ」ボタン
をクリックする。

スクリプトライブラリに名前をつけ、OKボタンをクリックする。

名前	ssjsKeiji_frm
コメント
タイプ	サーバーJavaScript

※拡張子(js)は自動的に追加されるため、名前には拡張子をつけない

新規文書作成時に「最終更新者」に現在のユーザーの別名を書き込むSSJSを記述する。
ソースは、【フォーム用–初期値を設定するSSJS】を参照。

【XPageに作成したスクリプトライブラリを組み込む】
フォーム用XPageを開き、プロパティ＞リソースを選択する。
追加ボタンをクリックし、JavaScriptライブラリを選択する。

スクリプトライブラリ
「ssjsCommon」
を選択し、OKボタンをクリックする。

再度、JavaScriptライブラリを追加し、
「ssjsKeiji_frm」
を選択し、OKボタンをクリックする。

フォーム用XPageのイベント＞ページ＞beforePageLoadを選択する。
スクリプトエディタを選択し、初期値を設定するSSJSで作成した関数を呼び出す。
【beforePageLoadイベント】
beforePageLoad()

ブラウザでプレビューし、表示内容を確認する。
下記の点を確認する。

最終更新者にログインユーザーの別名が入る

【アクションボタン用のレイアウトを追加する】
フッターの<span>タグの内側にフィッターアクションボタン用HTMLを追加する。
ソースは、【フッターアクションHTML】を参照。

ブラウザでプレビューし、表示内容を確認する。

【Common-ユーザーの別名を返すSSJS】

/*
*    別名を返す(別名がない場合は、引数をそのまま返す)
*    引数：@UserName()
*    戻り値：別名(CNあり形式)
*/
function getKanjiName(userName){
    try{
        var dbname = session.getServerName() + "!!" + "names.nsf";
        var key = userName;
        var kanjiName = @DbLookup(dbname,"($Users)",key,"AltFullName");
        if(@IsNull(kanjiName)){
            return userName;
        }else{
            return kanjiName;
        }
    }catch(e){
        print("getKanjiName Error:" + e);
    }
}

【フォーム用－初期値を設定するSSJS】

// setDefaultValue
function beforePageLoad(){
    try{
        @If(@IsNewDoc(),
            @SetField("ModifiedKanjiName",@Name("[Abbreviate]" ,getKanjiName(@UserName()))),
            "");
    }catch(e){
        print("beforePageLoad Error:" + e);
    }
}

【フッターアクションHTML】

<div class="row mb-2">
    <div class="col-lg-6">
        フッターアクション1
    </div>
    <div class="col-lg-6">
        フッターアクション2
    </div>
</div>

タグ :Bootstrap5 XPage XPages

Notes開発者のためのXPagesデザインレシピ

Notes開発者のためのXPagesデザインレシピ

連続講座⑧　フォームを作る①：フォームのレイアウト

本日のゴール

フォーム用のCSSクラスを追加する

フォームを作る①

フォームを作る②

T.Hayashi

連続講座⑬　左ナビゲーションを作る

連続講座⑫　ヘッダーを作る

連続講座⑭　フォームを作る③：入力チェックの実装

連続講座①　Bootstrap5で作るXPagesアプリSeason1始まります

最近の投稿

ブログ統計情報

人気の投稿とページ

Category

最近の投稿

連続講座⑧ フォームを作る①：フォームのレイアウト

本日のゴール

フォーム用のCSSクラスを追加する

フォームを作る①

フォームを作る②

T.Hayashi

こちらの記事はいかがですか？

連続講座⑬ 左ナビゲーションを作る

連続講座⑫ ヘッダーを作る

連続講座⑭ フォームを作る③：入力チェックの実装

連続講座① Bootstrap5で作るXPagesアプリSeason1始まります

最近の投稿

ブログ統計情報

人気の投稿とページ

Category

最近の投稿

連続講座⑧　フォームを作る①：フォームのレイアウト

連続講座⑬　左ナビゲーションを作る

連続講座⑫　ヘッダーを作る

連続講座⑭　フォームを作る③：入力チェックの実装

連続講座①　Bootstrap5で作るXPagesアプリSeason1始まります