Shortening text in repeater

Ask the community
,
1

@massasalah18
I’m trying to shorten the text box within the repeater, but having issues. We don’t need the “see more” button, as we’ll link the full text to a new page.

https://www.trustscout.com/ask-a-real-estate-expert

let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text
$w(" #dynamicDataset “).onReady( function () { // how many characters to include in the shortened version const shortTextLength = 40; // set the fullText variable to be the text from the collection fullText = $w(’ #dynamicDataset ').getCurrentItem().textField; // if no text to display, collapse the text element and the button if (!fullText) { $w(” #repeater1 “).forEachItem( (’ #text349 ‘)) .collapse(); $w(’ #button69 ').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button if (fullText.length <= shortTextLength) { $w(” #repeater1 “).forEachItem( (’ #text349 ‘)).text = fullText; $w(’ #button69 ').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + “…”; $w(” #repeater1 ").forEachItem( (’ #text349 ')).text = shortText; } } });

1 Like
2

Hello Drew

I have checked your website ( I assumed the page is Q_and_A(All)… right? ). As i understood, you want the text box inside your repeater to show maximum 40 characters. you have got the idea right but the code implementation was wrong.

in order to achieve that goal First you need to start with repeater for each item to loop over all the repeater items, then you check the text length of the items… here how it goes:

$w.onReady(function () {
    $w("#dynamicDataset").onReady(function () {

    const shortTextLength = 40;
    let fullText;
    let shortText;

       $w("#repeater1").forEachItem(($w,item) => {
 
            fullText = $w('#dynamicDataset').getCurrentItem().answer;

            if (!fullText.length) {
                $w('#text401').collapse();
            } else
            if (fullText.length <= shortTextLength) {
                $w('#text401').text = fullText;

            } else {
                shortText = fullText.substr(0, shortTextLength) + "...";
                $w('#text401').text = shortText;
            }

        })

    });
 });

Best
Massa

3

Thank you so much, @massasalah18 ! This worked perfectly.

4

Salam @massasalah18 ,
Here is what i’m receiving after implementing the code, could you please assist?
Thank you,
Jalal

1223×151 13.5 KB

5

@jalal - you have to replace the “getCurrentItem (). answer” with the field name of the text in your collection you want to display, so eg if your field name is “job”, then it becomes

getCurrentItem (). job