Merge pull request #6 from PROCEED-Labs/update-user-task-variable-section

User Task variable description update

Author: iaktern

content/developer/bpmn/bpmn-user-tasks.mdx

@@ -197,19 +197,19 @@ Tasklist](/images/tasklist/submit-variables.png)
 Existing variables of the processInstance can be retrieved to be shown inside
 the User Task.
 
-For this, the HTML Code of the User Task must make use of the [Whiskers template
-syntax](https://github.com/gsf/whiskers.js) to access and use process variables.
-It is easy and keeps templates readable by limiting tags to variables,
-statements ("for", "if", and "else"), partials, and comments. Usually you only
-need { } for accessing the desired variable.
+For this, the HTML Code of the User Task must make use of placeholders to access and use process variables.
+It is easy and keeps templates readable by limiting tags to variables and
+statements ("for" and "if").
+
+Usually you only need `\{%[variable-name]%\}` for accessing the desired variable.
 
 In this example, the variables `firstname` and `surname` are shown inside this
 User Task
 
 ```
 <form class="form">
   <div id="i3jcu">
-  <b id="i4m1">Hello, {firstname} {surname}!
+  <b id="i4m1">Hello, {%firstname%} {%surname%}!
   </b>
   </div>
   <img id="inmmd" src="https://cdn.pixabay.com/photo/2015/07/02/10/40/writing-828911_1280.jpg"/>
@@ -222,6 +222,103 @@ User Task
 This is what is shown in the tasklist of the engine when encountering the User Task `Show full name`:
 ![User Task in Tasklist](/images/tasklist/show-variables.png)
 
+For more complex object types variables of the form `{ [attribute-name]: [attribute-value], ... }` subscripts can be used to access nested values.
+To do that use a placeholder of the form:
+\
+`\{%[variable-name].[attribute-name]%\}`
+
+In this example the entry `name` of the variable `user` which has the value `{ name: 'Max Mustermann' }` is shown inside the user task.
+The ouput is the same as for the previous example.
+
+```
+<form class="form">
+  <div id="i3jcu">
+  <b id="i4m1">Hello, {%user.name%}!
+  </b>
+  </div>
+  <img id="inmmd" src="https://cdn.pixabay.com/photo/2015/07/02/10/40/writing-828911_1280.jpg"/>
+  <div id="if91m">Welcome to this User Task! Just click the Submit button to complete this task!
+  </div>
+  <button type="submit" class="button">Submit</button>
+</form>
+```
+
+For more complex cases if and for statements are supported.
+
+If part of the html should only be shown when a specific variable is true or has a value you can use if statements of the form:
+\
+`\{%if [variable-name]%\}[conditional-part]\{%/if%}`
+
+You can also use comparisons to show parts of the html only if a variable has (or does not have) a specific value:
+\
+`\{%if [variable-name] == '[string-value]'%\}[conditional-part]\{%/if%\}`
+\
+`\{%if [variable-name] != '[string-value]'%\}[conditional-part]\{%/if%\}`
+
+In this example the text `Hello Max!` is shown when the variable `firstname` has the value `Max`.
+Otherwise the text `Welcome` is shown.
+
+```
+<form class="form">
+  <div id="i3jcu">
+    {%if firstname == 'Max'%}Hello Max!{%/if%}
+    {%if firstname != 'Max'%}Welcome{%/if%}
+  </div>
+  <button type="submit" class="button">Submit</button>
+</form>
+```
+
+This is what will be the output html when the value of `firstname` is `Max`.
+
+```
+<form class="form">
+  <div id="i3jcu">
+    Hello Max!
+  </div>
+  <button type="submit" class="button">Submit</button>
+</form>
+```
+
+If a part of the html should shown for every entry in an array typed variable you can use a for statement of the form:
+\
+`\{%for [loop-variable] in [variable-name]%\}[html part]\{%/for%\}`
+
+Inside the loop you can then use `loop-variable` to access the values of the entry.
+
+In this example the variable `users` has the following value:
+
+```
+[
+  { firstname: 'Max', surname: 'Mustermann' },
+  { firstname: 'John', surname: 'Doe' }
+]
+```
+
+The given html is:
+
+```
+<form class="form">
+  <ul>
+    {%for user in users%}
+      <li>{%user.firstname%} {%user.surname%}</li>
+    {%/for%}
+  </ul>
+  <button type="submit" class="button">Submit</button>
+</form>
+```
+
+The resulting html is:
+
+```
+<form class="form">
+  <ul>
+    <li>Max Mustermann</li>
+    <li>John Doe</li>
+  </ul>
+  <button type="submit" class="button">Submit</button>
+</form>
+```
+
 {/*
 
 ## OLD: FROM Alessandro