一覧画面のヘッダー上にテキストボックスを設置したい

[LALA]

一覧画面のヘッダー上にテキストボックスを設置して、「文字列A」フィールドの値を表示させたいと考えております。

条件としては「チェックA」フィールドにチェックが付いているものかつ、「日付A」フィールドの日付が最新のものです。

いろいろと参考にしながらJavaScriptで書いてみたのですが、恐らくkintone REST APIの部分でエラーになっているようで一覧画面に何も表示されません。

ブラウザの開発者ツールのコンソール上のメッセージ：“認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。”

ただ、どこが原因なのかがさっぱりで行き詰まっています…。

どなたか原因が分かる方いらっしゃいますでしょうか…？
よろしくお願いいたします。

＜ソースコード＞

(function() {
"use strict";

kintone.events.on('app.record.index.show', function(event) {

    var query = 'チェックA = true order by 日付A desc limit 1';

    var params = {
        app: kintone.app.getId(),
        query: query,
        fields: ['文字列A']
    };

    kintone.api('/k/v1/records', 'GET', params, function(resp) {
        if (resp.records.length > 0) {

            var latestStringValue = resp.records[0].文字列A.value;

            var headerSpace = kintone.app.getHeaderSpaceElement();
            headerSpace.innerHTML = '<h3>最新の「文字列A」: ' + latestStringValue + '</h3>';
        }
    });
});
})();

[pomo]

apiリクエスト部分でtrueを入力していないので認証に失敗したのかなと思います。

kintone.api(‘/k/v1/records’, ‘GET’, params, function(resp) {

●下記コードは各フィールドの事前設定として、
文字列A: 文字列（１文字）
日付A: 日付
チェックA: チェックボックス（trueという値を設定）
としたときです。

(function test() {
  'use strict';  
  kintone.events.on('app.record.index.show', async function (event) {
    // APIに送信するクエリを定義します
    const query = 'チェックA in ("true") order by 日付A desc limit 1';
    
    // ヘッダースペース要素を取得します
    const headerSpace = kintone.app.getHeaderSpaceElement();

    // ヘッダースペースが存在しない場合は処理を終了します
    if (!headerSpace) return;

    // 新しいDOM要素を作成します
    const div = document.createElement('div');
    const label = document.createElement('label');
    const span = document.createElement('span');

    // ラベルのテキストを設定します
    label.textContent = '最新の「文字列A」: ';
    
    // 作成した要素をDOMに追加します
    div.appendChild(label);
    div.appendChild(span);
    headerSpace.appendChild(div);

    try {
      const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
        app: kintone.app.getId(),  // 現在のアプリIDを取得
        query: query,  // 上で定義したクエリを使用
        fields: ['文字列A'],  // 取得するフィールドを指定
      });

      // レコードが存在する場合、最新の「文字列A」の値を表示します
      if (resp.records.length > 0) {
        span.textContent = resp.records[0].文字列A.value;
      } else {
        // レコードが存在しない場合のメッセージを表示します
        span.textContent = '該当するレコードがありません';
      }
    } catch (error) {
      // エラーが発生した場合、コンソールにエラーを出力し、
      // ユーザーにエラーメッセージを表示します
      console.error('APIリクエストエラー:', error);
      span.textContent = 'エラーが発生しました';
    }
  });
})();

[LALA]

ご回答いただきありがとうございます！
ご教示いただきましたコードにて無事やりたいことが実現できました。
もっとJavaScript勉強しないとダメだなと実感しました！
この度はありがとうございました。

[LALA]

ご回答いただきありがとうございます！
まさしくそれを出したかったので大変ありがたいです！
教えていただいた内容をもとに自分でもいろいろと試してみたいと思います。
この度はありがとうございました。