stephenott / camunda-formio-plugin Goto Github PK

Private props like validate when its a secret validation should likely not be passed as JSON

@StephenOTT I've been doing testing and I have the plug-in installed correctly and your "SomeProcess1" demo process working. When I start the process, there is a nice fancy form.

So as a test, I went to the hosted form builder URL and made a small test form and was simply going to replace the code in your MyStartForm.json file with the code of the form I built and re-deploy to see if I could work from your demo.

When I try to start the process, it does not render.

Replacing your original MyStartForm.json works again. Ok, so we have a definite issue.

I opened both my version and your version of the MyStartForm.json file and compared it. Below is the code for my version of the form.

The one things I noticed was my hosted builder code had 5 extra lines of code that were extra data elements at the top;

display form, settings { pdf { id 1ec0f8ee-6685-5d98-a847-26f67b67d6f0, src httpsfiles.form.iopdf5692b91fd1028f01000407e3file1ec0f8ee-6685-5d98-a847-26f67b67d6f0 } },

When I removed these lines and which made the code more in-line with your original format and deploy the code where it displays the simple form.

So I'm not sure if the Hosted Form Builder is possibly on a new/older version or what, but there definately seems like there might be an issue with rending the Hosted Form Builder JSON Code.

Below is the original code from the Hosted Form Builder.

{ display form, settings { pdf { id 1ec0f8ee-6685-5d98-a847-26f67b67d6f0, src httpsfiles.form.iopdf5692b91fd1028f01000407e3file1ec0f8ee-6685-5d98-a847-26f67b67d6f0 } }, components [ { label Name, placeholder Texas, description Please type your name., tooltip Please type your name., tableView true, key name, type textfield, input true }, { type button, label Submit, key submit, disableOnInvalid true, input true, tableView false } ] }

Can you help me how to add this plugin to tomcat distribution of camunda.

Is there an example BPMN file showing how to setup the variables and access them once the form is submitted?

"Under the API tab of a component create a custom property with the following format:"

Also, can you clarify what program you are in when you made this instruction?

Hey @StephenOTT ,

I looked through the documentation and was not able to find much on the actual creation of forms so I thought I would start a thread and help make a better tutorial.

Here are the steps I have done:

• Create Account on Form.io
• Create New Form
• Copy Embed JSON to Local File "Form.json"
• Paste Form Key "embedded:/forms/formio.html?deployment=Form.json
• Deploy through Postman
• Start Process Manually

When I tested the process in the tasklist I did not get any form and I'm not sure where to start testing.

What would you suggest?

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1hf56xc" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.1.1">
  <bpmn:process id="FormIOTest" isExecutable="true">
    <bpmn:startEvent id="StartEvent_1">
      <bpmn:outgoing>Flow_10lpabf</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:sequenceFlow id="Flow_10lpabf" sourceRef="StartEvent_1" targetRef="Activity_1cwkjt5" />
    <bpmn:userTask id="Activity_1cwkjt5" name="Test Form" camunda:formKey="embedded:/forms/formio.html?deployment=Form.json&#38;var=subWithServerValidation">
      <bpmn:incoming>Flow_10lpabf</bpmn:incoming>
      <bpmn:outgoing>Flow_1n9zxzx</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:endEvent id="Event_161cw66">
      <bpmn:incoming>Flow_1n9zxzx</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="Flow_1n9zxzx" sourceRef="Activity_1cwkjt5" targetRef="Event_161cw66" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="FormIOTest">
      <bpmndi:BPMNEdge id="Flow_1n9zxzx_di" bpmnElement="Flow_1n9zxzx">
        <di:waypoint x="380" y="117" />
        <di:waypoint x="452" y="117" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_10lpabf_di" bpmnElement="Flow_10lpabf">
        <di:waypoint x="215" y="117" />
        <di:waypoint x="280" y="117" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="99" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_09bbdei_di" bpmnElement="Activity_1cwkjt5">
        <dc:Bounds x="280" y="77" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_161cw66_di" bpmnElement="Event_161cw66">
        <dc:Bounds x="452" y="99" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

instead of having to configure the form setup with all of the details, lets create a Parse Listener that will auto-config the UT and Start Event forms with the form configurations:
Use Camunda Extension properties (Extension Tab in the Properties Panel in the Camunda Modeler) to add the various configurations.

Likely can just use the base64 upload within the form + do post processing to save it as a file variable?

Maybe have some additional logic to detect the file upload component and move that variable into a file variable in the file manager?

Currently appears like bugs to deal with in Tasklist:

https://forum.camunda.org/t/hidecompletebutton-being-reset-in-recent-camunda-versions/16302/4

https://forum.camunda.org/t/camsdk-can-you-hide-the-start-button/22301

currently the values are hardcoded and there are use cases where configuration would be desirable.

Camunda has a self-contained distro called Run. There is also a docker variant which I'm using.

As I'm a novice to Java, Tomcat, etc, I'm struggling to overlay your instructions onto Camunda Run. In particular, I'm reluctant to tinker with the internal folder as it implies "off limits" :).

Could some instructions to integrate this plugin into Camunda Run (docker variant) be created? Some ideas:

• craft a child Dockerfile to build a custom image with this plugin already "deployed"
• use -v [local file system]:[container file system] volume mapping(s) to inject this plugin at container start

I use the latter technique to inject my custom .bpmn files into the /configuration/resources folder. However, I've found that only resources in the same deployment (startupDeployment) can be referenced in form keys (embedded:deployment://). Whereas I'd prefer a once-off deployment of this plugin be accessible from all processes, even those done after startup (e.g. via Modeler).

Similar logic to how Nested Forms work

Maybe use a property similar to the fetchVariable to define camunda variable storage format. " storeAs: string sort of thing

• Formio CSS (URL)
• Font awesome CSS (URL)
• Formio JS (meta-inf/resources/webjars/camunda/app/tasklist/scripts)

Crud use case

So the user does not have to provide the /. Would be some logic added into formio.html

If you have a container with component, how do you do pre-population? The pre-populated variables are in parent scope. When cycling over each component, we need to detect what the path of the component is in the submission object, and then create that path in the submission object with the pre-population variable

features required:

• Support for Default Engine
• Support for Named Engine
• Support for UnAuth usage
• Support for Authenticated Usage (Authorization Checks based on authz code used for get-deployed-form endpoints)
• Support for Sub Forms
• Support for getting user task variables
• Ensure that all actions are occurring as part of the single parent Transaction / Context... currently they are not well structured for this...

So someone can write form validation for server side based on Camunda user

use case: a Select Component has a selected value and it is in the JSON, but we want to move this to the parent scope/process instance variable

Should variable resolution be allowed within a subform, or should it be the responsibility of the parent form?

Likely need to move the submission object into the variableManager right from the start.

Add proper plugin to support regular camunda deployments (spring and non-spring)

https://forum.camunda.org/t/on-embedded-form-error-can-you-prevent-the-overlay-notification-from-appearing/22302

The overlay should not appear or be auto-removed when it is a formio validation error response

Would also support more struck variable API lock down so the schema can just return a single set of variables used by the form and nothing else.

I have been trying for weeks to get this working in one of our custom forms. The Demo works great and I'm using it as a reference.

Here is the current error we are getting when we submit the form in our custom process.

Here is our setting in the Modeler.

I'm still not sure how the var is used. In an attempt to understand better, I searched in the Demo Process XML and the form JSON for "noPersitSubmission" but still puzzled exactly how to use the var parameter, but I'm not sure if this has anything to do with the error or not.

I have been working on this for weeks off and on and the only place I am able to get the forms to work properly is your demo process.

So in an effort to keep updated, I update to the Release v5 today and when I use the demo to submit the "Typical Form with Server Validation" User Task, I get the following error.

HTTP Status 404 – Not Found
Type Status Report

Message /validate

Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

An error happened while submitting the task form :
Cannot submit task form 5cd9ee12-0c5d-11eb-aca9-0a0027000003: <!doctype html><html lang="en"><head><title>HTTP Status 404 – Not Found</title><style type="text/css">h1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} h2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} h3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} body {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} b {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} p {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;} a {color:black;} a.name {color:black;} .line {height:1px;background-color:#525D76;border:none;}</style></head><body><h1>HTTP Status 404 – Not Found</h1><hr class="line" /><p><b>Type</b> Status Report</p><p><b>Message</b> &#47;validate</p><p><b>Description</b> The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.</p><hr class="line" /><h3>Apache Tomcat/9.0.24</h3></body></html>

Any help would be greatly appreciated..