How to load javascript after appconnect fully loaded?

I have a simply script that should load after appconnect is fully done.
Otherwise an input field in a repeat group is not in the DOM yet and this eventListener is not added to it.

How do I trigger my javascript when appconnect is loaded?
Something like

document.addEventListener("appconnect:ready", function () {

would be nice.

For reference, the script I have (the timeout is now to give appconnect time to load:

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    const numberInputs = document.querySelectorAll('input[type="number"]');

    // User doesn't scroll page when scrolling on an input field
    numberInputs.forEach(function (input) {
      input.addEventListener("wheel", function (event) {
        if (document.activeElement === input) {
  }, 100); 

You could create a function and call that function with a page-flow action with auto run checked.


Enter the name of the function and this will always run as soon as the appconnect is loaded.


I usually use the updated event of the repeat region to trigger something like this that needs to first be rendered. If that still presents issues, inside the updated event you can use a condition that compares the source recordset count with the number of items currently in the repeat and only run when they are equal.

Did you solve this issue? I'm having trouble with using dmx on load to solve using 'Run' after textarea has loaded

@Mark_Jonkers @mebeingken Thanks guys will try it out later.

@Buggy Sorry, haven't done it yet. But I have used Mark's suggestion before. You can show what you're doing and what you expect it to do...

I looked closer at what you're trying to do and I think there is a better and cleaner solution for you problem.
Instead of running a function and looping over all inputs you could add an onwheel event on the input itself. And change the event.stopPropagation() to return false;

<input type="number" onwheel="if (document.activeElement === this) return false;">

Hope this fixes your problem

The easiest way is the answer from @Mark_Jonkers by adding it directly on the input but I assume you have many inputs and don't want to have to add it to each element each time.

You can listen to the ready event of the app component like:

<body is="dmx-app" onready="runMyScript()">

The ready event is triggered after the components initial render is finished, it doesn't mean that all data is available since those are often loaded async. When your inputs are dynamically generated in a repeat and depend on data loaded from the server, you then probably better use the success event from the serverconnect which loads the data or the updated event from the repeater.

You could also create your own component for number inputs like:

// create our component
dmx.Component('input-number', {
  // extend from form-element component (input)
  extends: 'form-element',

  init (node) {
    // first call the original init from the form-element compnent
    dmx.Component('form-element'), node);

    // add extra listeners to the node
    node.addEventListener('wheel', event => {
      if (document.activeElement === node) {

// we can create the component like <input type="text" is="dmx-input-number">
// or we map it directly to all number inputs
// inportant is that the key is prepended before the others else the standart input will bind
dmx.config.mapping = {
  'input[type=number]': 'input-number',

Thanks @Mark_Jonkers , appreciate the efforts!

Sadly Patrik's assumption here is right:

@patrick Thanks!

As you said I'm looking for a holistic solution for inputs on many pages. But I suppose I can keep my current code (which works for most inputs).
And then trigger the same code when that particular serverconnect has a success event.

The custom component is an interesting solution and I want to explore more of custom components the coming months so I greatly appreciate the example. Thanks!