Answered

How can I build a Widget thats reads from and save to FILE attributes ?

ow can I build a Widget thats reads from and save to FILE attributes ? I did not find any sample with that. Can you help me on that ?

Basically I need sample code to:

1) Capture the file content (in any format, array of bytes, B64, ...);

2) After doing some job with the file, I need to save it back to the FILE attribute.

Thanks in advance.

Comments (9)

photo
1

Dear Carlos,

In projects which require custom UI and more sophisticated controls, Bizagi presents the possibility to create Widgets.

You can create custom Widgets to extend your Process forms with any interactive options or specific behaviour (i.e, invoke REST services, render charts and specific illustrations, embed videos, frames or custom buttons and functionality, etc).

The following articles present a technical guide on how to create your own Widgets.

Best Regards

photo
1

Dear Juan,
I know this documents and have read then again and again,
but I can´t find a clue of how to make it.
I found some code more closely related to the case in the
WEBCAM Widget.
There we find:
1) To get the image:


  1. var self = this, params = {}, properties = self.properties;
  2. params.xpath = properties.xpath;
  3. params.idRender = properties.id;
  4. params.xpathContext = properties.xpathContext;
  5. params.idPageCache = properties.idPageCache;
  6. params.property = "fileContent";
  7. params.dataType = "text";
  8. if
  9. (properties.contexttype) {
  10. params.contexttype = properties.contexttype;
  11. }
  12. self.dataService.multiaction().getPropertyData(params,
  13. "text").done(function (image) {
  14. /// takes
  15. image from Bizagi and Works on it ...
  16. /// ......
  17. }

1)To Save it Back:

  1. file = new Blob([new Uint8Array(array)], { type: "image/png" });
  2. // this array is prepared in other parts of the code ...
  3. data = [];
  4. data.push({ key: self.Class.BA_CONTEXT_PARAMETER_PREFIX +
  5. "xpath", value: properties.xpath });
  6. data.push({ key: self.Class.BA_CONTEXT_PARAMETER_PREFIX +
  7. "idRender", value: properties.id });
  8. data.push({ key: self.Class.BA_CONTEXT_PARAMETER_PREFIX +
  9. "xpathContext", value: properties.xpathContext });
  10. data.push({ key: self.Class.BA_CONTEXT_PARAMETER_PREFIX +
  11. self.Class.BA_PAGE_CACHE, value: properties.idPageCache });
  12. data.push({ key: self.Class.BA_ACTION_PARAMETER_PREFIX +
  13. "sessionId", value: form.properties.sessionId });
  14. data.push({ key: self.Class.BA_CONTEXT_PARAMETER_PREFIX +
  15. "action", value: 'savefile' });
  16. (properties.contexttype) ? data.push({ key:
  17. self.Class.BA_CONTEXT_PARAMETER_PREFIX + "contexttype", value:
  18. properties.contexttype }) : "";
  19. try {
  20. (BIZAGI_SESSION_NAME != undefined) ? data.push({ key:
  21. BIZAGI_SESSION_NAME, value: form.properties.sessionId }) : data.push({ key:
  22. "JSESSIONID", value: form.properties.sessionId });
  23. }
  24. catch (e) {
  25. data.push({ key: "JSESSIONID", value: form.properties.sessionId
  26. });
  27. }
  28. fd
  29. = new FormData();
  30. fd.append(properties.xpath, file, "webcam.png");
  31. for (i = 0; i < data.length; i++) {
  32. fd.append(data.key, data.value);
  33. }
  34. $.ajax({
  35. url: self.dataService.getUploadAddFileUrl(),
  36. type: "POST",
  37. data: fd,
  38. processData: false,
  39. contentType: false
  40. }).done(function () {
  41. videoHTML.pause();
  42. videoHTML.src = "";
  43. self.loadImage(container);
  44. self.dialogBox.dialog('destroy');
  45. self.dialogBox.detach();
  46. content.endLoading();
  47. }).fail(function () {
  48. content.endLoading();
  49. bizagi.showMessageBox("Upload image error","Error");
  50. });


Where can I find the same for FILE fields ?

photo
1

Excuse me, but the editor did not keep the proper format.

photo
1

Dear Carlos,

A good example of what you need is the webcam example at: http://www.bizagi.com/es/comunidad/widget-xchange.

Regards

photo
1

As I mentioned, WebCam saves IMAGES, not FILES.

photo
1

Dear Carlos,

A image is a file. Apply the same logic to do what you need.

Regards

photo
1

Juan,

The FILE Attribute is a collection of files while IMAGE is just one file.

The only information I need is how to inform Bizagi API to get or set one file in the array of files.

The code bellow does not apptly specify that. Which parameter do I have to add ?

  1. var self = this, params = {}, properties = self.properties;
  2. params.xpath = properties.xpath;
  3. params.idRender = properties.id;
  4. params.xpathContext = properties.xpathContext;
  5. params.idPageCache = properties.idPageCache;
  6. params.property = "fileContent";
  7. params.dataType = "text";
  8. if
  9. (properties.contexttype) {
  10. params.contexttype = properties.contexttype;
  11. }
  12. self.dataService.multiaction().getPropertyData(params,
  13. "text").done(function (image) {
  14. /// takes
  15. image from Bizagi and Works on it ...
  16. /// ......

photo
1

Dear Carlos,

In order to help you to solve this question, please send us your current source code to analyse it and give you clues to get what you need.

We look forward to hearing from you

photo
1

See attached.

It is a test Widget based on WebCam Widget´s source.

I managed to retrieve a string that represents a FILE attrib and show it in a TEXTAREA.

But I did not manage to convert it to a file (it is not a BASE64 string as in IMAGE attribs).

The save part is not done yet.

If necessary, we can talk by skype (CSMOTA).