How to pass a custom React JSX component into a TaskCard?

[jasonlunsford]

Hello Support Team,

We are evaluating TaskBoard and we are trying to determine to what degree we can customize the content rendered within the TaskCard. So far the only luck we've had has been to wrap the contents passed to "html" in quotes - literally a string, as opposed to a component. For example:

  const Test = ({ name, description, priority }) => {
    return `<div>
        <h3>${name}</h3>
        <p>${description}</p>
        <p>${priority}</p>
      </div>`;
  };

  const taskRenderer = (params) => {
    const record = params.taskRecord.data;

params.cardConfig.children.body.children.details = {
  html: Test(record),
};
  };

  return (
    <>
        <BryntumTaskBoard
          tasks={props.data}
          taskRenderer={taskRenderer}
          {...taskBoardConfig}
        />
    </>
  );

Our goal is to pass an actual, complex JSX component into (or thru) the taskRenderer, such that we can embed additional functionality / UX into the card.

So, for example:

  const taskRenderer = (params) => {
    const record = params.taskRecord.data;

params.cardConfig.children.body.children.details = {
  html: <MyComplexComponent data={record} />,
};
  };

Is this possible, and if so how?

Thank you!

[marcio]

Hey jasonlunsford,

Currently, it's not supported to work as you described, but we already have a ticket for that here https://github.com/bryntum/support/issues/3972 and there are some possible workarounds being suggested there, please have a look at the ticket (I also added a note about your post there).

[jasonlunsford]

Great - thank you for the reply marcio. I noticed the request you mentioned was raised at the end of 2021. Are there any internal updates to this ticket? The workarounds mentioned in the thread you shared didn't work well for our use case, unfortunately.

[tasnim]

Hi,

No updates for now. Marcio added a comment that you've asked for this feature to prioritize the ticket.
To ensure you stay informed about any developments, I kindly encourage you to subscribe to the ticket. This way, you'll be notified promptly whenever there's progress or new information regarding the situation.

If you have any further questions or concerns, please don't hesitate to reach out. We're here to assist you in any way we can.

[jasonlunsford]

Hi tasnim, thank you for getting back to me. Let me ask you this: thinking broadly, is there a way to fully customize the Task Card to the point where I can inject custom components, styling, and so on? We want to use the TaskBoard functionality but provide our own UX for the cards themselves.

Any ideas?

[marcio]

Hey jasonlunsford,

Regarding the React wrapper, and rendering components, it's on the roadmap as you'll see in the ticket, so eventually will be available, if you want to increase the priority, you can contact our sales team and add a sponsorship to that feature.

Regarding styling and customization, we have this documentation that will help you on this https://bryntum.com/products/taskboard/docs/guide/TaskBoard/customization/taskcontents

If you have more help or clarification, please let us know.