need to Get UI Page preloaded with data from scripts include

[abel91740]

Hi We are trying to get a UI Page in Service Catalog

(we are not in service portal but open to recommendation since we will be heading there in the future)

Thanks in advance

High Level: Displaying 3rd party data on self service catalog

What we are trying to accomplish to do the work:

We are creating an UI Page to be used as a Widget in Service Catalog, and the information that we are trying to display comes from a Scripts Include which is meant to run an api call and retrieve data so we can populate on the UI Page

We are not using the UI Action to form button to gather the info from any form.

If anyone could provide any kind of sample would be great 

Code below is what I had in mind and was testing

HTML in UI Page

<g:evaluate var="jvar_info" >

var ajax = new GlideAjax('Script_include_needed');
ajax.addParam('sysparm_name', 'function_in_the_script_include');
ajax.getXMLWait();
var inc2 =ajax.getAnswer();

<g:evaluate >

<p>${jvar_info}<p>

-----

Script include

var Script_include_needed= Class.create();
Script_include_needed.prototype = Object.extendsObject(AbstractAjaxProcessor, {
function_in_the_script_include: function () {
var request = new sn_ws.RESTMessageV2();
request.setEndpoint('3rd party endpoint);

request.setHttpMethod('GET');

request.setBasicAuth(user,pw); //need change
request.setRequestHeader("Accept","application/json");

var response = request.execute();
var body = response.getBody();
return body;
}

Please let me know if you have any questions, Thanks

[ChrisBurks · Accepted solution]

I have just a couple of notes:

1) if you're going to use g:evaluate, that will run server-side. So you don't have to make that a GlideAjax call. You should be able to do something like this:

<g:evaluate var="jvar_info">
	var info = new MyUtils().getInfo();
	info;
</g:evaluate>

<div id="info" class="container text-info"><h1>${jvar_info}</h1></div>

Script Include:

var MyUtils = Class.create();
MyUtils.prototype = {
    initialize: function() {
    },
    
    getInfo: function(){
	return "This is my info!";
    },

    type: 'MyUtils'
};

2) If in the future you plan on implementing Service Portal and you don't want to maintain code in two places then I would refrain from using JQuery in the UI Page. I say this because although a UI Page won't render in Service Portal there is a way to leverage the UI Page setup using GlideJellyRunner.
I set up a demo with the above UI page adding it to a Catalog Item. Then created a onload client script to hide the UI Page variable when viewed in Service Portal. 
From there I created a widget with the code below  and added it as a macro to the Catalog Item.

(function() {
  //Portal Server script
    var UIpage = new GlideRecord('sys_ui_page');
    UIpage.get('ee10122adbcda300860bd421cf961933'); //UI Page sys_id

    var gr = new GlideJellyRunner();

    data.parsedResult = gr.runFromScript(UIpage.html); 
})();

html

<div>
  <div ng-bind-html="data.parsedResult"></div>
</div>

Screenshots:
Platform view:

Service portal view:

[abel91740]

Thank you very much, this is the piece that I am missing !!!!!! Thank you very much