Wednesday, July 13, 2016

Fluid UI - Custom Development - Invoke JavaScript from PeopleCode

There are some notable additions to PeopleCode support for Fluid UI in terms of the built-in functions and properties that are delivered.

In Classic, if we had a requirement to invoke a JavaScript function from PeopleCode, then one option would be to use a HTMLAREA on the page and dynamically populate the HTMLAREA value with the JavaScript code.

In Fluid, we can very easily use the AddOnLoadScript function to invoke JavaScript in the onload event and the Field Class - JavaScriptEvents property to associate JavaScript events to a Field.

For the purposes of a demonstration, I created a simple Fluid page with 3 button fields.


I added the following Page Activate PeopleCode:

Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;

/* Set ViewPort Meta for SFF Scaling */

SetViewport(""); /* apply the system default viewport setting */

AddStyleSheet(StyleSheet.PSBASE_LAYOUT);

AddJavaScript(HTML.CSK_PC2JS_FLU);

AddOnLoadScript("pageActivate();");
CSK_FL_PC2JS_WK.BUTTON1.JavaScriptEvents = "onclick='javascript:button1();'";
CSK_FL_PC2JS_WK.BUTTON2.JavaScriptEvents = "onclick='javascript:button2();'";
CSK_FL_PC2JS_WK.BUTTON3.JavaScriptEvents = "onclick='javascript:button3();'";



Here is the JavaScript in the HTML Object CSK_PC2JS_FLU:

var pageActivate = function() {
    console.log('JS invoked from Page Activate');
};
var button1 = function() {
    console.log('JS invoked by Button 1 OnClick');
};
var button2 = function() {
    console.log('JS invoked by Button 2 OnClick');
};
var button3 = function() {
    console.log('JS invoked by Button 3 OnClick');
};


Click here to check out a demo video >>>> SWF File

3 comments:

  1. Hei

    How Can I execute fieldchange event of a field in the page using javascript?

    ReplyDelete
    Replies
    1. You should try to avoid such things unless absolutely required. I am not sure what your requirement is but I would not recommend this in Fluid.

      Having said that, you could follow a similar approach that we use in Classic:
      https://pe0ples0ft.blogspot.com/2015/07/invoke-peoplecode-event-from-javascript.html

      Technically, this should work in Fluid also.

      Delete
    2. I am just curious to know whether it is possible to achive it using Field Class - JavaScriptEvents property

      Delete