Custom App Connect components

Hey @george I’m loving so far developing components for App Connect. Before I started dabbling with this I handled frontend libraries with flows.

At first with page flows and recently with app flows. This was convenient to certain extent as it didn’t come without caveats. For instance, you can’t run more than one flow of the same type at the same time. A flow needs to end before you can run it again and this was inconvenient for some libraries.

After a few days of reverse engineering all the DMX components to understand and learn the possibilities I can now say that flows are not the way to handle third party js libraries. It’s via DMX components, Attributes and Actions. Flows are ok as a workaround.

So my ask(another one). After you guys deliver 4.0 can you give some additional love to AC extensibility?

a) Some documentation
b) UI support.

I know this is not as easy as the SC extension support because of all the implications and places you can access components(flows, bindings, events, attributes, etc) and also how they can interact between each and other and where they can be shown and where not.

It’s just so easy to write something like this:

dmx.Component("swal2", {
  attributes: {
    toast: { type: Boolean, default: !1 }
  },
  methods: {
    show: function (t) {
      if (this.props.toast) {
        let o = {
          position: 'top-end',
          showConfirmButton: false,
          timer: 5000,
          timerProgressBar: true,
          onOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
          }
        }
        t.text = ''
        t = Object.assign(t, o)
      }
      t = Object.assign(t, this.props)
      Swal.fire(t)
    },
  },
});

and

<dmx-swal2 id="swal2" toast></dmx-swal2>

<dmx-serverconnect id="serverconnect1" noload url="/api/example1" 
dmx-on:error="swal2.show({title: 'generic-error'.t(), icon : 'error'})" 
dmx-on:success="swal2.show({title: 'leave-success'.t(), icon : 'success'})">
</dmx-serverconnect>

To get a library like Sweetalert2 working with almost no effort and not having to write workarounds because appConnect.js is not loaded before the library is executed and all that.

The only thing remaining to put the icing on the cake is being able to access all this from the UI. And some documentation to make sure we are not screwing up anything. Reverse engineering can only take you so far if you don’t understand all the implications of the standard methods that App Connect(render, update, etc) has.