Zeebe Simple Tasklist - taskForm upload via Modeler

BPMN & Modeling Discussion & Questions
1

Hi,

I am trying to play around with the Simple Tasklist, that works. It is easy to model the tasklist fields by adding them via the header fields in the Modeler:

Screenshot 2021-04-01 at 15.32.06
Screenshot 2021-04-01 at 15.32.061232×588 24.1 KB

Now the next step if the make the tasklist form a lil smarter, e.g. add a picklist to an input form.
It looks like Simple Tasklist has an option for it, named:

taskForm (HTML) - the form to show and provide the task data

Now I was expecting to simple paste the HTML content from https://raw.githubusercontent.com/camunda-community-hub/zeebe-simple-tasklist/master/src/test/resources/custom-task-form.html into the value field from the taskForm.

This results into the following XML taskobject in the BPMN file:

       <bpmn:serviceTask id="form-test" name="Form Test">
      <bpmn:extensionElements>
        <zeebe:taskDefinition type="user" />
        <zeebe:taskHeaders>
          <zeebe:header key="name" value="FormTest" />
          <zeebe:header key="description" value="Form Test" />
          <zeebe:header key="assignee" value="formuser" />
          <zeebe:header key="formFields" value="[{&#34;key&#34;:&#34;orderId&#34;,&#34;label&#34;:&#34;Order Id&#34;,&#34;type&#34;:&#34;string&#34;}]" />
          <zeebe:header key="taskForm" value="&#60;div class=&#34;border-bottom mb-2&#34;&#62;   	&#60;form&#62;   			 &#60;div class=&#34;form-group&#34;&#62; 				    &#60;label&#62;Order Id&#60;/label&#62; 				    &#60;input type=&#34;text&#34; id=&#34;orderId&#34; class=&#34;form-control&#34; value=&#34;{{orderId}}&#34; readonly&#62; 			   &#60;/div&#62; 			    			   &#60;div class=&#34;form-group&#34;&#62; 				    &#60;label&#62;Price&#60;/label&#62; 				    &#60;input type=&#34;text&#34; id=&#34;price&#34; class=&#34;form-control&#34; value=&#34;{{price}}&#34; readonly&#62; 			   &#60;/div&#62; 			    			   &#60;div class=&#34;form-group&#34;&#62; 				    &#60;label&#62;Comment&#60;/label&#62; 				    &#60;input type=&#34;text&#34; id=&#34;form_comment&#34; class=&#34;form-control&#34;&#62; 			   &#60;/div&#62; 		&#60;/form&#62; &#60;/div&#62;  &#60;div&#62;     &#60;button type=&#34;button&#34; class=&#34;btn btn-primary&#34; onclick=&#34;accept()&#34;&#62;Accept&#60;/button&#62;     &#60;button type=&#34;button&#34; class=&#34;btn btn-light&#34; onclick=&#34;reject()&#34;&#62;Reject&#60;/button&#62; &#60;/div&#62;			   &#60;script&#62; 	function accept() { 		var data = [{ 				key: &#34;accept&#34;, 				value: true 			}, { 				key: &#34;comment&#34;, 				value: document.getElementById(&#34;form_comment&#34;).value 			}]; 		 		completeTask(data); 	}	 	 	function reject() { 		var data = [{ 				key: &#34;accept&#34;, 				value: false 			}, { 				key: &#34;comment&#34;, 				value: document.getElementById(&#34;form_comment&#34;).value 			}]; 		 		completeTask(data); 	}	 &#60;/script&#62;" />
        </zeebe:taskHeaders>
      </bpmn:extensionElements>
      <bpmn:incoming>Flow_0vc4szk</bpmn:incoming>
      <bpmn:outgoing>Flow_0eaewib</bpmn:outgoing>
    </bpmn:serviceTask>

Is this the correct way to load a HTML taskform??

I can load the BPMN into the broker, but Simple Tasklist gives the following render error:

Screenshot 2021-04-01 at 15.35.26
Screenshot 2021-04-01 at 15.35.261752×510 49.6 KB

With the following error from the logs:

zeebe_tasklist | 2021-04-01 13:34:59.466  INFO 1 --- [ault-executor-0] io.zeebe.client.job.poller               : Activated 1 jobs for worker zeebe-simple-tasklist and job type user
zeebe_tasklist | com.samskivert.mustache.MustacheException$Context: No method or field with name 'orderId' on line 1
zeebe_tasklist | 	at com.samskivert.mustache.Template.checkForMissing(Template.java:344)
zeebe_tasklist | 	at com.samskivert.mustache.Template.getValue(Template.java:247)
zeebe_tasklist | 	at com.samskivert.mustache.Template.getValueOrDefault(Template.java:292)
zeebe_tasklist | 	at com.samskivert.mustache.Mustache$VariableSegment.execute(Mustache.java:872)
zeebe_tasklist | 	at com.samskivert.mustache.Template.executeSegs(Template.java:170)
zeebe_tasklist | 	at com.samskivert.mustache.Template.execute(Template.java:137)
zeebe_tasklist | 	at com.samskivert.mustache.Template.execute(Template.java:128)
zeebe_tasklist | 	at io.zeebe.tasklist.view.ViewController.renderTaskForm(ViewController.java:163)
zeebe_tasklist | 	at io.zeebe.tasklist.view.ViewController.lambda$allTaskList$5(ViewController.java:259)
zeebe_tasklist | 	at java.base/java.util.Optional.ifPresent(Optional.java:183)
zeebe_tasklist | 	at io.zeebe.tasklist.view.ViewController.allTaskList(ViewController.java:257)
zeebe_tasklist | 	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
zeebe_tasklist | 	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
zeebe_tasklist | 	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
zeebe_tasklist | 	at java.base/java.lang.reflect.Method.invoke(Method.java:566)
zeebe_tasklist | 	at org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:190)
zeebe_tasklist | 	at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:138)
zeebe_tasklist | 	at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:105)
zeebe_tasklist | 	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:879)
zeebe_tasklist | 	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:793)
zeebe_tasklist | 	at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)
zeebe_tasklist | 	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1040)
zeebe_tasklist | 	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943)
zeebe_tasklist | 	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)
zeebe_tasklist | 	at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898)
zeebe_tasklist | 	at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
zeebe_tasklist | 	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)
zeebe_tasklist | 	at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:320)
zeebe_tasklist | 	at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:126)
zeebe_tasklist | 	at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:90)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:118)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:137)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:111)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:158)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:63)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:200)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:116)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.csrf.CsrfFilter.doFilterInternal(CsrfFilter.java:117)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.header.HeaderWriterFilter.doHeadersAfter(HeaderWriterFilter.java:92)
zeebe_tasklist | 	at org.springframework.security.web.header.HeaderWriterFilter.doFilterInternal(HeaderWriterFilter.java:77)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.context.SecurityContextPersistenceFilter.doFilter(SecurityContextPersistenceFilter.java:105)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.context.request.async.WebAsyncManagerIntegrationFilter.doFilterInternal(WebAsyncManagerIntegrationFilter.java:56)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy.doFilterInternal(FilterChainProxy.java:215)
zeebe_tasklist | 	at org.springframework.security.web.FilterChainProxy.doFilter(FilterChainProxy.java:178)
zeebe_tasklist | 	at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:358)
zeebe_tasklist | 	at org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:271)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.springframework.boot.actuate.metrics.web.servlet.WebMvcMetricsFilter.doFilterInternal(WebMvcMetricsFilter.java:109)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)
zeebe_tasklist | 	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
zeebe_tasklist | 	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
zeebe_tasklist | 	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
zeebe_tasklist | 	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
zeebe_tasklist | 	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:541)
zeebe_tasklist | 	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
zeebe_tasklist | 	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
zeebe_tasklist | 	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
zeebe_tasklist | 	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
zeebe_tasklist | 	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:373)
zeebe_tasklist | 	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
zeebe_tasklist | 	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868)
zeebe_tasklist | 	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590)
zeebe_tasklist | 	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
zeebe_tasklist | 	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
zeebe_tasklist | 	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
zeebe_tasklist | 	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
zeebe_tasklist | 	at java.base/java.lang.Thread.run(Thread.java:834)

Basically:

No method or field with name ‘orderId’ on line 1

It is there in the HTML div section. though I don’t see it in the script section, would that be the issue?

I was hoping to extend the html form in a way I can add picklists and some more validation stuf and for that I wanted to use this as a startingpoint… but I dont seem to get it working :slight_smile:

Any suggestions from other users?
Or perhaps @philipp.ossler I do completely misunderstand this taskForm option?

Thanks,

Maarten

2

Hi @maartend :wave:

Thank you for raising this up.
The task form reference two variables: orderId and price.

Please make sure that the process instance (i.e. the element instance) has both variables.

BTW: the formFields is not used if taskForm is defined.

Best regards,
Philipp

3