calling REST message in UI macro

[priyankapalaska]

I have created a widget to fetch data by calling REST API (third party tool). So on the catalog form, its showing based employee_id field changes, which is working fine. 

But for native UI I have to create a UI Macro in place of widget. But through macro I am not able call REST msg. and How I can update the macro based on field changes. 

Any suggestion. 

Appreciate quick replies. 

Thanks a lot,

Priyanka

[johnfeist]

Hi Priya,

Why do you need to use a UI Macro?  You should be able to do the changes through a business rule or client script.  If doing it through a client script, I'd suggest having all the work done in a server side script include that you access via an AJAX call.  The processing is the same whether it's done via a client script or a business rule.  From your description, I'm assuming that you are doing a REST GET so once the REST call completes you should be able to do your update.

Hope that helps.

:{)

Helpful and Correct tags are appreciated and help others to find information faster

[priyankapalaska]

Hi John,

I need to display some records dynamically on a catalog form. these records i am fetching through REST GET call. Portal Screenshot below:

Even though I used client script for all processing, i am supposed to display that processed data in UI Macro for native UI(console). Below function call I have written to pass the info to Macro, and it is showing the alert. But how I can use this info further to display in table? 

Client script:

callTangoeMacro(desc,price,name,id);

Macro: 

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>

function callTangoeMacro1(desc,price,name,id)
{
alert("SI res = "+name);

//How to set this info in jvar variables?
<j:set var="jvar_desc" value="" />
//or using
<g:evaluate var="jvar_name">
name;
</g:evaluate>

}
</script>

//HTML code below

But here both set and evaluate are not working. 

Request you to suggest.

Thanks,

Priyanka 

[johnfeist]

Hi Priya,

You are looking in an area where I don't have the expertise to provide meaningful inputs so I'll drop out of this thread.

:{(

[ChrisBurks]

Hi Priyanka,

Since the javascript function within the macro can be called from the client script it means that the macro is already rendered. At this point jelly wouldn't be used as jelly runs server-side before the page renders.

Therefore at this point you can use plain javascript within the macro just like the alert call and passing in the name.

I have take your macro and extended it with some basic javascript and html form elements to give an example. I made a version of a client script to call the function within the macro and passed in some values.

Client Script:

//desc,price,name,id
callTangoeMacro1("My description","$2.25","An Example","123456789") 

Macro:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<script>
function callTangoeMacro1(desc,price,name,id)
{
	var formEl = document.querySelector('#tangoform');
	formEl.querySelector('#descVal').value = desc;
	formEl.querySelector('#priceVal').value = price;
	formEl.querySelector('#idVal').value = id;
	formEl.querySelector('#nameVal').innerText += (" " + name);
	
}
</script>

<div id="tangoform">
	<h3>The Macro</h3>
	<h3 id="nameVal">Name: </h3>
	<form class="clearfix">
		<div class="form-group">
			<label class="col-xs-12 col-md-3 control-label">
				<span class="label-text">Description</span>
			</label>
			<div class="col-xs-12 col-md-9 form-field input_controls" style="margin-bottom: 15px">
				<input id="descVal" value="" class="form-control" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-md-3 control-label">
				<span class="label-text">Price</span>
			</label>
			<div class="col-xs-12 col-md-9 form-field input_controls">
				<input id="priceVal" value="" class="form-control" style="margin-bottom: 15px" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-md-3 control-label">
				<span class="label-text">ID</span>
			</label>
			<div class="col-xs-12 col-md-9 form-field input_controls">
				<input id="idVal" value="" class="form-control" />
			</div>
		</div>
	</form>
</div>
</j:jelly>

Rendered: