Showing a tree in embedded forms
Armin Hasler
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Auswahl</title>
</h:head>
<f:view>
<f:metadata>
<f:event type="preRenderView"
listener="#{camundaTaskForm.startTaskForm()}" />
</f:metadata>
<h:body>
<h:form>
<h3>Auswahl</h3>
<p:tree value="#{treeBean.root}" var="node" selectionMode="single" selection="#{processVariables['treeBean.selectedNode']}" dynamic="true">
<p:treeNode type="folder" expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{node}" />
</p:treeNode>
<p:treeNode type="document" icon="ui-icon-document">
<h:outputText value="#{node.getName()}" />
</p:treeNode>
</p:tree>
<h:commandButton id="submit_button" value="Bestätige Templateauswahl" action="#{camundaTaskForm.completeTask()}" />
<h:messages style="color:red;margin:8px;" />
</h:form>
</h:body>
</f:view>
</html>
But I need this as embedded form. Now I am a bit struggling how to proceed. Can you please give me a hint how to start this. I think this be possible using angularJS or jQuery, but I am a bit confused how to combine this with the cam-variable stuff?
Thank you
Sebastian Stamm
armin.h...@gmail.com
I have already written embedded forms and used the cam-variable attributes. this works fine for me.
But the defined controls for embedded forms do not offer a Tree or sth. My tree is already implemented on the server side. My problem is how to present the tree on the frontend (with angularjs? I have never used it) and how to bind the selection of the tree to the cam-variable?
Sebastian Stamm
armin.h...@gmail.com
with your help, I found a different approach that would hopefully work in this case. I will try to build a tree structure in a select box.
What I need in this case is to access a list of objects in the embedded form. Like the following:
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('templatesList');
});
camForm.on('variables-fetched', function() {
$scope.templatesList = camForm.variableManager.variable('templatesList').value;
});
But all camunda examples I found are accessing one object and its members. But I need to access a list of objects and loop over the objects.
Can you please give me a hint or guide me to an example how to do this client side in the form.
Thank you
Sebastian Stamm
armin.h...@gmail.com
I was missing the ng-repeat. Sorry for that.
Thank you very much
armin.h...@gmail.com
I found this also in the documentation:
Out of the box, you can only work with Java Objects which are serialized in JSON format If Java Classes are serialized using JAX-B, you need to add custom XML parsing and writing logic to the embedded form. Java Objects serialized using Java Serialization cannot be used in forms.
Lets say I have created a list of objects on server side and put it with the Java Delegation into the scope execution.setVariable("documentTypeInfoWrapperList", documentTypeInfoWrapperList);
How can I access this list and the objects in the form?
What I tried in the form is:
<form role="form" name="branchForm">
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('documentTypeInfoWrapperList');
});
camForm.on('variables-fetched', function() {
$scope.documentTypeInfoWrapperList = camForm.variableManager.variable('documentTypeInfoWrapperList').value;
});
</script>
<div class="form-group">
<div ng-repeat="documentTypeInfoWrapper in documentTypeInfoWrapperList track by $index">
{{documentTypeInfoWrapper.getName()}}
<hr>
{{documentTypeInfoWrapper.name}}
</div>
</div>
</form>
From what I read in the docu <you need to add custom XML parsing and writing logic to the embedded form.> But how?
Sebastian Stamm
armin.h...@gmail.com
no, documentTypeInfoWrapperList is a ArrayList of DocumentTypeInfoWrapper Objects. These are set in a former ServiceTask via
execution.setVariable("documentTypeInfoWrapperList", documentTypeInfoWrapperList);
which I want to access from client side over
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('documentTypeInfoWrapperList');
});
Sorry for the misunderstanding. I know JSF and I know Velocity template but I am new to the camForm and angular JS Stuff.