Render a calculated field as HTML

[dspolyglot]

Hi everyone,

Does anyone know how to render a calculated field as HTML? I tried outputting HTML tags inside calculated fields, but they display as plain text.

Thanks in advance.

-dspolyglot

[nightowl]

Hi dspolyglot,

Assuming that all of your fields have non-empty labels, you can try this trick:

1. Add a Header/Footer section to your Details DataPage.
2. Go to the Footer section.
3. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
4. Then add this code:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.1.1/he.min.js"></script>
   <script>
       // EXAMPLE 1: Calculated field is on position 2, with one field before it that has no label
       calcFieldAsHtml(2, 1);
   
       // EXAMPLE 2: Another calculated field is on position 6, with two fields before it that have no label.
       // The two fields mentioned here includes the no-label field from EXAMPLE 1
       calcFieldAsHtml(6, 2);
   
       function calcFieldAsHtml(index, noLabelsBefore)
       {
           var childPos = (index * 2) - noLabelsBefore;
           var selector = 'span[class^="cbResultSetData"]:nth-of-type('  + childPos + ')';
           var calcFields = document.querySelectorAll(selector);
   
           for (var calcField of calcFields)
           {
               // STEP 1: Align left inside the flex column
               calcField.style.display = 'inline-flex';
   
               // STEP 2: Setup he.js options
               var options = {
                   'allowUnsafeSymbols': true,
               };
   
               // STEP 3: Decode once
               calcField.innerHTML = he.decode(calcField.innerHTML, options);
   
               // STEP 4: Decode once more
               calcField.innerHTML = he.decode(calcField.innerHTML, options);
           }
       }
   </script>

Hope this helps.

-nightowl

[Wikiwi]

Hi all,

You might want to look into this: 

 

[telly]

Hi @dspolyglot,

If you are using  calculated field you may use the solution of @Wikiwi, however if you are using calculate value it will render the HTML tag:



Hope this helps!

[BaySunshine]

Hi,

This can be done by adding calculated field as HTML in an HTML block.

 

Hide the calculated field using some CSS in the header of the DataPage.

 

Hope this helps.

Regards,