Nintex Form - Display HTML table in Label

[goh6613]

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

[emha]

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

[goh6613]

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

[emha · Accepted solution]

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

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

once I hit the button text is replaced  with table

[goh6613]

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

[emha]

‌, 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.

[michaela]

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:

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

Thanks in advance.

[emha]

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.

[michaela]

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

[michaela]

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.