How to Display Text in a UI Page HTML

[Surbhi Srivasta]

Hi,

I have a UI Page where I need some advice/help on how can we display the text retrieved in Client script and need to be passed to HTML?

Right now, I have the info in my client script which is coming from Script include but unable to display it in UI PAGE as not sure on how can we pass the value to HTML.

My code below:

HTML:

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

<g:evaluate var="jvar_current" expression="RP.getParameterValue('sysparm_record')"/>
<g:evaluate var="jvar_current_display" expression="RP.getParameterValue('sysparm_record_display')"/>


<table>
	<tr><td style="width:25%;padding: 5px;">
		<g:form_label>Label 1</g:form_label>
	</td>
	<td style="width:25%;padding:5px;">
		<g:form_label>Label 2</g:form_label>
	</td>
	</tr>
	<br/>
	<tr>
		<td class ="paddingBetweenCols" style="width:60%">
			<g:ui_reference name="user_ref" id="user_ref" value="${gs.getUserID()}" displayvalue="${gs.getUser().getDisplayName()}" table="sys_user"  />
		</td>
		<td class ="paddingBetweenCols" style="width:60%">
			<g:ui_reference name="rec_details" id="rec_details" value="jvar_current" displayvalue="${jvar_current_display}" table="incident"  />
  </td>
	</tr>
	</table>
	<br/>
	<div>
		<b>Users</b>
	</div>
	<br/>
	<g:ui_form>
	//Not sure if this is the crrect place I need to add my requirement to
	</g:ui_form>
	
<style>
	.paddingBetweenCols{
  padding: 10px;
}
</style>

</j:jelly>

Client Script:

populateDetails();

function populateDetails() {
    var getDetails = new GlideAjax('SI Name');
    getDetails.addParam('sysparm_name', 'Fucntion Name');
    getDetails.addParam('sysparm_recordID', g_form.getUniqueValue());
    getDetails.addParam('sysparm_record_table', g_form.getTableName());
    getDetails.getXMLAnswer(getDetails1);
}

function getDetails1(answer) {
    var parseEmail = JSON.parse(answer);

 I have the data in parse email. I just need help on how can we display or pass it to HTML
}

[Ankur Bawiskar]

@Surbhi Srivasta 

you can add a placeholder tag and hide it in HTML

Once you have the value in client script; set the inner text of that HTML element and show that element

which client script are you referring? UI page client script?

[Surbhi Srivasta]

Hi Ankur,

So something like below:

<g:ui_form>
	<input type="text" id="email_subject" placeholder="" disabled="true" size="80"></input>
	</g:ui_form>

Can you please guide me on how to perform this step which you mentioned :

Once you have the value in client script; set the inner text of that HTML element and show that element

I am using the client script in UI Page form which is there.

Regards,

Surbhi

[Ankur Bawiskar]

@Surbhi Srivasta 

do this

HTML:

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

<g:evaluate var="jvar_current" expression="RP.getParameterValue('sysparm_record')"/>
<g:evaluate var="jvar_current_display" expression="RP.getParameterValue('sysparm_record_display')"/>

<p id="hiddenElement" style="display:none;"></p>

<table>
<tr><td style="width:25%;padding: 5px;">
<g:form_label>Label 1</g:form_label>
</td>
<td style="width:25%;padding:5px;">
<g:form_label>Label 2</g:form_label>
</td>
</tr>
<br/>
<tr>
<td class ="paddingBetweenCols" style="width:60%">
<g:ui_reference name="user_ref" id="user_ref" value="${gs.getUserID()}" displayvalue="${gs.getUser().getDisplayName()}" table="sys_user" />
</td>
<td class ="paddingBetweenCols" style="width:60%">
<g:ui_reference name="rec_details" id="rec_details" value="jvar_current" displayvalue="${jvar_current_display}" table="incident" />
</td>
</tr>
</table>
<br/>
<div>
<b>Users</b>
</div>
<br/>
<g:ui_form>
//Not sure if this is the crrect place I need to add my requirement to
</g:ui_form>

<style>
.paddingBetweenCols{
padding: 10px;
}
</style>

</j:jelly>

Client script:

populateDetails();

function populateDetails() {
var getDetails = new GlideAjax('SI Name');
getDetails.addParam('sysparm_name', 'Fucntion Name');
getDetails.addParam('sysparm_recordID', g_form.getUniqueValue());
getDetails.addParam('sysparm_record_table', g_form.getTableName());
getDetails.getXMLAnswer(getDetails1);
}

function getDetails1(answer) {
var parseEmail = JSON.parse(answer);

documnet.getElementById('hiddenElement').value = parseEmail; // set the value
document.getElementById('hiddenElement').style.display = ''; // show the hidden element/tag

//I have the data in parse email. I just need help on how can we display or pass it to HTML
}

[Surbhi Srivasta]

Hi @Ankur Bawiskar 

Solution proposed is not working. Currently after making the change, it is not able to display the content on the UI Page

1. Have updated the HTML of the UI Page as below:

HTML:

<?xml version="1.0" encoding="utf-8" ?>

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

<b>Display Popup</b>

<br/>

<br/>

<g:evaluate var="jvar_current" expression="RP.getParameterValue('sysparm_record')"/>

<g:evaluate var="jvar_current_display" expression="RP.getParameterValue('sysparm_record_display')"/>

<table>

              <tr><td style="width:25%;padding: 5px;">

                             <g:form_label>Label 1</g:form_label>

              </td>

              <td style="width:25%;padding:5px;">

                             <g:form_label>Label 2</g:form_label>

              </td>

              </tr>

              <br/>

              <tr>

                             <td class ="paddingBetweenCols" style="width:60%">

                                           <g:ui_reference name="user_ref" id="user_ref" value="${gs.getUserID()}" displayvalue="${gs.getUser().getDisplayName()}" table="sys_user"  />

                             </td>

                             <td class ="paddingBetweenCols" style="width:60%">

                                           <g:ui_reference name="rec_details" id="rec_details" value="jvar_current" displayvalue="${jvar_current_display}" table="incident"  />

  </td>

              </tr>

              </table>

              <br/>

              <div>

                             <b>Users</b>

              </div>

              <br/>

              <div>

                             <b>Subject</b>

                             <br/>

                             <br/>

                             <p id="email_subject" style="display:none;"></p>

              </div>  

<style>

              .paddingBetweenCols{

  padding: 10px;

}

</style>

</j:jelly>

Client Script in UI Page:

populateDetails();

function populateDetails() {

    var getDetails = new GlideAjax('SI Name');

    getDetails.addParam('sysparm_name', 'Fucntion Name');

    getDetails.addParam('sysparm_recordID', g_form.getUniqueValue());

    getDetails.addParam('sysparm_record_table', g_form.getTableName());

    getDetails.getXMLAnswer(getDetails1);

}

function getDetails1(answer) {

    var parseEmail = JSON.parse(answer);

document.getElementById('email_subject').value = parseEmail.subject;

    document.getElementById('email_body').value = parseEmail.body;

    document.getElementById('email_subject').style.display = ''; // show the hidden element/tag

}

I am getting the details in client script but it is not displaying it in HTML

Regards,

Surbhi