How do I create this Character counter in Google App Maker?

Question

I want to do the same in app maker https://codepen.io/Seba951/pen/siapk

Character counter_appmaker

I was advancing this.

function caracteres(){
    var cadena = app.pages.Archivos.descendants.txtCaracteres.value;
    var x = cadena.length;
    console.log(x);
    return x;
}

onAttach: widget.getElement().addEventListener('keypress', caracteres);

Answer 1

Just as an example do the following:

1. Drag a label widget on your page or form and lets call it 'Label6'.
2. Drag a textbox or textarea widget on your page and call it 'Field1'.
3. For the purpose of this example both widgets should share the same parent.
4. Set the maxLength property of the textbox or textarea widget to 150.

For the label onDataLoad event set the following custom script:

var elem = widget.parent.children.Field1;
var value = elem.value;

if (value !== null) {
  widget.text = (elem.maxLength - value.length).toString();
} else {
  widget.text = elem.maxLength.toString();
}

For the textbox or textarea widget set the following onInputChange event script:

var elem = widget.value;

if (elem !== null) {
  var length = elem.length;
  widget.parent.children.Label6.text = (widget.maxLength - length).toString();
} else {
  widget.parent.children.Label6.text = widget.maxLength.toString();
}

That would get the same thing accomplished.

Alternatively follow steps 1-4 and then create the following function in your client script:

function caracteres(widget1, widget2) {
  var cadena = widget1.value;

  if (cadena !== null) {
    var x = cadena.length;
    console.log(x);
    widget2.text = (widget1.maxLength - x).toString();
  } else {
    widget2.text = widget1.maxLength.toString();
  }
}

And in your textbox or textarea widget onDataLoad and onInputChange events include the following:

caracteres(widget, widget.parent.children.Label6);

This way you can reuse the same function for multiple textboxes or textareas throughout your application.