0

I am somewhat familiar with HTML, CSS and JavaScript and have written some small apps using Angular and Ionic.

Now I am working with IBM BPM Coach Views and tries to make a simple Coach View with an input field (bound to a string variable) and a button.

I would like to have the button disabled (in BPM language: read only) as long as the field is empty, but when the user starts to type anything in the field, the button should become enabled. I have bound the visibility of the button to another string variable.

I have searched around and it seems I cannot find any simple examples of controlling visibility based on keypress events in BPM.

All I have seen are examples with Dojo components and Dijit widgets and currently that is a bit above my head. I would expect there must be some (relatively) simple way of doing it with some 20-40 lines of JavaScript in either the “Inline JavaScript” section or in one (or more) of the “Event Handlers” on the Behavior tab in the Coach View Designer in IBM BPM 8.5.6. (it opens in a browser window because my Coach View runs in a Client Side Human Service).

Does anyone have such a simple example.

Per Beliing
  • 73
  • 1
  • 7

2 Answers2

1

I would suggest you following approach.

  1. Create one custom coach view (lets say CV1).
  2. Within CV1 drag ibm bpm provided input text CV (give control id name as "inputText").
  3. Within CV1 drag ibm bpm provided button CV (give control id name as "button").

  4. Within inline JS or load event of CV1 write following code.

    // get input text elment
var inputText = dojo.query("data-viewid['inputText']",this.context.element);
var button = dojo.query("data-viewid['button']",this.context.element);

//make button as disabled by default

button.setAttribute('disabled', true);


//key press event on input text

inputText.on("keydown", function(event) {
//Write your custom logic on key press
button.setAttribute('disabled', false);
});
Enamul Hassan
  • 5,266
  • 23
  • 39
  • 56
Ruhul
  • 990
  • 7
  • 15
  • I have not tested the above code and it may work but the overall idea is the same as what you have coded above. However there are few considerations: 1) setAttribute function may set the attribute on top/root div element instead of – Tukesh Sep 10 '21 at 21:21
0

What you are trying to achieve is validation script in "Data Change" tab of coach but if you want using events, use onInput or onChange even of input text coach view

if(me.getData()){
   ${viewId_of_button}.setEnabled(true);
}
else ${viewId_of_button}.setEnabled(false);

Product keeps updated, so look for code best for your version. Note- if you use onChange, user may have to click outside the input field to trigger change event.

Tukesh
  • 73
  • 7