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

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
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-02T15:53:59Z  
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-02T17:59:09Z  
    • kolban
    • ‏2012-10-02T15:53:59Z
    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
    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
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-02T18:15:09Z  
    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
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-02T20:09:23Z  
    • kolban
    • ‏2012-10-02T18:15:09Z
    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)

    <pre class="jive-pre"> <script lang= "javascript"> ... JavaScript goes here </script> </pre>

    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
    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
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-03T14:53:23Z  
    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
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-03T19:00:41Z  
    • kolban
    • ‏2012-10-03T14:53:23Z
    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
    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
    286 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-04T09:28:35Z  
    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
    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
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-04T13:52:40Z  
    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
    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
  • kolban
    kolban
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-10-04T13:53:32Z  
    • edling
    • ‏2012-10-04T09:28:35Z
    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.
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-12-28T11:15:23Z  
    • kolban
    • ‏2012-10-04T13:53:32Z
    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
    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
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-12-28T15:31:34Z  
    • Gowri.d
    • ‏2012-12-28T11:15:23Z
    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.
    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
  • kolban
    kolban
    3322 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2012-12-28T15:33:04Z  
    • Gowri.d
    • ‏2012-12-28T11:15:23Z
    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.
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2013-03-01T02:56:21Z  
    • kolban
    • ‏2012-12-28T15:33:04Z
    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:

    <pre class="jive-pre"> tw.local.myHTML = "<p>Hello " + tw.local.name + "</p>"; </pre>

    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
    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
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2013-03-01T03:03:07Z  
    • kolban
    • ‏2012-12-28T15:31:34Z
    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:

    <pre class="jive-pre"> tw.local.myHTML = "<p>Hello " + tw.local.name + "</p>"; </pre>

    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
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2013-03-06T03:43:01Z  
    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.
    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

    Re: Javascript execution in Custom HTML Controls in BPM 8.0

    ‏2013-03-06T03:56:25Z  
    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
    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.