kViewer リストビュー の一覧画面に ボタンを設置したい

kintone カスタマイズ
1

kViewer リストコンテンツ の一覧画面に 「CSV出力」ボタンを設置したいです。

kv.space.main.getTopSpace() 関数で、「メインコンテンツ最上部の要素」を取得し、

appendChild したいのですが、上手くいきません。

お教え頂きたく、よろしくお願いいたします。

(function() {
‘use strict’;
//「CSV出力」ボタン
const myCSVBTN = document.createElement(‘button’);
myCSVBTN.style.height = ‘30px’; //ボタンの高さ
myCSVBTN.style.width = ‘150px’; //ボタンの横幅
myCSVBTN.style.borderRadius = ‘10px’; //ボタンのデザイン
myCSVBTN.innerText = ‘CSV出力’;
myCSVBTN.onclick = function() {
csv_output(state);
}

kv.events.view.index.mounted = [function (state) {
console.log(state)
function csv_output(state){
}

//「CSV出力」ボタン表示
kv.space.main.getTopSpace().appendChild(myCSVBTN);
}]
})();

2

自己レスです。

実装できました。

kv.space関数の使い方がよくわからなかったので、DOMを調べて実装しました。

DOMの構造が変わるとボタンが消える可能性がありますが、その時は再度DOMを調べる必要があるますが・・・

3

YASUHITO TSUTSUI様

同じようなボタンを設置したいのですが、可能でしたら、実装できたjsを教えて下さい。

宜しくお願い致します。

4

冒頭のコードを真似たコードを実行してみたのですが、３つ問題点が在りました。

（１） kvierwerの"ビューの詳細"定義画面の”公開URL”をクリックまたは そのＵＲＬをブラウザで直打ちして、最初に一覧が表示された時、kv.events.view.index.mountedイベントが発火しなかった。

※ 後段のコードで、button要素がappendChildされなかっただけではなく、console.logもwindow.alertも動作しなかったので、イベントが発火しなかったと思いました。 console.logはclearされることもあるようだが、windows.alertはかき消されないでしょう。

（２）kviewerの一覧画面からコンテンツ詳細画面に遷移しても、ヘッダ部にボタンが残った。

（３）｛kviewerの一覧画面からコンテンツ詳細画面に遷移して、一覧画面に戻り、またコンテンツ詳細画面に入る｝を繰り返すと、”一覧画面に戻った”回数分、ボタン要素がappendされた。 添付の図は 3個ボタンが表示されている状態。

 

(function () {
    "use strict";

    // @ts-ignore
    kv.events.view.index.mounted.push(function (state) {
        // @ts-ignore
        const el1 = kv.space.main.getTopSpace();
        console.log("at kv.events.view.index.mounted", state, state.records?.length, el1, "//")
        window.alert("at kv.events.view.index.mounted: state.records.length=" + state.records.length)
        const buttonEl = document.createElement('button');
        buttonEl.innerText = 'CSV出力';
        buttonEl.onclick = function (e) {
            console.log("at kv.events.view.index.mounted. buttonEl onclick called", e, state, "//");
        }
        el1.appendChild(buttonEl)
    });
})();

自己解決できたという報告が在ったのが2021年11月で、私が試したのが当たったのが2022年12月なので、1年もしないうちに、「以前は 上手く動作していたカモしれないコードが、ダメな動作に成る」ということでしょうか？

5

いえ、上手くいったコードは違います。
コード載せてなくてすみません。

6

アア、上手くいったコードは、門外不出ということでしたか、、、

もし、MS-EXCELの有償サポート窓口と同様なSLAだったら、MS社のサポータから既知のナレッジは教えてもらえたでしょうが、、同程度のSLAを期待できるkintoneのQ&Aサイトは 有償＆無償含めて 無いという事なのですね。。。。

 

まあ、「上手くいった手段はある」という情報だけでも、有益な情報で、もう少し試行錯誤を頑張れます。

応答 ありがとうございました。

7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。