Limit Characters in a Repeater using Wix Code

Step 1: Turn on Developer Tools

Always turn on Developer Tools from inside of the Wix Editor before you begin to code.

Step 2: Add a repeater with text elements

Add any repeater element with text elements to the page.

Step 3: Add & Connect your Dataset & Elements

In our example, we add a dataset to the page and connect it to our database collection called Limit Character of Repeater. We connect only connect the title column to the Title text element in our repeater. We will connect our description column using code. To do this, we need to get the field key for our description column by clicking on the column settings from within the Limit Character of Repeater database collection.

Step 4: Add the Code to your Page

Now you will write a code to have the repeater get each item's description and shorten it by limiting the characters to a specific amount. The code in our example looks like this:

/*---Start of Limit Characteer of Repeater */
$w.onReady( () => {
  $w("#characterLimitDataset").onReady( () => {

    $w("#repeater4").onItemReady( ($item, itemData, index) => {
      let theItem = itemData.shortDescription;
      var shortDescription = theItem.substr(0,125); //Change your character limit here
      $item("#limitedDescription").text = shortDescription + " . . . ";
    });

  } );
  
} );

/*---End of limit character of Repeater */

Step 5: Understanding the Code to modify it

On line 2 of our code, we make sure the correct dataset is referenced in our code, and in line 4 of our code, we make sure that the correct repeater is referenced in our code.

Then on line 5, we create a variable called theItem. This is where we tell the code to find the item's data information under the description column. We do this by using itemData then adding .shortDescription at the end. The word shortDescription is the name of our field key under the description column in our database collection. On line 6 we create a second variable called shortDescription. This is where we use the .substr syntax for substring to shorten or limit the characters for that piece of item information we retrieved from our database collection column. The number 25 found on line 6 simply represents the number of characters we want to set the limit as. If you wanted 40 characters, you would simply change the 25 to the number 40 instead. Line number 7 sets the new text to equal the shortDescription (or the new limited text) followed by three dots.

You can modify this code as needed.

Tutorial Video