create highly dynamic input form components

Question

I would like to generate highly customizable input forms. From the external database I receive an object representing the structure of the required input form.

I will provide two examples

Document Example 1:

https://pastebin.com/xYCdJGwL

Document Example 2:

https://pastebin.com/5RY3bsfL

Explanation of the attributes:

• ID => The ID of that input field
• Value => The value of that input field and the default initialization
• Caption => The header title of that input field
• Datatype => The datatype represents the type of the value to return. Possible datatypes could be string, integer, float, datetime
• Cardinal => How many values need to get returned to the server? If it's 1 only one value needs to get returned, if it's n an uncertain amount of values get passed back to the server.
• Master => Are there any dependencies to other fields? If it's empty or "self" or "none" there are no dependencies. If there is a dependency, this input refers to other inputs. An example would be a dropdown component listening to a second dropdown component and changing its items to select when selecting an item in the other dropdown box.

Things get really tricky here.

What needs to get passed to the server?

It only expects the ID and the value from each form component. Each frontend application could solve the problem differently.

Here are some examples for dynamic input forms (the language is german but this shouldn't matter).

Implementation:

Each data object represents one input form. It creates one mask component and passes in the RESULT attribute

<template>
    <form class="mask" @submit.prevent="saveMask">
      <MaskItem v-for="maskItem in documentData" :key="maskItem.ID" :maskItemData="maskItem"/>
      <button id="btnSave" type="submit">
        Save
      </button>
    </form>
</template>

<script>
import MaskItem from "./maskItem.vue";

export default {
  name: "mask",
  components: {
    MaskItem
  },
  props: {
    documentData: Array /* The RESULT array from the document object */
  },
  methods: {
    saveMask: function(){
      // loop through all maskItems and get the ID and their value
    }
  }
};
</script>

The mask itself should create one input component per array item.

<template>
    <div class="maskItem">
        Item
    </div>
</template>

<script>
export default {
  name: "maskItem",
  props: {
    maskItemData: Object
  }
};
</script>

So I know I could solve this problem using JavaScript with 3000 lines of code (or more) full of if-statements. Is there a way creating text field components, number fields, date fields, ... by the delivered datatype and setup dependencies if needed?

As I mentioned the server only expects the ID and one or more values from that component so there could be multiple solutions to solve this.

Please let me know if some information are missing!

Answer 1

There are multiple challenges in your task:

1. Dynamic component creation
2. Complex component relationships
3. Saving the input

Suggestions:

1. Dynamic component creation should be done with dynamic components.
2. Components relationship is the hardest part IMHO, to solve it you need to better define the available options and build your component and surrounding code based on that, there is no magic here
3. To save the input - you should have a method or computed function to collect the needed data from the component array. It can be done by emitting custom events from the dynamic component.

P.S. You can search for library that already done that, or most of that