Here is an example:
First, you need to create a custom formatter. If you have not done this yet, create a custom_formatters.js file in your /public/js folder. Add to that file:
dmx.Formatter('array', 'stringify', function (val) {
return JSON.stringify(val);
});
and add the following into the head tag of your layout if not already there:
<script src="/js/custom_formatters.js" defer></script>
Then create a content page that uses the layout:
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="test" appconnect="local" components="{dmxDatastore:{}}" -->
<script is="dmx-flow" id="flow_page_load" type="text/dmx-flow" autorun>{
run: {
action: "{{datastore_users.insert({profile: {first_name: 'John'+datastore_users.data.length, last_name: 'Smith'+datastore_users.data.length}, email: datastore_users.data.length+'john@smith.com', settings: {role: 'admin', new_user: true}})}}"
}
}</script>
<meta name="ac:route" content="/test">
<dmx-datastore id="datastore_users" session="true"></dmx-datastore>
<form id="form_upsert_users" is="dmx-serverconnect-form" method="post" action="/api/upsert_user">
<input id="hidden_user" name="users_stringified" type="hidden" class="form-control" dmx-bind:value="datastore_users.data.stringify()">
<button id="btn1" class="btn btn-primary" type="submit">Submit</button>
</form>
For this example, I’m just using a page flow to create a data store entry on each page load, but you can add entries to the data store, however you need. So the first time it loads, there will be 1 entry, then on refresh 2, etc.
Here is the datastore schema:
There is a form with a single hidden input and Its value is set to the datastore data using the custom formatter:
dmx-bind:value="datastore_users.data.stringify()"
So when you submit that form to a server connect api, you will have a payload like this:
The api can then simply reverse the stringify process and return a complex object which you can use in your api like any other data point:
In your api, you just always refer to “users” rather than the POST value. You won’t be able to see it all in the picker (unless you add that schema to the set value), so you will have to type in the element within users you want, but when you are dealing with dozens or even hundreds of data points, this makes for a very manageable structure.
