カスタマイズ一覧でレコード詳細、添付ファイル

[k-mori (森)]

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

カスタマイズ一覧で名刺のような表示をさせたいと思い、色々なサイトを参考に下記のコードを設定しましたが、2点ほどどのようにすれば実装できるのか分からない部分があります。
１．レコード一覧で、顔写真を設定したい
２．一覧画面で表示されているカード部分をクリックした際に、レコード詳細を開くこと
上記の２点を実現するためには、どのような方法がありますでしょうか？

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

１．顔写真を設定するために、 レコードから取得しようと設定しましたが取得できませんでした。
ファイルキーを渡す方法を見つけたので試しましたが、ファイルキーが見つからないとエラーになってしまいます
２．こちらは今の所、どうすれば実装できるのか全くわからない状態です。

実行したコードをコピー＆ペーストしましょう（現在の設定です）

コードについては全く無知なため、これ以上どうしてもわかりませんでした。
詳しい方がいらっしゃればご教示いただけますと幸いです。

[pomo]

質問のコードが画像で貼り付けられてしまってるので、テキストで貼り付けた方が回答が来やすいです。

一覧をカスタマイズ設定できたとこまでは進んでいらっしゃると思いますので、下記のようなコードベースで実装できると思います。細かいところは変更していってください。

(function () {
  'use strict'
  const viewId = 数値 でviewIdを書いてください
  const domain = "ドメイン名を書いてください"
  const fileFieldName = "添付ファイルのフィールドコードを書いてください"

  kintone.events.on('app.record.index.show', async function (event) {
    const records = event.records;
    let cards = [];
    if (event.viewId !== viewId) return
    // レコードの数分カードの作成
    for (var i = 0; i < records.length; i++) {
      const record = records[i];
      const card = await createCard(record);
      cards.push(card);
      if (!cards || cards.length === 0) return
    }
    const container = kintone.app.getHeaderSpaceElement()
    const div = document.createElement("div")
    container?.appendChild(div)
    div.innerHTML = cards.join('');
    return event
  })
// 各カードの情報を作成
  async function createCard(record) {
    const appId = kintone.app.getId()
    const fileKey = record[fileFieldName].value?.[0]?.fileKey
    const file = await getFile(fileKey)

    var html = `<a style="color:inherit;text-decoration:none" href="https://${domain}.cybozu.com/k/${appId}/show#record=${record.$id.value}">
                  <div class="card" style="display:inline-block;border:solid 3px grey;margin:3px;">
                    <div class="card-header">
                      <h2 class="card-title">レコード番号:${record.レコード番号.value}</h2>
                    </div>
                    <div class="card-body">
                      <p class="card-text">氏名:${record.氏名.value}</p>
                      <p class="card-text">所属:${record.所属.value}</p>
                      <p class="card-text">入社日:${record.入社日.value}</p>`

    if (file !== undefined) { html += `<img id="blobImage" alt="Blob Image" src="${file}" width="200" height="200" >` }
    html += `</div> </div> </a> `
    return html;
  }

  // file取得
  const getFile = async (fileKey) => {
    if (!fileKey) return
    try {
      const headers = { 'X-Requested-With': 'XMLHttpRequest', };
      const resp = await fetch(`/k/v1/file.json?fileKey=${fileKey}`, {
        method: 'GET',
        headers,
      });
      const blob = await resp.blob();
      const url = window.URL || window.webkitURL;
      const blobUrl = url.createObjectURL(blob);
      return blobUrl
    } catch (err) {
      console.error(err);
      return
    }
  }
})()

[k-mori (森)]

コードをそのまま文章で掲載しようとしていたのですが、文字化けしてしまいうまく掲載できなかったので、画像で掲載させていただいていました。
ありがとうございます！画像を取得する方法が分からず困っていたので
非常に助かりました！細かいところを修正して希望するものを作成できるように頑張ります。