Forum Discussion

MattV's avatar
MattV
Qrew Trainee
3 days ago

Reveal long multi-line text by clicking an ellipsis

I have multi-line text fields with unlimited length. In table reports I'd like them to function like social media comments where long strings of text are revealed by clicking the ellipsis ('...'). Wondering if this can be done in a Formula-Rich Text field.

Currently my field displays the text up to the 30th space character followed by an ellipsis; the full text displays in the hover-over bubble. This works but I'd prefer the simplicity of click-to-reveal.

My current Formula-Rich Text field is as follows:

var text TitleText = SearchAndReplace([Text Field], "\"", "'");

If(Part([Text Field], 30, " ") != "", 
"<p title=\"" & $TitleText & "\">" & 
Part([Text Field], 1, " ") & " " &
Part([Text Field], 2, " ") & " " &
Part([Text Field], 3, " ") & " " &
Part([Text Field], 4, " ") & " " &
Part([Text Field], 5, " ") & " " &
Part([Text Field], 6, " ") & " " &
Part([Text Field], 7, " ") & " " &
Part([Text Field], 8, " ") & " " &
Part([Text Field], 9, " ") & " " &
Part([Text Field], 10, " ") & " " &
Part([Text Field], 11, " ") & " " &
Part([Text Field], 12, " ") & " " &
Part([Text Field], 13, " ") & " " &
Part([Text Field], 14, " ") & " " &
Part([Text Field], 15, " ") & " " &
Part([Text Field], 16, " ") & " " &
Part([Text Field], 17, " ") & " " &
Part([Text Field], 18, " ") & " " &
Part([Text Field], 19, " ") & " " &
Part([Text Field], 20, " ") & " " &
Part([Text Field], 21, " ") & " " &
Part([Text Field], 22, " ") & " " &
Part([Text Field], 23, " ") & " " &
Part([Text Field], 24, " ") & " " &
Part([Text Field], 25, " ") & " " &
Part([Text Field], 26, " ") & " " &
Part([Text Field], 27, " ") & " " &
Part([Text Field], 28, " ") & " " &
Part([Text Field], 29, " ") & " " &
Part([Text Field], 30, " ") & 
"...</p>",
[Text Field])

4 Replies

  • This is what I've done in a similar situation.

    var text descripText = [Your Text Field]; 
    var text leftText = NotRight(Left($descripText, 145), " "); 
    var text rightText = NotLeft($descripText, Length($leftText));
    
    If(Length($descripText) < 150, 
        $descripText, 
        $leftText& 
        "<details style='rotate: 180deg'>"& 
            "<summary style='rotate: 180deg; cursor: pointer;'>Show/Hide</summary>"& 
            "<div style='rotate: 180deg'>" & $rightText & "</div>"& 
        "</details>"
    )

    Mine uses the html summary element with the text Show/Hide. The show hide could be changed to an ellipsis and I believe there are css methods of hiding the arrow built in to the summary tag.

    The style='rotate: 180deg' is used on the details tag to make the summary tag display below the $rightText when it's clicked to reveal the full text. It's likewise used on the summary tag and the div wrapping $rightText to flip their contents to display properly. 

  • Actually here are some cheat notes which wiull be useful, especially The OpenAsPopup

    Hover with open new tab
    var text Words = Left([Long Text],100);
    var text URL = URLRoot() & "db/" & Dbid() & "?a=dr&rid=" & [Record ID#]
    & "&dfid=10"
    & "&ifv=1";

    var text Hyperlink = "<a href=" & $URL &  " target=_blank" &  ">" & $Words &  "</a>";

    // then define the hover text
    // Note!!, the hover text must be enclosed in a single ' character as the first space will stop the text.
    // no html allowed in the hover text
    // Use \n for line feed

    var text HoverWords = "'" &  
    [Long Text] & "'";

    // this will be Standard from the above

    "<div>" & "<span title=" & $HoverWords & ">" & $Hyperlink  & "</b></span>" & "<div>"

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

    Hover with pop up 
    var text Words = Left([Long Text],100);
    var text URL = URLRoot() & "db/" & Dbid() & "?a=dr&rid=" & [Record ID#]
    & "&dfid=10"
    & "&ifv=1";

    var text Hyperlink = "<a class='OpenAsPopup' data-height=400 data-width=400 href='" & $URL & "'>" & $Words & "</a>";


    // then define the hover text
    // Note!!, the hover text must be enclosed in a single ' character as the first space will stop the text.
    // no html allowed in the hover text
    // Use \n for line feed

    var text HoverWords = "'" &  
    [Long Text] & "'";

    // this will be Standard from the above

    "<div>" & "<span title=" & $HoverWords & ">" & $Hyperlink  & "</b></span>" & "<div>"

  • I don't know of a way to make the text suddenly unfold, but you can certainly convert this to a Rich Text hyperlink which will open up the record itself or if you prefer it could open up a super mini version of the record itself on a super mini form that just has that field, and it could be set to open in a new tab with target=_blank and then using a mini form with just that long field.

    I assume you know how to do that hyperlink based on the complexity of your current formula but post back if you have any trouble with that. I think in the past, I used a hyperlink just on the end part where I put the word ..more in red instead of your .... ellipses.