How can Use **Form Builder** (drag and drop) replacement embedd forms?

Camunda 7 Topics Discussion & Questions
,
1

Basically i want to use Form Builder drag and drop to give user more powerful
to build form .

it’s possible add Form Builder in Cammunda Modeler ?

and when user start task fill the form as embedd form not “Open external form” ?

2

You will need to buy of something custom to have the UI flow you are describing

3

@StephenOTT aha OK

There are two part :

**Admin Side ** : draw Process then create user task so need form so will be external form (Form Builder)
**User Side ** : start task then fill form (Form Builder) created from Admin .
it’s correct ?

Without this custom UI , how can me integration between them ? there are any example to follow it?

4

You can follow the outlines in Form Builder (Drag and Drop) + Form Server Validations or the outline that was explained in the other issue you opened

6

@StephenOTT i created process contains user task form will be form builder , how can save the JSON generated in process ?

Eample :

{
components: [
{
input: true,
tableView: true,
inputType: “text”,
inputMask: “”,
label: “First Name”,
key: “firstName”,
placeholder: “Enter your first name”,
prefix: “”,
suffix: “”,
multiple: false,
defaultValue: “”,
protected: false,
unique: false,
persistent: true,
validate: {
required: false,
minLength: “”,
maxLength: “”,
pattern: “”,
custom: “”,
customPrivate: false
},
conditional: {
show: false,
when: null,
eq: “”
},
type: “textfield”,
$$hashKey: “object:14”,
autofocus: false,
hidden: false,
clearOnHide: true,
spellcheck: true
},
{
input: true,
tableView: true,
inputType: “text”,
inputMask: “”,
label: “Last Name”,
key: “lastName”,
placeholder: “Enter your last name”,
prefix: “”,
suffix: “”,
multiple: false,
defaultValue: “”,
protected: false,
unique: false,
persistent: true,
validate: {
required: false,
minLength: “”,
maxLength: “”,
pattern: “”,
custom: “”,
customPrivate: false
},
conditional: {
show: false,
when: null,
eq: “”
},
type: “textfield”,
$$hashKey: “object:15”,
autofocus: false,
hidden: false,
clearOnHide: true,
spellcheck: true
},
{
type: “button”,
theme: “primary”,
disableOnInvalid: true,
action: “submit”,
block: false,
rightIcon: “”,
leftIcon: “”,
size: “md”,
key: “submit”,
tableView: false,
label: “Submit”,
input: true,
$$hashKey: “object:18”,
autofocus: false
}],
display: “form”,
page: 0
}
);

7