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

**URL:** <https://community.cybozu.dev/t/topic/5464>\
**Category:** kintone 開発相談\
**Created:** [2021 年 11 月 15 日午前 2:51 UTC](https://community.cybozu.dev/t/topic/5464 "2021-11-15T02:51:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2505](https://avatars.discourse-cdn.com/v4/letter/l/b4bc9f/32.png) [@Legacy\_Account2505](https://community.cybozu.dev/u/Legacy_Account2505)\
**Post date:** [2021 年 11 月 15 日午前 2:51 UTC](https://community.cybozu.dev/t/topic/5464/1 "2021-11-15T02:51:36Z")

</div>

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);  
}]  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2505](https://avatars.discourse-cdn.com/v4/letter/l/b4bc9f/32.png) [@Legacy\_Account2505](https://community.cybozu.dev/u/Legacy_Account2505)\
**Post date:** [2021 年 11 月 15 日午後 11:11 UTC](https://community.cybozu.dev/t/topic/5464/2 "2021-11-15T23:11:51Z")

</div>

自己レスです。

実装できました。

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account266](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account266](https://community.cybozu.dev/u/Legacy_Account266)\
**Post date:** [2022 年 2 月 20 日午後 1:13 UTC](https://community.cybozu.dev/t/topic/5464/3 "2022-02-20T13:13:21Z")

</div>

[YASUHITO TSUTSUI様](https://community.cybozu.dev/hc/ja/profiles/901198490023-YASUHITO-TSUTSUI)

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

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1397](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@Legacy\_Account1397](https://community.cybozu.dev/u/Legacy_Account1397)\
**Post date:** [2022 年 12 月 23 日午後 1:11 UTC](https://community.cybozu.dev/t/topic/5464/4 "2022-12-23T13:11:20Z")

</div>

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

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

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

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

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

&nbsp;

```
(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年もしないうちに、「以前は 上手く動作していたカモしれないコードが、ダメな動作に成る」ということでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2505](https://avatars.discourse-cdn.com/v4/letter/l/b4bc9f/32.png) [@Legacy\_Account2505](https://community.cybozu.dev/u/Legacy_Account2505)\
**Post date:** [2022 年 12 月 23 日午後 1:21 UTC](https://community.cybozu.dev/t/topic/5464/5 "2022-12-23T13:21:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1397](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@Legacy\_Account1397](https://community.cybozu.dev/u/Legacy_Account1397)\
**Post date:** [2022 年 12 月 23 日午後 1:31 UTC](https://community.cybozu.dev/t/topic/5464/6 "2022-12-23T13:31:51Z")

</div>

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

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

&nbsp;

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

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 12 月 6 日午前 8:44 UTC](https://community.cybozu.dev/t/topic/5464/7 "2023-12-06T08:44:23Z")

</div>

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