GlideDialogWindow setSize and removeCloseDecoration on Fuji

kenny_vl1 · ‎11-02-2015

An onLoad catalog client script was created, which calls a dialog window.

function onLoad() {
   var dialog = new GlideDialogWindow("sc_cat_item_disclamer"); //create "Terms and Conditions" dialog window
   dialog.setTitle(getMessage('disclamer_title')); //Set the dialog title
   dialog.setSize(600,600); //Set the dialog size
   dialog.removeCloseDecoration(); //remove the close cross from the dialogwindow
   dialog.render(); //Open the dialog
}

I included the setSize method for future compatibility with Fuji.

In Eureka, I don't see the 'CloseDecoration' and the sizes are set as defined in the script. Just as expected.

In Fuji environment I am seeing the CloseDecoration and only the width is being adjusted according to the setSize. The height does not change. This is not at all what I expected.

It seems that the removeCloseDecoration is not working and neither is the height parameter from the setSize method.

function onLoad() {
   var dialog = new GlideDialogWindow("sc_cat_item_disclamer"); //create "Terms and Conditions" dialog window
   dialog.setTitle(getMessage('disclamer_title')); //Set the dialog title
   //dialog.setSize(600,600); //Set the dialog size
   dialog.setWidth(600); //Set the dialog width
   dialog.setHeight(600); //Set the dialog height
   dialog.removeCloseDecoration(); //remove the close cross from the dialogwindow
   dialog.render(); //Open the dialog
}

I have tried splitting up the width and height methods for testing purposes, but now the dialog window just keeps loadin and doesn't render.

When I remove the height, the dialog window renders fine.

Has anyone else already experienced similar behaviour? I am thinking this could very well be a bug in Fuji.

ChrisBurks · ‎11-03-2015

The ui_multiline_input_field is a textarea element. Whether using ServiceNow or any webpage it needs to have a size setting placed on it. By default a textarea element renders in a fixed sized. Unlike a div it doesn't change its size based on the text content within it. The size has to be set or scripted to dynamically grow.

So you have to take that into consideration when using a textarea in combination with a table element. Although a set size is placed on a table the cells within a table by default grows in size based on it's content. If a textarea is the only element used within a table cell then the table cell's size is based on the textarea's dimensions. And it's default padding and margin properties. All elements have a default padding and margin size.

If you're on Eureka I would try leveraging some of the bootstrap styling that the ServiceNow platform provides. Or try displaying your text in the table cell without the ui_multiline_input_field.

Tables are an easy way to organize the display but since bootstrap is on the platform there are more modern ways to get a nice visual display.

I hope that helps.

View solution in original post

Kalaiarasan Pus · ‎11-03-2015

No code is here ?

kenny_vl1 · ‎11-03-2015

It seems the form had messed up the RAW html lines, I changed them to quotes. Should be displaying the code in my previous response now.

arobertson · ‎11-03-2015

Hi,

I have the below setup in my UI page.

<g:ui_form>

<input type="hidden" id="cancelled" name="cancelled" value="false"/>

     <table width="700" height="500">

         <tr>

             <td>

                 <g:ui_multiline_input_field name="dial_comments" rows="33" id="dial_comments" label="Request Closure Comments (customer visible)" value="${jvar_comments_text}" mandatory="true" />

             </td>

         </tr>

         <tr>

             <td colspan="2">

             </td>

         </tr>

         <tr id="dialog_buttons">

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

<g:dialog_buttons_ok_cancel ok="return onOK()" cancel="return onCancel()" ok_type="button" cancel_type="button"/>

               </td>

         </tr>

   </table>

</g:ui_form>

kenny_vl1 · ‎11-03-2015

This already takes me one step closer to my goal, thank you for that.

What happens now, is that the dialog window is indeed the desired 600,600 in size BUT it means it is not being overruled by the catalog client script's method

new GlideDialogWindow("tablename").setSize(100;100)

what it used to do in Eureka.

In order to come to a 100% valid solution, I still need to set the field's size inside the UI page.

The ui_multiline_input_field is still very small inside the UI page, although I have set it's rows to 33 on the UI page's record.

I tried to apply the same 'logic' as for the UI page and catalog client script by changing the number of rows in the UI Macro's parameters but it is still rendering as in the below screenshot.

The parameters passed in the UI page:

<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="${gs.getMessage('disclamer_sub_title')}" value="${gs.getMessage('disclamer_terms')}" mandatory="true" rows="33" readonly="true"/>

The parameters set in the (Out of the box) UI Macro:

 <g:macro type="text" name="REQUIRED" label="REQUIRED" value="" onkeyup="" onchange="onChange('${jvar_name}');" onclick_label="" mandatory="false" size="" style="width: 100%" rows="33" readonly="false"/>

To sum up what I think is happening:

- The setSize method from the catalog client script is not overruling the size that has been set on the UI Page record

- The rows parameter from the UI Page record is not overruling the rows parameter from the UI Macro record.

Kalaiarasan Pus · ‎11-03-2015

If it is not overruling and you want it to be done, then pass the size parameter using setpreference. Use a onload script in your UI page and set these dynamically