FormBridgeでリンクをクリックして飛べるようにしたい

kintone の構築／設計／運用
1

実現したいこと

kViewerルックアップにて取得した情報がリンクになっており、そのリンクをクリックして飛べるようにしたいです。kintoneのマスタではリンクフィールドを使っておりフォームブリッジでは文字列一行フィールドを使用しています。

JavaScriptでの実現や別方法での実現の仕方等、ご存知の方や導入されている方ご教示いただけますと幸いです。

2

前提条件

1-1 リンク先URLの表示とリンク用のボタンを表示させるためのラベルを追加しました。

フィールドコード label
kViewerルックアップでリンクが返ってくるリンクフィールド
フィールドコード リンク

コード

const parseSafeHttpUrl = (input) => {
	const value = String(input ?? "").trim();
	if (value === "") return null;

	let url;
	try {
		url = new URL(value);
	} catch {
		return null;
	}

	if (url.protocol !== "http:" && url.protocol !== "https:") {
		return null;
	}

	return url;
};

const getPreviewContainer = () => {
	const fieldEl = document.querySelector(
		'.fb-custom--field[data-field-code="label"]',
	);
	if (!fieldEl) {
		console.warn('フィールドコード "label" の要素が見つかりません。');
		return null;
	}

	let container = fieldEl.querySelector("[data-link-preview]");
	if (container) return container;

	container = document.createElement("div");
	container.setAttribute("data-link-preview", "true");
	container.style.marginTop = "8px";
	container.style.padding = "12px";
	container.style.border = "1px solid #dcdcdc";
	container.style.borderRadius = "8px";
	container.style.backgroundColor = "#fafafa";

	fieldEl.append(container);
	return container;
};

const renderPreview = (value) => {
	const container = getPreviewContainer();
	if (!container) return;

	container.replaceChildren();

	const url = parseSafeHttpUrl(value);
	if (!url) {
		container.textContent = "有効な http/https URL のみ確認できます。";
		return;
	}

	const link = document.createElement("a");
	link.href = url.href;
	link.textContent = "このURLを開く";
	link.target = "_blank";
	link.rel = "noopener noreferrer";

	Object.assign(link.style, {
		display: "inline-block",
		padding: "10px 16px",
		backgroundColor: "#007bff",
		color: "#fff",
		textDecoration: "none",
		borderRadius: "6px",
		fontWeight: "bold",
		boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
	});

	const hostInfo = document.createElement("div");
	hostInfo.textContent = `遷移先ホスト: ${url.host}`;

	container.append(link, hostInfo);
};

formBridge.events.on("form.show", () => {
	const record = formBridge.fn.getRecord();
	renderPreview(record["リンク"]?.value ?? "");
});

formBridge.events.on("form.field.change.リンク", (context) => {
	renderPreview(context.value);
});

image
image1397×1049 27.7 KB

3

ご回答ありがとうございます。

kViewerルックアップにて取得した情報がリンクになっており、詳しく言うとフィールドコード:url1,url2,url3,url4と計4つのリンクを参照したいと思っております。

先ほどのコードでも動作可能でしょうか？

4

フィールドコードを合わせて、追加分に対応するコードにすれば対応可能だと思います。
生成AIでも解決できると思います。