Wednesday, February 25, 2015

How to Access Coach View element in Custom HTML

Many of ibm bpm developer out there including me are wondering on how to gain control (access) over coach view elements in the coach from the Custom HTML using script. This use to be very easy in the 7.x versions of the IBM BPM where there is no concept of coach views. But even in 8.x version of IBM BPM with the introduction of coach view, it is bit tough but not achievable. After a bit of research I am able to achieve this. Just though of sharing it with you all.


In this post, let us see these two simple scenarios:
  • how to access a button coach view element and add an onclick event to it.
  • how to access an input element and read the value of the input element.

In the coach add a customHTML , inputText and Button coach view from the pallet on the right Side as shown in the below figure.
 Once added, check the control Id of the Input text and Button coach views (edit the same if you want to give a meaning full name to the control id)as shown in the below. This control Id is very important in order to access the UI element. In coach transformation this control id will be transformed to data-viewid (you can find this by looking at the html source of the page)

Above figure shows the control id for the InputText  "Name". the Control Id for this component is "Text_Name" . Similarly the Control Id for the Button coach view "OK" is "OK_1". 

Place the below script in the Custom HTML. This Script will dojo to access the button and input element.

<script>
require(["dojo/ready", "dojo/query","dojo/on"],function(ready, query,on){
  ready(function(){
          // button element
   var buttonElement=  query("div[data-viewid='OK_1']")[0];
          // input text element
  var Name=query("div[data-viewid='Text_Name']  input[role='textbox']")[0];

           on(buttonElement, "click", function(){
                      alert(Name.value)
                    
          });
    });
});
</script>

In the above script,  the line fetches the button element with control id "OK_1"by using the dojo.query:

var buttonElement=  query("div[data-viewid='OK_1']")[0];

and  the line below fetches the input element from coach with the control id "Text_Name":

var Name=query("div[data-viewid='Text_Name']  input[role='textbox']")[0];

With this our coach is ready. Let us run the human service and launch the coach.  
Below image shows the UI with a text field and button. 

                       

On click of "OK" button , an alert will be displayed with the text from input text field "Name" as shown in the below figure.



Just to  summarize:
In this post we have how to access coach elements via custom html and attach an on click event to button and get the value of the text field and display it as alert on click of button..

Hope this Helps !!!! 

you may also like : How to Access Coach View element in Custom HTML - Part 2

Thanks for stopping by. If you like this post leave a comment, share it and do a g +1.




5 comments:

  1. Hello ,
    I cannot get the value of text box am getting error i..e,
    "Uncaught TypeError: Cannot read property 'value' of undefined "
    in alert field.
    Thanking You.

    ReplyDelete
  2. Hi Abhilash,
    Thanks for stopping by.
    Can you please provide the code which you have used for this. I can take a look at it.

    ReplyDelete

  3. require(["dojo/ready", "dojo/query","dojo/on"],function(ready, query,on){
    ready(function(){
    // button element
    var buttonElement= query("div[data-viewid='OK_1']")[0];
    // input text element
    var Name=query("div[data-viewid='Text_Name'] input[role='textbox']")[0];

    on(buttonElement, "click", function(){
    alert(Name.value)

    });
    });
    });

    I have given ID for Text is "Text_Name" and I am getting error Name is undefined ..If i Remove the Array for Name i am getting alert but undefined
    I am using IBM BPM V 8.0.
    Thanking You

    ReplyDelete
  4. Hi Abhilash,
    Your script seems to be good. When I tried it IE it worked as expected, but in chrome it seems to have some issue. Am also not sure abt what the issue is in Chrome. Need to do some research on it.

    Thanks,

    ReplyDelete
  5. Hi Abhilash,
    Step 1 : create a coach view.
    Step 2 : Copy the below code into Load Event Handler

    require(["dojo/ready", "dojo/query","dojo/on"],function(ready, query,on)
    {
    ready(function(){
    // button element
    var buttonElement= query("div[data-viewid='Button1']")[0];
    // input text element
    var Name=query("div[data-viewid='Text1'] input[role='textbox']")[0];

    on(buttonElement, "click", function(){
    alert( Name.value)

    });
    });
    });

    Step 3 : saved it.create Human service.
    Step 4 : go to variables section in human service create a private variable.
    Step 5 : go to diagram drag a coach
    Step 6 : go to coaches drag one text box and in behaviour tab we have to bind your
    previously created private variable and change controle id to Text1.
    Step 7 : drag a button and change control id to Button1.
    Step 8 : drag your coach view below the button.

    Thanks.

    ReplyDelete