Nintex Form - Display HTML table in Label


Badge +4

Hi All,

I need to display a dynamic html table (with table column, break line and anchor link) into the label of nintex approval form, but seems like the forms do not recognise html code.

can someone help on this ?

thanks


10 replies

Userlevel 5
Badge +14

following code should do it

NWF$('.LabelWithTable').html(tableMarkup);

LabelWithTable is CSS class of label control

tableMarkup is HTML code you want to show in place of label

Badge +4

hi Marian, thanks for your suggestion. but do you have any sample for such cases ?

Userlevel 5
Badge +14

I've place a label control on form and configured it as follows

206241_pastedImage_1.png

then I placed a button which triggers replacement of label text with table. on button click I invoke following function

function showTable() {
  var table;
  table  = '';
  table += '<table width="100%" class="ms-rteTable-default " cellspacing="0">';
  table += '   <tbody>';
  table += '      <tr class="ms-rteTableHeaderRow-default">';
  table += '         <th class="ms-rteTableHeaderEvenCol-default" rowspan="1" colspan="1">col1</th>';
  table += '         <th class="ms-rteTableHeaderOddCol-default" rowspan="1" colspan="1">col2</th>';
  table += '         <th class="ms-rteTableHeaderEvenCol-default" rowspan="1" colspan="1">col3</th>';
  table += '      </tr>';
  table += '      <tr class="ms-rteTableOddRow-default">';
  table += '         <td class="ms-rteTableEvenCol-default">1</td>';
  table += '         <td class="ms-rteTableOddCol-default">2</td>';
  table += '         <td class="ms-rteTableEvenCol-default">3</td>';
  table += '      </tr>';
  table += '      <tr class="ms-rteTableEvenRow-default">';
  table += '         <td class="ms-rteTableEvenCol-default">4</td>';
  table += '         <td class="ms-rteTableOddCol-default">5</td>';
  table += '         <td class="ms-rteTableEvenCol-default">6</td>';
  table += '      </tr>';
  table += '      <tr class="ms-rteTableOddRow-default">';
  table += '         <td class="ms-rteTableEvenCol-default" style="height: 27px;">7</td>';
  table += '         <td class="ms-rteTableOddCol-default" style="height: 27px;">8</td>';
  table += '         <td class="ms-rteTableEvenCol-default" style="height: 27px;">9</td>';
  table += '      </tr>';
  table += '   </tbody>';
  table += '</table>';
   
  NWF$('.LabelWithTable').html(table);
}

when the form loads, label shows preconfigured text

206242_pastedImage_2.png

once I hit the button text is replaced  with table

206246_pastedImage_3.png

Badge +4

hi All,

i found the solution for my case, in my label, i just need to decode it using fn-XMLDecode and it show the html content nicely in the form label.

thanks

Userlevel 5
Badge +14

‌, if you have a solution, please mark a correct answer if any of posts addressed your problem or helped you to resolve it.

if you approached completely different way, please share your solution, so that others can benefit from it.

Badge +7

With the label property set to resize at runtime, I've found that while the container does grow according to its size, any controls beneath the label do not move down accordingly. Instead, the label will overlap any form controls underneath. To illustrate the problem:

222712_pastedImage_1.png

222713_pastedImage_2.png

Is there a way to prevent this? I would like to achieve the following:

222714_pastedImage_3.png

Thanks in advance.

Userlevel 5
Badge +14

do you set label content from a javascript?

if os, nintex doesn't capture changes that you perform to the page/form structure and/or layout on your own from a javascript, so you cannot expect it will resize base on that.

Badge +7

Yes, the content is set via JavaScript. So is there any way to force the form layout to "update"?

Badge +7

Instead of using a Label, I ended up using JavaScript to update a hidden Multi Line Text Box (MLTB) and used a Calculated Control's formula to reference the MLTB.

So whenever the MLTB is updated via JavaScript, followed by triggering it's blur() event, the Calculated Control gets resized accordingly. I don't know why, but I didn't think I could inject HTML tags into the Calculated Control (via the MLTB), which is why I tried doing it to the Label directly.

Userlevel 5
Badge +14

you may try something like this

https://community.nintex.com/message/85389-re-how-to-resize-panel-dynamically-when-fields-inside-are-set-via-javascript?… 

 

but I'm not really sure it will work in your case if you overwrote label markup. it may look for DOM nodes to resize resp. get actual control size that will not exist anymore.

Reply