Uploaded image for project: 'camunda BPM'
  1. camunda BPM
  2. CAM-12425

browser-forms-angular example fails with 7.12

    • Icon: Bug Report Bug Report
    • Resolution: Fixed
    • Icon: L3 - Default L3 - Default
    • None
    • 7.12.0
    • None
    • Linux ubuntu 5.3.0-29-generic #31-Ubuntu SMP Fri Jan 17 17:27:26 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

      The browser-forms-angular example on GitHub does not work as described. As per the README.md, I followed these steps:

      1. Cloned the repo to my Camunda development machine
      2. Copied the browser-forms-angular folder to my tomcat webapps folder
      3. Restarted tomcat
      4. Open localhost:8080/browser-forms-angular

      The page loaded, showing all open tasks in the left column. So far, so good. However, nothing was ever populated in the right column: Clicking on any task produced no results. However, inspection using the JS console showed there were two errors at play, plus an additional problem:

      1. There were CORS violations attempting to load task information: Clicking on any task produced a CORS violation. I worked around this by running chrome with "--disable-web-security --user-data-dir=./unsafe" - the better way to do this should be documented in the README.md, e.g., by placing an appropriate filter in an appropriate web.xml
      2. In scripts.jstaskFormInfo.contextPath is never populated: it is returned as null, so the substitution on line 87 is never performed - this leads to the code attempting to open embedded:app:forms/myForm.html as a URL, resulting in UNKNOWN_URL_SCHEME

      The third problem is that scripts.js does not contain a scheme for handling embedded:deployment:myForm.html, so this code cannot be used with forms deployed via the REST API (which is our greatest interest).

        This is the controller panel for Smart Panels app

            [CAM-12425] browser-forms-angular example fails with 7.12

            Hi PeterWhittaker,

            Thank you for your patience with this.
            I will get back to you next week. Sorry for any inconvenience.

            Best regards,
            Yana

            Yana Vasileva added a comment - Hi PeterWhittaker , Thank you for your patience with this. I will get back to you next week. Sorry for any inconvenience. Best regards, Yana

            Hi PeterWhittaker,

            Sorry for my late reply.
            1. There were CORS violations attempting to load task information - this should not happen as the example is on the same server, so no cross-origin requests are expected. I was not able to reproduce that error.
            2. `UNKNOWN_URL_SCHEME` error.
            From the provided information I understand that you have deployed processes with custom "myForm".
            Please note that the "browser-forms-angular" example is demonstrating a simple scenario on how to write a sort of your own Tasklist. To work with your custom forms and processes you might need to adjust the example according to your needs.

            So far I don't consider as a problem with the example but rather need for expanding the example according to user-specific needs.

            Please share your thoughts on the above.

            Best regards,
            Yana

            Yana Vasileva added a comment - Hi PeterWhittaker , Sorry for my late reply. 1. There were CORS violations attempting to load task information - this should not happen as the example is on the same server, so no cross-origin requests are expected. I was not able to reproduce that error. 2. `UNKNOWN_URL_SCHEME` error. From the provided information I understand that you have deployed processes with custom "myForm". Please note that the "browser-forms-angular" example is demonstrating a simple scenario on how to write a sort of your own Tasklist. To work with your custom forms and processes you might need to adjust the example according to your needs. So far I don't consider as a problem with the example but rather need for expanding the example according to user-specific needs. Please share your thoughts on the above. Best regards, Yana

            Yana, re the CORS violations, I agree that this should not happen. Yet I followed the instructions in the README.md and used the code from the script.js and this was the first error I got - on a system where all my other Camunda code, including native forms, embedded app forms, and embedded deployment forms, all works fine.

            Re the UNKNOWN_URL_SCHEME: Did you test with an embedded form? The example code in script.js specifically uses them.

            As to "adjusting the example according to your needs", guidance would be appreciated. Again, I used the process exactly as described in the README.md and script.js, and was unable to proceed.

            Thank you,

            P

             

            Peter Whittaker added a comment - Yana, re the CORS violations, I agree that this should not happen. Yet I followed the instructions in the README.md and used the code from the script.js and this was the first error I got - on a system where all my other Camunda code, including native forms, embedded app forms, and embedded deployment forms, all works fine. Re the UNKNOWN_URL_SCHEME: Did you test with an embedded form? The example code in script.js specifically uses them. As to "adjusting the example according to your needs", guidance would be appreciated. Again, I used the process exactly as described in the README.md and script.js, and was unable to proceed. Thank you, P  

            Chris McKenzie added a comment - - edited

            I'm a little frustrated and hopeful as I've been having a similar problem with the JS SDK Task Standalone from example as well: https://github.com/camunda/camunda-bpm-examples

            I didn't have a CORS issue but when using the REST API to get a list of tasks, the task item's contextPath is always null. We use custom forms hosted from a WAR and we need to embed some of the task forms in another Web UI. This sample is what led us to believe this was possible and this logged issue is the closest we've come to any attention being paid to the problem. I've posted to the forums and inquired about paying for support just to ask this same question. 

            Here's my forum post that Martin Stamm never followed up on. I assume he's a Camunda employee with the C next to his avatar: https://forum.camunda.org/t/any-documentation-on-the-javascript-sdk-for-how-to-use-it-in-a-separate-web-app-the-sdk-js-samples-dont-seem-to-work/20457

            It's easy to just say it's not supported, but this is a pretty big integration point for a BPM engine. We'll basically have to start looking at other BPM engines if we can't get this working very soon. The Camunda Web UI simply cannot be the end all of UIs for the BPM engine, and for a BPM engine, you need to support workflow forms with UIs other than yours exclusively.

            Is this just a simple case of the task form URL needing to be populated? Can you maybe offer guidance on whether an external form URL can just be passed in? Like if I used the forms from the Camunda Web UI and gleaned the custom form URL, then just came up with my own URL to reach it? e.g. ignore that contextPath is null and just define my own.

            var url = taskFormInfo.key.replace('embedded:deployment:', taskFormInfo.contextPath + '/');

             

             

            Chris McKenzie added a comment - - edited I'm a little frustrated and hopeful as I've been having a similar problem with the JS SDK Task Standalone from example as well: https://github.com/camunda/camunda-bpm-examples I didn't have a CORS issue but when using the REST API to get a list of tasks, the task item's contextPath is always null. We use custom forms hosted from a WAR and we need to embed some of the task forms in another Web UI. This sample is what led us to believe this was possible and this logged issue is the closest we've come to any attention being paid to the problem. I've posted to the forums and inquired about paying for support just to ask this same question.  Here's my forum post that Martin Stamm never followed up on. I assume he's a Camunda employee with the C next to his avatar:  https://forum.camunda.org/t/any-documentation-on-the-javascript-sdk-for-how-to-use-it-in-a-separate-web-app-the-sdk-js-samples-dont-seem-to-work/20457 It's easy to just say it's not supported, but this is a pretty big integration point for a BPM engine. We'll basically have to start looking at other BPM engines if we can't get this working very soon. The Camunda Web UI simply cannot be the end all of UIs for the BPM engine, and for a BPM engine, you need to support workflow forms with UIs other than yours exclusively. Is this just a simple case of the task form URL needing to be populated? Can you maybe offer guidance on whether an external form URL can just be passed in? Like if I used the forms from the Camunda Web UI and gleaned the custom form URL, then just came up with my own URL to reach it? e.g. ignore that contextPath is null and just define my own. var url = taskFormInfo.key.replace( 'embedded:deployment:' , taskFormInfo.contextPath + '/' );    

            Hi PeterWhittaker,

            Thank you for your input.

            Re the UNKNOWN_URL_SCHEME: Did you test with an embedded form? The example code in script.js specifically uses them.

            Yes, I downloaded the tomcat distribution that contains the invoice example were the forms are embedded and deployed via process application.

            When the processes along with the forms are deployed via Rest API the forms are defined differently in the process model xml:

            • deployed via process application: `embedded:app:forms/task-form.html`
            • deployed via REST API: `embedded:deployment:task-form.html`

            Also, the `contextPath` is null for the forms deployed via the REST API as the deployments are not registered as process applications. Can be checked via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-form-key/
            Then the URL in the `browser-forms-angular` example is resolved to `embedded:deployment:task-form.html?noCache=1600936183543` which interpreted as a cross origin request aka CORS in the browser. So if the URL is resolved correctly, the CORS error will not occur.

            I will double check with our frontend developers how the forms deployed via REST API should be resolved and I will come back to you.
            My guess is that those forms should be fetched via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-deployed-form/
            Unfortunately, I think that is not achievable via sdk js, only the form option is exposed as far as I understood (might be wrong).

            I hope that information gives you better insight into how the forms and deployment work and why the example doesn't work with embedded forms deployed via REST API.

            Please be aware that the team is in the process of preparing for the next minor release and there might be some delays with the replays.
            You can consider asking for help and ideas in our forum: https://forum.camunda.org/ There are some users that already have implemented custom Tasklists.
            I trying to find some other examples for a custom Tasklist, however, without any success.

            Best,
            Yana

            Yana Vasileva added a comment - Hi PeterWhittaker , Thank you for your input. Re the UNKNOWN_URL_SCHEME: Did you test with an embedded form? The example code in script.js specifically uses them. Yes, I downloaded the tomcat distribution that contains the invoice example were the forms are embedded and deployed via process application. When the processes along with the forms are deployed via Rest API the forms are defined differently in the process model xml: deployed via process application: `embedded:app:forms/task-form.html` deployed via REST API: `embedded:deployment:task-form.html` Also, the `contextPath` is null for the forms deployed via the REST API as the deployments are not registered as process applications. Can be checked via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-form-key/ Then the URL in the `browser-forms-angular` example is resolved to `embedded:deployment:task-form.html?noCache=1600936183543` which interpreted as a cross origin request aka CORS in the browser. So if the URL is resolved correctly, the CORS error will not occur. I will double check with our frontend developers how the forms deployed via REST API should be resolved and I will come back to you. My guess is that those forms should be fetched via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-deployed-form/ Unfortunately, I think that is not achievable via sdk js, only the form option is exposed as far as I understood (might be wrong). I hope that information gives you better insight into how the forms and deployment work and why the example doesn't work with embedded forms deployed via REST API. Please be aware that the team is in the process of preparing for the next minor release and there might be some delays with the replays. You can consider asking for help and ideas in our forum: https://forum.camunda.org/ There are some users that already have implemented custom Tasklists. I trying to find some other examples for a custom Tasklist, however, without any success. Best, Yana

            Yana Vasileva added a comment - - edited

            Hi cmckenzie,

            I understand the frustration about your experience.

            I hope the above information will help you as well.

             Here's my forum post that Martin Stamm never followed up on.

            Please understand that it's hard to follow up on all of the post and requests that come to our direction, we try as best as we can to provide information along with our duties. The community is quite big and the load in the forum is big. Following on that please check the forum guidelines:
            https://forum.camunda.org/t/faq-guidelines/5

            Who’s answering the questions?
            Questions you post here are answered by the members of the community who volunteer their time to share their knowledge. These can sometimes be employees of Camunda or individuals who have embraced the community to the point where they’re happy to give back.

            Best,
            Yana

            Yana Vasileva added a comment - - edited Hi cmckenzie , I understand the frustration about your experience. I hope the above information will help you as well.  Here's my forum post that Martin Stamm never followed up on. Please understand that it's hard to follow up on all of the post and requests that come to our direction, we try as best as we can to provide information along with our duties. The community is quite big and the load in the forum is big. Following on that please check the forum guidelines: https://forum.camunda.org/t/faq-guidelines/5 Who’s answering the questions? Questions you post here are answered by the members of the community who volunteer their time to share their knowledge. These can sometimes be employees of Camunda or individuals who have embraced the community to the point where they’re happy to give back. Best, Yana

            Yana, does this mean that the examples and README.md on GitHub will be reflected either to

            • add the missing detail?

            or

            • make the example more comprehensive?

            As it is, the example has limited usability, being confined as you describe.

            Thanks,

            P

             

            Peter Whittaker added a comment - Yana, does this mean that the examples and README.md on GitHub will be reflected either to add the missing detail? or make the example more comprehensive? As it is, the example has limited usability, being confined as you describe. Thanks, P  

            Yana, when I created this issue, I put in several things and I think two of them have been a distraction for us (the CORS violation, which is a symptom of the core issue; and forms deployed via the API, which were never mentioned in the example).

            Going forward, I think we're better served ignoring those two issues and focusing on the core issue. The core issue is that the sample code does not work as describe - this is what I tried to capture with this point when I opened the issue:

            • In scripts.jstaskFormInfo.contextPath is never populated: it is returned as null, so the substitution on line 87 is never performed - this leads to the code attempting to open embedded:app:forms/myForm.html as a URL, resulting in UNKNOWN_URL_SCHEME

            The example on GitHub specifically shows using the SDK to retrieve such forms and has specific code in the example script.js to process a contextPath if it refers to an embedded form.

            Since the code on GitHub does not work as described, there are three alternatives:

            1. The description on GitHub is wrong
            2. The code on GitHub is wrong
            3. Both the code and the description on GitHub are wrong

            At this point, I would be satisfied simply to know which of the three it is. My preference is #2 - and that someone fix the code to match the description. That would be ideal!

            Thank you,

            P

             

            Peter Whittaker added a comment - Yana, when I created this issue, I put in several things and I think two of them have been a distraction for us (the CORS violation, which is a symptom of the core issue; and forms deployed via the API, which were never mentioned in the example). Going forward, I think we're better served ignoring those two issues and focusing on the core issue. The core issue is that the sample code does not work as describe - this is what I tried to capture with this point when I opened the issue: In scripts.js ,  taskFormInfo.contextPath is never populated: it is returned as null , so the substitution on line 87 is never performed - this leads to the code attempting to open embedded:app:forms/myForm.html as a URL, resulting in  UNKNOWN_URL_SCHEME The  example on GitHub  specifically shows using the SDK to retrieve such forms and has specific code in the example script.js to process a contextPath if it refers to an embedded form. Since the code on GitHub does not work as described, there are three alternatives: The description on GitHub is wrong The code on GitHub is wrong Both the code and the description on GitHub are wrong At this point, I would be satisfied simply to know which of the three it is. My preference is #2 - and that someone fix the code to match the description. That would be ideal! Thank you, P  

            Hi PeterWhittaker,

            I am sorry for the delay with this.

            I confirmed with a frontend engineer that the implementation should be adjusted for forms deployed via REST API and sdk js doesn't offer an option to fetch the form when it's deployed via REST API.

            As the current description of the examples is incomplete (it should specify which forms support), I created CAM-12570 to adjust the README files. Or put in other words at the moment we do not offer an example where demonstrates how to implement a custom Tasklist and covers all possible forms supported by the process engine.

            In order to implement the fetch of the forms deployed via REST API, you will need to query the mentioned REST API in my previous reply.

             those forms should be fetched via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-deployed-form/

            As a hint how this can be achieved, here is our implementation of the functionality in Tasklist:
            https://github.com/camunda/camunda-bpm-webapp/blob/aab5f580fbc5ceffd3235b7796c43a829786ba90/ui/tasklist/client/scripts/form/directives/cam-tasklist-form.js#L152-L180
            You can see that with the different options for the forms the implementation could become tricky. You can consider just apply the case that fits the best your usual deployment specifics.

            I hope that helps you to proceed with your implementation.

            Best regards,
            Yana

            Yana Vasileva added a comment - Hi PeterWhittaker , I am sorry for the delay with this. I confirmed with a frontend engineer that the implementation should be adjusted for forms deployed via REST API and sdk js doesn't offer an option to fetch the form when it's deployed via REST API. As the current description of the examples is incomplete (it should specify which forms support), I created  CAM-12570 to adjust the README files. Or put in other words at the moment we do not offer an example where demonstrates how to implement a custom Tasklist and covers all possible forms supported by the process engine. In order to implement the fetch of the forms deployed via REST API, you will need to query the mentioned REST API in my previous reply.  those forms should be fetched via this REST request: https://docs.camunda.org/manual/latest/reference/rest/task/get-deployed-form/ As a hint how this can be achieved, here is our implementation of the functionality in Tasklist: https://github.com/camunda/camunda-bpm-webapp/blob/aab5f580fbc5ceffd3235b7796c43a829786ba90/ui/tasklist/client/scripts/form/directives/cam-tasklist-form.js#L152-L180 You can see that with the different options for the forms the implementation could become tricky. You can consider just apply the case that fits the best your usual deployment specifics. I hope that helps you to proceed with your implementation. Best regards, Yana

            The created follow up ticket for the readme adjustments has been done, hereby I am closing this ticket.
            In case of any further questions feel free to reopen this ticket or create a post in the forum: https://forum.camunda.org/

            Yana Vasileva added a comment - The created follow up ticket for the readme adjustments has been done, hereby I am closing this ticket. In case of any further questions feel free to reopen this ticket or create a post in the forum: https://forum.camunda.org/

              yana.vasileva Yana Vasileva
              PeterWhittaker Peter Whittaker
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: