Problems with data formatter

[dvan_zelst]

Hi there, i’m new to wappler and tried to follow the training on ‘leranwappler.com’. First of all i have to say these tutorials are really great and well done! Can’t wait to see the rest of them. That being said, i was following these tutorials to become more familiar with Wappler but now i have encounter one issue. When creating the view / update page i have a small issue when listing the table created with the bootstrap table generator. Because for a status select field i use tiny integers 1 and 0 for either enabled or disabled. This all works correct with the select form fields but in the bootstrap table it shows me the numbers. I want to re-format them to show enabled or disabled based on the value of 1 or 0. But when i select the dynamic icon in the bootstrap generator when selecting the wizard icon, or what it is called, i get an error message. See picture below. Am i doing this at the wrong place or has this to be done differently? Thanks, just want to understand how this should be done.

Also tried to select the table cell itself and add a formatter to its dynamic value. Tried to use the replace formatter to replace a 0 in ‘disabled’ but if i use something in there the values don’t show up at all anymore in the table. I’m sure i’m doing something wrong here

[psweb]

Would you mind d just manually trying to add what’s needed and see if it works as expected division_active.replace(‘1’,‘enabled’).replace(‘0’,‘disabled’) and make sure the .js file for formatter is in the document head.
Let’s see if that works as expected first and then figure out what this issue could be after that.

[dvan_zelst]

Thanks for your reply. I have tried to add division_active.replace(‘1’,‘enabled’).replace(‘0’,‘disabled’) but once i do that the table does not show any values anymore, just blank. I have tried to use a formatter on the first column fields which show capital letters and when i use the formatter to make them lower case it works as expected.
In the head tag is ‘dmxAppConnect/dmxFormatter/dmxFormatter.js’ listed in the script tags. I assume it is what you are referring to.
The reason is that in my training i do not use ENUM in my DB table but tiny int instead and wonder if it is not working correctly in wappler or if i made a mistake. Also i wonder if i need to add the formatter when selecting the table cell itself or if it also should be possible when making the table from the BS table genrator. As you can see, i get an error when trying to choose something there.
Thanks for helping, your training videos are really helping a lot and i really like them. Hope to see more soon.

[psweb]

More are being made right now, but so happy you are enjoying them.

Ok well there are two things to look at here
Firstly as you are using the table generator to create the table that means that it is using dmx-text like this <td dmx-text="division_active"></td> on the physical td rather that the binding being inside the td like this <td>{{division_active}}</td> so just ensure the formatter is being added to the dmx-text and not to inside the td itself.

Second and probably more likely is that to use replace you may have to first convert your int to a string as step one in the dmxFormatter options, sorry I am getting this info out my head as I am not near my computer right now, so something like <td dmx-text="division_active.toString().replace('1','enabled').replace('0','disabled')" ></td> or possibly it can do it but you need to supply it an int rather than a literal like <td dmx-text="division_active.replace(1,'enabled').replace(0,'disabled')"></td>

Lets see if that does the trick possibly.

[dvan_zelst]

Yes it is set to the td tag as you mentioned. When i paste <td dmx-text=“division_active.toString().replace(‘1’,‘enabled’).replace(‘0’,‘disabled’)” ></td> it works as expected! Now i wonder how to do that in wappler UI and not in code view because when i open the formatter i do not see anything about the string conversion. This is what is shown when opening it.

When i tried before to just add the replace formatter, nothing will show. How to get this string conversion that you added in code view to be added from this formatter UI? Second question is, should this also be possible to choose within the table generator is is that variable error a bug?

[psweb]

I am in the bath with only a phone right now to be honest so i will check out if mine works as expected when I am out and report back, but if you would not mind also trying the second version that i sent to see if that works too <td dmx-text="division_active.replace(1,'enabled').replace(0,'disabled')"></td> because the only difference is that you are not converting to a string but you are telling it to expect a number of 0 or 1 witch is different from adding the “xyz” inverted commas around the number with is telling it to expect a string of “0” or “1”
Lets see if that works.
Often things willnot be available in the UI formatter if they are not relevant, in other words if you select a number it might not automatically show you options to convert to number because it is a number, it will not show math functions for strings either.

[updates]

using waterproof mobile ?

[psweb]

s8+ and a firm grip, lol, semi waterproof haha, only time i get to myself is in the bath, no kids talking about gel vs acrylic nails, hair styles, low lights, high lights, they all just leave me alone in the bath, haha, happy days

[dvan_zelst]

division_active.replace(1,‘enabled’).replace(0,‘disabled’)

When i try the sond option then again nothing is shown in table, all is empty again. So it seems it does need this conversion to string to make it work. It would be good to be able to do this with the formatter itself though as i use this a lot, using integers to represent a choice from select form inputs.
Thanks again though.

[psweb]

No problem, was worth a try. When i am back at my mac I will give this a try and see what my formatter options give me.

[dvan_zelst]

Yes it was worth a try for sure. I will try out some more combinations as well with the formatter now that i know what the working code output should look like. Still wonder if the error in the tabel generator is correct or a bug as indicated in my first post.

[dvan_zelst]

Well i was able to recreate a working way using the formatter however the code written looks a bit different. Do not know why. Below i will add some pictures how i did it.
The code we inserted in code view directly and working was:
<td dmx-text=“division_active.toString().replace(‘1’,‘enabled’).replace(‘0’,‘disabled’)” ></td>

The code which is inserted using the formatter as shown below is:

Below the steps i did but some questions remain.

1. Why the convert to string step is gone when you re-open the formatter to view or edit
2. Why the code written is different and less clean as the one we inserted directly in code view
3. Why i get an error message when trying to format a field directly in the BS tabel generator
   
   

Steps id did to get this working at least with the formatter:

1. Change the type from text to number
   

   

2. Now i can select convert to string so i added it
   

   

3. Added a manipulate to replace 0 as text type with disabled as text type
   

   
   
   
   

4. Added another manipulate to replace 1 as text type to enabled as text type. This is how the total stack looks like.
   

   

5. Here you can see the code which is added in the UI.
   

   

6. This again is the code inserted in code view.
   

   

7. When i re-open the formatting UI then the convert to string is gone from the stack.
   

   

[psweb]

These are assumptions after years of using DMXZone extensions, they might not be 100% correct.

First question, why does it insert " instead of " so it looks nice and clean?
You need to keep in mind here that you can not have <td dmx-text="xyz.replace("1","Enabled")"></td> because all the double quotation marks will never know where to start and end, so I alter these to single quotation marks when I am already in double quotation marks so it would end up looking like <td dmx-text="xyz.replace('1','Enabled')"></td> which works fine however I think the html parser in Wappler tries to replace all special characters with raw markdown language, making & into & and " into " etc. This might be just as simple as the parser not knowing what should remain and what should not, or it could be intentional because that html still needs to perform a command in jQuery or JavaScript to go from client side to server side. Because it will make no difference to the end result I do not see an issue with it personally.

The toString() should be there in my opinion as you say your mysql table has that field set as a tinyint field type, therefore the query of that table should query a number type field and not a text type field, I can see in one of your screenshots, under number 1. that you selected division_active and the field type has an A to the left of it and not # so the data formatter is only giving you options for a string, therefore you will have access to toNumber() but not toString() until you change the type to a number.
Just something to try, in your server action with the query, see if you can manually change the field type to Number and then try all the formatter stuff and see if the initial bug goes away, as maybe that is the primary reason for it giving an error in the first place.

[dvan_zelst]

Hi I will check within the database query what is there and what happens if i can change it there. Will report back the results. Thanks again and keep up the good work on the training videos. They are really great and helpfull.

[dvan_zelst]

Hi, i checked my database query and it looks as it should. The division_active field (Tiny INT) is shown as a number field # next to it. However when you look in the formatter in the table generator it is shown as a text field with an A next to it. See pictures below.
Is something going wrong here?

Database query:

Formatting in BS table generator:

[psweb]

Thanks for sticking with it, appreciate all the feedback, I think we are going to have to call in much smarter people, in no particular order @George, @Teodor, @patrick
I have also tested this and get similar results when using a tiny INT?

[dvan_zelst]

That’s interesting and at least not just happening on my side. Did you have an opportunity to check if the convert to string is also disappearing from the stack when re-opening the formatter?

[psweb]

I did manage to trick it into staying there, but yes, without trickery I had the same issue as you did. I will rather not tell you how I tricked it into staying there especially after I just flagged this post on Teodor’s radar, he will shout at me if I do, lol (JUST KIDDING) by the way

[dvan_zelst]

Good idea, i do not want to get into trickery things right now. Its already hard enough to learn all those great features in Wappler in the first place. I’m sure they will find out what is causing this and correct it if needed. For now i’ll continue learning, using your great tutorials, and report back if i encounter something on the way. Thanks for trying out and confirm these issues i’m having! Keep up the good recordings

[psweb]

The new ones have like 50 x better sound too, haha, coming soon to a theatre near you.