Hi,
I have a UI page that "pops up" at the click of a button and asks the user some questions which are then used to populate fields on the form. This is part of some adaptations to the major incident management process that we want to put live.
I have been able to piece together the various parts to get to the point where it does what I want. UI action creates a dialog box and pulls in the UI page detail to populate it with the questions and even the part where it actually does something with the answers to those questions.
I'm a little bit proud of that as I have no HTML knowledge up to this point.
Now, however, I'm getting stuck on actually making it look right. I realise that the size of the dialog box is determined by the UI action and so I can affect that but no matter what I do, all of the questions are squeezed up against the left hand side of the box, like this:
I've run through the sections regarding columns on https://www.w3schools.com/ and looked through pre-existing ui pages to look for examples that I could re-use but I haven't been able to find anything that would allow me to easily split the questions into 2 groups that then display side by side (similar to the "split" function on the form layout). I currently have 96 different versions of the page stored!!
Here is the HTML from the UI Page:
<?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>
<!-- Get values from dialog preferences passed in -->
<!-- <g:evaluate var="jvar_ticket_number" expression="Answer all questions:" /> -->
<!-- RP.getWindowProperties().get('ticket_number')" /> -->
<!-- Set up form fields and labels -->
<table width="100%">
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Short description value used as a label -->
${'Please answer all questions:'}
</td>
</tr>
<tr>
<!-- Question 1 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q1" id="q1" label="Is a Business Critical or Customer facing service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
<!-- Question 2 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q2" id="q2" label="Are there any critical business functions you are not able to carry out?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
<!-- Question 3 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q3" id="q3" label="Is this a business-critical period?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
<!-- Question 4 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q4" id="q4" label="Is a Non-Business Critical service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
<!-- Question 5 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q5" id="q5" label="What percentage of users or customers are affected?" value="" mandatory="true"><option value="0">0</option>
<option value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></g:ui_choice_input_field>
<!-- Question 6 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q6" id="q6" label="Is there a workaround available?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
<!-- Question 7 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q7" id="q7" label="If Yes, has this been implemented?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
<!-- Question 8 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q8" id="q8" label="Have any changes or updates been made in the last 7 days?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</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>
</j:jelly>How do I best achieve this?
Please be gentle. All of this is self taught from bits and pieces cobbled together.
Also, whilst we're at it, I would have expected the OK/Cancel buttons to align to the right as dictated in the TD line just above the comment. What's happening there?
1 ACCEPTED SOLUTION
Hi,
then try this
This should look much better
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left:-5px;
margin-right:-5px;
}
.column {
flex: 50%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<g:ui_form>
${'Please answer all questions:'}
<div class="row">
<div class="column">
<table width="50%">
<tr id="description_row" valign="top">
<td colspan="2">
<g:ui_choice_input_field name="dial_q1" id="q1" label="Is a Business Critical or Customer facing service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<!-- Question 1 text field (Contains comments from originating record as a default) -->
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 2 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q2" id="q2" label="Are there any critical business functions you are not able to carry out?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 3 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q3" id="q3" label="Is this a business-critical period?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 4 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q4" id="q4" label="Is a Non-Business Critical service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
</table>
</div>
<div class="column">
<table width="50%">
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 5 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q5" id="q5" label="What percentage of users or customers are affected?" value="" mandatory="true"><option value="0">0</option>
<option value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 6 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q6" id="q6" label="Is there a workaround available?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 7 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q7" id="q7" label="If Yes, has this been implemented?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 8 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q8" id="q8" label="Have any changes or updates been made in the last 7 days?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</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>
</div>
</div>
</g:ui_form>
</j:jelly>Output:
Regards
Ankur
Try this
<?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>
${'Please answer all questions:'}
<table width="100%">
<tr id="description_row" valign="top">
<td colspan="2">
<g:ui_choice_input_field name="dial_q1" id="q1" label="Is a Business Critical or Customer facing service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<!-- Question 1 text field (Contains comments from originating record as a default) -->
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 2 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q2" id="q2" label="Are there any critical business functions you are not able to carry out?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 3 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q3" id="q3" label="Is this a business-critical period?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 4 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q4" id="q4" label="Is a Non-Business Critical service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td>
<!-- Question 5 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q5" id="q5" label="What percentage of users or customers are affected?" value="" mandatory="true"><option value="0">0</option>
<option value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td>
<!-- Question 6 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q6" id="q6" label="Is there a workaround available?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td>
<!-- Question 7 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q7" id="q7" label="If Yes, has this been implemented?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td>
<!-- Question 8 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q8" id="q8" label="Have any changes or updates been made in the last 7 days?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</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>
</j:jelly>Output:
Regards
Ankur
Hi Anwar,
Thank you very much. Helpful as always. Your script successfully moved the OK/cancel buttons to the right but the questions still appear in a single column. I have created this in MS Paint to simulate what I want it to look like:
Hi,
then try this
This should look much better
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left:-5px;
margin-right:-5px;
}
.column {
flex: 50%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<g:ui_form>
${'Please answer all questions:'}
<div class="row">
<div class="column">
<table width="50%">
<tr id="description_row" valign="top">
<td colspan="2">
<g:ui_choice_input_field name="dial_q1" id="q1" label="Is a Business Critical or Customer facing service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<!-- Question 1 text field (Contains comments from originating record as a default) -->
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 2 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q2" id="q2" label="Are there any critical business functions you are not able to carry out?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option> <option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 3 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q3" id="q3" label="Is this a business-critical period?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 4 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q4" id="q4" label="Is a Non-Business Critical service unavailable?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
</table>
</div>
<div class="column">
<table width="50%">
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 5 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q5" id="q5" label="What percentage of users or customers are affected?" value="" mandatory="true"><option value="0">0</option>
<option value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 6 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q6" id="q6" label="Is there a workaround available?" value="" mandatory="true"> <option value="none">${gs.getMessage('--None--')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 7 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q7" id="q7" label="If Yes, has this been implemented?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</td>
</tr>
<tr id="description_row" valign="top">
<td colspan="2">
<!-- Question 8 text field (Contains comments from originating record as a default) -->
<g:ui_choice_input_field name="dial_q8" id="q8" label="Have any changes or updates been made in the last 7 days?" value="" mandatory="true"> <option value="none">${gs.getMessage('N/A')}</option> <option value="Yes">Yes</option><option value="No">No</option></g:ui_choice_input_field>
</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>
</div>
</div>
</g:ui_form>
</j:jelly>Output:
Regards
Ankur
