Discussions

Expand all | Collapse all

Dynamically hiding HTML tags

  • 1.  Dynamically hiding HTML tags

    Posted 07-10-2020 08:28
    I have a 'Body' (rich text field) that captures the body of an email from Outlook through a Quick Base Pipeline. 

    The rich text from 'Body' is then passed to another field, 'Body Field' (rich text formula field). Since the rich text field is going to show HTML tags, I'm trying to dynamically remove the tags from visually displaying in the 'Body Field', but still preserve the HTML or rich text attributes. 

    In this case,'Body' will pass 
    <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta content="text/html; charset=us-ascii"><meta name="Generator" content="Microsoft Word 15 (filtered medium)"><base href="https://xxxxx.quickbase.com/db/"><style> <!-- @font-face {font-family:Helvetica} @font-face {font-family:"Cambria Math"} @font-face {font-family:Calibri} @font-face {font-family:"Lucida Sans"} p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0in; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri",sans-serif} span.EmailStyle19 {font-family:"Calibri",sans-serif; color:windowtext} .MsoChpDefault {font-size:10.0pt} @page WordSection1 {margin:1.0in 1.0in 1.0in 1.0in} div.WordSection1 {} --> </style><style> <!-- p.MsoNormal {margin-left:7.5pt} --> </style></head><body lang="EN-US" link="#0565V8" vlink="#954F72" style="margin-left:7.5pt; margin-top:7.5pt; margin-right:7.5pt; margin-bottom:7.5pt">

    What's the status on this ticket?

    </body></html>

    The formula in 'Body Field', a simple Mid([Body], 977, 10000) will only display what comes after the last "margin-bottom:7.5pt"> HTML tag, but it's not dynamic. Being that the HTML tags in the body come up as a different character count each time, is there a way to dynamically count all of the characters in the HTML tags before the actual email body message where I can simply present the body on its own?

    ------------------------------
    Angel Rodriguez
    Application Developer
    ------------------------------


  • 2.  RE: Dynamically hiding HTML tags

    Posted 07-10-2020 12:02
    Edited by Ryan Stanford 07-10-2020 12:06
    It's not the cleanest... but since your Body Field is already a QB Formula field, you might be able to get away with doing some SearchAndReplace() functions to change the <body> and </body> to say <div> </div>... and then remove the html tags all together.

    Or, a more non native would be too see how to just get the body.innerHTML of the original html information... but that's a JavaScript notation, not QB Formula notation.

    Or also instead of mid, try part instead, using <body as the delimiter.

    Part([Body],2,"<body")

    You'll still need to purge out the other information of the rest of the opening body tag... but this could get you in the right direction.

    ------------------------------
    Ryan Stanford
    ------------------------------



  • 3.  RE: Dynamically hiding HTML tags

    Posted 09-10-2020 11:41
    I was finally able to come back to this and get it to work. I do know how to do this in JavaScript, but I'm not sure how to implement it in JavaScript inside of a Formula Rich Text Field. Because of how QB names elements, it would be difficult to grab the specific field without class names or ids. I tried this with JS, but, again, not sure how to implement this in QB.
    console.log
    An alternative, in this case is to do what you mentioned with SearchAndReplace() functions and have them repeat. I found a post where Phillip Kelly listed a way to do this. Here's the link:
    https://community.quickbase.com/communities/community-home/digestviewer/viewthread?GroupId=103&MID=34498&CommunityKey=d860b0f8-6a48-487b-b346-44c47a19a804&tab=digestviewer

    Here's the formula I used to do this:
    var text htmlField = [Body];
    var text htmlStart = SearchAndReplace($htmlField, "<html", "<div");
    var text headStart = SearchAndReplace($htmlStart, "<head", "<div");
    var text metaStart = SearchAndReplace($headStart, "<meta", "<div");
    var text startStyle = SearchAndReplace($metaStart, "<style", "<div");
    var text endStyle = SearchAndReplace($startStyle, "</style", "</div");
    var text endHead = SearchAndReplace($endStyle, "</head", "</div");
    var text startBody = SearchAndReplace($endHead, "<body", "<div");
    var text endBody = SearchAndReplace($startBody, "</body", "</div");
    var text endHtml = SearchAndReplace($endBody, "</html", "</div");
    $endHtml

    Here's the result:







    ------------------------------
    AR
    ------------------------------