カスタマイズビューに編集ボタンを表示

kintone カスタマイズ
1

お世話になっております。

標題の件について、カスタマイズビューで下記のように設定し、標準の表形式のようにレコードを表示しております。

Javascript

(function () {
    kintone.events.on('app.record.index.show', function(e) {
        if (e.viewName != 'カスタマイズビュー') return;
        var products = new Array();
        for (var i = 0; i < e.records.length; i++) {
            var record = e.records[i];
            console.log(record);
            $("#area").loadTemplate($("#template"),
            {
              t01: record['レコード番号'].value,
              t02: record['文字列1行_0_'].value,
              t03: record['ドロップダウン_0_'].value,
              t04: (record['ユーザー選択_0_'].value.length > 0) ? record['ユーザー選択_0_'].value[0].name: "",
              t05: record['ふりがな'].value,
              t06: record['日付_0_'].value,
            },{append:true});
        }
         $(function(){
         $("td.t01").each(function (i) {
         i = i+1;
         $(this).text(i);
});
});
});
})();

HTML

<script type="text/html" id="template">
<table class="table-bordered"><tr>
<td class="t01"></td>
<td data-content="t02"></td>
<td data-content="t03"></td>
<td data-content="t04"></td>
<td data-content="t05"></td>
<td data-content="t06"></td>
</tr></table>
</script>
<div class="container"><div id="area"></div></div>

カスタマイズビューでも標準の表形式で設定されている編集機能を実現させたいのですが、どのように行えば宜しいでしょうか。

おそらく標準のように同画面上での編集は難しいのであれば、編集画面へのリンク「https://****.cybozu.com/k/000/show#record=1&mode=edit」をレコード毎にボタンのようなリンクを設定でもよいのですが、ご教授いただければ幸いでございます。

よろしくお願いいたします。

 

 

2

Naoさん

同画面上で編集を行うこと、及びそれを保存することはどちらも可能です。

実装のパターンとしては、当該のレコードの部分をインライン編集出来るようにJavaScriptで動的に要素を置き換える、その後値を読み込んでREST APIでレコードを更新、という形になるかと思います。
レコードの要素の iscontenteditable属性を設定するとその要素の内容が編集できるようになるので、こちらを利用すると楽に実装できると思います。

3

瀧ヶ平様

ご返信ありがとうございます。

実装は可能なんですね。

ただ、まだ初心者で、私には敷居が高そうなので、もう少し勉強をして挑戦したいと思います。

ちなみに、ご教授いただいた方法について参考になる記事はありますでしょうか。

度々お手数でございますが、よろしくお願いいたします。