Cutting Off Text From Long Titles

Ask the community
,
1

Hi,
I Have a repeater where the titles are taken from a database. However, sometimes the titles are too long. Is there a way I can have the text box only display a certain number of characters and then cut off the remaining text? if possible also show “…” before getting cut off.

2 
$w.onReady(() => {
const maxCharacters = 15;
$w("#repeater1").onItemReady(($i, iData) => {
let textToDisplay = iData.title.substring(0, maxCharacters);
if(textToDisplay !== iData.title){
textToDisplay += "...";
}
$i("#textElement").text = textToDisplay;
})
})
3

Hello JD, thanks for that, is there anyway to do that for a Button??

4

Instead of:

$i("#textElement").text = textToDisplay;

Use:

$i("#button1").label = textToDisplay;
5

Thanks Man, but is not doing it. My #button29 is inside repeater 4, but is not working for it, any thoughts? Thanks so much for the quick reply before. Highly appreciate it

1605×666 59 KB

1094×93 8.18 KB

6

@rhitservicesllc

  1. Maybe this element is not #button29 (??)

  2. Maybe you have an error in the rest of your code (the part that you haven’t posted above)

7

@jonatandor35 hmm… 1. In the picture I sent is showing Button29, and I tried changing the ID.

Here is my full code in case something is wrong

8 
$w.onReady(() => {
const maxCharacters = 10;
$w("#repeater4").onItemReady(($i, iData) => {
let textToDisplay = iData.title.substring(0, maxCharacters);
if(textToDisplay !== iData.title){
textToDisplay + "...";
}
$i("#button29").label = textToDisplay;
})
})

$w.onReady(function () {
 //TODO: write your page related code here...

});


function toggleFold(index) {
 let $fold = $w('#fold' + index);
 //let $arrowDown = $w('#arrowDown' + index);
 //let $arrowRight = $w('#arrowRight' + index);
 // toggle the fold at the index
 if ($fold.collapsed) {
    $fold.expand();
 //$arrowDown.show();
 //$arrowRight.hide();
  }
 else {
    $fold.collapse();
 //$arrowDown.hide();
 //$arrowRight.show();
  }
 // collapse the other folds
  [1,2,3,4]
  .filter(idx => idx !== index)
  .forEach(idx => {
      $w('#fold' + idx).collapse();
 //$w('#arrowDown' + idx).hide();
 //$w('#arrowRight' + idx).show();
    })
}

export function headerBox1_onClick(event) {
  toggleFold(1);
 }


export function headerBox2_onClick(event) {
  toggleFold(2);
}

export function headerBox3_onClick(event) {
  toggleFold(3);
 }


export function headerBox4_onClick(event) {
  toggleFold(4);
}
9

I am getting the button information from a collection. Idk if that makes a difference

10

I did see your picture. But I don’t know if the long text you posted (the second picture is the same element). Or maybe the repeater is not #repeater4.
Bottom line, I don’t see a problem with your code (but maybe I’m missing something). you should add console.log() 's to locate the problems.

You should get rid of the following code (but it won’t solve the issue):

$w.onReady(function () {
 //TODO: write your page related code here...

});
11
  • make sure you do have a “title” field in your database.
12

@jonatandor35 YEs I do have a title Field. Also I tried disconnecting the Database and just having a long title on the button, but did not work either

PS. Yeas I already deleted that piece of code, I noticed it when I shared the code to you lol

13

@rhitservicesllc Have a look at the console and see if it logs any error.

14

@jonatandor35 I dont see any error

1907×719 43.6 KB

15

Maybe a different way, a different code we can accomplish this?

16

@rhitservicesllc no. You should try locating the issue. Alternative code will probably have the same issue.
By the way, is it repeater of (as logged to the console) repeater 7?

17

@jonatandor35 Sorry I didnt scroll on the screenshot, I have multiple repeaters in this page, I tried all of them already.

18

@jonatandor35 Hmm. I am doing a test with a text box, with the exact code you provided before and is not working either.

19

Of course it’s not working. We know there’s a mistake somewhere.
Maybe it’s the wrong repeater Id, maybe it’s the wrong data, maybe it’s something else. I can’t say from here.
But it doesn’t matter whether it’s a text element or a button, the same mistake will be relevant to both of them.

20

@jonatandor35 Well but I created a whole new page, just for testing purposes and also not working, looks like is not related to the page I was working, maybe something is wrong with the code. Unfortunately I am not good at programing, so I cant tell.

Either way I truly appreciate your help man, you have been so patient and nice.