Converting and formatting HTML in an interface

I have a record that stores text with HTML formatting from a Styled Text Editor Field. In one of my interfaces I pull that text from the record and display it with a rich text display field.

Is there a way for me to put the text in such that it keeps the styling? I've been using stripHTML() on the text but that just removes everything which is not what I need.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    You cannot use Rich Text Display Field to show HTML-formatted text with styling. The solution is to use a read-only Styled Text Editor component. This way preserve the HTML formatting from your Styled Text Editor Field.

    See below working example

    a!localVariables(
      local!htmlText:"<b>Bold Text</b><br/><em>Italic Text</em><br/><u>Underlined</u><ul><li>Bullet 1</li><li>Bullet 2</li></ul>",
    
      a!sectionLayout(
        label: "HTML Text Display Comparison",
        contents: {
          a!textField(
            label: "Raw HTML (stored value)",
            value: local!htmlText,
            readOnly: true
          ),
    
          a!textField(
            label: "Using stripHtml() - loses all formatting",
            value: stripHtml(local!htmlText),
            readOnly: true
          ),
    
          a!styledTextEditorField(
            label: "Using Read-Only Styled Text Editor - preserves formatting",
            value: local!htmlText,
            readOnly: true,
            sizeLimit: 1000
          )
        }
      )
    )

Reply
  • 0
    Certified Lead Developer

    You cannot use Rich Text Display Field to show HTML-formatted text with styling. The solution is to use a read-only Styled Text Editor component. This way preserve the HTML formatting from your Styled Text Editor Field.

    See below working example

    a!localVariables(
      local!htmlText:"<b>Bold Text</b><br/><em>Italic Text</em><br/><u>Underlined</u><ul><li>Bullet 1</li><li>Bullet 2</li></ul>",
    
      a!sectionLayout(
        label: "HTML Text Display Comparison",
        contents: {
          a!textField(
            label: "Raw HTML (stored value)",
            value: local!htmlText,
            readOnly: true
          ),
    
          a!textField(
            label: "Using stripHtml() - loses all formatting",
            value: stripHtml(local!htmlText),
            readOnly: true
          ),
    
          a!styledTextEditorField(
            label: "Using Read-Only Styled Text Editor - preserves formatting",
            value: local!htmlText,
            readOnly: true,
            sizeLimit: 1000
          )
        }
      )
    )

Children
No Data