Hoping someone can help with basic jQuery to get us started ...

[Justin Thomas 2]

Hoping someone can help with basic jQuery to get us started in the right direction.

We are using Embedded JavaScript to enhance the functionality of some of the forms we are building using the HTML Canvas, and have been able to accomplish most of what we need using basic JavaScript functions. However, I would really like to be able to return a value from a procedure using embedded code.

We have a form with controls where the user can enter a value (employee id) and there is a Task tied to that control that Refreshes another control (by calling a fex) on Selection Changed. The fex accepts the value entered by the user as a parameter and returns additional information to display in the page. Setting these up as Tasks is straight-forward when there are only a few in a form. However, the Tasks can get a bit clunky/difficult to navigate, especially when there are more than a few.

It seems like we should be able to accomplish the same thing with JavaScript/jQuery. I am relatively familiar with JavaScript, but really have no experience with jQuery, and have not been able to successfully implement even a basic function in a page yet.

$(#button1).click(function(){

alert(Button Click);

});

I am searching threads here and in Focal Point, but not having any luck finding an example that I can understand enough to be able to modify it in order to just get started learning how to embed jQuery in a page in App Studio.

Any advice would be greatly appreciated.

[Toby Mills]

Hi Justin

Im awful at front end javascript, but I found @david.beagan posted an example of some jquery on focalpoint back in 2012:

[sOLVED] jquery and webfocus

Maybe the inline HTML in that example will give you a place to start

David will surely know more

[David Beagan]

Hey Toby, actually that was David Briars with the Focalpoint post.

[David Beagan]

Justin, just for getting started, I added a button to an HTML Canvas page and and added your code:

 

image.png697380 43.9 KB

 

When I run the page I can click the button and see the alert.

[Justin Thomas 2]

Thank you, David.

I did not know the code needed to be in the window_onload() function.

[David Beagan]

I created a fex to show an employees information.

Public/employee_info.fex

TABLE FILE employee

PRINT EMP_ID

LAST_NAME

FIRST_NAME

HIRE_DATE

WHERE EMP_ID EQ '&EMP_ID'

ON TABLE SET PAGE NOLEAD

ON TABLE SET STYLE *

INCLUDE=IBFS:/EDA/EDASERVE/_EDAHOME/ETC/warm.sty,$

ENDSTYLE

END

 

In HTML Canvas I created a button and then clicked the HTML Object:

 

image.png2566244 159 KB

 

created one on the page. It gets an id=rawhtml1. In the Embedded JavaScript

if(typeof(bRuntime) != 'undefined') {

// TODO: Add your inline runtime code here

}

 

//Begin function window_onload

function window_onload() {

 

$('#button1').click(function(){

loadXMLDoc();

});

 

function loadXMLDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("rawhtml1").innerHTML = this.responseText;

}

};

var locate = '/ibi_apps/run.bipBIP_REQUEST_TYPE=BIP_RUN';

var folder = '&BIP_folder=IBFS%253A%252FWFC%252FRepository%252FPublic';

var fex = '&BIP_item=employee_info.fex';

var parm = '&EMP_ID=119329144';

var url = locate + folder + fex + parm;

xhttp.open("GET", url, true);

xhttp.send();

}

 

UpdateData();

 

// TODO: Add your event handler code here

//add onInitialUpdate() function to make changes before initial run of the reports

}

//End function window_onload

 

Which runs the employee_info.fex passing EMP_ID=119329144 and puts the output in the rawhtml1 object.

Run the page and click the button and the Employee Info dispays in the HTML Object:

[Toby Mills]

Oops - I knew you knew about this sort of thing and immediately associated your names.

Looks like good examples to get Justin started.