連続講座

連続講座⑥　ビューを作る②：検索機能、アクションボタンの作成

T.Hayashi 2021年11月9日

本日のゴール

今日はビューに全文検索機能を実装します。
一時変数として使うスコープ変数は、データの有効範囲によって使いどころが異なります。
今後も範囲の違うスコープ変数を使いますので、使い方を知っておいて下さい。
【完成イメージ】

検索条件入力用のフィールドを作成し、検索を実行する

【検索条件を指定する】
左メニューのコントロールタブから
「編集ボックス」コントロール
を、ガイド用文字「検索バー」の位置にドロップする。

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

プロパティ	値
使用するバインドデータ	拡張
使用	スコープ変数
スコープ	セッションの範囲
変数名	searchFormula

【解説】
スコープ変数は、データの保存の範囲が異なります。
下に行くに従って、適用される範囲が狭くなり、変数の競合などが起きにくくなるので、なるべく範囲の狭いスコープを使うことが望ましいです。

スコープ	説明
アプリケーションの範囲	アプリケーション実行中は保持される。他のユーザーと共有される。 SSJSからの呼出：applicationScope.変数名
セッションの範囲	同一セッション内で有効。ユーザー単位に値を持つ。別ページに移動しても保持される。 SSJSからの呼出：sessionScope.変数名
要求の範囲	同一リクエスト内で有効。ユーザー単位に値を持つ。ページをリロードすると消える。(部分更新では消えない。) SSJSからの呼出：requestScope.変数名
表示の範囲	同一表示範囲内で有効。ユーザー単位で値を持つ。ページをリロードすると消える。 SSJSからの呼出：viewScope.変数名

※SSJS－サーバーサイドJavaScriptの略

アウトラインでXPageを選択し、プロパティ＞データをクリックする。

「結果の表示で検索」の◇アイコンをクリックし、「値の計算」を選択する。

SSJSで検索条件を指定し、OKボタンをクリックする。

プロパティ	値
言語	JavaScript(サーバーサイド)
条件	動的に計算
	sessionScope.searchFormula

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

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

【部分更新の範囲を指定する】
検索条件用編集ボックスを選択し、イベントタブからonchengeイベントをクリックし、サーバーオプションで「部分更新」を選択し、要素の選択をクリックする。

プロパティ	値
サーバーオプション	部分更新を選択する

※部分更新を指定しなかった場合、ページ全体が再読み込みされるため、無駄な通信が発生する。

ビューパネル「viewPanel1」を選択し、OKボタンをクリックする。
※ビューパネルの名前を変更している場合は、変更後の名前を選択する。

【全文索引を作成する】
データベースのプロパティを表示し、「検索の作成」ボタンをクリックする。

全部検索の条件を指定し、OKボタンをクリックする。

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

検索条件を入力し、全文検索が動作する

【検索ボックスのサイズを変更し、右寄せする】
オリジナルのスタイルシートを定義するための、リソース＞スタイルシートを選択し、
「新規スタイルシート」
ボタンをクリックする。

スタイルシートに名前をつけ、OKボタンをクリックする。

名前	css/original
別名
コメント

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

スタイルシートに横幅を設定するためのクラスを入力し、保存する。
ソースは、【オリジナルCSSクラス①】を参照。
【解説】
オリジナルのクラスは、Bootstrapや他のライブラリとのクラス名競合、混同を防ぐため先頭に「org_」をつけています。
「org_」である必要はありませんが、外部ライブラリで定義されているもの、自分で定義したものがわかるような命名規則をつけた方が、保守を含めた生産性が上がります。

XPageのソースタブを開き、BootstrapのCSSクラスを読み込んだ後に、オリジナルのCSSクラスを読み込むタグを追加する。
ソースは、【リソースファイルの読み込み②】を参照。

ソースタブを開き、検索条件用編集ボックスを<div>タグで囲う。
ソースは、【検索ボックス外側HTML】を参照。

【プレースホルダを設定する】
検索条件用編集ボックスを選択し、プロパティ＞すべてのプロパティをクリックし、基本＞attrsの横にある「＋」ボタンをクリックする。
【解説】
attrsプロパティは、すべてのプロパティに定義されていないHTMLプロパティを追加するためのプロパティです。
data-属性などユーザーが自由に定義するプロパティを追加する場合などに利用します。
プレースホルダは、ユーザーに入力する内容をガイドするプロパティです。編集ボックスにユーザーが入力を開始すると表示されていた内容は消えます。

下記のプロパティを設定する。

プロパティ	値
name	placeholder
value	search

【検索条件用編集ボックスの後ろに虫眼鏡アイコンを表示する】
ソースタブを開き、データソース用終端タグ</xp:this.data>の後ろにbootstrapアイコンを読み込むためのHTMLタグを追加する。
ソースは、【リソースファイルの読み込み③】を参照。

検索条件用編集ボックスの後ろの枠線を消すためにCSSクラスを追加する。
検索条件用編集ボックスを選択し、プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

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

検索条件用編集ボックスの終端タグ</xp:inputText>の後ろに、<button>タグとbootstrap iconを表示<i>タグを追加する。
ソースは、【検索条件用編集ボックス後ろボタンHTML】を参照。

【ガイド用文字を削除する】
ガイド用文字「検索バー」を削除し、XPageを保存する。

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

ガイド用文字が削除されている
検索用編集ボックスが短くなっている
検索用編集ボックスが右寄せになっている
検索用編集ボックスの後ろに虫眼鏡アイコンが表示される
プレースホルダに「search」と表示されている
検索条件を入力し、全文検索が実行される

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

/* search bar */
.org_max_w250{
    max-width    :250px;
}

【リソースファイルの読み込み②】

<xp:styleSheet href="css/original.css"></xp:styleSheet>

【検索ボックス外側HTML】

<div class="input-group float-end org_max_w250">
    (xp:inputTextタグが入る)
</div>

【リソースファイルの読み込み③】

<!--bootstrap icon-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />

【検索条件用編集ボックス後ろボタンHTML】

<button class="btn btn-outline-secondary border-start-0 border" type="button">
  <i class="bi bi-search"></i>
</button>

新規作成ボタンを作成する

左メニューのコントロールタブから
「ボタン」コントロール
を、ガイド用文字「アクションボタン」の位置にドロップする。

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

プロパティ	値
名前	btnNew
ラベル	新規作成

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

プロパティ	クラス
styleClass	btn btn-primary

【ガイド用の文字を削除する】
ガイド用文字「アクションボタン」を削除し、XPageを保存する。

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

【ボタンのサイズ、色を変更するためのCSSクラスを定義する】
Bootstrapのボタンクラスは、ボタンの幅が指定されていないので、ボタンサイズがバラバラになる。また、プライマリーカラーは青で面白くないので、オレンジ色にするようなCSSクラスを追加する。
リソース＞スタイルシートから「css/original.css」を開く。

CSSクラス内で使用する共通の変数を追加する。
ソースは、【オリジナルCSSクラス②】を参照。

オレンジ色ボタンの塗りつぶしバージョンと、中抜きバージョンを定義し、スタイルシートを保存する。
ソースは、【オリジナルCSSクラス③】を参照。
【解説】
ユーザーの目的に応じて、ボタンは下記のように使い分けます。

ボタン	用途
塗りつぶしボタン(primary)	ユーザーが次に必要とするアクション例) 新規作成、保存など
中抜きボタン(outline_primary)	ユーザーの意思に応じて選択するアクション例) キャンセル、戻る、削除など

新規作成ボタンを選択し、styleClassを下記の値に変更する。

プロパティ	クラス
styleClass	btn org_btn org_btn_outline_primary

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

ボタンの幅が文字の幅より広がっている
ボタンの色が中抜きオレンジ色になっている

新規作成ボタンを選択し、styleClassを下記の値に変更する。

プロパティ	クラス
styleClass	btn org_btn org_btn_primary

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

ボタンの色が塗りつぶしオレンジ色になっている

※フォーム用XPageをまだ作っていないので、ボタンの動作は後で定義する。

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

/* color variable */
:root{
    --active_color    :darkorange;
    --hover_color    :orange;
    --main_color    :darkorange;
}

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

/* button */
.org_btn{
  width:120px;
}
.org_btn_primary{
  color:#fff;
  background-color:var(--main_color);
  border-color:var(--main_color);
}
.org_btn_outline_primary{
  color:var(--main_color);
  background-color:#fff;
  border-color:var(--main_color);
}

もう一つのビューをXPage化する

これまでと同じ手順を使って、もう一つのビューを使ったXPageを作成する。

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

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

名前	modifiedsort_vw
コメント

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

データソースプロパティのビューで
「最終更新日ソート – xpModifiedSortVw」
を選択する。

データソースの「結果の表示で検索」に検索条件を指定し、OKボタンをクリックする。

プロパティ	値
言語	JavaScript(サーバーサイド)
条件	動的に計算
	requestScope.searchFormula

ビューパネル<xp:viewPanel>に先ほど行ったプロパティ変更、CSSクラスの追加を行う。
【設定項目】

最終更新日列の表示形式変更→日時を表示
フッターにページャーを表示
ページごとの最大行数
ビューパネルへCSSクラス指定
ページャー×2にCSSクラス指定

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

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

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

タイトル用の<h2>のタイトルを「最終更新日ソート」変更する。

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

タイトルソートビューと同じデザインが適用されている
全文検索が実行できる

タグ :Bootstrap5 XPage XPages

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

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

連続講座⑥　ビューを作る②：検索機能、アクションボタンの作成

本日のゴール

検索条件入力用のフィールドを作成し、検索を実行する

新規作成ボタンを作成する

もう一つのビューをXPage化する

T.Hayashi

連続講座③　前準備：Bootstrapの組み込み

ChatGPTとペアプログラミングで画像リサイズ機能を作ろう(課題解決編)

連続講座⑪　表示モードのレイアウトを調整する

連続講座⑤　ビューを作る①：レイアウトの作成

最近の投稿

ブログ統計情報

人気の投稿とページ

Category

最近の投稿

連続講座⑥ ビューを作る②：検索機能、アクションボタンの作成

本日のゴール

検索条件入力用のフィールドを作成し、検索を実行する

新規作成ボタンを作成する

もう一つのビューをXPage化する

T.Hayashi

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

連続講座③ 前準備：Bootstrapの組み込み

ChatGPTとペアプログラミングで画像リサイズ機能を作ろう(課題解決編)

連続講座⑪ 表示モードのレイアウトを調整する

連続講座⑤ ビューを作る①：レイアウトの作成

最近の投稿

ブログ統計情報

人気の投稿とページ

Category

最近の投稿

連続講座⑥　ビューを作る②：検索機能、アクションボタンの作成

連続講座③　前準備：Bootstrapの組み込み

連続講座⑪　表示モードのレイアウトを調整する

連続講座⑤　ビューを作る①：レイアウトの作成