kViewer フォームブリッジ編集ボタン非表示

[bpj0138 (ああああ)]

追加の情報ありがとうございます。

[aaa]

インターネット上に文章を掲示する方法は様々だとおもいます。

たとえば、
kintoneでダミーのアプリとレコードをつくって
静的フィールドでエラー文をいれてみてはいかがでしょうか？

[aaa]

ご参考
カスタマイズするときに、
どのイベントが発生して、
どこでカスタマイズ可能になるタイミングが
発生しているのか、いないのか
わかりづらい、試すのが面倒というのがあるとおもいます。

以下のJavaScriptを入れておけば、参照している
kintoneレコードと一致したイベントをconsole欄で
確認できて便利かなと思いました。

(() => {
    "use strict";

    kv.events.view.created = [(state) => {
        console.log("kv.events.view.created");
        console.log("発生タイミング：ビューのDOMを作成する前")
        return state;
    }];

    kv.events.view.mounted = [(state) => {
        console.log("kv.events.view.mounted");
        console.log("発生タイミング：ビューのDOMが作成された後")
        return state;
    }];

    kv.events.view.index.created = [(state) => {
        console.log("kv.events.view.index.created");
        console.log("発生タイミング：レコード一覧ページでのメインコンテンツのDOMを作成する前")
        return state;
    }];

    kv.events.view.index.mounted = [(state) => {
        console.log("kv.events.view.index.mounted ");
        console.log("発生タイミング：レコード一覧ページでのメインコンテンツのDOMを作成された後")
        return state;
    }];

    kv.events.view.detail.created = [(state) => {
        console.log("kv.events.view.detail.created");
        console.log("発生タイミング：レコード詳細ページでのメインコンテンツのDOMを作成する前")
        return state;
    }];

    kv.events.view.detail.mounted = [(state) => {
        console.log("kv.events.view.detail.mounted");
        console.log("発生タイミング：レコード詳細ページでのメインコンテンツのDOMを作成された後")
        return state;
    }];

    kv.events.records.fetched = [(state, response) => {
        console.log("kv.events.records.fetched");
        console.log("追加引数 response: レスポンス内容")
        console.log(response)
        console.log("発生タイミング：kViewer経由でkintoneからレコード一覧を取得するAPIが正常終了した時")
        return state;
    }];

    kv.events.records.error = [(state, error) => {
        console.log("kv.events.records.error");
        console.log("追加引数 error:  エラー内容")
        console.log(error)
        console.log("発生タイミング：kViewer経由でkintoneからレコード一覧を取得するAPIが正常終了した時")
        return state;
    }];

    kv.events.records.mounted = [(state) => {
        console.log("kv.events.records.mounted");
        console.log("発生タイミング：レコード一覧のDOMが作成された後")
        return state;
    }];

    kv.events.record.fetched = [(state) => {
        console.log("kv.events.record.fetched");
        console.log("追加引数 response: レスポンス内容")
        console.log(response)
        console.log("発生タイミング：kViewer経由でkintoneからレコード1件を取得するAPIが正常終了した時")
        return state;
    }];

    kv.events.record.error = [(state, error) => {
        console.log("kv.events.record.error");
        console.log("追加引数 error:  エラー内容")
        console.log(error)
        console.log("発生タイミング：kViewer経由でkintoneからレコード1件を取得するAPIでエラーが発生した時")
        return state;
    }];

    kv.events.record.mounted = [(state) => {
        console.log("kv.events.record.mounted");
        console.log("発生タイミング：レコード詳細のDOMが作成された後")
        return state;
    }];

    kv.events.file.lazyShow = [(state, file) => {
        console.log("kv.events.file.lazyShow");
        console.log("追加引数 file: fileデータ")
        console.log(file)
        console.log("発生タイミング：サムネイル表示するファイルが遅延表示された時")
        return state;
    }];

    kv.events.file.download = [(state, file) => {
        console.log("kv.events.file.download");
        console.log("追加引数 file: fileデータ")
        console.log(file)
        console.log("発生タイミング：ファイルがダウンロードしようとした時")
        return state;
    }];

    kv.events.view.changeShowDate = [(state) => {
        console.log("kv.events.view.changeShowDate");
        console.log("発生タイミング：カレンダービューで表示する日付を変更した時")
        return state;
    }];

    kv.events.error.created = [(state) => {
        console.log("kv.events.error.created ");
        console.log("発生タイミング：エラーページのDOMを作成する前")
        return state;
    }];

    kv.events.error.mounted = [(state) => {
        console.log("kv.events.error.mounted");
        console.log("発生タイミング：エラーページのDOMが作成された後")
        return state;
    }];

    kv.events.error.back = [(state) => {
        console.log("kv.events.error.back");
        console.log("発生タイミング：エラーページで前の画面に戻るが押された時")
        return state;
    }];
})();

[bpj0138 (ああああ)]

色々とありがとうございます。

様々考え、動き的には以下がベストなのですが、実現できそうでしょうか。
難しそうであればご教授いただいた内容で頑張ってみます。

[aaa]

どのようなところでお困りですか？

• もう少し具体的に教えてください。
• こうしてみたけどうまくいかないみたいなものが客観的にわかるようにやりとりされませんか？

[bpj0138 (ああああ)]

まず初めに、任意のフィールドを非表示にする方法がわかりませんでした。
非表示にするためのコードがわからない
フィールドを指定するコードがわからない

×

(function () {
    'use strict';
    kv.events.records.mounted = [function (state) {
        if (record['お申込み内容'].value !== 'お申込み待ち') {
            document.getElementByClassName('御見積書').style.display = 'none';
        }
        return state;
    }];
})();

ifを抜いても×

(function () {
    'use strict';
    kv.events.records.mounted = [function (state) {

            document.getElementByClassName('kv-element  label').style.display = 'none';
        
        return state;
    }];
})();

[aaa]

(() => {
    kv.events.record.mounted = [(state) => {
        if (state.record['お申込み内容'].value !== 'お申し込み待ち') {
            kv.detail.getElementByCode('static_field').style.display = 'none';
        }
        return state;
    }]
})();

イベントを変更しました。
イベントがカスタマイズしたJavaScript内を意図通りになっているか、
ブレイクポイントを入れて見ないと気づかないと思います。
kv.events.records.mounted と
kv.events.record.mounted とか

静的フィールドが static_field というフィールドコードという前提です。

kv.detail.getElementByCode という便利なものがあるので使いましょう。ボタンにはフィールドコードが付いていないので getElementsByClassName でHTMLを書き換えているという違いです。

kintoneとは違って
record['お申込み内容'].value
ではなくて
state.record['お申込み内容'].value
とする必要があります。
ブレイクポイントを入れて確認できるようなると良いと思います。

[bpj0138 (ああああ)]

ありがとうございます。

うまく動かず、kViewer経由でkintoneからレコード1件を取得するAPIでエラーが発生した時にエラーが起きているとなっておりました。

ブレイクポイントこんな感じでしたが、どのように見ればよろしいでしょうか。

[aaa]

エラーの時はkv.events.record.errorを使いますが、

kViewer フォームブリッジ編集ボタン非表示

色々とありがとうございます。 様々考え、動き的には以下がベストなのですが、実現できそうでしょうか。 難しそうであればご教授いただいた内容で頑張ってみます。 [image]

を見るとお申込み内容が何であれ、受付番号やお申込み内容を取得するので、
エラーになるレコードを扱うことがなくなっているはずです。
kintone側でレコードを修正して、kviewerのレコードの絞り込み条件を外してください。

kintone JavaScript カスタマイズデバッグまとめ – cybozu developer network

kintone JavaScript カスタマイズデバッグまとめ

参考イメージです。

[bpj0138 (ああああ)]

理想は、レコードの絞り込みはなしで、以下の内容です。（表示・非表示のフィールドは添付した画像を見ていただきたいです）
具体的にわからない内容として、非表示の仕方をまずお伺いしましたが、特定のラベルの指定方法、ボタンの表記の変更方法も躓いております。
お申込み内容もkViewerにはフィールドコードなどなく、別の指定の仕方があるのでしょうか？

(() => {
    kv.events.record.mounted = [(state) => {
//お申込み内容が "お申込み待ち" でないとき
        if (state.record['お申込み内容'].value !== 'お申し込み待ち') { 
//ラベル1、ラベル2、添付フィールドを非表示
            kv.detail.getElementByCode('ラベル1').style.display = 'none';
            kv.detail.getElementByCode('ラベル2').style.display = 'none';
            kv.detail.getElementByCode('添付フィールド').style.display = 'none';
//フォームブリッジ編集ボタンの表記を変更

//お申込み内容が "お申込み待ち" のとき

//ラベル3を非表示

        }
        return state;
    }]
})();

[bpj0138 (ああああ)]

先ほどの、“kViewer経由でkintoneからレコード1件を取得するAPIでエラーが発生した時にエラーが起きている” は以前ご教授いただいた以下のjsを入れたときに出ています。

(() => {
“use strict”;

kv.events.view.created = [(state) => {
    console.log("kv.events.view.created");
    console.log("発生タイミング：ビューのDOMを作成する前")
    return state;
}];

kv.events.view.mounted = [(state) => {
    console.log("kv.events.view.mounted");
    console.log("発生タイミング：ビューのDOMが作成された後")
    return state;
}];

kv.events.view.index.created = [(state) => {
    console.log("kv.events.view.index.created");
    console.log("発生タイミング：レコード一覧ページでのメインコンテンツのDOMを作成する前")
    return state;
}];

kv.events.view.index.mounted = [(state) => {
    console.log("kv.events.view.index.mounted ");
    console.log("発生タイミング：レコード一覧ページでのメインコンテンツのDOMを作成された後")
    return state;
}];

kv.events.view.detail.created = [(state) => {
    console.log("kv.events.view.detail.created");
    console.log("発生タイミング：レコード詳細ページでのメインコンテンツのDOMを作成する前")
    return state;
}];

kv.events.view.detail.mounted = [(state) => {
    console.log("kv.events.view.detail.mounted");
    console.log("発生タイミング：レコード詳細ページでのメインコンテンツのDOMを作成された後")
    return state;
}];

kv.events.records.fetched = [(state, response) => {
    console.log("kv.events.records.fetched");
    console.log("追加引数 response: レスポンス内容")
    console.log(response)
    console.log("発生タイミング：kViewer経由でkintoneからレコード一覧を取得するAPIが正常終了した時")
    return state;
}];

kv.events.records.error = [(state, error) => {
    console.log("kv.events.records.error");
    console.log("追加引数 error:  エラー内容")
    console.log(error)
    console.log("発生タイミング：kViewer経由でkintoneからレコード一覧を取得するAPIが正常終了した時")
    return state;
}];

kv.events.records.mounted = [(state) => {
    console.log("kv.events.records.mounted");
    console.log("発生タイミング：レコード一覧のDOMが作成された後")
    return state;
}];

kv.events.record.fetched = [(state) => {
    console.log("kv.events.record.fetched");
    console.log("追加引数 response: レスポンス内容")
    console.log(response)
    console.log("発生タイミング：kViewer経由でkintoneからレコード1件を取得するAPIが正常終了した時")
    return state;
}];

kv.events.record.error = [(state, error) => {
    console.log("kv.events.record.error");
    console.log("追加引数 error:  エラー内容")
    console.log(error)
    console.log("発生タイミング：kViewer経由でkintoneからレコード1件を取得するAPIでエラーが発生した時")
    return state;
}];

kv.events.record.mounted = [(state) => {
    console.log("kv.events.record.mounted");
    console.log("発生タイミング：レコード詳細のDOMが作成された後")
    return state;
}];

kv.events.file.lazyShow = [(state, file) => {
    console.log("kv.events.file.lazyShow");
    console.log("追加引数 file: fileデータ")
    console.log(file)
    console.log("発生タイミング：サムネイル表示するファイルが遅延表示された時")
    return state;
}];

kv.events.file.download = [(state, file) => {
    console.log("kv.events.file.download");
    console.log("追加引数 file: fileデータ")
    console.log(file)
    console.log("発生タイミング：ファイルがダウンロードしようとした時")
    return state;
}];

kv.events.view.changeShowDate = [(state) => {
    console.log("kv.events.view.changeShowDate");
    console.log("発生タイミング：カレンダービューで表示する日付を変更した時")
    return state;
}];

kv.events.error.created = [(state) => {
    console.log("kv.events.error.created ");
    console.log("発生タイミング：エラーページのDOMを作成する前")
    return state;
}];

kv.events.error.mounted = [(state) => {
    console.log("kv.events.error.mounted");
    console.log("発生タイミング：エラーページのDOMが作成された後")
    return state;
}];

kv.events.error.back = [(state) => {
    console.log("kv.events.error.back");
    console.log("発生タイミング：エラーページで前の画面に戻るが押された時")
    return state;
}];

})();

[aaa]

みたいなところを見せてください。

ボタンはいったん忘れて、任意の項目の表示・非表示を考えましょう。
いっぺんにいくつも変更してうまくいきません。

[aaa]

ということは、参照しているkviewerのページがエラーになるレコードのmyページを見ている可能性が高くないですか？

[bpj0138 (ああああ)]

レコード詳細は以下の通りです。

[bpj0138 (ああああ)]

現状、jsは非表示の設定と、ブレイクポイントの設定を入れております。

エラーポップはレコードの絞り込みを設定していた時にエラーになっていた状態でも、エラーになっていなかった状態でも表示されています。

意図くみ取れていなかったら申し訳ございません。

[aaa]

画面右上のエラー response is not defined がなぜ表示されるかわかりませんでした。

JavaScriptのカスタマイズのカスタマイズを全部外した状態でどうなるか？

試しに一つ設定して、影響がでるか

を見るしかない思います。
ブレイクポイントを設定した場合は、どの行に設定したのか見せてください。

[bpj0138 (ああああ)]

非表示設定のみ → エラーポップ出ない
ブレイクポイントのみ → エラーポップ出る
非表示設定＋ブレイクポイント → エラーポップ出る

です。ちなみに非表示設定はいずれもうまく働いておらず、全てのフィールドが表示されている状態です。

Ifを除いたjsですが、1を指定？して更新すると以下のような画面になりましたが、どのような状態でしょうか。

[aaa]

ブレークポイントを設定する

kintone JavaScript カスタマイズデバッグまとめ

を読んでみましょう。

Chromeのデバッグ機能が全然わからないという状態だとkViewerはkintoneよりもカスタマイズが難しいというか不可能だと思います。(コンソールにエラーがでないような設定がされているため）