kintoneアプリのリンクフィールドに入力されているURLを FormBridgeでクリックし、別ページに遷移させたい。

[yosuke_nakano]

kintoneアプリのリンクフィールドに入力されているURLを FormBridgeのフォームでクリックし、別ページに遷移させたいです。

現状、
kintoneアプリのフィールドをリンクに設定しURLを入力
↓
Kviewer経由でリンクを取得
↓
FormBrideのフォームにkintoneアプリのURLが表示される状態までは行いましたがFormBrideではkintoneのリンクフィールドは文字列(1行)に対応しているため
リンククリックができない状態(文字列として表示されている)でした。
そのため
kintoneアプリフィールドをリッチエディターに変更し
FormBridgeのリッチエディターフィールドに表示することで
別ページへの遷移は可能な状態にはなっておりますが、
リンクだけを表示し、別ページへの遷移を実現させたいです。
何か良い方法がございましたらご教授いただきたく思います。

[aaa]

FormBridgeのカスタマイズは初めてなのでもっと良いやり方があるとおもいます。

方針

• 「リンク」の要素の下にaタグでリンクを追加する

ご自身の環境・設定項目に合わせて修正してください

• リンクというフィールドコード
• リンクが何番目のinput項目か
• aタグのリンク文字列(固定なのか、可変にするのか)
• FormBridge側でリンクのフィールドが編集不可でも動きました。

(() => {
    "use strict";  // Strictモードを有効にする

    // fb.events.form.mounted 配列に関数を追加する
    fb.events.form.mounted = [(state) => {

        // 'リンク'というコードを持つ要素を取得
        const textField = fb.getElementByCode('リンク');

        // 新しい<a>要素を作成
        const outerLink = document.createElement('a');

        // <a>要素のhref属性にtextFieldのinput要素の値を設定
        outerLink.href = textField.getElementsByTagName('input')[0].value;

        // <a>要素のテキストを設定
        outerLink.innerText = 'Example outerLink';

        // <a>要素をtextFieldに追加
        textField.appendChild(outerLink);

        // 状態オブジェクトを返す
        return state;
    }];
})();

[aaa]

textField.getElementsByTagName('input')[0].value;

でデータを取得しなくても

state.record.XXXX.value

で取得できたのですね。
以下、修正しました。

// 即時実行関数（IIFE）を定義して、変数や関数を他のコードと分離します
(() => {
    // "use strict" は、より安全なコードを書くためのものです
    "use strict";

    // fb.events.form.mounted は、特定の状態で実行される関数を保持する配列です
    // ここでは、その配列に無名関数（ラムダ）を追加しています
    fb.events.form.mounted = [(state) => {
        // 'リンク'というコードを持つ要素を取得します
        const textField = fb.getElementByCode('リンク');

        // 'a' タグ（ハイパーリンク）を作成します
        const outerLink = document.createElement('a');

        // ハイパーリンクの href 属性に、state.record.リンク.value の値を設定します
        outerLink.href = state.record.リンク.value;

        // ハイパーリンクの表示テキストを設定します
        outerLink.innerText = 'Example outerLink';

        // ハイパーリンクを textField 要素に追加します
        textField.appendChild(outerLink);

        // 現在の状態を返します（この例では変更はありませんが、状態を返すのが一般的です）
        return state;
    }];
})();