IBM BPM how to handle keypress events in Coach Views - javascript

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.

I would suggest you following approach.
Create one custom coach view (lets say CV1).
Within CV1 drag ibm bpm provided input text CV (give control id name as "inputText").
Within CV1 drag ibm bpm provided button CV (give control id name as "button").
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);
});

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.

Related

Simulating triggering listeners when modifying form elements in Chrome DevTools?

Scenario
I've been handed a custom work queue tool that runs in a browser. The interactions with the site are very repetitive and I'd like to see if I can trim down some of the interactions. Right now, I'm focused on using Chrome's DevTools console to try this.
I've used Inspect to gather the js paths of all of the form controls I want to change. These are all drop-down boxes.
There is one drop-down box, control3, who's contents is populated dependent on selections in two other drop down boxes, control1 and control2. If control1 or control2 are blank, control3 is also blank.
Problem
If I fire something like this in the console to set the values of control1 and control2:
document.querySelector("#control1").value = 'My Team'
document.querySelector("#control2").value = 'In Progress'
... control3's drop down is not populated.
My base understanding is that this .value change skirts around the functions/listeners that are attached to these controls.
I can see that control1 has an attribute ng-change="setServiceGroupDirty()", and if I follow that in the Sources tab, it's a function in a .js file that just changes a bool.
$scope.setServiceGroupDirty = function(){
$scope.activeTab.isServiceGroupDirty = true ;
} ;
If I just run setServiceGroupDirty() in the console, I get: setServiceGroupDirty is not defined
Question
Is there a way to use the DevTools console to simulate the user using a mouse/keyboard to select options in control1 and control2 so that the appropriate listener/functions trigger to populate control3?

Trigger Dynamic Actions from a JavaScript Animation in Oracle APEX

Hello fellow developers.
I am working with Oracle APEX. I have found a pretty beautiful JavaScript library about animation and I would like to use it in order to make my application more beautiful and to show the user the path in order to make some configurations in the database.
The library that I have found is called JIT (https://philogb.github.io/jit/demos.html) and I would like to use this instance: https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html.
After I implement the animation in APEX I would like to add some dynamic actions. For example every time one node is being clicked, a different region underneath the animation is being displayed and the other sub-regions are being hid.
Until now I have uploaded the JIT library and the JavaScript code that contains the Events and the functions about the animated tree in the shared components of my application. Also I have managed to display the animation in the Oracle APEX page, through an HTML code. I caught the Event that is happening whenever one node is being clicked. I have created also one dynamic action on a Region, and with this dynamic action I would like to show this Region. And every time, one different node is being clicked this Region is getting hidden. The dynamic action I have created has the existing attributes:
*Event ='Change'
*Selection Type = JQuery Selector
*JQuery Selector = $("#P5_NAME").val('INAS006E ');
,where P5_NAME is a field that I store in the JavaScript code the name of the node that is being clicked and 'INAS006E' is the name of one specific node.
*Action = Show
*Selection Type = Region
*Region = Test JS
, the name of the region that I want to display.
The biggest problem that I don't know how to overcome is, to pass the variable in the JavaScript code, node.name, in the Oracle APEX in order to trigger the dynamic actions.
Here is the Event that is being triggered where one node is clicked and where I store the node.name.
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$("#P5_NAME").val(node.name);
},
In conclusion, I want after one node is being clicked, one region is getting showed after I click one the next node, the previous node is being hid and another one is coming up. But in order to do that, I have to pass the variable from JavaScript code into Oracle APEX.
I have managed to solve this problem after a lot of testing and searching.
The truth is that the answer is simpler than I expected. All I had to do, is to change a little bit the code of the function, that is being triggered. The correct function is:
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$s("P5_NAME",node.name);
},
The $s("P5_NAME",node.name) sets the value of textfield P5_NAME with the name of the node.

Can i detect if a web page has been translated by Google?

I have a web page, in Dutch, with a poll with a radio button.
I'd like to know which language the users speak. Is there a way I can detect if the page has been translated by Google when they submit?
I do not use a translation bar, I am talking about the spontaneous google translation.
Just check a known element if the text matches your text.
function isDutch() {
return $('#readmore').text() === "Meer lezen";
}
or a non jQuery solution:
function isDutch() {
document.querySelector('#readmore').innerText === "Meer lezen";
}
Just make sure the element you have is an easy translatable sentence like read more.
Then you update a hidden field in your form with the result.
You can do this the moment a click is registered on your radio button.
I just tested it on a russian site, lenta.ru and ran $('a[href="/parts/news"]').text(); after having translated it by right clicking the page and selecting translate this page(chrome). The content returned was in my language(dutch) in the jquery text().
When translated through Google Translate, the target language is injected into the lang attribute of the main html tag, you can retrieve it with:
document.getElementsByTagName('html')[0].getAttribute('lang')
which results in something like
en-x-mtfrom-nl... and this in turn you can log to your server or set as a cookie.

Actually register a "user" key input programmatically

Background:
I am writing a Chrome extension that programmatically replaces abbreviations with snippets of text. Like, it can auto-replace "brb" with "be right back".
The way (simplified to this question) I insert this snippet expansion is like this:
var newFullText = textBeforeAbbrev + expansionText + textAfterAbbrev;
textarea.value = newFullText; // OR
div.innerHTML = newFullText;
Problem:
The problem here is that although this correctly inserts the expanded text, the website does not catch it as an update to the textarea/div contents.
Some sites internally keep a track of textarea/div contents, updating it on input events. That means, if I do this expansion and submit the form, on some sites (like Facebook, Hipchat), this newFullText won't be registered - because it wasn't a user input event - so the website didn't catch it either!. So, the submitted value would be having the text prior to this expansion.
My attempts:
I've already tried firing the keydown and input events - on the concerned textareas - in this manner with NO luck at all:
function triggerKeypress(keyCode){
var ev = new Event("input");
ev.keyCode = keyCode;
this.dispatchEvent(ev);
}
My question:
Is these a way to achieve what I am requesting? Specifically:
Simulate a user keypress/keydown/input/whatever_necessary on the textarea/div/input element, so that the website internally catches it as an input/keypress(whatever event it is supposedly looking for), and updates its internal text, so that the submitted text correctly shows up
I'm looking for a native JS solution. My app is a Chrome extension so naturally I plan to support Chrome code, although cross-browser support is appreciated.
Minimum viable code sample:
Here's the zip file of the minimum code (11KB) you need to reproduce the issue. Please run it and try changing those two methods in the code to get them work, as stated in this question. I've confirmed the linked code does STILL NOT work on Hipchat, Facebook posts and comments. More details inside file README.txt.
How to use it?
1. Open Hipchat team chat, or Facebook.
2. Type "brb" into the team chat box/Facebook post/comments.
3. Press Shift+Space.
4. The expanded text "be right back" would clearly show up inside the textarea.
5. Press enter.
6. The submitted value will show up as "brb" instead of "be right back"
This question is not a duplicate question: please note that the other questions are about:
1. firing a keydown that fires their own custom handler, and which naturally do NOT work here
2. are way too out-dated and have become convoluted over time
3. use deprecated methods like Document.createEvent
Please let me know for more clarification. Thanks!

RoR + How to refresh Javascript value when Ajax refreshes the textbox value

In my web page, I am using ajax + RoR to refresh the contents of the textbox using searchtool. All the value I am accessing, such like superset value for the current page. Means for example there is headquarter and it has many stations. When I am trying to access the value of headquarter at station then corresponding values changes at textbox.
Here, we are displaying the global value of head-quarter, due to less space I am showing telephone number and its quality on Tool-Tip. When page changes the value of station then whole contents changes but the tooltip remains same.
Sample of code:
<div class="divFloat" id="populate_phone1" onmouseout="UnTip()"
onmouseover='Tip("<%=GlobalPartnersHq.globally_phone_type(#station_hq.is_global_phone1, #station_hq.phone1_type_id) %>")' >
<%=GlobalPartnersHq.global_phone(#station_hq.is_global_phone1, #station_hq.phone1)%>
</div>
How can I refresh the JavaScript onmouseover value when ajax updates the value of textboxes?
I'm not following your code entirely, but it sounds like Ajax is updating the DOM and you want to trigger some additional code. What I recommend is that you emit a custom event and write separate handlers. If you are using jQuery check out trigger docs. You can do something like $.trigger('myEvent') then bind multiple handlers to it (e.g. $('selector').bind('myEvent', function() {});) to update various parts of the page.

Categories

Resources