新規投稿
フォローする

フィールド名・フィールドコードを表形式で表示・編集

フォームのフィールド名とフィールドコードを、表形式で表示したり編集したりできるプラグインを紹介します。

サンプル

フォームのフィールド名とフィールドコードを、表形式で表示・編集できるようにします。 プラグインの設定画面で動作します。

コード

kintone プラグインを利用します。 読み込み方法は下記などを参考にしてください。
https://developer.cybozu.io/hc/ja/articles/203455680

〇ファイル構成

下記をすべて同じ階層に置いてパッケージ化します。

・manifest.json
・config.html
・config.js
・config.css
・icon.png

・manifest.json

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "name": {
    "ja": "フィールドエディター",
    "en": "Field editor",
    "zh": "现场编辑"
  },
  "icon": "icon.png",
  "config": {
    "html": "config.html",
    "js": [
      "https://js.cybozu.com/lodash/4.17.11/lodash.min.js",
      "config.js"
    ],
    "css": [
      "config.css"
    ]
  }
}

・config.html

<table id="fields">
  <thead>
    <tr>
      <th>Field label</th>
      <th>Field code</th>
      <th>Field type</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<button id="save-button">save</button>
<script type="text/html" id="lodash-template">
  <tr id="<%= fieldCode %>" class="<%= parentOrChildField %>">
    <td><input value="<%= fieldLabel %>" class="field-label"></td>
    <td><input value="<%= fieldCode %>" class="field-code"></td>
    <td><input value="<%= fieldType %>" class="field-type" disabled></td>
  </tr>
</script>

・config.js

(function() {
  "use strict";
  kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET', {app: kintone.app.getId()}).then(function(response){
    var template = _.template(document.getElementById('lodash-template').innerHTML);
    document.getElementById('fields').getElementsByTagName('tbody')[0].innerHTML = Object.keys(response.properties).filter(function(fieldCode){
      return [
        'レコード番号',
        '$id',
        '$revision',
        '作成者',
        '更新者',
        '作成日時',
        '更新日時',
        'カテゴリー',
        '作業者',
        'ステータス'
      ].indexOf(fieldCode) === -1;
    }).reduce(function(fieldsHtml, parentField){
      return (
        fieldsHtml +
        template({
          fieldLabel: response.properties[parentField].label,
          fieldCode: response.properties[parentField].code,
          fieldType: response.properties[parentField].type,
          parentOrChildField: 'parent-field'
        }) +
        (
          response.properties[parentField].type === 'SUBTABLE' ?
          Object.keys(response.properties[parentField].fields).reduce(function(childFieldsHtml, childField){
            return (
              childFieldsHtml +
              template({
                fieldLabel: response.properties[parentField].fields[childField].label,
                fieldCode: response.properties[parentField].fields[childField].code,
                fieldType: response.properties[parentField].fields[childField].type,
                parentOrChildField: 'child-field-of-' + parentField
              })
            );
          }, '') : ''
        )
      );
    }, '');
  });
  document.getElementById('save-button').addEventListener('click', function(){
    kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'PUT', {
      app: kintone.app.getId(),
      properties: [].reduce.call(document.getElementsByClassName('parent-field'), function(properties, parentFieldElement){
        properties[parentFieldElement.id] = {
          label: parentFieldElement.getElementsByClassName('field-label')[0].value,
          code: parentFieldElement.getElementsByClassName('field-code')[0].value,
          type: parentFieldElement.getElementsByClassName('field-type')[0].value
        };
        properties[parentFieldElement.id].fields = [].reduce.call(document.getElementsByClassName('child-field-of-' + parentFieldElement.id), function(fields, childFieldElement){
          fields[childFieldElement.id] = {
            label: childFieldElement.getElementsByClassName('field-label')[0].value,
            code: childFieldElement.getElementsByClassName('field-code')[0].value,
            type: childFieldElement.getElementsByClassName('field-type')[0].value
          };
          return fields;
        }, {});
        return properties;
      }, {})
    }).then(function(){
      alert('更新しました.');
      location.reload();
    }).catch(function(error){
      console.log(error);
      alert('更新に失敗しました.');
    });
  });
})();

・config.css

#fields th,
#fields td{
  border: 1px #000 solid;
  padding: 5px;
}
#save-button{
  margin-top: 10px;
}

・icon.png

プラグインのアイコンとなる画像ファイルを1つ用意します。

 

※コード修正しました.(2020/3/12)

2

2件のコメント

Avatar
赤座 久樹

ビルドしてみました。シンプルで使いやすいですね!ありがとうございます。

 

一点、何度か繰り返しフィールドコードを変えたいとき、

Saveボタンを2回目に押すと「失敗しました」と出ます。

画面表示時にフィールドコードを取得してきているので、

2回目のSaveでは変更前のフィールドコードが正しく送られないようです。

 

シンプルに、保存したら画面をリロードするように修正してみました。

```

--- a/config.js
+++ b/config.js
@@ -62,6 +62,7 @@
}, {})
}).then(function(){
alert('更新しました.');
+ location.reload();
}).catch(function(error){
console.log(error);
alert('更新に失敗しました.');

```

 

2
Avatar
江田篤史

赤座 久樹様

いつもお世話になっております.

ご指摘ありがとうございます.

記事に反映させていただきました.

今後ともよろしくお願いいたします.

1
サインインしてコメントを残してください。