Submissions

What can be learned here:

  • defining a basic <fx-submission>
  • triggering a submission by using <fx-send> action
  • replacing data with submission
  • sending a message to the user with <fx-message> action

Ok, nice - we have a todo list that will be gone when we reload the browser or leave the page.

Make tutorial part 1 Pick up Milk

Todo

You have {count(instance()/task[@complete='true'])} completed tasks

Adding a submission

We need a way to store our data. Let’s add a submission which will go into our model

<fx-submission id="save"
               method="post"
               url="#echo"
               replace="instance"
               instance="todo-list">
</fx-submission>

Due to technical limitations on this static site we use the builtin ‘#echo’ target for this tutorial that will just return the data it gets in and replaces another instance with it. This is to simulate what is usually happening when sending data via http.

What does this do?

  1. We need to add an id to identify a submission
  2. This submission will send a POST request of the instance data to the URL ‘#echo’
  3. The response will replace the instance.
  4. The instance to be replaced is ’todo-list'

Triggering the save submission

To trigger a save operation you usually want a button.

    ... UI ...
    <fx-trigger>
        <button>Save</button>
        <fx-send submission="save"></fx-send>
    </fx-trigger>

Put together

Make tutorial part 1 Pick up Milk 1 false your todo list has been saved

Todo

You have {count(instance()/task[@complete='true'])} completed tasks

Watch the ‘Data Inspector’ on the right. Intially there will be 2 data instances listed by their id.

Data Inspector is a tool that helps during development to see the live content of your data instances. The instance live separate from the DOM and therefore cannot be seen in their actual state by inspecting with developer tools. You can just add it within any <fx-fore> element.

After hitting the ‘Save’ button the instance ’todo-list’ will be identical to the ‘default’ instance.

This means that our submission has been executed and has send its data to the ‘#echo’ submission, that gets back the same data and replaced the ‘saved-list’ instance.

Messaging the user

You may have noticed a message in the lower left after hitting ‘save’.

Let’s add the missing line i omitted from above code.

<fx-submission id="save"
               method="post"
               url="#echo"
               replace="instance"
               instance="saved-list">
   <fx-message event="submit-done">your todo list has been saved</fx-message>
</fx-submission>

This adds a <fx-message> element to the submission that will react to the ‘submit-done’ event that is fired when a submission successfully returned.

The message element defaults to a toast message that disappears after a delay.

With the event attribute the message action attaches to its parent element and reacts to ‘submit-done’ in this case.

This technique is used all over Fore to attach event handlers that in turn will run an action.