[REACT] How can i use the custom widget in taskRenderer?

[jeff.wang]

Hi,

I want to use the custom widget in taskRenderer, i create a custom widget that is called 'Card',
Then i use it in taskRenderer like below code:

The card class is very simple like below:

export class Card extends Widget {
  static get configurable() {
    return {
      href: null,
      text: null,
    };
  }

  compose() {
    const { href, text } = this;

return {
  tag: 'a',
  href,
  text,
};
  }
}

The taskRenderer is like below:

export const taskRenderer = (
  { taskRecord, cardConfig }: any,
) => {
  const card = new Card({
    appendTo: cardConfig.children,
    text: 'Copyable link',
    href: '#foo',
  });
};

But the compile is error, I am confused for how to use the custom widget correctly.

[marcio]

Hi jeff.wang,

To use as you shared, with new Card, you will need to set a listener to be used after the task is rendered, when the Card could be attached to a rendered element, like this

 listeners: {
        renderTask: (event) => {
            new Card({
                appendTo: event.element,
                text: 'Copyable link',
                href: '#foo',
              });
        }
    }

[jeff.wang]

ok, thank you!