Merge branch 'dev' of https://dev.azure.com/alicorn-dev/KintoneAppBuilder/_git/KintoneAppBuilder into tenraku

2024-05-10 17:00:19 +09:00
parent 7da9b81319 c426bbf793
commit 5663c313ea
32 changed files with 1906 additions and 1370 deletions
--- a/backend/app/core/security.py
+++ b/backend/app/core/security.py
@@ -9,7 +9,7 @@ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")

 SECRET_KEY = "alicorns"
 ALGORITHM = "HS256"
-ACCESS_TOKEN_EXPIRE_MINUTES = 30
+ACCESS_TOKEN_EXPIRE_MINUTES = 2880


 def get_password_hash(password: str) -> str:
@@ -25,7 +25,7 @@ def create_access_token(*, data: dict, expires_delta: timedelta = None):
    if expires_delta:
        expire = datetime.utcnow() + expires_delta
    else:
-        expire = datetime.utcnow() + timedelta(minutes=2880)
+        expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
    return encoded_jwt
--- a/document/Kintone自動化ツール設計図.drawio
+++ b/document/Kintone自動化ツール設計図.drawio
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,7 +2,7 @@
  "name": "kintone-automate",
  "version": "0.2.0",
  "description": "Kintoneアプリの自動生成とデプロイを支援ツールです",
-  "productName": "Kintone Automate",
+  "productName": "kintone Automate",
  "author": "maxiaozhe@alicorns.co.jp <maxiaozhe@alicorns.co.jp>",
  "private": true,
  "scripts": {
--- a/frontend/src/components/ActionSelect.vue
+++ b/frontend/src/components/ActionSelect.vue
@@ -3,13 +3,15 @@
    <div v-if="!isLoaded" class="spinner flex flex-center">
      <q-spinner  color="primary" size="3em" />
    </div>
-    <q-table v-else  row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
+    <q-table v-else  row-key="index" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
    class="action-table"
    flat bordered
    virtual-scroll
    :pagination="pagination"
    :rows-per-page-options="[0]"
-    />
+    :filter="filter"
+    >
+    </q-table>
  </div>
 </template>
 <script>
@@ -20,9 +22,10 @@ export default {
  name: 'actionSelect',
  props: {
    name: String,
-    type: String
+    type: String,
+    filter:String
  },
-  setup() {
+  setup(props) {
    const isLoaded=ref(false);
    const columns = [
    { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
@@ -32,9 +35,9 @@ export default {
    const rows = reactive([])
    onMounted(async () => {
        const res =await api.get('api/actions');
-        res.data.forEach((item) =>
+        res.data.forEach((item,index) =>
        {
-          rows.push({name:item.name,desc:item.title,outputPoints:item.outputpoints,property:item.property});
+          rows.push({index,name:item.name,desc:item.title,outputPoints:item.outputpoints,property:item.property});
        });
        isLoaded.value=true;
      });
@@ -53,6 +56,7 @@ export default {
 </script>
 <style lang="scss">
 .action-table{
-  height: 100%;
+  min-height: 10vh;
+  max-height: 68vh;
 }
 </style>
--- a/frontend/src/components/AppSelect.vue
+++ b/frontend/src/components/AppSelect.vue
@@ -1,56 +1,68 @@
 <template>
-  <div class="q-pa-md" >
+  <div class="q-px-xs">
    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
+      <q-spinner color="primary" size="3em" />
    </div>
-    <q-table v-else :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
+      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
+      :filter="filter" style="max-height: 65vh;">
      <template v-slot:body-cell-description="props">
-          <q-td :props="props">
-              <q-scroll-area  class="description-cell">
-                <div v-html="props.row.description" ></div>
-              </q-scroll-area>
-          </q-td>
+        <q-td :props="props">
+          <q-scroll-area class="description-cell">
+            <div v-html="props.row.description"></div>
+          </q-scroll-area>
+        </q-td>
      </template>
    </q-table>
  </div>
 </template>
 <script lang="ts">
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
-import { LeftDataBus } from './flowEditor/left/DataBus';

 export default {
  name: 'AppSelect',
  props: {
    name: String,
-    type: String
+    type: String,
+    filter: String,
+    updateExternalSelectAppInfo: {
+      type: Function
+    }
  },
-  setup() {
-  const columns = [
-  { name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true},
-  { name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' },
-  { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
-  { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
-  ]
-    const isLoaded=ref(false);
-    const rows :any[]= reactive([]);
-    onMounted( () => {
-        api.get('api/v1/allapps').then(res =>{
-          res.data.apps.forEach((item:any) =>
-              {
-                rows.push({
-                  id:item.appId,
-                  name:item.name,
-                  description:item.description,
-                  createdate:dateFormat(item.createdAt)});
-                });
-                isLoaded.value=true;
-              });
-      });
+  setup(props) {
+    const columns = [
+      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
+      { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
+      { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
+      { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
+    ]
+    const isLoaded = ref(false);
+    const rows: any[] = reactive([]);
+    const selected = ref([])

-    const dateFormat=(dateStr:string)=>{
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
+        props.updateExternalSelectAppInfo(selected.value[0])
+      }
+    });
+    onMounted(() => {
+      api.get('api/v1/allapps').then(res => {
+        res.data.apps.forEach((item: any) => {
+          rows.push({
+            id: item.appId,
+            name: item.name,
+            description: item.description,
+            createdate: dateFormat(item.createdAt)
+          });
+        });
+        isLoaded.value = true;
+      });
+    });
+
+    const dateFormat = (dateStr: string) => {
      const date = new Date(dateStr);
-      const pad = (num:number) => num.toString().padStart(2, '0');
+      const pad = (num: number) => num.toString().padStart(2, '0');
      const year = date.getFullYear();
      const month = pad(date.getMonth() + 1);
      const day = pad(date.getDate());
@@ -62,22 +74,26 @@ export default {
    return {
      columns,
      rows,
-      selected: ref([]),
-      isLoaded
+      selected,
+      isLoaded,
+      pagination: ref({
+        rowsPerPage: 10
+      })
    }
  },

 }
 </script>
 <style lang="scss">
-.description-cell{
+.description-cell {
  height: 60px;
  width: 300px;
  max-height: 60px;
  max-width: 300px;
  white-space: break-spaces;
 }
-.spinner{
+
+.spinner {
  min-height: 300px;
  min-width: 400px;
 }
--- a/frontend/src/components/ConditionEditor/ConditionEditor.vue
+++ b/frontend/src/components/ConditionEditor/ConditionEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" width="60vw" height="60vh">
+  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
    <template v-slot:toolbar>
      <q-btn flat round dense icon="more_vert" >
      <q-menu  auto-close anchor="bottom start">
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -14,7 +14,14 @@
    </template>
  </q-field>
  <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
-    <condition-objects ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
+    <template v-slot:toolbar>
+        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+    <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
  </show-dialog>
  </template>

@@ -48,7 +55,7 @@
      if(store.currentFlow!==undefined && store.activeNode!==undefined ){
        vars =store.currentFlow.getVarNames(store.activeNode);
      }
-
+      const filter=ref('');
      const showDg = () => {
        show.value = true;
      };
@@ -71,7 +78,8 @@
        closeDg,
        selectedObject,
        vars:reactive(vars),
-        isSelected
+        isSelected,
+        filter
      };
    }
  });
--- a/frontend/src/components/ConditionObjects.vue
+++ b/frontend/src/components/ConditionObjects.vue
@@ -19,7 +19,7 @@

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="fields">
-              <field-list v-model="selected" type="single" :appId="appId"></field-list>
+              <field-list v-model="selected" type="single" :filter="filter" :appId="appId"></field-list>
            </q-tab-panel>

          <q-tab-panel name="vars" >
@@ -44,7 +44,8 @@ export default {
    name: String,
    type: String,
    appId: Number,
-    vars: Array
+    vars: Array,
+    filter:String
  },
  setup(props) {

--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -3,6 +3,7 @@
    <q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type"
    :selected="modelValue"
    @update:selected="$emit('update:modelValue', $event)"
+    :filter="filter"
    :columns="columns" :rows="rows" />
  </div>
 </template>
@@ -16,7 +17,8 @@ export default {
    name: String,
    type: String,
    appId: Number,
-    modelValue:Array
+    modelValue:Array,
+    filter:String
   },
   emits:[
   'update:modelValue'
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -1,53 +1,82 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
+      <q-spinner color="primary" size="3em" />
    </div>
-    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table  flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+      :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
  </div>
 </template>
 <script>
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';

 export default {
  name: 'fieldSelect',
  props: {
    name: String,
-    type: String,
-    appId:Number
+    type: {
+      type: String,
+      default: 'single'
+    },
+    appId: Number,
+    not_page: {
+      type: Boolean,
+      default: false,
+    },
+    selectedFields:{
+      type:Array,
+      default:()=>[]
+    },
+    updateSelects: {
+      type: Function
+    },
+    filter: String,
  },
  setup(props) {
-    const isLoaded=ref(false);
+    const isLoaded = ref(false);
    const columns = [
-    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
+      { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
+      { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
    ]
-    const rows = reactive([])
-      onMounted( async () => {
-          const res = await api.get('api/v1/appfields', {
-                params:{
-                  app: props.appId
-                }
-            });
-            let fields = res.data.properties;
-            console.log(fields);
-            Object.keys(fields).forEach((key) =>
-            {
-              const fld=fields[key];
-              // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-              rows.push({name:fld.label,...fld});
-            });
-            isLoaded.value=true;
-        });
+    const pageSetting = ref({
+      sortBy: 'desc',
+      descending: false,
+      page: 2,
+      rowsPerPage: props.not_page ? 0 : 5
+      // rowsNumber: xx if getting data from a server
+    });
+    const rows = reactive([]);
+    const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);

-      return {
-        columns,
-        rows,
-        selected: ref([]),
-        isLoaded
-      }
+    watchEffect(() => {
+        props.updateSelects(selected);
+    });
+
+    onMounted(async () => {
+      const res = await api.get('api/v1/appfields', {
+        params: {
+          app: props.appId
+        }
+      });
+      let fields = res.data.properties;
+      console.log(fields);
+      Object.keys(fields).forEach((key) => {
+        const fld = fields[key];
+        // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+        rows.push({ name: fld.label, ...fld });
+      });
+      isLoaded.value = true;
+    });
+
+    return {
+      columns,
+      rows,
+      selected,
+      isLoaded,
+      pageSetting
+    }
  },

 }
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -1,7 +1,7 @@
 <template>
  <!-- <div class="q-pa-md q-gutter-sm" > -->
-    <q-dialog :model-value="visible" persistent bordered>
-      <q-card :style="{minWidth : width}" >
+    <q-dialog :model-value="visible" persistent bordered >
+      <q-card :style="cardStyle"  style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
        <q-toolbar class="bg-grey-4">
          <q-toolbar-title>{{ name }}</q-toolbar-title>
          <q-space></q-space>
@@ -11,10 +11,10 @@
        <q-card-section>
          <!-- <div class="text-h6">{{ name }}</div> -->
        </q-card-section>
-        <q-card-section class="q-pt-none" :style="{...(height? {minHeight:height}:{}) }">
+        <q-card-section class="q-pt-none" :style="sectionStyle">
         <slot></slot>
        </q-card-section>
-        <q-card-actions align="right" class="text-primary">
+        <q-card-actions align="right" class="text-primary q-mt-lg">
          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
        </q-card-actions>
@@ -23,14 +23,16 @@
  <!-- </div> -->
 </template>
 <script>
-
+import {computed} from 'vue'
 export default {
  name: 'ShowDialog',
  props: {
    name:String,
    visible: Boolean,
    width:String,
-    height:String
+    height:String,
+    minWidth:String,
+    minHeight:String
  },
  emits: [
    'close'
@@ -41,8 +43,20 @@ export default {
      context.emit('close', val);
    }

+    const cardStyle = computed(() => ({
+      minWidth: props.minWidth,
+      width: props.width
+    }));
+
+    const sectionStyle = computed(() => ({
+      height: props.height,
+      minHeight: props.minHeight
+    }));
+
    return {
-      CloseDialogue
+      CloseDialogue,
+      cardStyle,
+      sectionStyle
    }
  },
 }
--- a/frontend/src/components/left/AppSelector.vue
+++ b/frontend/src/components/left/AppSelector.vue
@@ -22,8 +22,15 @@
      ></q-btn>
    </div>
  </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" width="600px" >
-      <AppSelect ref="appDg" name="アプリ" type="single"></AppSelect>
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
+    <template v-slot:toolbar>
+        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
  </ShowDialog>
 </template>

@@ -73,7 +80,8 @@ export default defineComponent({
      showSelectApp,
      showAppDialog,
      closeDg,
-      appDg
+      appDg,
+      filter:ref('')
    }
  }
 });
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -0,0 +1,235 @@
+<template>
+    <div class="q-my-md" v-bind="$attrs">
+        <q-card flat>
+            <q-card-section class="q-pa-none q-my-sm q-mr-md">
+                <!-- <div class=" q-my-none ">App Field Select</div> -->
+                <div class="row q-mb-xs">
+                    <div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
+                    </div>
+                    <div class="col-1">
+                        <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
+                    </div>
+                </div>
+            </q-card-section>
+            <q-separator />
+            <q-card-section class="q-pa-none q-ma-none">
+                <div style="">
+                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
+                      <q-list bordered>
+                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
+                            <q-item :key="index" dense clickable >
+                                <q-item-section>
+                                    <q-item-label>
+                                        {{ item.label }}
+                                    </q-item-label>
+                                </q-item-section>
+                                <q-item-section side>
+                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+                                </q-item-section>
+                            </q-item>
+                        </q-virtual-scroll>
+                      </q-list>
+                    </div>
+                    <!-- <div v-else class="row q-mt-lg">
+                    </div> -->
+                </div>
+                <!-- <q-separator /> -->
+            </q-card-section>
+            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
+                <div class="row">
+                    <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
+                    <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
+                </div>
+            </q-card-section>
+        </q-card>
+     </div>
+
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
+
+        <div class="q-mx-md q-mb-lg">
+            <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
+
+            <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
+                <div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
+                <q-space />
+                <div>
+                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
+                        showSelectApp = true;
+                    }"></q-btn>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="!showSelectApp && selectedField.app?.name">
+            <div>
+                <div class="row q-mb-md">
+                    <!-- <div class="col"> -->
+                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
+                    <!-- </div> -->
+                    <q-space />
+                    <!-- <div class="col"> -->
+                    <div class="q-mr-md">
+                      <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
+                          <template v-slot:before>
+                              <q-icon name="search" />
+                          </template>
+                      </q-input>
+                    </div>
+                </div>
+                <div class="row">
+                    <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
+                </div>
+            </div>
+        </div>
+        <div style="min-width: 45vw;" v-else>
+        </div>
+
+    </show-dialog>
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
+        <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+
+        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+    </show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import AppSelect from '../AppSelect.vue';
+interface IApp{
+  id:string,
+  name:string
+}
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+
+interface IAppFields{
+   app?:IApp,
+   fields:IField[]
+}
+
+export default defineComponent({
+    inheritAttrs:false,
+    name: 'FieldInput',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelect,
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        },
+        selectType:{
+            type:String,
+            default:'single'
+        }
+    },
+    setup(props, { emit }) {
+        const appDlg = ref();
+        const fieldDlg = ref();
+        const show = ref(false);
+        const showSelectApp = ref(false);
+       const selectedField = ref<IAppFields>({
+          app:undefined,
+          fields:[]
+       });
+       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
+         selectedField.value=props.modelValue as IAppFields;
+       }
+        const store = useFlowEditorStore();
+
+        const isSelected = computed(() => {
+            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
+        });
+
+        const showDg = () => {
+            show.value = true;
+        };
+
+        const clear = () => {
+            selectedField.value ={
+              fields:[]
+            } ;
+        }
+
+        const closeAppDlg = (val: string) => {
+            if (val == 'OK') {
+                selectedField.value.app = appDlg.value.selected[0];
+                selectedField.value.fields=[];
+                showSelectApp.value=false;
+            }
+        };
+
+        const closeFieldDialog=(val:string)=>{
+          if (val == 'OK') {
+                selectedField.value.fields = fieldDlg.value.selected;
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
+          // selectedField.value.app = newAppinfo
+        }
+
+        const updateItems = (newFields:IField[]) => {
+          // selectedField.value.fields = newFields
+        }
+
+        const removeField=(index:number)=>{
+          selectedField.value.fields.splice(index,1);
+        }
+        watchEffect(() => {
+            emit('update:modelValue', selectedField.value);
+        });
+
+        return {
+            store,
+            appDlg,
+            fieldDlg,
+            show,
+            showDg,
+            closeAppDlg,
+            closeFieldDialog,
+            selectedField,
+            showSelectApp,
+            isSelected,
+            updateExternalSelectAppInfo,
+            filter: ref(),
+            updateItems,
+            clear,
+            fieldFilter: ref(),
+            removeField
+        };
+    }
+});
+</script>
--- a/frontend/src/components/right/ColorPicker.vue
+++ b/frontend/src/components/right/ColorPicker.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="" v-bind="$attrs">
+        <q-field v-model="color" :label="displayName" labelColor="primary"  :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+            <template v-slot:control>
+                <q-chip text-color="black" color="white" v-if="isSelected">
+                    <div class="row">
+                        <div class="col-4">
+                            <q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
+                        </div>
+                        <div class="col">
+                            {{ color }}
+                        </div>
+                    </div>
+                </q-chip>
+            </template>
+            <template v-slot:append>
+                <q-icon name="colorize" class="cursor-pointer" color="primary" >
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-color no-header default-view="palette" v-model="color" />
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+            <template v-slot:hint>
+                {{ placeholder }}
+            </template>
+        </q-field>
+
+
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref,watchEffect } from 'vue';
+export default defineComponent({
+    inheritAttrs:false,
+    name: 'ColorPicker',
+    components: {
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        hint: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: String,
+            default: null
+        },
+    },
+
+    setup(props, { emit }) {
+        const color = ref(props.modelValue??"");
+        const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
+        watchEffect(()=>{
+          emit('update:modelValue', color.value);
+        });
+        return {
+            color,
+            isSelected
+        };
+    }
+});
+</script>
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -1,18 +1,20 @@
 <template>
-  <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
-    <template v-slot:control >
-      <q-card flat class="full-width">
-        <q-card-actions vertical>
-          <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
-        </q-card-actions>
-        <q-card-section class="text-caption" >
-          <div v-if="!isSetted">{{ placeholder }}</div>
-          <div v-else>{{ conditionString }}</div>
-        </q-card-section>
-      </q-card>
-    </template>
-  </q-field>
-  <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
+  <div v-bind="$attrs">
+    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
+      <template v-slot:control >
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption" >
+            <div v-if="!isSetted">{{ placeholder }}</div>
+            <div v-else>{{ conditionString }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+    <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
+  </div>
 </template>

  <script lang="ts">
@@ -21,6 +23,7 @@
  import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
  export default defineComponent({
    name: 'FieldInput',
+    inheritAttrs:false,
    components: {
      ConditionEditor
    },
--- a/frontend/src/components/right/DatePicker.vue
+++ b/frontend/src/components/right/DatePicker.vue
@@ -1,18 +1,19 @@
 <template>
-
-  <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
-    <template v-slot:append>
-      <q-icon name="event" class="cursor-pointer">
-        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-          <q-date v-model="selectedDate">
-            <div class="row items-center justify-end">
-              <q-btn v-close-popup label="Close" color="primary" flat />
-            </div>
-          </q-date>
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="selectedDate">
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
@@ -20,6 +21,7 @@ import { defineComponent, ref ,watchEffect} from 'vue';

 export default defineComponent({
  name: 'DatePicker',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/components/right/EventSetter.vue
+++ b/frontend/src/components/right/EventSetter.vue
@@ -1,9 +1,11 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
-    <template v-slot:append>
-      <q-btn round dense flat icon="add" @click="addButtonEvent()" />
-    </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
+      <template v-slot:append>
+        <q-btn round dense flat icon="add" @click="addButtonEvent()" />
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
@@ -13,6 +15,7 @@ import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';

 export default defineComponent({
  name: 'EventSetter',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -1,49 +1,52 @@
 <template>
-<q-field v-model="selectedField" :label="displayName" labelColor="primary"
-        :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
-  <template v-slot:control >
-    <q-chip  color="primary" text-color="white"  v-if="isSelected">
-      {{ selectedField.name }}
-    </q-chip>
-  </template>
-  <!-- <template v-slot:hint v-if="isSelected">
-    <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
-  </template> -->
-  <template v-slot:hint v-if="!isSelected">
-    {{ placeholder }}
-  </template>
+  <div v-bind="$attrs">
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
+      :bottom-slots="!isSelected">
+      <template v-slot:control>
+        <q-chip color="primary" text-color="white" v-if="isSelected">
+          {{ selectedField.name }}
+        </q-chip>
+      </template>
+      <!-- <template v-slot:hint v-if="isSelected">
+        <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
+      </template> -->
+      <template v-slot:hint v-if="!isSelected">
+        {{ placeholder }}
+      </template>

-  <template v-slot:append>
-  <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
-  </template>
-</q-field>
-<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-  <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
-</show-dialog>
+      <template v-slot:append>
+        <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
+      </template>
+    </q-field>
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
+      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+    </show-dialog>
+  </div>
 </template>

 <script lang="ts">
-import { defineComponent, ref ,watchEffect,computed} from 'vue';
+import { defineComponent, ref, watchEffect, computed } from 'vue';
 import ShowDialog from '../ShowDialog.vue';
 import FieldSelect from '../FieldSelect.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
-interface IField{
-  name:string,
-  code:string,
-  type:string
+interface IField {
+  name: string,
+  code: string,
+  type: string
 }
 export default defineComponent({
  name: 'FieldInput',
+  inheritAttrs:false,
  components: {
    ShowDialog,
    FieldSelect,
  },
  props: {
-    displayName:{
+    displayName: {
      type: String,
      default: '',
    },
-    name:{
+    name: {
      type: String,
      default: '',
    },
@@ -51,7 +54,7 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    hint:{
+    hint: {
      type: String,
      default: '',
    },
@@ -66,15 +69,15 @@ export default defineComponent({
    const show = ref(false);
    const selectedField = ref(props.modelValue);
    const store = useFlowEditorStore();
-    const isSelected = computed(()=>{
-      return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+    const isSelected = computed(() => {
+      return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
    });

    const showDg = () => {
      show.value = true;
    };

-    const closeDg = (val:string) => {
+    const closeDg = (val: string) => {
      if (val == 'OK') {
        selectedField.value = appDg.value.selected[0];
      }
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -1,18 +1,34 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label/>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" v-model="inputValue" label-color="primary"
+    :placeholder="placeholder" stack-label
+    :rules="rulesExp"
+    :maxlength="maxLength"
+    >
+      <template v-slot:append v-if="hint !== ''">
+        <q-icon name="help" size="22px" color="blue-8">
+          <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
+            <div class="hint-text" v-html="hint" />
+          </q-tooltip>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { kMaxLength } from 'buffer';
+import { defineComponent, ref, watchEffect } from 'vue';

 export default defineComponent({
  name: 'InputText',
+  inheritAttrs: false,
  props: {
-    displayName:{
+    displayName: {
      type: String,
      default: '',
    },
-    name:{
+    name: {
      type: String,
      default: '',
    },
@@ -20,26 +36,44 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    hint:{
+    hint: {
      type: String,
      default: '',
    },
+    maxLength:{
+      type: Number,
+      default:undefined
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
    modelValue: {
      type: String,
      default: '',
    },
  },

-  setup(props , { emit }) {
+  setup(props, { emit }) {
    const inputValue = ref(props.modelValue);
-
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
    watchEffect(() => {
      emit('update:modelValue', inputValue.value);
    });

    return {
      inputValue,
+      showhint: ref(false),
+      rulesExp
    };
  },
 });
 </script>
+<style lang="scss">
+.hint-text {
+  white-space: always;
+  max-width: 450px;
+  font-size: 1.2em;
+}
+</style>
--- a/frontend/src/components/right/MuiltInputText.vue
+++ b/frontend/src/components/right/MuiltInputText.vue
@@ -1,18 +1,22 @@
 <template>
-  <q-input :label="displayName"   label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
+      stack-label />
+  </div>
 </template>

 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { defineComponent, ref, watchEffect } from 'vue';

 export default defineComponent({
  name: 'MuiltInputText',
+  inheritAttrs: false,
  props: {
-    displayName:{
+    displayName: {
      type: String,
      default: '',
    },
-    name:{
+    name: {
      type: String,
      default: '',
    },
@@ -20,7 +24,7 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    hint:{
+    hint: {
      type: String,
      default: '',
    },
--- a/frontend/src/components/right/MultiFieldInput.vue
+++ b/frontend/src/components/right/MultiFieldInput.vue
--- a/frontend/src/components/right/NumInput.vue
+++ b/frontend/src/components/right/NumInput.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="" v-bind="$attrs">
+    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
+     :min="min"
+     :max="max"
+     :rules="rulesExp"
+     >
+      <template v-slot:hint>
+        {{ placeholder }}
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+export default defineComponent({
+  name: 'NumInput',
+  inheritAttrs:false,
+  components: {
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    min:{
+      type:Number,
+      default:undefined
+    },
+    max:{
+      type:Number,
+      default:undefined
+    },
+    //[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
+    modelValue: {
+      type: [Number , String],
+      default: undefined
+    },
+  },
+
+  setup(props, { emit }) {
+    const numValue = ref(props.modelValue);
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
+    const isError = computed(()=>{
+      const val = numValue.value;
+      if (val === undefined) {
+        return false;
+      }
+      const numVal = typeof val === "string" ? parseInt(val) : val;
+      // Ensure parsed value is a valid number
+      if (isNaN(numVal)) {
+        return true;
+      }
+      // Check against min and max boundaries, if defined
+      if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
+        return true;
+      }
+      return false;
+    });
+
+    watchEffect(()=>{
+      emit("update:modelValue",numValue.value);
+    });
+    return {
+      numValue,
+      rulesExp
+    };
+  }
+});
+</script>
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div v-for="(item, index) in properties" :key="index" >
-      <component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
+      <component :is="item.component" v-bind="item.props"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
    </div>
  </div>
 </template>
@@ -15,9 +15,12 @@ import InputText from '../right/InputText.vue';
 import SelectBox from '../right/SelectBox.vue';
 import DatePicker from '../right/DatePicker.vue';
 import FieldInput from '../right/FieldInput.vue';
+import AppFieldSelect from './AppFieldSelect.vue';
 import MuiltInputText from '../right/MuiltInputText.vue';
 import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
+import ColorPicker from './ColorPicker.vue';
+import NumInput from './NumInput.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';

 export default defineComponent({
@@ -27,9 +30,12 @@ export default defineComponent({
    SelectBox,
    DatePicker,
    FieldInput,
+    AppFieldSelect,
    MuiltInputText,
    ConditionInput,
-    EventSetter
+    EventSetter,
+    ColorPicker,
+    NumInput
  },
  props: {
    nodeProps: {
--- a/frontend/src/components/right/PropertyPanel.vue
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -11,7 +11,7 @@
         elevated
         overlay
       >
-        <q-card class="column full-height" style="width: 300px">
+        <q-card class="column" style="max-width: 300px;min-height: 100%">
         <q-card-section>
           <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
         </q-card-section>
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,5 +1,7 @@
 <template>
+  <div v-bind="$attrs">
  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
+</div>
 </template>

 <script lang="ts">
@@ -7,6 +9,7 @@ import { defineComponent,ref,watchEffect } from 'vue';

 export default defineComponent({
  name: 'SelectBox',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1 +1,25 @@
 // app global css in SCSS form
+::-webkit-scrollbar {
+  height: 12px;
+  width: 14px;
+  background: transparent;
+  z-index: 12;
+  overflow: visible;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: #c1c1c1;
+  border-radius: 10px;
+  z-index: 12;
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  transition: background-color .32s ease-in-out;
+  margin: 4px;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #c1c1c1;
+}
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -33,8 +33,15 @@
      </div>
      <PropertyPanel :actionNode="store.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
    </q-layout>
-    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
-      <action-select ref="appDg" name="model" type="single"></action-select>
+    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
+      <template v-slot:toolbar>
+        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <action-select ref="appDg" name="model" :filter="filter"  type="single"></action-select>
    </ShowDialog>

  </q-page>
@@ -70,6 +77,7 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const drawerRight = ref(false);
+const filter=ref("");
 const model = ref("");
 const addActionNode = (action: IActionNode) => {
  // refFlow.value?.actionNodes.push(action);
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -447,7 +447,7 @@ export class ActionFlow implements IActionFlow {

  getPrevVarNames(prevNode:IActionNode):IActionVariable[]{
    let varNames:IActionVariable[]=[];
-    if(prevNode.varName!==undefined){
+    if(prevNode.varName!==undefined && prevNode.varName.modelValue){
      varNames.unshift({
        actionName:prevNode.name,
        displayName:prevNode.varName.displayName,
--- a/plugin/kintone-addins/package.json
+++ b/plugin/kintone-addins/package.json
@@ -8,7 +8,8 @@
    "build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
    "build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
    "preview": "vite preview",
-    "ngrok": "ngrok http http://localhost:4173/"
+    "ngrok":"ngrok http http://localhost:4173/",
+    "vite":"vite dev"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.24",
--- a/plugin/kintone-addins/readme.md
+++ b/plugin/kintone-addins/readme.md
@@ -68,6 +68,10 @@
 | modelValue  | 空文字             | コンポーネントの初期値を設定します。<br>初期設定ないの場合は空文字で設定する。
 | name        | field              | 属性の設定値の名前です。   |
 | placeholder | 対象項目を選択してください| 入力フィールドに表示されるプレースホルダーのテキストです。この場合は設定されていません。          |
+| hint        | 説明文| 長い説明文を設定することが可能です。（markdown形式サポート予定、現在HTML可能）          |
+| selectType  |`single` or `multiple`| フィールド選択・他のアプリのフィールド選択の選択モードを設定する         |
+
+

 ### 使用可能なコンポーネント
 | No. | コンポーネント名      | コンポーネントタイプ | 説明                                     |
--- a/sample.json
+++ b/sample.json
@@ -2,25 +2,22 @@
  "id": "",
  "actionNodes": [
    {
-      "id": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
-      "name": "app.record.create.submit",
+      "id": "c5cd772a-04be-418e-a811-3787f98a2285",
+      "name": "app.record.create.show",
      "title": "レコード追加画面",
-      "subTitle": "保存をクリックしたとき",
+      "subTitle": "レコード追加画面を表示した後",
      "inputPoint": "",
      "outputPoints": [],
      "isRoot": true,
      "actionProps": [],
      "ActionValue": {},
-      "nextNodeIds": [
-        [
-          "",
-          "dfa6df09-7b3e-4848-89ad-2e9147004f31"
-        ]
-      ]
+      "nextNodeIds": {
+        "": "1eb097b1-9d08-462e-97b0-6e3e1232edef"
+      }
    },
    {
-      "id": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
-      "name": "自動採番する",
+      "id": "1eb097b1-9d08-462e-97b0-6e3e1232edef",
+      "name": "属性UIテスト用",
      "inputPoint": "",
      "outputPoints": [],
      "actionProps": [
@@ -31,185 +28,86 @@
            "displayName": "表示名",
            "placeholder": "表示を入力してください",
            "hint": "",
-            "modelValue": "文書番号を自動採番する"
+            "modelValue": "属性UIテスト用"
          }
        },
        {
-          "component": "FieldInput",
+          "component": "AppFieldSelect",
          "props": {
-            "displayName": "採番項目",
+            "displayName": "フィールド選択(複数)",
            "modelValue": {
-              "name": "文書番号",
-              "type": "SINGLE_LINE_TEXT",
-              "code": "文書番号",
-              "label": "文書番号",
-              "noLabel": false,
-              "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
-              "defaultValue": ""
+              "app": {
+                "id": "64",
+                "name": "日報テスト",
+                "description": "日々の業務内容、報告事項、所感などを記載していくアプリです。\n記録を行うだけでなく、あとからの振り返りやメンバー間のコミュニケーションにも活用できます。",
+                "createdate": "2023/07/15 10:15:03"
+              },
+              "fields": [
+                {
+                  "name": "ステータス",
+                  "type": "STATUS",
+                  "code": "ステータス",
+                  "label": "ステータス",
+                  "enabled": false
+                }
+              ]
            },
-            "name": "field",
-            "placeholder": "採番項目を選択してください"
+            "name": "selectFields",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "multiple"
          }
        },
        {
-          "component": "InputText",
+          "component": "AppFieldSelect",
          "props": {
-            "displayName": "フォーマット",
-            "modelValue": "000000",
-            "name": "format",
-            "placeholder": "数値書式文字列を指定します"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "前につける文字列",
-            "modelValue": "",
-            "name": "prefix",
-            "placeholder": "前につける文字列を入力してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "後ろにつける文字列",
-            "modelValue": "{$format('yyyyMMdd')}",
-            "name": "suffix",
-            "placeholder": "後ろにつける文字列を入力してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "docNumber",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
-          }
-        }
-      ],
-      "prevNodeId": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
-      "nextNodeIds": [
-        [
-          "",
-          "b32bf329-f05a-486f-9b79-9920b57fe324"
-        ]
-      ]
-    },
-    {
-      "id": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "name": "条件式",
-      "inputPoint": "",
-      "outputPoints": [
-        "はい",
-        "いいえ"
-      ],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "条件式を設定する"
-          }
-        },
-        {
-          "component": "ConditionInput",
-          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"部署\",\"objectType\":\"field\",\"type\":\"DROP_DOWN\",\"code\":\"ドロップダウン\",\"label\":\"部署\",\"noLabel\":false,\"required\":false,\"options\":{\"総務\":{\"label\":\"総務\",\"index\":\"2\"},\"サポート\":{\"label\":\"サポート\",\"index\":\"3\"},\"マーケティング\":{\"label\":\"マーケティング\",\"index\":\"1\"},\"営業\":{\"label\":\"営業\",\"index\":\"0\"},\"開発\":{\"label\":\"開発\",\"index\":\"4\"}},\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":2,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"所感、学び\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行__0\",\"label\":\"所感、学び\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":3,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"業務内容\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行_\",\"label\":\"業務内容\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":4,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"ステータス\",\"objectType\":\"field\",\"type\":\"STATUS\",\"code\":\"ステータス\",\"label\":\"ステータス\",\"enabled\":true},\"operator\":\"=\",\"value\":\"作成中\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "conditionResult",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
-          }
-        }
-      ],
-      "prevNodeId": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
-      "nextNodeIds": [
-        [
-          "いいえ",
-          "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a"
-        ]
-      ]
-    },
-    {
-      "id": "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a",
-      "name": "表示／非表示",
-      "inputPoint": "いいえ",
-      "outputPoints": [],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "指定項目の表示・非表示を設定する"
-          }
-        },
-        {
-          "component": "FieldInput",
-          "props": {
-            "displayName": "フィールド",
+            "displayName": "フィールド選択(単一)",
            "modelValue": {
-              "name": "文書番号",
-              "type": "SINGLE_LINE_TEXT",
-              "code": "文書番号",
-              "label": "文書番号",
-              "noLabel": false,
-              "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
-              "defaultValue": ""
+              "app": {
+                "id": "58",
+                "name": "日報",
+                "description": "",
+                "createdate": "2023/07/13 19:05:26"
+              },
+              "fields": [
+                {
+                  "name": "所感、学び",
+                  "type": "MULTI_LINE_TEXT",
+                  "code": "文字列__複数行__0",
+                  "label": "所感、学び",
+                  "noLabel": false,
+                  "required": false,
+                  "defaultValue": ""
+                }
+              ]
            },
-            "name": "field",
-            "placeholder": "対象項目を選択してください"
+            "name": "selectField",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "single"
          }
        },
        {
-          "component": "SelectBox",
+          "component": "ColorPicker",
          "props": {
-            "displayName": "表示／非表示",
-            "options": [
-              "表示",
-              "非表示"
-            ],
-            "modelValue": "非表示",
-            "name": "show",
-            "placeholder": ""
+            "displayName": "色選択",
+            "modelValue": "#f50000",
+            "name": "color",
+            "placeholder": "カラーを選択してください"
          }
        },
        {
-          "component": "ConditionInput",
+          "component": "NumInput",
          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{},\"operator\":\"=\",\"value\":\"\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
+            "displayName": "数値入力フィールド",
+            "modelValue": 100,
+            "name": "num",
+            "max": 100,
+            "min": 0,
+            "placeholder": "数値を入力してください"
          }
        }
      ],
-      "prevNodeId": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "nextNodeIds": []
+      "prevNodeId": "c5cd772a-04be-418e-a811-3787f98a2285",
+      "nextNodeIds": {}
    }
  ]
 }
--- a/sample2.json
+++ b/sample2.json
@@ -2,36 +2,54 @@
    {
        "component": "InputText",
        "props": {
-            "displayName": "ボタン名",
+            "displayName": "文字入力",
            "modelValue": "",
-            "name": "buttonName",
-            "placeholder": "ボタンのラベルを入力してください"
+            "name": "str",
+            "placeholder": "文字を入力してください",
+            "maxLength":"20",
+            "hint":"文字列入力<br>入力ルール指定可能。ルールの設定例：[val=>!!val||'必須入力です']",
+            "rules":"[val=>!!val||'必須入力です']"
        }
    },
    {
-        "component": "SelectBox",
+        "component": "AppFieldSelect",
        "props": {
-            "displayName": "追加位置",
-            "modelValue": "",
-            "name": "position",
-            "options":[
-                "一番右に追加する",
-                "一番左に追加する"
-            ],
-            "placeholder": "追加位置を選択してください"
+            "displayName": "フィールド選択(複数)",
+            "modelValue": {},
+            "name": "selectFields",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType":"multiple"
        }
    },
    {
-        "component": "EventSetter",
+        "component": "AppFieldSelect",
        "props": {
-            "displayName": "イベント名",
+            "displayName": "フィールド選択(単一)",
+            "modelValue": {},
+            "name": "selectField",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType":"single"
+        }
+    },
+    {
+        "component": "ColorPicker",
+        "props": {
+            "displayName": "色選択",
            "modelValue": "",
-            "name": "eventName",
-            "connectProps":[{
-                "key":"displayName",
-                "propName":"buttonName"
-            }],
-            "placeholder": "イベント名を入力してください"
+            "name": "color",
+            "placeholder": "カラーを選択してください"
+        }
+    },
+    {
+        "component": "NumInput",
+        "props": {
+            "displayName": "数値入力フィールド",
+            "modelValue": "",
+            "name": "num",
+            "max":100,
+            "min":0,
+            "placeholder": "数値を入力してください",
+            "rules":"[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']"
        }
    }
-]
+]