Hello

You would like to implement this on a input widget or a text area or you are showing the text in an expression?

Thanks
Tousif

Hi Shivangi

You can use a link or some other input type that changes a local variable that contains the state of the Show More value (ShowMoreIsActive - Boolean)

Then you can then encapsulate your text in an If expression like this:

If(ShowMoreIsActive,YourText,Substr(YourText,0,50)+"...")

That said, if the var ShowMoreIsActive returns true, it will show your full text, if not it will substring your text from the first character (position 0) up to the 50th position (you can change it to your required necessity). 
I added the '...' at the end to be better understandable to the end user that there is more text available to be shown. 

Hope this helps you.
Best regards,

Edu

Yes, you can implement a "show more/show less" functionality for a large text field in OutSystems. You can achieve this using JavaScript and some custom CSS. Here's a basic outline:

• HTML: Create a container for your text and a button.
• CSS: Define styles for the expanded and collapsed states.
• JavaScript: Toggle between these states on button click.

Here's a simple example:

HTML:

<div id="textContainer" class="collapsed">
      <span id="text">Your large text goes here...</span>
      <button onclick="toggleText()">Show More</button>
</div>

CSS:

.collapsed #text {

    display: -webkit-box;

    -webkit-line-clamp: 3; /* number of lines to show */

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.expanded #text {

    display: block;

}

JavaScript:

function toggleText() {

    var container = document.getElementById("textContainer");

    if (container.classList.contains("collapsed")) {

        container.classList.remove("collapsed");

        container.classList.add("expanded");

        container.querySelector("button").innerText = "Show Less";

    } else {

        container.classList.remove("expanded");

        container.classList.add("collapsed");

        container.querySelector("button").innerText = "Show More";

    }

}

Integrate this code into your OutSystems application, and it should work as expected.

Thanks.

Hi Shivangi,

click here

Option 1: Use the TextEllipsis(value,30) function to shorten the text and add the attribute in the property panel.

title =value

Option 2: Use the substr() in Expression. For example, if (length(value)>30, substr(value, 0, 30), value) and add a tooltip inside the content with "..." and a tooltip expression (Value).

Hi ,

Please check OML File and should work as expected,

Thanks,

Ramesh

Okay, thanks! It might be an easier way...