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

簡単でCoolなXPagesアプリケーションを作るための情報を発信していきます

    • 連続講座

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

    T.Hayashi 投稿日:

    本日のゴール

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

     

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

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

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

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

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

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

    ※SSJS－サーバーサイドJavaScriptの略
     3 アウトラインでXPageを選択し、プロパティ＞データをクリックする。
     4 「結果の表示で検索」の◇アイコンをクリックし、「値の計算」を選択する。
     5 SSJSで検索条件を指定し、OKボタンをクリックする。

    プロパティ 値
    言語 JavaScript(サーバーサイド)
    条件 動的に計算
      sessionScope.searchFormula
     6 プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

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

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

    ※部分更新を指定しなかった場合、ページ全体が再読み込みされるため、無駄な通信が発生する。
     8 ビューパネル「viewPanel1」を選択し、OKボタンをクリックする。
    ※ビューパネルの名前を変更している場合は、変更後の名前を選択する。
     9 【全文索引を作成する】
    データベースのプロパティを表示し、「検索の作成」ボタンをクリックする。
    10 全部検索の条件を指定し、OKボタンをクリックする。
    11 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

    • 検索条件を入力し、全文検索が動作する
    12 【検索ボックスのサイズを変更し、右寄せする】
    オリジナルのスタイルシートを定義するための、リソース＞スタイルシートを選択し、
    「新規スタイルシート」
    ボタンをクリックする。
    13 スタイルシートに名前をつけ、OKボタンをクリックする。

    名前 css/original
    別名  
    コメント  

    ※拡張子は自動的に追加されるため、名前には拡張子をつけない
    14 スタイルシートに横幅を設定するためのクラスを入力し、保存する。
    ソースは、【オリジナルCSSクラス①】を参照。
    【解説】
    オリジナルのクラスは、Bootstrapや他のライブラリとのクラス名競合、混同を防ぐため先頭に「org_」をつけています。
    「org_」である必要はありませんが、外部ライブラリで定義されているもの、自分で定義したものがわかるような命名規則をつけた方が、保守を含めた生産性が上がります。
    15 XPageのソースタブを開き、BootstrapのCSSクラスを読み込んだ後に、オリジナルのCSSクラスを読み込むタグを追加する。
    ソースは、【リソースファイルの読み込み②】を参照。
    16 ソースタブを開き、検索条件用編集ボックスを<div>タグで囲う。
    ソースは、【検索ボックス外側HTML】を参照。
    17 【プレースホルダを設定する】
    検索条件用編集ボックスを選択し、プロパティ＞すべてのプロパティをクリックし、基本＞attrsの横にある「＋」ボタンをクリックする。
    【解説】
    attrsプロパティは、すべてのプロパティに定義されていないHTMLプロパティを追加するためのプロパティです。
    data-属性などユーザーが自由に定義するプロパティを追加する場合などに利用します。
    プレースホルダは、ユーザーに入力する内容をガイドするプロパティです。編集ボックスにユーザーが入力を開始すると表示されていた内容は消えます。
    18 下記のプロパティを設定する。

    プロパティ 値
    name placeholder
    value search
    19 【検索条件用編集ボックスの後ろに虫眼鏡アイコンを表示する】
    ソースタブを開き、データソース用終端タグ</xp:this.data>の後ろにbootstrapアイコンを読み込むためのHTMLタグを追加する。
    ソースは、【リソースファイルの読み込み③】を参照。
    20 検索条件用編集ボックスの後ろの枠線を消すためにCSSクラスを追加する。
    検索条件用編集ボックスを選択し、プロパティ＞すべてのプロパティをクリックし、styleClassに下記のクラスを割り当てる。

    プロパティ クラス
    styleClass form-control border-end-0
    21 検索条件用編集ボックスの終端タグ</xp:inputText>の後ろに、<button>タグとbootstrap iconを表示<i>タグを追加する。
    ソースは、【検索条件用編集ボックス後ろボタンHTML】を参照。
    22 【ガイド用文字を削除する】
    ガイド用文字「検索バー」を削除し、XPageを保存する。
    23 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

    • ガイド用文字が削除されている
    • 検索用編集ボックスが短くなっている
    • 検索用編集ボックスが右寄せになっている
    • 検索用編集ボックスの後ろに虫眼鏡アイコンが表示される
    • プレースホルダに「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を作成する。

    1 XPageを選択し
    「新規XPage」
    ボタンをクリックする。
    2 XPageに名前をつけ、OKボタンをクリックする。

    名前 modifiedsort_vw
    コメント  
    3 プロパティ＞データをクリックし、追加ボタンからDominoビューをクリックする。
    4 データソースプロパティのビューで
    「最終更新日ソート – xpModifiedSortVw」
    を選択する。
    5 データソースの「結果の表示で検索」に検索条件を指定し、OKボタンをクリックする。

    プロパティ 値
    言語 JavaScript(サーバーサイド)
    条件 動的に計算
      requestScope.searchFormula
    6 ビューパネル<xp:viewPanel>に先ほど行ったプロパティ変更、CSSクラスの追加を行う。
    【設定項目】

    • 最終更新日列の表示形式変更→日時を表示
    • フッターにページャーを表示
    • ページごとの最大行数
    • ビューパネルへCSSクラス指定
    • ページャー×2にCSSクラス指定
    7 先ほど作ったXPageからデータタグ<xp:this.data>の前のタグをコピーし、貼り付ける。
    8 データタグの終端データタグ</xp:this.data>から、ビューパネルタグ<xp:viewPanel>の間のタグをコピーし、貼り付ける。
    9 ビューパネルタグの終端<xp:viewPanel>から、XPageの終端タグ<xp:View>の間のタグをコピーし、貼り付ける。
    10 タイトル用の<h2>のタイトルを「最終更新日ソート」変更する。
    11 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

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

     

    タグ :

    T.Hayashi
    すべての投稿を表示

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