Adding custom formatter

Wappler General Need Help
1

I want to add this custom formatter that @Teodor made in other topic. I have read all the documentation but still unclear how to add it to the UI. After several hours of trying is any video or tutorial about how to achieve this?? Any help will be welcome.

<script>
    dmx.Formatters('string', {
            nl2br: function(string) {
                return string.replace(/\n/g, '<br>');
            }
        });
</script>

<p dmx-html="pck_description.nl2br()"></p>
2
3

Thats the documentation that I dont understand… hehe this is much complex for my knowledge.

4

You can place the script on the page and then use the format.
For example:

I have a paragraph linked:

image
image1458×938 52.9 KB

This will return:

image

So I put the script:

<script>
    dmx.Formatter('object', 'stringify', 
                function stingfy(val) {
            return JSON.stringify(val);
})
  </script>

And change the paragraph:
From: <p>{{serverconnect1.state}}</p>
To: <p>{{serverconnect1.state.stringify()}}</p>

image
image902×494 23.3 KB

And now the result is:

image

Of course this is an example, but you can play with this.

Also you can put it on a js file outside the page:

image

image

1 Like
5

As long as I read you can add this formatter to wappler UI for later use it.

6

Sorry I didn’t realize that you need it in the UI.
Never done that :frowning_face:

7

Here’s the documentation for doing this: