Usage

Form structure

Let's start with an mb-form element. This will contain all the other form elements. The mb-submit element listens to any click event within the form and acts as a trigger to submit the form.

<mb-form>
  <!-- To add more fields -->
  <mb-submit>
    <button>Submit</button>
  </mb-submit>
</mb-form>

We'll add a simple mb-input field to get the name of the user:

<mb-form>
  <mb-input path="name" label="What's your name?"></mb-input>
  <mb-submit>
    <button>Submit</button>
  </mb-submit>
</mb-form>

Exporting data

The mb-form emits a custom event when the submit button is clicked. Upon submitting the form, we usually need to perform some action like posting to a server. In this case, we'll get the mb-form element by id and add an event listner to log the event to the console.

<mb-form id="form">
  <mb-input path="name" label="What's your name?"></mb-input>
  <mb-submit>
    <button>Submit</button>
  </mb-submit>
</mb-form>

<script>
  // Pure javascript version of JQuery's $('document').ready
  document.addEventListener("DOMContentLoaded", () => {
    var form = document.getElementById("form");
    // Listen for mb-submit event
    form.addEventListner("mb-submit", (event) => {
      console.log(event.detail);
    });
  });
</script>

Output in the browser's console:

{
    "name": "Hello there"
}

Importing data

Now let's try to bind some data back into a blank form. This is especially useful while editing content.

<mb-form id="form">
  <mb-input path="name" label="What's your name?"></mb-input>
  <mb-submit>
    <button>Submit</button>
  </mb-submit>
</mb-form>

<script>
  // Pure javascript version of JQuery's $('document').ready
  document.addEventListener("DOMContentLoaded", () => {
    var form = document.getElementById("form");
    // Import openEHR flat compositions
    form.import({ name: "This data was already present" });
  });
</script>

Congratulations! You now know the basics of Medblocks UI!