headersspaceにselectを追加して選択されたユーザーのレコードのみにしたいです。
絞り込みをする際クエリを作成してURLを更新するやり方をとっているのですが、エラーになってしまいます。
export function search(config) {
const { appId } = config;
console.log(search 関数がアプリ ID ${appId} で実行されました);
if (typeof kintone === “undefined” || !kintone.app || !kintone.app.record) {
console.error(“kintone オブジェクトが正しくロードされていません。”);
return;
}
kintone.events.on(“app.record.index.show”, (event) => {
const records = event.records;
const viewId = event.viewId;
console.log(現在のビューID: ${viewId});
if (!records || records.length === 0) {
console.log("レコードが存在しません。");
return event;
}
// セレクトボックス作成
const selectElement = document.createElement("select");
selectElement.id = "user-code-select";
// 重複防止用 Set
const addedCodes = new Set();
// レコードからユーザーを抽出してセレクトに追加
records.forEach((record) => {
if (record.名前 && Array.isArray(record.名前.value)) {
record.名前.value.forEach((user) => {
if (user && user.code && user.name && !addedCodes.has(user.code)) {
const option = document.createElement("option");
option.value = user.code;
option.textContent = user.name;
selectElement.appendChild(option);
addedCodes.add(user.code);
}
});
}
});
// 絞り込みボタン作成
const filterButton = document.createElement("button");
filterButton.id = "filter-button";
filterButton.textContent = "絞り込み";
filterButton.addEventListener("click", () => {
const selectedCode = selectElement.value;
if (!selectedCode) {
alert("ユーザーを選択してください。");
return;
}
// クエリ生成
const query = `f5524512 in ("${selectedCode}")`;
const queryParam = encodeURIComponent(query);
const finalUrl = `${location.origin}${location.pathname}?view=${viewId}&q=${queryParam}#sort_0=f5524272&order_0=desc&size=20`;
console.log("生成されたURL:", finalUrl);
// ページ遷移
// window.location.href = finalUrl;
});
// ヘッダースペースに挿入
const headerSpace = kintone.app.getHeaderSpaceElement();
if (headerSpace) {
headerSpace.innerHTML = ""; // クリアしてから追加
headerSpace.appendChild(selectElement);
headerSpace.appendChild(filterButton);
} else {
console.error("ヘッダースペースが取得できませんでした。");
}
return event;
});
}
mura
2
絞り込みをする際クエリを作成してURLを更新するやり方をとっているのですが、エラーになってしまいます。
具体的にどういうエラーが表示されていますか？
また、コードの貼り付けですが下記を参考に正しく貼り付けると回答者が回答しやすくなるかとおもいます
2 Likes
エラー
このようなエラーになっています。
function desktopSearch(PLUGIN_ID, event, selectedFields) {
console.log("desktopSearch");
("use strict");
const searchButton = document.getElementById("custom-search-button");
if (searchButton) {
searchButton.addEventListener("click", function () {
const searchValues = [];
const input = document.getElementById("custom-search-input-0");
if (input && input.value) {
selectedFields.forEach((field) => {
searchValues.push({ field: field, value: input.value });
});
}
searchRecords(searchValues, event.viewId);
});
}
function searchRecords(searchValues, viewId) {
const appId = kintone.app.getId();
let allRecords = [];
const query = ""; // すべてのレコードを取得するためのクエリ
function fetchRecords(offset) {
const limit = 100; // 1回のリクエストで取得するレコード数の上限
const params = {
app: appId,
query: `${query} limit ${limit} offset ${offset}`,
};
return kintone.api(kintone.api.url("/k/v1/records", true), "GET", params).then((resp) => {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
return fetchRecords(offset + limit); // 次のページを取得
}
return allRecords;
});
}
fetchRecords(0).then((records) => {
// レコードのフィールド情報をオブジェクトの配列として管理
const recordObjects = records.map((record) => {
const recordObject = {};
for (const field in record) {
if (record.hasOwnProperty(field)) {
recordObject[field] = getFieldValue(record[field]);
}
}
return {
id: record.$id.value,
fields: recordObject,
};
});
// 検索に引っかかったレコードを格納する配列
const foundRecords = [];
// 検索値が空の場合の処理
if (searchValues.length === 0) {
const finalUrl = `/k/${appId}/?view=${viewId}`;
window.location.href = finalUrl; // URLを変更してページをリロード
return;
}
// 検索処理
recordObjects.forEach((record) => {
let found = true;
searchValues.forEach((searchValue) => {
const fieldValue = record.fields[searchValue.field];
if (!fieldValue || !fieldValue.includes(searchValue.value)) {
found = false;
}
});
if (found) {
foundRecords.push(record.id);
}
});
if (foundRecords.length > 0) {
console.log("Found records:", foundRecords);
redirectToFilteredView(foundRecords, viewId, searchValues);
} else {
console.log("No record found for search values:", searchValues);
// レコード番号がないもので絞り込み
redirectToFilteredView([], viewId, searchValues);
}
});
}
function redirectToFilteredView(ids, viewId, searchValues) {
// すべてのフィールドIDを取得してクエリを生成
kintone
.api(kintone.api.url("/k/v1/app/form/fields", true), "GET", { app: kintone.app.getId() })
.then((resp) => {
const appId = kintone.app.getId();
const queryParts = [];
const urlParams = new URLSearchParams();
// 各フィールドに応じたクエリを生成
searchValues.forEach((searchValue, index) => {
const fieldCode = searchValue.field;
const value = searchValue.value;
const field = resp.properties[fieldCode];
// URLパラメータに検索値を追加
urlParams.append(`search-${index}`, value);
// フィールドタイプごとに適切な演算子を選択
switch (field.type) {
case "SINGLE_LINE_TEXT":
case "MULTI_LINE_TEXT":
case "RICH_TEXT":
case "LINK":
queryParts.push(`${fieldCode} like "${value}"`);
break;
case "NUMBER":
case "RECORD_NUMBER":
if (!isNaN(value)) {
// 数字の場合のみ比較
queryParts.push(`${fieldCode} = ${value}`);
}
break;
case "CALC":
if (!isNaN(value)) {
queryParts.push(`${fieldCode} = ${value}`);
}
break;
case "CHECK_BOX":
case "DROP_DOWN":
case "RADIO_BUTTON":
case "MULTI_SELECT":
if (field.options) {
const options = Object.values(field.options).map((option) => option.label);
if (options.includes(value)) {
queryParts.push(`${fieldCode} in ("${value}")`);
}
}
break;
default:
// それ以外のフィールドにはlikeを使用
queryParts.push(`${fieldCode} like "${value}"`);
break;
}
});
const query = queryParts.length > 0 ? `(${queryParts.join(" or ")})` : ""; // クエリをorで結合し、括弧で囲む
// 一覧の設定のクエリとソート条件を取得
kintone
.api(kintone.api.url("/k/v1/app/views", true), "GET", { app: appId })
.then((viewsResp) => {
const viewName = event.viewName; // 現在表示されているビューの名前を取得
const view = viewsResp.views[viewName];
const filterCond = view.filterCond;
const sortCond = view.sort;
console.log("Filter Condition for view:", viewName, filterCond);
console.log("Sort Condition for view:", viewName, sortCond);
// 新しいクエリで既存のクエリを追加
const combinedQuery = filterCond ? `${filterCond} and ${query}` : query;
if (!combinedQuery) {
console.error("検索クエリが生成できませんでした。");
return;
}
const encodedQuery = encodeURIComponent(combinedQuery);
const finalUrl = `/k/${appId}/?view=${viewId}&query=${encodedQuery}&${urlParams.toString()}&sort=${encodeURIComponent(sortCond)}`;
console.log("Generated Query:", combinedQuery); // デバッグ用
console.log("Encoded URL:", finalUrl); // デバッグ用
// URLを変更してページをリロード
window.location.href = finalUrl;
})
.catch((error) => {
console.error("Error fetching views:", error);
});
})
.catch((error) => {
console.error("Error fetching fields:", error);
});
}
function getFieldValue(field) {
if (typeof field.value === "object" && field.value !== null) {
return JSON.stringify(field.value);
}
return field.value;
}
return event;
}
export default desktopSearch;
mura
4
なるほど、ユーザー取得の部分で失敗してるんですかね…?
（また、最初に提示してあるコードと、最後にはりつけられたコードは内容が違うのがきになりましたが、最後のものが最新という感じですかね？）
コードもそれなりに量があり、あたりをつけないと修正がむずかしいので、まずはどの部分がわるいのか、つまりどこまで実行されているかを探すところから始めたほうがいいかとおもいます！
consoleでもいいですが、ブレークポイントをはって問題を切り分けるのはどうでしょうか
2 Likes
system
(system)
Closed
5
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。