Loading previous data in process start form

Hello,

I am having following requirement in our process.
When the user wishes to start a new process in the tasklist app, he / she will see a form, where the process data has to be input.
In that form, which is being deployed as a simple html file, the user has to be able to select some data from previously loaded lists.
For instance, they would be able to select a city from a pre-loaded list. And according to the selected city, they would be able to select an office. And so on.
I’ve been thinking in putting those lists of data in some json file and load them during the camForm.on(‘form-loaded’,…) event.
Unfortunately I am not being able to find out, how to read that json file from the /webapp/form resources directory. I tried already with the example in Load Additional Resources, but since the process has not started yet, no taskId is available.

I am not sure about this to be the right way of loading the selection data into the first form, but I could not think of any other easier way than this.

Anyway, if it would be possible to read the json content in the first form, I would like to add a javascript library to that same form, so it would be possible to query over the json content. I haven’t being able to find out a way to do that too.

I would be very greatful for any hint.

Kind regards,

Wagner

2 Likes

@Wagner-Otto_Wutzke here is a example i hacked together.

It is functional, but would refer back to Camunda team to see if this is fully “legit” and if any problems come about for doing this:

Form:

<form role="form">

  <textarea cam-variable-name="testText"
            cam-variable-type="String"
            placeholder="Test Text placeholder" />
  </textarea>
  <br>
  <select
      cam-variable-name="selectedValue"
      cam-variable-type="String"
      ng-model="myOption"
      ng-options="value.id as value.text group by value.text for value in myOptions">
      <option>--</option>
  </select>

  <script cam-script type="text/form-script">
    //Note that the "value" of the returned selected item in the <select> will be 0, 1, 2....

    inject([ '$scope', '$http', 'Uri', function($scope, $http, Uri) {
      camForm.on('form-loaded', function() {
        var deploymentId = camForm["options"]["deploymentId"];

        function jsonFileNeeded(value) {
          return value["name"] == "data.json";
        }

          $http.get(Uri.appUri('engine://engine/:engine/deployment/' + deploymentId + '/resources')).
                        success(function(data) {

                             var jsonResourceId = data.filter(jsonFileNeeded)[0]["id"];

                             $http.get(Uri.appUri('engine://engine/:engine/deployment/' + deploymentId + '/resources/' + jsonResourceId + '/data')).
                                         success(function(data) {
                                              // var jsonFile = data;
                                              $scope.myOptions = data;
                                              // console.log(camForm);
                                            });
                        });
    });
  }]);

  </script>
</form>

JSON File:

[
  {
    "id": "id0",
    "text": "text0"
  },
  {
    "id": "id1",
    "text": "text1"
  }
]

data.json (95 Bytes)

form.html.xml (1.6 KB)

externalJsonTest.bpmn (2.9 KB)

change the html.xml file back to .html.

Deploy with something like:

curl -w "\n" --cookie cookie.txt \
-H "Accept: application/json" \
-F "deployment-name=rest-test" \
-F "enable-duplicate-filtering=false" \
-F "deploy-changed-only=falses" \
-F "externalJsonTest.bpmn=@/PATH_TO_FILE/externalJsonTest.bpmn" \
-F "form.html=@/PATH_TO_FILE/ExternalJSONTest/form.html" \
-F "data.json=@/PATH_TO_FILE/ExternalJSONTest/data.json" \
http://CAMUNDA_SERVER_LOCATION:8080/engine-rest/deployment/create
1 Like

Anyone from the camunda team, feedback would be great

@camunda it seems that the URi.appURI (besides being undocumented), does not support embedded:deployment: as a input. So had to use engine://engine/:engine. Would be great if support could be added to allow us to easily access files that are part of the deployment in the same syntax that embedded forms are added to the form key: embedded:deployment:FormName.html.

If we could do something like reference files as deployment:UniqueSampleFileName.extension and wrapped that access as get() to return the binary similar to how we can use the get deployment file binary api call, that would make things much easier.

Wow! Thanks Stephen! I think your solution is valid.
I figured out something very similar before I could read your response.

inject([ '$scope', '$http', '$location', 'Uri', function($scope, $http, $location, Uri) {

	camForm.on('form-loaded', function () {
		$http.get(Uri.appUri("engine://engine/:engine/process-definition/key/my-process-key/startForm")).success(function(result){
			var contextPath = result.contextPath + '/forms/';		
			var filePath = contextPath + 'my-json-file.json';
			$.getJSON(filePath, function(json) {
				$scope.myOptions = json;
			});
		});	
	});` 

And as HTML I am using a very simple select element without grouping with
<option ng-repeat="entry in myOptions" value="{{entry.data}}">{{entry.data}}</option>

Anyway, I think your solution using the Deployment REST API might be better, since one doesn’t have to fix code the process key into the JS script.

Thanks for sharing!

Kind regards,
Wagner

@Wagner-Otto_Wutzke was your solution based on deploying through the REST api or deploying as a WAR?

I ask because, my understanding of Camunda, would be that your code snippet would only work for WAR deployments / scenarios where you have uploaded the files to tomcat as a application deployment. If your code snippet works for REST API deployed files, would be interested to dig further into how your snippet works in relation to referencing binary files that are stored in the DB (because of the rest API deployment)

Deplyoing as WAR. We don’t use the REST API for deployment.

@Wagner-Otto_Wutzke ah! ya i am BIG fan of doing everything through the API :slight_smile:. So yes your example makes sense to me know that i know its for WAR files :slight_smile:

As mentioned in some other google groups convos from @camunda staff, another options would be create a WAR that has your “common files” in it that you could reference across deployments. Something to keep in mind.

If you do more work in this space, would be happy to share notes and design patterns, as we have all sort sorts of scenarios for extra files to be deployed on a process basis.

Sure! I would be glad to share too. :thumbsup:
Cheers!

Hi @Wagner-Otto_Wutzke
i wanted to use my json File content inside my embedded form , for this reason i have used this code:
var jsonFile = $scope.jsonFile = [{}];
inject([ ‘$scope’, ‘$http’, ‘Uri’, function($scope, $http, Uri) {
camForm.on(‘form-loaded’, function() {
var deploymentId = camForm[“options”][“deploymentId”];

        function jsonFileNeeded(value) {
          return value["name"] == "data.json";
        }

          $http.get(Uri.appUri('engine://engine/:engine/deployment/' + deploymentId + '/resources')).
                        success(function(data) {

                             var jsonResourceId = data.filter(jsonFileNeeded)[0]["id"];

                             $http.get(Uri.appUri('engine://engine/:engine/deployment/' + deploymentId + '/resources/' + jsonResourceId + '/data')).
                                         success(function(data) {
                                              // var jsonFile = data;
                                              $scope.jsonFile = data;
                                              // console.log(camForm);
                                            });
                        });
    });
  }]);
console.log(jsonFile);

but when war is deployed i see this error: Failed to load resource: the server responded with a status of 404 (Not Found)
Is there any internal configuration which i am missing?