start up

vue-project/my-kintone-plugin/src/App.vue

@@ -1,10 +0,0 @@
-<script setup>
-import Config from './components/Config.vue'
-</script>
-
-<template>
-  <Config msg="Vite + Vue" />
-</template>
-
-<style scoped>
-</style>

vue-project/my-kintone-plugin/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

vue-project/my-kintone-plugin/src/components/Config.vue

@@ -1,38 +1,52 @@
 <template>
-<!-- <section class="settings"> -->
   <h2 class="settings-heading">Settings for data fetch pluging</h2>
   <p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
   <form class="js-submit-settings">
     <p class="kintoneplugin-row">
       <label for="message">
         Message:
-        <input type="text" class="js-text-message kintoneplugin-input-text">
+        <input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
       </label>
     </p>
     <p class="kintoneplugin-row">
-        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
-        <button class="kintoneplugin-button-dialog-ok">Save</button>
+      <kuc-button text="Cancel" type="normal" @click="cancel" />
+      <kuc-button text="Save" type="submit" @click="save" />
     </p>
   </form>
-<!-- </section> -->
 </template>
-<script setup>
-import { ref } from 'vue';
-import '../css/51-modern-default.css';
-import '../css/config.css';
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
 
-defineProps({
-  msg: String,
+const props = defineProps<{ pluginId: string }>();
+const data: {
+  message: string;
+} = reactive({
+  message: '',
 });
 
-const count = ref(0)
-</script>
+onMounted(async () => {
+  const savedData = kintone.plugin.app.getConfig(props.pluginId);
+  data.message = JSON.parse(savedData.message);
+});
 
+function save() {
+  kintone.plugin.app.setConfig(
+    { message: JSON.stringify(data.message) },
+    // () => {
+    //   alert("The plug-in settings have been saved. Please update the app!");
+    //   window.location.href = "../../flow?app=" + kintone.app.getId();
+    // }
+  );
+}
+
+function cancel() {
+  window.location.href = `../../${kintone.app.getId()}/plugin/`;
+}
+</script>
 <style scoped>
 .settings-heading {
   padding: 1em 0;
 }
-
 .kintoneplugin-input-text {
   width: 20em;
 }

vue-project/my-kintone-plugin/src/css/config.css

@@ -1,7 +0,0 @@
-.settings-heading {
-  padding: 1em 0;
-}
-
-.kintoneplugin-input-text {
-  width: 20em;
-}

vue-project/my-kintone-plugin/src/js/config.js

@@ -1,25 +0,0 @@
-(function (PLUGIN_ID) {
-  const formEl = document.querySelector('.js-submit-settings');
-  const cancelButtonEl = document.querySelector('.js-cancel-button');
-  const messageEl = document.querySelector('.js-text-message');
-  if (!(formEl && cancelButtonEl && messageEl)) {
-    throw new Error('Required elements do not exist.');
-  }
-
-  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
-  if (config.message) {
-    messageEl.value = config.message;
-  }
-
-  formEl.addEventListener('submit', (e) => {
-    e.preventDefault();
-    kintone.plugin.app.setConfig({ message: messageEl.value }, () => {
-      alert('The plug-in settings have been saved. Please update the app!');
-      window.location.href = '../../flow?app=' + kintone.app.getId();
-    });
-  });
-
-  cancelButtonEl.addEventListener('click', () => {
-    window.location.href = '../../' + kintone.app.getId() + '/plugin/';
-  });
-})(kintone.$PLUGIN_ID);

vue-project/my-kintone-plugin/src/js/desktop.ts

@@ -1,5 +1,3 @@
-import '../css/desktop.css'
-import '../css/51-modern-default.css';
 (function (PLUGIN_ID) {
   kintone.events.on('app.record.index.show', () => {
     const spaceEl = kintone.app.getHeaderSpaceElement();

vue-project/my-kintone-plugin/src/js/kintone-config-helper.js

@@ -0,0 +1,209 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.KintoneConfigHelper = {})));
+}(this, (function (exports) { 'use strict';
+
+  var ALL_FIELD_TYPES = [
+      "SINGLE_LINE_TEXT",
+      "MULTI_LINE_TEXT",
+      "RICH_TEXT",
+      "NUMBER",
+      "CALC",
+      "RADIO_BUTTON",
+      "CHECK_BOX",
+      "MULTI_SELECT",
+      "DROP_DOWN",
+      "DATE",
+      "TIME",
+      "DATETIME",
+      "FILE",
+      "LINK",
+      "USER_SELECT",
+      "ORGANIZATION_SELECT",
+      "GROUP_SELECT",
+      "REFERENCE_TABLE",
+      "SPACER",
+      "GROUP",
+      "SUBTABLE",
+      "RECORD_NUMBER",
+      "CREATOR",
+      "CREATED_TIME",
+      "MODIFIER",
+      "UPDATED_TIME"
+  ];
+  function createKintoneClient(kintone) {
+      function fetchFormInfoByFields() {
+          var url = kintone.api.url("/k/v1/preview/app/form/fields", true);
+          var body = {
+              app: kintone.app.getId()
+          };
+          return kintone.api(url, "GET", body).then(function (resp) {
+              return resp.properties;
+          });
+      }
+      function fetchFormInfoByLayout() {
+          var url = kintone.api.url("/k/v1/preview/app/form/layout", true);
+          var body = {
+              app: kintone.app.getId()
+          };
+          return kintone.api(url, "GET", body).then(function (resp) {
+              return resp.layout;
+          });
+      }
+      return {
+          fetchFormInfoByFields: fetchFormInfoByFields,
+          fetchFormInfoByLayout: fetchFormInfoByLayout
+      };
+  }
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at http://www.apache.org/licenses/LICENSE-2.0
+
+  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+  MERCHANTABLITY OR NON-INFRINGEMENT.
+
+  See the Apache Version 2.0 License for specific language governing permissions
+  and limitations under the License.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+              t[p[i]] = s[p[i]];
+      return t;
+  }
+
+  var NOT_EXIST_MESSAGE = "Either the specified field type does not exist, or this method cannot respond the specified field type.";
+  var NOT_MATCH_MESSAGE = "Specify either characters or an array of characters for the getAllFields parameter.";
+
+  function createGetFields(kintoneClient, Promise_) {
+      var Promise = Promise_;
+      var fetchFormInfoByFields = kintoneClient.fetchFormInfoByFields, fetchFormInfoByLayout = kintoneClient.fetchFormInfoByLayout;
+      function removeUnnecessaryProperties(field) {
+          var _ = field.size, rest = __rest(field, ["size"]);
+          return rest;
+      }
+      function getFieldInfo(layoutFields) {
+          return layoutFields
+              .filter(function (layout) { return layout.type !== "LABEL" && layout.type !== "HR"; })
+              .map(function (field) { return removeUnnecessaryProperties(field); });
+      }
+      function modifiedLayoutResp(layoutList) {
+          return layoutList.reduce(function (acc, layout) {
+              switch (layout.type) {
+                  case "ROW":
+                      return acc.concat(getFieldInfo(layout.fields));
+                  case "GROUP":
+                      return acc.concat([
+                          { type: layout.type, code: layout.code }
+                      ], layout.layout
+                          .map(function (childLayout) { return getFieldInfo(childLayout.fields); })
+                          .reduce(function (acc, cur) { return acc.concat(cur); }, []));
+                  case "SUBTABLE":
+                      var layoutFieldsIncludeSubtableCode = layout.fields.map(function (layoutField) { return (__assign({}, layoutField, { subtableCode: layout.code })); });
+                      return acc.concat([
+                          { type: layout.type, code: layout.code }
+                      ], getFieldInfo(layoutFieldsIncludeSubtableCode));
+              }
+          }, []);
+      }
+      function getLabeledFields(fieldsResp) {
+          return Object.keys(fieldsResp).reduce(function (acc, key) {
+              var _a;
+              var field = fieldsResp[key];
+              if (field.type === "SUBTABLE") {
+                  return __assign({}, acc, getLabeledFields(field.fields));
+              }
+              return field.label ? __assign({}, acc, (_a = {}, _a[field.code] = field.label, _a)) : acc;
+          }, {});
+      }
+      function addLabel(layoutFieldList, fieldsResp) {
+          var labeledFields = getLabeledFields(fieldsResp);
+          return layoutFieldList.map(function (layoutField) {
+              return labeledFields[layoutField.code]
+                  ? __assign({}, layoutField, { label: labeledFields[layoutField.code] }) : layoutField;
+          });
+      }
+      function getLookupFieldKeys(fieldsResp) {
+          return Object.keys(fieldsResp).filter(function (key) { return typeof fieldsResp[key].lookup !== "undefined"; });
+      }
+      function filterLookupField(layoutFieldList, fieldsResp) {
+          var lookupFieldKeys = getLookupFieldKeys(fieldsResp);
+          if (lookupFieldKeys.length === 0)
+              ;
+          return layoutFieldList.filter(function (layoutField) {
+              return !lookupFieldKeys.some(function (key) { return fieldsResp[key].code === layoutField.code; });
+          });
+      }
+      function flattenFieldsForSubtable(fieldsResp) {
+          return Object.keys(fieldsResp).reduce(function (fields, key) {
+              var _a, _b;
+              if (fieldsResp[key].type === "SUBTABLE") {
+                  return __assign({}, fields, (_a = {}, _a[key] = fieldsResp[key], _a), fieldsResp[key].fields);
+              }
+              return __assign({}, fields, (_b = {}, _b[key] = fieldsResp[key], _b));
+          }, {});
+      }
+      function fetchAllFields(selectFieldTypes) {
+          return Promise.all([fetchFormInfoByFields(), fetchFormInfoByLayout()]).then(function (_a) {
+              var fieldsResp = _a[0], layoutResp = _a[1];
+              var fieldList = addLabel(filterLookupField(modifiedLayoutResp(layoutResp), flattenFieldsForSubtable(fieldsResp)), fieldsResp);
+              return selectFieldTypes
+                  ? fieldList.filter(function (field) { return selectFieldTypes.indexOf(field.type) !== -1; })
+                  : fieldList;
+          });
+      }
+      function validateFieldType(fieldType) {
+          return ALL_FIELD_TYPES.some(function (type) { return type === fieldType; });
+      }
+      function validateGetAllFieldsArgument(fieldType) {
+          if (typeof fieldType === "string") {
+              return validateFieldType(fieldType) ? null : NOT_EXIST_MESSAGE;
+          }
+          if (Array.isArray(fieldType)) {
+              return fieldType.every(validateFieldType) ? null : NOT_EXIST_MESSAGE;
+          }
+          return NOT_MATCH_MESSAGE;
+      }
+      function getFields(selectFieldType) {
+          if (typeof selectFieldType === "undefined") {
+              return fetchAllFields();
+          }
+          var error = validateGetAllFieldsArgument(selectFieldType);
+          if (error) {
+              return Promise.reject(new Error(error));
+          }
+          return fetchAllFields(Array.isArray(selectFieldType) ? selectFieldType : [selectFieldType]);
+      }
+      return getFields;
+  }
+
+  var kintone = window.kintone;
+  var kintoneClient = createKintoneClient(kintone);
+  var getFields = createGetFields(kintoneClient, kintone.Promise);
+
+  exports.getFields = getFields;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

vue-project/my-kintone-plugin/src/js/mobile.ts

@@ -1,4 +1,3 @@
-import '../css/mobile.css';
 (function (PLUGIN_ID) {
   kintone.events.on('mobile.app.record.index.show', () => {
     const spaceEl = kintone.mobile.app.getHeaderSpaceElement();

vue-project/my-kintone-plugin/src/main.js

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')

vue-project/my-kintone-plugin/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Config from './components/Config.vue';
+import allComponent from 'kintone-ui-component';
+
+createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');

vue-project/my-kintone-plugin/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
   "manifest_version": 1,
-  "version": 2,
+  "version": 1,
   "type": "APP",
   "desktop": {
     "js": [
@@ -27,11 +27,11 @@
     ]
   },
   "name": {
-    "en": "data fetch pluging",
+    "en": "data fetch plugin",
     "ja": "データ取得プラグイン"
   },
   "description": {
-    "en": "create search data pluging",
+    "en": "create search data plugin",
     "ja": "検索結果のデータを生成するプラグインです"
   },
   "mobile": {

vue-project/my-kintone-plugin/src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

vue-project/my-kintone-plugin/src/types/kintone-components.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [key: string]: any;
+    }
+  }
+}

vue-project/my-kintone-plugin/src/types/kintone.d.ts

@@ -0,0 +1,29 @@
+// https://cybozu.dev/ja/kintone/docs/overview/field-types/
+// https://cybozudev.kf5.com/hc/kb/article/201593/
+declare namespace kintone.fieldTypes {
+  interface TABLE {
+    type: 'SUBTABLE';
+    value: any;
+  }
+
+}
+
+// lookup https://cybozudev.kf5.com/hc/kb/article/1611088/
+// import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+// // 定义了一个Lookup类型，其中给lookup设置的是对象类型
+// // 下面还有展开，到具体用的时候还会定义的更详细，这里够用了
+// export type Lookup = {
+//   label: string;
+//   code: string;
+//   lookup: object;
+// };
+// // 创建sdk客户端
+// const client = new KintoneRestAPIClient({
+//   baseUrl: 'https://yourdomain.cybozu.cn',
+// });
+// // 获取一个应用中所有类型是Lookup的字段
+// export const getFormSetting = async () => {
+//   const prop = (await client.app.getFormFields({ app: kintone.app.getId() as number })).properties;
+//   const lookUpFields = Object.values(prop).filter((f) => 'lookup' in f) as Lookup[];
+//   return lookUpFields;
+// };