Hi,
I am having some trouble at the moment getting a g:ui_multiline_input_field that is located in a UI page to render the input field at a particular height/width and was wondering anyone has any pointers on how to resolve the issue.
UI Page Current Code:
<g:ui_form>
<!-- Get values from dialog preferences passed in -->
<g:evaluate var="jvar_short_text"
expression="RP.getWindowProperties().get('short_text')" />
<g:evaluate var="jvar_comments_text"
expression="RP.getWindowProperties().get('comments_text')" />
<!-- Set up form fields and labels -->
<table width="100%">
<tr>
<td>
<!-- Comments text field (Contains comments from originating record as a default) -->
<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Notes" value="" mandatory="true"/>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr id="dialog_buttons">
<td colspan="2" align="right">
<!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.
'ok' option will call the 'validateComments' Client script function from the UI Page-->
<g:dialog_buttons_ok_cancel ok="return validateComments()" ok_type="button" cancel_type="button" />
</td>
</tr>
</table>
</g:ui_form>The above code renders the UI Macro as below. You can see that the multi line input field is created with an undesirable width. I have tried setting width and height values in the code block for where the g:ui_multiline_input_field is created but this didn't appear to do anything.
Any help on this appreciated.
Thanks!
Hi,
I ended up opting for a GlideModal instead to get around this, as no CSS changes that I made seemed to have a made a difference. The GlideModal UI is far better and there seems to be actual documentation around to support it. See screenshot example below.
As you can see, the UI here looks native to UI16 and (in my opinion) looks far better than the GlideDialogWindow.
If you want any code snippets on how to achieve the above let me know and I'd be happy to share.
Thanks.
Hi,
Please see the code examples below, any questions please let me know, happy to help! This example runs through a UI Action on the Incident where I ensure that the user must enter some work notes before clicking a button to start a 'Strike' process using UI Pages and GlideAjax.
I haven't provied the Script Include code for the 'strike' process called here as it is not relevant to the UI Page configuration. Just be aware that the AJAXStirke function calls the client callable Script Include and one of its functions to run a process, the AJAXStrike function is called in the client code for the UI Page then in the onSubmit function. What we end up with is the screenshot below.
Code snippets below 🙂
UI Action
function issueStrike() {
var sysId = typeof rowSysId == 'undefined' ? gel('sys_uniqueValue').value : rowSysId;
// Here I am calling the 'issue_new_strike' UI Page defined below.
var gDialog = new GlideModal('issue_new_strike');
gDialog.setPreference('sysparm_sysID', sysId);
gDialog.setTitle('Issue Strike');
gDialog.render();
}
UI Page (HTML)
<?xml version="1.0" encoding="utf-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null" trim="false">
<form id="issue_strike_form">
<g:evaluate jelly="true">
var source_task = jelly.sysparm_sysID;
</g:evaluate>
<span>Issue a new strike for an unresponsive caller.</span>
<br/><br/>
<div class="form-group" id="work-notes-wrapper">
<label class="col-sm-2 control-label" for="supporting_comments">
<span class="required-marker"></span>
${gs.getMessage('Notes')}:</label>
<div class="col-sm-10">
<textarea class="form-control propose-modal-textarea" id="supporting_comments" name="supporting_comments" type="text" mandatory="true" value=""></textarea>
</div>
</div>
<div class="form-group pull-right" style="margin-right: 15px;">
<button class="btn btn-primary" type="button" onclick="onSubmit();">Issue Strike</button>
</div>
<input type="hidden" name="source_task" id="source_task" value="${sysparm_sysID}"/>
</form>
<style>
.load_mask_container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
width: 100%;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
opacity: 0.80;
z-index: 1000;
align-items: center;
-ms-flex-align: center;
justify-content: center;
-ms-flex-pack: center;
}
.propose-modal-textarea {
resize: vertical;
min-height: 120px
}
#work-notes-wrapper .required-marker{
display: inline-block;
}
#issue_strike_form .form-group {
overflow: hidden;
margin-bottom: 5px;
}
</style>
</j:jelly>
UI Page (Client Script)
function onCancel() {
var c = gel('cancelled');
c.value = "true";
GlideDialogWindow.get().destroy();
return false;
}
function onSubmit() {
var e;
var comments = gel('supporting_comments').value;
if (comments == ' ') {
alert(getMessage("Please provide supporting comments for issuing the strike."));
e = gel("supporting_comments");
if (e)
e.focus();
//GlideDialogWindow.get().destroy();
} else if (comments != ' ') {
this.AJAXStrike();
GlideDialogWindow.get().destroy();
}
}
function AJAXStrike() {
var ga = new GlideAjax('IncidentManagementAJAXUtils');
ga.addParam('sysparm_name', 'issueCallerStrike');
// Pass in the comments entered as a paramater
ga.addParam('sysparm_new_strike_comments', gel('supporting_comments').value);
ga.addParam('sysparm_new_incident_sys_id', g_form.getUniqueValue());
ga.getXML(IssueStrike);
gsftSubmit(document.getElementById('sysverb_update_and_stay'));
}
function IssueStrike(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
return answer;
}
