Jump to content

Render a calculated field as HTML


Recommended Posts

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

Link to comment
Share on other sites

  • 4 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...