SOLVED: Show more and show less in a text box on dynamic page within a repeater

Ask the community
,
1

I have tried all combinations and cannot get this to work, I have a dynamic Dataset, a repeater , a text box and a button. the button touches the text box. The code is as follows:

let fullText;
let shortText;
$w(“#dynamicDataset”).onReady( function () {
const shortTextLength = 40;
fullText = $w(‘#dynamicDataset’).getCurrentItem().textField;
if (!fullText) {
$w(“#repeater1”).forEachItem( (‘#text254’)) .collapse();
$w(“#button131”).label = “Show Less”;
} else {
if (fullText.length <= shortTextLength) {
$w(“#repeater1”).forEachItem( (‘#text254’)).text = fullText;
$w(“#button131”).label = “Show More”;
} else {
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#repeater1”).forEachItem( (‘#text254’)).text = shortText;
}
}
});
Can someone help and let me know what I am missing?

2

Your text element with your text and the button for it should all be setup as per the tutorial, then your code for the page should be something like this:

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
$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('#myTextElement').collapse();
$w('#myButton').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('#myTextElement').text = fullText;
$w('#myButton').collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + "...";
$w('#myTextElement').text = shortText;
}
}
});

export function myButton_click(event) {
// check the contents of the text element 
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less"; 
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}

Also, please do try to name your element id names so that you don’t have to try to code your page with id names like button 131 and text 254, try to rename the element id names to something that will relate to the code that you are using for it and it will also be much easier to remember instead of having to try to remember what each and every 100+ plus buttons do and where over 250+ text boxes are on the page!

3

Thank you, once again for your response. I am trying the code and am taking your advice on the naming of Buttons and Text boxes.

4

Found my mistake works perfectly now. Thank you again. HMMMMM The Mistake to share— I forgot to change the textField to the Database field key name.