UI Page HTML - field shows REQUIRED when not

[kristenankeny]

I'm creating a UI Action that pulls up a dialog window to create an approval task associated with a requested item. The UI page has some scripting issues, but I'm not very familiar with HTML, so I'm not sure what I'm doing wrong.

The first issue is that I've got a ton of wasted space to the left of my multiline text field and it's showing "REQUIRED". I don't want to show this, as this field I have set to not mandatory.

The other issue is not enough padding to the right of my fields.

Any help is greatly appreciated. The existing script is 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">

<g:ui_form>

<input type="hidden" id="cancel_or_submit" name="cancel_or_submit" value=""/>

<input type="hidden" id="item" name="item" value="${sysparm_id}"/>

<table width="100%">

              <tr>

                  <td><label for="${jvar_app_query}" onclick="" dir="">${gs.getMessage("Approver:")}</label><g:ui_reference name="sys_user" table="sys_user" columns="user_name;name" completer="AJAXTableCompleter"/></td>

              </tr>

  <tr></tr>

  <tr>

            <td>

                <!-- Comments text field (Contains comments from originating record as a default) -->

      <label>${gs.getMessage("Comments:")}</label><g:ui_multiline_input_field name="dial_comments" mandatory="false" />

            </td>

        </tr>

              <tr id="dialogbuttons">

                      <td colspan="2" align="right">

                              <g:dialog_buttons_ok_cancel ok="return actionOK();" cancel="return cancel();"/>

                      </td>

              </tr>

</table>

</g:ui_form>

</j:jelly>

Client script:

function actionOK(){

      var app_id = gel('sys_user').value;

      if (app_id == '') {

              alert(getMessage("Please select an approver"));

              return false;

  }

  var c = gel('cancel_or_submit');

      c.value = "submit";

  return true;

}

function cancel(){

  var c = gel('cancel_or_submit');

      c.value = "cancel";

  return true;

}

Processing script (the comments aren't working yet):

if (cancel_or_submit == "submit") {

      var gr = new GlideRecord('sysapproval_approver');

  gr.initialize();

  gr.approver = request.getParameter('sys_user');

  gr.comments = request.getParameter('dial_comments');

  //gr.source_table = 'sc_req_item';

  //gr.document_id = request.getParameter('item');

  gr.sysapproval = request.getParameter('item');

  gr.state = 'requested';

  gr.insert();

  //reloadWindow(window);

  //action.setRedirectURL(current);

      //response.sendRedirect("dev17435.service-now.com/sysapproval_approver.do?sys_id=" + gr.sys_id);

  var urlOnStack = GlideSession.get().getStack().bottom();

  response.sendRedirect(urlOnStack);

}

else {

      var urlOnStack = GlideSession.get().getStack().bottom();

      response.sendRedirect(urlOnStack);

}

[kristenankeny]

I still haven't found a solution for this. This is what I'm seeing when I inspect the page:

<tr><td choice="0" class="label" id="label.dial_comments" nowrap="true" style="vertical-align: top; padding-top: 5px;" type="string"><label class="   control-label" dir="ltr" for="dial_comments" onclick=""><span class=" required-marker" id="status.sys_user" mandatory="false" oclass=""></span><span class="label-text">REQUIRED</span></label></td><td nowrap="true" style="width: 100%;"><textarea id="dial_comments" name="sys_user" onchange="onChange('dial_comments');" onkeyup="" rows="5" size="" style="width: 100%" wrap="soft"> </textarea></td></tr>

[stevesmith]

If you still need an answer to this, set the attribute label='' and it will remove that REQUIRED text. You may need to dig a little deeper as the box will still be oriented to the right and look a little out of place.

[Dave12]

I know this is a really old thread but I have the solution for anyone else struggling with this.

ui_multiline_input_field is an out the box ui macro so the behaviours you are seeing are as intended, but not welcomed 🙂

To fix, create a new ui macro, (called "ui_multiline_input_field_2" or whatever) and copy the code across (or use insert and stay). Next, delete the following code from the new macro:

<td id="label.${jvar_name}" class="label" nowrap="true" style="vertical-align: top; padding-top: 5px;" type="string" choice="0" oncontextmenu="${jvar_oncontextmenu}">
<g:form_label onclick="${jvar_onclick_label}" for="${jvar_name}"> ${jvar_label}<j2:if test="$[GlideMobileExtensions.getDeviceType() != 'doctype']">:</j2:if></g:form_label>
</td>

Then amend your ui page to point at the new macro.

You'll obviously need to set your labels on the ui page once this is gone, but it will get rid of the problem, and make your fields align better.

NOTE: ui macros can suffer from cache issues, so run a cache.do if things aren't behaving as expected.

[demet1]

Hi Dave,

Your answer was helpful. I created a UI macro (ui_multiline_input_field_v2) that is the with the original one and extracted the field you said. But it didn't work. Description field disappeared. However, when I excluded the field from the original ui macro it worked. How can I solve this problem using the copy one?

Thanks a lot.

uı page and form when I use "ui_multiline_input_field" :