Skip to main content

Vanilla usage

Flowable Forms provides an index-complete.js file that bundles all the dependencies. This way you can use Flowable Forms even if your application doesn't use a dependency manager (npm or yarn) or a bundler (webpack, parcel, rollup).

To use it, download the library from the repository and uncompress it in your web folder. This is an example HTML file that renders a form:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="flwforms.min.css" rel="stylesheet">
</head>

<body>
  <div id="frmOutcomes" style="display: flex"></div>

  This is the vanilla integration demo.
  <a href="#" id="getPayload">GetPayload</a>

  <div id="frmPlaceholder"></div>

  <div id="frmOutcomes2" style="display: flex"></div>

  <script src="polyfill.js"></script>
  <script src="index-complete.js"></script>
  <script>

  frmDef.outcomes = frmDef.outcomes || [];
  if (frmDef.outcomes.length === 0) {
    frmDef.outcomes.push({label: 'Complete', value: true, primary: true, enabled: "{{$formValid}}"});
    frmDef.outcomes.push({label: 'Save', value: '__SAVE'});
  }

  const { form: formPromise, destroy } = flwforms.render(document.getElementById("frmPlaceholder"), {
    config: frmDef,
    payload: { _selectedTab: "layout" },
    onChange: function(payload) {
      console.log("VALUE CHANGED", payload, value);
    },
    outcomesElement: [document.getElementById("frmOutcomes"), document.getElementById("frmOutcomes2")],
    onOutcomePressed: function(payload, value) {
      alert("Outcome called " + value + "\n" + JSON.stringify(payload, null, 2));
    },
    additionalData: {
      currentUser: {
        name: "Peppa",
        id: "P16"
      }
    }
  });

  formPromise.then(form => {
    document.getElementById("getPayload").addEventListener("click", function() {
      alert(JSON.stringify(form.getPayload(), null, 2));
    });
  });
  </script>
</body>

</html>

NOTE: To ensure that index-complete.js is working properly you need to load the HTML with UTF-8 charset.

The flwforms global object​

When you load the index-complete.js file you will have available the flwforms global object. This object provides:

flwforms.render​

render: (element: Element, props: FormProps) => { form: Promise<Form>, destroy: () => void }

It renders a form in the dom element. In the props attribute you need to pass the config (form definition) and you can optionally pass any other prop in the Form props. It returns an object containing:

  • the Form so you can call any of the Form methods from there
  • the destroy method to remove the element from the DOM

flwforms.edorasAdapter​

See edorasAdapter

flwforms._​

See utilities

Legacy​

warning

This is for versions of Flowable up to 3.15.1 If you are running the latest version of Flowable Design please check out flwforms.render

flwforms.render​

render: (element: Element, props: FormProps) => Form

It renders a form in the dom element. In the props attribute you need to pass the config (form definition) and you can optionally pass any other prop in the Form props. It returns a Form so you can call any of the Form methods from there

flwforms.destroy​

destroy: (element: Element) => void

This method can be used for removing elements which are generated by flwforms.render. The following example can be called for the form above:

flwforms.destroy(document.getElementById("frmPlaceholder"));
flwforms.destroy(document.getElementById("frmOutcomes"));
flwforms.destroy(document.getElementById("frmOutcomes2"));