form-js icon indicating copy to clipboard operation
form-js copied to clipboard

Allow custom events to be thrown

Open marstamm opened this issue 4 years ago • 11 comments

Is your feature request related to a problem? Please describe

As a Platform Tasklist user, I want to trigger an escalation or error event from my form.

Describe the solution you'd like

Allow custom Events to be thrown within custom elements using the event emitter. The implementation details could be handled in custom elements which can be used in the Platform, even if Zeebe does not support this functionality yet.

Describe alternatives you've considered

  • Have error and escalation buttons as part of the core feature set. This would introduces implementation details about BPMN errors into the core functionality.
  • Handle errors and escalations outside of the form. As not every Task has escalation or error events and user-defined messages can be part of the error message, this would not be flexible enough to fit the customers needs.

Additional context

This is a nice to have and is not required for the first iteration.

Docs related to the functionality in Camunda Platform: Rest API: https://docs.camunda.org/manual/7.14/reference/rest/task/post-bpmn-escalation/ https://docs.camunda.org/manual/7.14/reference/rest/task/post-bpmn-error/

Embedded Forms: https://docs.camunda.org/manual/7.14/reference/embedded-forms/controls/bpmn-buttons/

marstamm avatar Feb 10 '21 11:02 marstamm

To better understand the overall scenario, could you back up your issue with a simple, real world scenario?

How would that throw button look like?

What data would be passed? Would it depend on user input?

nikku avatar Feb 10 '21 13:02 nikku

I will try my best :)

Real life scenario In a human task workflow to review invoices. In case the Invoice is missing details, such as the correct Tax-ID, I want to trigger an error boundary event by clicking on a "Invoice incomplete" button in the form. image

The button would be styled like the default button with custom label.

Data to be passed

  • error or escalation ID: this does not depend on user input and is needed to identify which error event is triggered.
  • (optional) error message: In case the user wants to add details for the error. This would depend on user input.
  • Variables: The Form can still be completed and variable changes submitted. I am open to discuss if this would be the expected behavior or if the edit should be "aborted"

marstamm avatar Feb 11 '21 08:02 marstamm

Thanks, I do understand better now.

From the core form renderer point of view that is likely two different kinds of submit buttons, that trigger submit of different data.

From the Form SDK perspective, that is handling the different submits and triggering the respective follow up actions.

We'll keep this one on the back of our heads. Thanks for reporting.

nikku avatar Feb 11 '21 13:02 nikku

Given the nature of this library (a pure form renderer / editor) we're inclined to not add such feature.

Do you see a way to handle the custom events use-case outside the form? Especially when you have external submit buttons, adding an extra button that extracts some form element value and does not complete but trigger an error seems to be straight forward to me.

nikku avatar Feb 17 '21 15:02 nikku

@marstamm any feedback on https://github.com/bpmn-io/camunda-forms/issues/3#issuecomment-780635394?

nikku avatar Feb 22 '21 13:02 nikku

Sorry for not getting back to you, I wanted to run our options by product management first :)

In our case, external buttons would not be feasible, as Tasklist uses forms provided by the user. Not all Tasks will have error boundaries, so we need information whether the Form contains "error fields". We could define naming convention for error fields, but that would be inconvenient for the user.

@ThorbenLindhauer and me would like to discuss the possibilities in the next cross-team sync

marstamm avatar Feb 22 '21 14:02 marstamm

Next step: Get a end-to-end example to work with further regarding this topic.

nikku avatar Feb 25 '21 10:02 nikku

We created the following example to showcase what we would need from the form integration: diagram This Task uses 2 different error events, distinguished by the error code. The second one uses the optional error message. In the form, it could look like this if we embedd the buttons into the form form-embedded-buttons Here, the error would be handled by Tasklist the same as a submit, e.g. with an form.on('errorTrigger') event. The event needs the error code and message.

If we want to use external submit buttons form-external-buttons The schema needs to contain information whether errors are possible, as well as the error codes and labels. We could reuse the programatic submit event if we know which element could contain the error message.

marstamm avatar Mar 18 '21 14:03 marstamm

Additionally to this, I would like to have the possibility to create any kind of event (free text) and react to it.

Example scenario is a Form, where a field is used to enter a search term. A button (that does not submit the complete form) will then throw a custom event (for example 'search') that my js this form is embedded to can be subscribed to with a custom function.

jonathanlukas avatar Feb 18 '22 15:02 jonathanlukas

Additionally to this, I would like to have the possibility to create any kind of event (free text) and react to it.

Could you share a mock-up of a form that requires this? Without having the full context I'd assume this is better handled via a custom form control.

nikku avatar Feb 21 '22 09:02 nikku

After our very insightful talk, I created this issue: 230. Please regard my comment on this as obsolete.

jonathanlukas avatar Feb 22 '22 08:02 jonathanlukas