Topic
16 replies Latest Post - ‏2013-03-06T03:56:25Z by SystemAdmin
SystemAdmin
SystemAdmin
7615 Posts
ACCEPTED ANSWER

Pinned topic Javascript execution in Custom HTML Controls in BPM 8.0

‏2012-10-02T15:24:01Z |
In BPM 8.0, the Custom HTML controls no longer have Javascript execution capabilities, and I was wondering if there is any methods to get around this issue. Any input would be useful.

In particular, I have been trying to replicate the repeating sections that were used often in the Legacy Coaches. However, they utilize javascript in the HTML blocks and this function no longer exists. Is there any way to replicate this function for BPM 8.0 or are there alternative methods to achieving the same result?

Thanks in advance,
Ten Loh
Updated on 2013-03-06T03:56:25Z at 2013-03-06T03:56:25Z by SystemAdmin
  • kolban
    kolban
    3314 Posts
    ACCEPTED ANSWER

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-02T15:53:59Z  in response to SystemAdmin
    Hi Ten,
    I believe we can include JavaScript just fine in Custom HTML ... what did you code and what was the result?

    I'm afraid my memory has gone blank on the concept of "repeating sections" ... can you explain what these are? Have you looked at the existing Coach View controls ... just a loose thought ... but maybe the entries in the "section" folder where we have both horizontal and vertical sections.

    Neil
    • SystemAdmin
      SystemAdmin
      7615 Posts
      ACCEPTED ANSWER

      Re: Javascript execution in Custom HTML Controls in BPM 8.0

      ‏2012-10-02T17:59:09Z  in response to kolban
      Hi Neil,

      Thanks for the response. The code I tried was to do a simple for loop just to see if it executes correctly, but perhaps I did it wrong.

      <# for (var i=0;i<tw.local.borrowerDependents;i++) { } # >

      The result was that it just displays the above code as text. I also found on wiki.lombardi.com that there has been other instances where JavaScript doesn't execute in Custom HTML. http://bpmwiki.blueworkslive.com/display/samples/Control-+Custom+HTML+Hyperlink+using+a+Configurable+Coach+View

      The concept of repeating sections is that a section can be repeatedly added when a button is clicked. It's basically similar to adding a row in a table, but adding entire sections instead.

      I have tried looking the Coach View controls and I believe that this is the direction to go. However, I am not very adept at these codes and I am having a hard time seeing where to go from here.

      Ten Loh
      • kolban
        kolban
        3314 Posts
        ACCEPTED ANSWER

        Re: Javascript execution in Custom HTML Controls in BPM 8.0

        ‏2012-10-02T18:15:09Z  in response to SystemAdmin
        Aha!! We are making progress. It is true that in the new V8 Custom HTML you can not include "meta data" references of inline JavaScript in the form of the <# codes. However, you can code (should you wish)

        
        <script lang=
        "javascript"> ... JavaScript goes here </script>
        


        So the question of "can I have JavaScript in my Custom HTML" is "yes". However, this isn't really what you were looking for. What I think you want is the idea that you can create a Custom Coach View that can be included in a Coach. A Coach View is the new (and in my opinion architected) solution for including JavaScript and other stuff.

        Neil
        • SystemAdmin
          SystemAdmin
          7615 Posts
          ACCEPTED ANSWER

          Re: Javascript execution in Custom HTML Controls in BPM 8.0

          ‏2012-10-02T20:09:23Z  in response to kolban
          In theory, I should be able to create a custom Coach View and create the section I want to be able to duplicate. Where would I put the JavaScript? Would it go in the "inline JavaScript" in the behavior or put it as a function of the load/change in the Event Handler in the event a button is pressed?

          Thanks for the help,

          Ten
          • kolban
            kolban
            3314 Posts
            ACCEPTED ANSWER

            Re: Javascript execution in Custom HTML Controls in BPM 8.0

            ‏2012-10-03T14:53:23Z  in response to SystemAdmin
            Hi there. Either/both of those would work. The real question is "not where I can put JavaScript" ... but more along the lines of:

            o What is the functional spec of what I want to achieve?
            o What HTML and JavaScript code is needed to achieve the desired goal?
            o Where within the IBM BPM CoachView framework would I place the HTML and JavaScript to achieve the goal?

            Neil
            • SystemAdmin
              SystemAdmin
              7615 Posts
              ACCEPTED ANSWER

              Re: Javascript execution in Custom HTML Controls in BPM 8.0

              ‏2012-10-03T19:00:41Z  in response to kolban
              So adding <script> inside the Custom HTML blocks and having controls as well, what is the order that these would execute. What I'm trying to ask is, is it possible to initialize variables through JavaScript in the Custom HTML blocks instead of an intialize script before the coach is loaded?

              I'm slowly understanding this a little better. Thank you for taking the time to help!

              Ten Loh
              • edling
                edling
                256 Posts
                ACCEPTED ANSWER

                Re: Javascript execution in Custom HTML Controls in BPM 8.0

                ‏2012-10-04T09:28:35Z  in response to SystemAdmin
                This discussion might benefit from discriminating between server-side javascript (<#= #>) and client-side javascript, right?

                Generally I understand "javascript in html" to be client-side, unless specifically stated as server-side.
                • kolban
                  kolban
                  3314 Posts
                  ACCEPTED ANSWER

                  Re: Javascript execution in Custom HTML Controls in BPM 8.0

                  ‏2012-10-04T13:53:32Z  in response to edling
                  It is my belief that the <#= and #> techniques available to coaches and custom html prior to v8 is no longer available in the new Coach View framework.

                  Neil
                  • Gowri.d
                    Gowri.d
                    19 Posts
                    ACCEPTED ANSWER

                    Re: Javascript execution in Custom HTML Controls in BPM 8.0

                    ‏2012-12-28T11:15:23Z  in response to kolban
                    Hi Kolban,

                    I have a similar kind of Issue here.

                    I'm also unable to access variable through <#=tw.local.value#> method in custom HTML in BPM 8.0 version.

                    Is any alternate approach for this?

                    Please suggest.

                    Thank you.
                    • kolban
                      kolban
                      3314 Posts
                      ACCEPTED ANSWER

                      Re: Javascript execution in Custom HTML Controls in BPM 8.0

                      ‏2012-12-28T15:31:34Z  in response to Gowri.d
                      Hi there. The <#= #> technique was present in pre-8 coaches but not present in v8 onwards. However, notice that the v8 Custom HTML Coach View can name a variable as input. This means that the content of that variable is expected to be a valid HTML fragment that will be injected into the page. Prior to reaching the Coach in the Human Service, you can populate a local private variable and name that variable in the Custom HTML.

                      For example:

                      
                      tw.local.myHTML = 
                      "<p>Hello " + tw.local.name + 
                      "</p>";
                      


                      and then map "myHTML" to the input of the Custom HTML.

                      More often than not, I tend to find that I personally don't use Custom HTML as much as I did before. Instead, I build a new Coach View but the learning curve there may be higher than you want.

                      Neil
                      • SystemAdmin
                        SystemAdmin
                        7615 Posts
                        ACCEPTED ANSWER

                        Re: Javascript execution in Custom HTML Controls in BPM 8.0

                        ‏2013-03-01T03:03:07Z  in response to kolban
                        Hi Neil,

                        This technique works fine, except the browser doesn't refresh the custom html after the variable it's been bound to updates. I noticed if I run the BPM debugger and step through the code it does refresh correctly.
                        • SystemAdmin
                          SystemAdmin
                          7615 Posts
                          ACCEPTED ANSWER

                          Re: Javascript execution in Custom HTML Controls in BPM 8.0

                          ‏2013-03-06T03:43:01Z  in response to SystemAdmin
                          When you say the view doesn't update when the variable it is bound to updates, can you be more specific. Is this a variable that is presented elsewhere in the UI? If so then I think to Neil's point you want to create a new coach view and bind it to the same variable. You can then use the "change" even (which I've discovered appears to be "the back end data changed", and not "JS onchange") to update your custom view to reflect the data change.

                          Andrew Paier | Director of Special Operations | BP3 Global, Inc. www.bp-3.com
                          • SystemAdmin
                            SystemAdmin
                            7615 Posts
                            ACCEPTED ANSWER

                            Re: Javascript execution in Custom HTML Controls in BPM 8.0

                            ‏2013-03-06T03:56:25Z  in response to SystemAdmin
                            The server side JavaScript variable is a template using the BPM server scriptlet. It is made up of HTML and Dojo JavaScript. The Dojo widget it is using is the tab container. I am using the scriptlet because the tab container included in the coach toolbox in 8.0.1 always draws inner and outer HTML scroll bars when running the BPM process. I tried and couldn't get rid of them. The scroll bars look hideous. I also tried the coach view but the Dojo code doesn't run correctly inside the view container. It renders OK when not using the coach view.
                    • kolban
                      kolban
                      3314 Posts
                      ACCEPTED ANSWER

                      Re: Javascript execution in Custom HTML Controls in BPM 8.0

                      ‏2012-12-28T15:33:04Z  in response to Gowri.d
                      Hi there. The <#= #> technique was present in pre-8 coaches but not present in v8 onwards. However, notice that the v8 Custom HTML Coach View can name a variable as input. This means that the content of that variable is expected to be a valid HTML fragment that will be injected into the page. Prior to reaching the Coach in the Human Service, you can populate a local private variable and name that variable in the Custom HTML.

                      For example:

                      
                      tw.local.myHTML = 
                      "<p>Hello " + tw.local.name + 
                      "</p>";
                      


                      and then map "myHTML" to the input of the Custom HTML.

                      More often than not, I tend to find that I personally don't use Custom HTML as much as I did before. Instead, I build a new Coach View but the learning curve there may be higher than you want.

                      Neil
                      • SystemAdmin
                        SystemAdmin
                        7615 Posts
                        ACCEPTED ANSWER

                        Re: Javascript execution in Custom HTML Controls in BPM 8.0

                        ‏2013-03-01T02:56:21Z  in response to kolban
                        Hi Neil,

                        Thanks for the suggestions. I'm struggling building my first coach view. I find it difficult because no variable prefill that I expect from IDE when authoring a script, and I can't search and replace text, etc. Do you have any suggestions?

                        Thanks
                        Scott
              • kolban
                kolban
                3314 Posts
                ACCEPTED ANSWER

                Re: Javascript execution in Custom HTML Controls in BPM 8.0

                ‏2012-10-04T13:52:40Z  in response to SystemAdmin
                When a Coach is shown, the Coach contains Coach Views which are bound to variables (server side variables). Copies of these values are passed to the Coach. These variables are managed internally by the Coach framework. These variables do NOT become visible in arbitrary JavaScript code. The variables can only be accessed by Coach View code. When the Coach triggers a boundary transition (bad name in my opinion) the variables values are copied back from the browser and set in the server side models of the variables.

                As such, there isn't a "good" way to initialize those variables at the browser side. If you do wish to do that, you will want to use the services of a new Coach View to gain access to the getters and setters of each of the variables.

                I would stick to initializing server side variables used in a Coach in server side code prior to reaching the Coach View.

                Neil