formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.87k stars 1.06k forks source link

Custom Builder with Resource - How to set Data as resource for a form #1113

Closed ssrini closed 1 year ago

ssrini commented 5 years ago

This is related to the question answered in #1103

Based on the above answer we are able to display the custom builder with the correct resources also for adding to form.

However while adding a Select list and setting the Data to Resource, the list of resources is not getting populated. Please note that we are not using a URL to load the form, but all the data for the form builder is being provided as JSON. When the data type is selected as Resource, the Resource drop down list is not populated with any entries and remains empty.

Please provide some guidance on how this can be achieved.

ssrini commented 5 years ago

Please note that we are trying with the JS builder with the data embedded (not the Angular plugin)

Formio.builder(document.getElementById('builder'), {components:[
  {
    type: 'textfield',
    label: 'First Name',
    key: 'firstName',
    input: true
  }
]}, {
  builder: {
  basic: {},
  advanced: { components:{
    form: false
  }},
  data: {},
  resources: {
    title:"Resource Fields",
    weight: 10000,
    groups: {
      equipment: {
        key: "equipment",
        title: "Equipment",
        weight: 10,
        components: [
          {
            key: "equipmentName",
            title: "Equipment Name",
            icon: "defaultInfo.icon",
            group: "equipment",
            schema: {
              autofocus: false,
              input: true,
              tableView: true,
              inputType: "text",
              inputMask: "",
              label: "Equipment Name",
              key: "equipmentName",
              placeholder: "",
              prefix: "",
              suffix: "",
              multiple: false,
              defaultValue: "",
              protected: false,
              unique: false,
              persistent: true,
              hidden: false,
              clearOnHide: true,
              spellcheck: true,
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                pattern: "",
                custom: "",
                customPrivate: false
              },
              conditional: {
                show: "",
                when: null,
                eq: ""
              },
              type: "textfield",
              labelPosition: "top",
              tags: [],
              properties: {}
            }
          },
          {
            key: "equipmentNumber",
            title: "Equipment Number",
            icon: "defaultInfo.icon",
            group: "equipment",
            schema: {
              autofocus: false,
              input: true,
              tableView: true,
              inputType: "number",
              label: "Equipment Number",
              key: "equipmentNumber",
              placeholder: "",
              prefix: "",
              suffix: "",
              defaultValue: "",
              protected: false,
              persistent: true,
              hidden: false,
              clearOnHide: true,
              validate: {
                required: false,
                min: "",
                max: "",
                step: "any",
                integer: "",
                multiple: "",
                custom: ""
              },
              type: "number",
              labelPosition: "top",
              tags: [],
              conditional: {
                show: "",
                when: null,
                eq: ""
              },
              properties: {}
            }
          }
        ]
      }
    }
  },
  layout: {
    components: {}
  }
}});
ssrini commented 5 years ago

Any help?

heather-formio commented 1 year ago

Closing this issue as it is stale. Please reopen a new issue if needed. Thank you!