【kviewer】レコードの絞り込み条件の動的な変更

kintone カスタマイズ
1

何を実現したいのかを書きましょう

①kviewerのレコード詳細画面（以下、画面A）に設置したボタンをクリックすると、別のkviewerのレコード一覧画面（以下、画面B）をブラウザの別タブに表示させる。

②画面Bは、画面A内にあるフィールドの値で絞り込んだ状態で表示させたい。

発生した問題やエラーメッセージを具体的に書きましょう

現状、①のボタンクリック時のイベントで、画面Bを開く為のURLにレコード絞り込みのクエリパラメータを含めています。しかし、画面Bを開いた後、URLからクエリパラメータを意図して削除すると、レコード全件が表示されてしまいます。（画面Bではレコード絞り込み条件を設定していない為）

理想は、画面A内の指定したフィールドの値で絞り込まれたレコードのみの画面Bを、クエリパラメータを使用せず、表示させたいです。

実行したコードをコピー＆ペーストしましょう

■画面Aに設置したボタンに関するコード

// レコード表示イベントが発火したときの処理を登録
kviewer.events.on('record.show', (context) => {
  
  // ヘッダー領域の DOM 要素を取得
  const mainContentElement = context.getHeaderContentElement();

  // すでにボタンが追加されているか確認（IDで判定）
  if (mainContentElement.querySelector('#view_serial_Button')) {
    return; // ボタンが存在する場合は処理を中断
  }


  // 新しいボタン要素を作成
  const serial_Button = document.createElement("button");

  // 一意のIDを設定して識別可能にする
  serial_Button.id = 'view_serial_Button'; 

  // ボタンに表示するテキストを設定
  serial_Button.textContent = "製造年月照会";

  // ボタンのスタイルを設定（背景色、文字色、枠線、パディング、角丸）
  serial_Button.style.backgroundColor = 'lightgray'; // 背景色を灰色に
  serial_Button.style.color = 'black';               // 文字色を黒に
  serial_Button.style.border = '1px solid black';    // 枠線を黒で1px
  serial_Button.style.padding = '5px 10px';          // 内側の余白を設定
  serial_Button.style.borderRadius = '0';            // 角丸をなしに設定


  // ボタンがクリックされたときの処理を定義
  serial_Button.onclick = () => {

    // 表示されているレコードの特定のフィールド値を取得
    const serialno = context.record.kintoneRecord.製造番号.value

    // クエリパラメータ
    const parameter = '[{"field":"シリアル番号","sign":"=","value":"' + serialno + '","with":"and"}]'

    // 画面BへのURL
    const url_origin = 'https://xxx?additionalFilters='

    // 画面BへのURLにクエリパラメータを結合
    const url_dest = url_origin + encodeURIComponent(parameter)

    //別タブで画面Bへ遷移
    window.open(url_dest, '_blank')

  };


  // 作成したボタンをヘッダー領域に追加
  mainContentElement.appendChild(serial_Button);

});