UI page (jelly) - how to use dynamic data in g:evaluate-CodePudding

TLDR: How to access i.e. variables or say values in a input field - within the evaluate?

Hello :)

The short of it, is that I have a UI page (modal opened by UI action) with an input field. Onchange, this field needs to run some serverside code that validates the field. The main issue is actually accessing the input data within the evaluate. It doesn't seem posssible to access variables or HTML fields. I can fetch variables set in the modal via setpreferences using RP, but the input data is created within the page, not the UI action.

Is there a way to pass data to an evaluate, or at least have it fetch it itself? I'm seriously considering just creating a script include called via glideajax to do the job.

Help would be much appreciated. Brgds.

Tried fetching variables within g:evaluate, both from client script and HTML id's.

HTML/Jelly code:

<g:cs_ui_text_field  name="input_field_value" id="input_field_value" value="" onchange="validateRequest();" /> <!-- Dont mind the macro name, its just a text field (input). -->
<g2:evaluate var="jvar_gr" jelly="true">
  var return_value = '${input_field_value}'; // Attempting to fetch field value wont work.
  return_value ;
</g2:evaluate>

Client script:

function validateRequest() { 
  // ValidateRequest calls evaluate jvar_gr, and alerts the return value.
  alert('$[jvar_gr]');
}

CodePudding user response：

As far as I know, you'd need to do this via a GlideAjax call like you mentioned within your client script. Jelly code is used to perform server-side rendering. That means that when your browser requests the UI page from ServiceNow, ServiceNow's servers will run the jelly code. That involves running code within the g2:evaluate tags, and also substituting your macro with raw HTML that your browser can understand (browser don't understand jelly, it only understands how to render HTML). This raw HTML is then sent to your browser to show your UI page.

So the code within your <g2:evaluate></g2:evaluate> tags run before the user even sees your page and has a chance to start interacting with it. So you'll need to perform your server-side calls within your client script component of your UI page. To access an input value using a client script, you can use gel:

function validateRequest() { 
  var gr = gel("input_field_value").value; // read the value from the input
  var ga = new GlideAjax(/* your script include */);
  ga.addParam('sysparm_name', /* method name */);
  ga.addParam(/* param name */, gr);

  ga.getXMLAnswer(function(answer) {
     // do what you need to do to update your UI.
  });
}

Keep in mind that a UI page's processing script can also run server-side code, and can access input variables. But this usually only comes in handy if you're submitting a form (created with <g:form>), and not trying to run code on change. However, this might be useful depending on when you need to make your server-side calls and your actual use case.