I have a repeat on the page that’s showing different links, think of it as a menu.
For example the repeat is looping through an object with 3 items in it.
It’s displaying a name it got from the database, so example output:
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
Now for each item I want to execute javascript code that I wrote which checks some things in the database and as a result will output ‘true’ or ‘false’.
When it’s true, I want to apply a class with the dynamic attribute setting, so for example it’ll be:
@bpj can you explain what you mean with ‘custom formatter’?
This is a part of the javascript code, this function needs to be run for every item in the repeat:
function set_lecture_classes() {
// put wappler values into javascript variables
console.log("START set_lecture_classes()");
let count_lectures_per_chapter = dmx.parse('content.get_lecture_style.data.repeat[0].count_lectures_per_chapter');
console.log("count_lectures_per_chapter =" + count_lectures_per_chapter);
let lecture_watch_status = dmx.parse('content.get_lecture_style.data.repeat[0].get_lectures_per_chapter[0].lecture_watch_status');
console.log("lecture_watch_status =" + lecture_watch_status);
let total_lectures = dmx.parse('content.get_my_courses.data.query_all_courses_plus_owned[0].lecture_count');
console.log("total_lectures= "+ total_lectures);
let lecture_index = dmx.parse('$index');
console.log("index =" +lecture_index);
switch (count_lectures_per_chapter){
case 'single':
console.log('Case is SINGLE'); // line = false //
switch (lecture_watch_status){
case 'null':
console.log('lecture watch status is NULL');
switch (lecture_index){
case 1:
console.log('lecture index status is FIRST');
dmx.global.set('fadeImage', true);
break;
default:
console.log('lecture index status is MIDDLE');
break;
case total_lectures:
console.log('lecture index status is LAST');
break;
}
break;
case 'doing':
console.log('lecture watch status is DOING');
switch (lecture_index){
case 1:
console.log('lecture index status is FIRST');
dmx.global.set('pinkCircle', true);
dmx.global.set('pinkLine', true);
dmx.global.set('pinkBorder', true);
break;
default:
console.log('lecture index status is MIDDLE');
break;
case total_lectures:
console.log('lecture index status is LAST');
break;
}
break;
This code sets variables to a a true or false state. And then I apply classes using Dynamic attribute → class toggle:
formatters are essentially Javascript functions that run on values to convert them (such as formatDate(), .sort(), .trim() etc.). You can create your own with the function you have written.
Then you could apply a .setlc() formatter, using your code, to the values which would return the true/false/other value you have coming back from the formatter.
The only consideration is if it matters that it keeps evaluating over and over. Formatters run over and over to apply the format to any updated value. @mebeingken and @patrick were looking at limiting execution if you just wanted to run it when the value was updated:
