Custom Button to save bpmn generated json file to Database

Developers General
1

Dear Team,
I have asp.net core application where I implemented bpm form.js form-js: Form viewer and builder | Toolkits | bpmn.io

Now I want to add one button, on click of that button I want to save generated json file to database.

Here is my working example:

<body>
    <div id="form"></div>
    <button id="customButton">Custom Button</button>
    <script type="application/form-schema">
        {
          "schemaVersion": 1,
          "exporter": {
            "name": "form-js",
            "version": "0.1.0"
          },          
          "type": "default"
        }
    </script>

    <!--
      required editor script
    -->
    <script src="~/js/workflow/form-editor.umd.js" asp-append-version="true"></script>


    <script>
         document.getElementById('customButton').addEventListener('click', function ()
    {
            const formValues = {};

            // Find all input elements inside the form
            $('.fjs-form-container .fjs-input').each(function ()
            {
                const inputName = $(this).attr('name');
                const inputValue = $(this).val();
                formValues[inputName] = inputValue;
            });

            console.log(JSON.stringify(formValues, null, 2));
    });


        const schema = JSON.parse(
            document.querySelector('[type="application/form-schema"]').textContent
        );

        const container = document.querySelector('#form');

        FormEditor.createFormEditor({
            container,
            schema
        });
    </script>
</body>

Thanks in advance.

2

Hello @Anant_Jaiswal,

to achieve that you need use the saveSchema method from the form editor instance.

1 Like
3

Thank you so much @vsgoulart .
It helps.

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.