How to Show the variable data in a Table Format on the Service Portal Form.

[Insider]

Hello,

I am trying to display the variables that are filled in by the user in a Table format on the Record Producer itself.

For example: User fills variable 1, variable 2 and variable 3

I need in the end of the RP to shown as Variable 1:                    variable 2                   variable 3

above the attachment icon.

is this possible?

[Vishal Birajdar]

Hi @Insider 

You mean to say like this....!!!

If yes, Then you can use "Html" type variable & client script to populate it.

Note : You have to take care of code maintainability in your case.

[Insider]

Hello Vishal,

Yes exactly. Can you please help me with the Script please.

[Vishal Birajdar]

Hi @Insider 

Just for testing, I have created like below :

Step 1: Created three variables 

Question : Variable 1                      Name      : variable_1 Type        : Single line text

Question : Variable 2                    Name      : variable_2 Type        : Single line text

Question : Table                Name      : html_table Type        : Html Read only : True

Step 2 : Write onChange() client script on "variable_2"

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading || newValue == '') {
      return;
   }

var variable_1 = g_form.getValue('variable_1');
var variable_2 = g_form.getValue('variable_2');

var text = '<table class="MsoTableGrid" style="border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" > Variable 1 </td><td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top"> Variable 2 </td></tr><tr><td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" >' + variable_1 + '</td><td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" >' + variable_2 + '</p></td></tr></tbody></table>';
 
g_form.setValue('html_table',text);

}

For simplicity & understanding, below is the value of "text" we are passing in above script

<table class="MsoTableGrid" style="border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0"><tbody>

<tr>
<td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" > Variable 1 </td><td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top"> Variable 2 </td></tr>

<tr>
<td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" >' + variable_1 +'</td>
<td style="width: 233.75pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt;" valign="top" >' + variable_2 + '</td>
</tr>

</tbody>
</table>

Output :

You can use same logic , for your requirement.

Hope this helps....!!!

[Insider]

Hello Vishal,

This was an immense help. Thanks a lot

I was trying to print variables in this format.

Each name in the box is an individual variable on the same form which user fills.

*Name of Government Official 1	*Title of Government Official 1	*Branch of Government/Government Agency 1
Name of Government Official 2	Title of Government Official 2	Branch of Government/Government Agency 2

[Insider]

Hello Vishal,

Sure, let me try this with my variables.