How to Trigger a Flow When a Section Comes Into View in Wappler?

Wappler General Need Help
1

Hi,
I want to automatically trigger a flow when a section becomes visible (in view) in Wappler. However, I don’t see an “inview” or “animate” event under dynamic events. How can I achieve this?
I’m trying to use dmx-on:inview.enter manually, but is that the correct way? Any other suggestions?
Thanks in advance!

2

Wappler does not have any events which detect whether an element is into view or not.
You can easily achieve this using custom js and intersection observer.

Add this at the bottom of your page:

<script>
// Select the section you want to observe, replace #my-section with your section id
const section = document.querySelector('#my-section');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Replace flow1 with your flow name
      dmx.parse("flow1.run()")      
    }
  });
}, {
  threshold: 0.1 // Trigger when 10% of the section is visible
});

observer.observe(section);
</script>

This code will trigger the flow every time the sections becomes into view. If you want to trigger it only the first time the sections becomes into view just add:

observer.unobserve(entry.target);

after the dmx.parse line.

3 
<script is="dmx-flow" id="initCounters" type="text/dmx-flow" dmx-on:start="counter_read_accuracy.setValue(99.5)"></script>
 
<dmx-value id="counter_read_accuracy" dmx-bind:value="0"></dmx-value>

<section id="statsSection" class="py-5 py-xl-8"> 
... 
<h5 class="display-6 fw-bold m-1" dmx-text="'%'+counter_read_accuracy.value"> </h5>
 ....
</section>```

Thank you for suggestion.
I tried using dmx-parse and the initCounters.run() command as you suggested. I’m not getting any errors, but the value is not updating.

In this case:

  • Is the flow’s run() function actually executing? How can we verify that?

  • Is the setValue() statement correctly linked?

  • Is there an alternative way to monitor or debug the flow’s output?

Could you please help me troubleshoot this?

4

simply add an alert inside it and see if it shows the alert.

1 Like