Custom App Connect components

Feature Request
3

We don’t have documentation for it, but it looks like:

dmx.Component('my-custom-chart', {

  // attributes for the component (accessed by this.props)
  attributes: {
    type: {
      type: String,
      default: 'bar'
    },

    data: {
      type: Array,
      default: []
    }
  },

  // render method
  render: function(node) {
    // render chart here
    $(node).chart({
      type: this.props.type,
      data: this.props.data
    });
  },

  // update
  update: function(props) {
    // this.props contains the new properties
    // props argument were the previous properties
    // check here if something was changed and needs updating
    if (this.props.type !== props.type) {
      // update chart type
    }
  }

});

Above is then usable like:

<dmx-my-custom-chart type="pie" dmx-bind:data="query1"></dmx-my-custom-chart>

There is currently no integration with Wappler UI, so you need to edit your component within code view. Simple components can be created, more complex will need more knowledge about the internal working of App Connect. You can give it a try or wait until we integrate it with Wappler, have no ETA for that.

4 Likes