How do I use a variable in a dmx-bind:data-src?

Wappler General Need Help
1

In playing with CDNs, I’d like to simplify my formulas in my source.
So I set variables:
<dmx-value id="cdnprefix2" dmx-bind:value="https://test.imgix.net/"></dmx-value>
<dmx-value id="cdnimages" dmx-bind:value="?w=100"></dmx-value>

Then, in this statement, I’d like to reference my variables:
<img dmx-bind:data-src="cdnprefix2.value+image1+cdnimages.value" >

My desired result is: (the prefix + filename + imagingDirective)
src=“https://test.imgix.net/engine1.jpg?w=100”

but i get:
http://localhost:3000/engine1.jpg
Its like it doesn’t see the variables at all? I’m missing something fundamental.

2

You might consider using the UI for most of your coding, especially when things aren’t working. :slight_smile:

Static values in vars will have single quotes around them:

<dmx-value id="cdnprefix2" dmx-bind:value="'https://test.imgix.net/'"></dmx-value>
<dmx-value id="cdnimages" dmx-bind:value="'?w=100'"></dmx-value>
3

Thx
will keep that in mind!

4

Not even this helps… :frowning:
dmx-hide=“‘(’+(serverconnect_vehicles.data.query.hasawards+‘=="N")’”>

Trying to get a simple <div> to hide on this page: http://137.184.106.209/vehicle_info?id=114
Have tried MANY formats.
I have a db field “hasawards” - it displays after the Back button. Contains a Y or N

Using the UI, it doesn’t require surrounding parens, still dont know if thats needed.
Doing an equality check for Y or N, and there’s no way to know if its a single or double quote needed.
In either case, its messy generated code.
Neither works to hide the DIV.
In fact my current code throws MULTIPLE Console errors when showing this page.
Haven’t a clue how to resolve this. Looked at several threads with SHOW/HIDE in them - most don’t check for a literal, only another field so no good example on how to make something simple like this work.

You guys think this shit is easy to pickup for Wappler newbies, but it sure isn’t.

5

Looks like the UI screwed big time :rofl:

What can I tell, I reported a lot of tiny bugs along my journey, many of them are still unfixed (probably including one related to the expression builder). I’ve started my front-end journey recently, so I’m kind of experiencing a bit of what you’re feeling

The correct code should be:

dmx-hide="serverconnect_vehicles.data.query.hasawards=='N'"

This is like JavaScript:

let hasawards = "N";
console.log(hasawards == 'N')
console.log(hasawards == "N")

You can type the above in your browser’s developer tool console to see it in action

In the expression, I’m using ' so I don’t need to escape the expression. You could use " too:

dmx-hide="serverconnect_vehicles.data.query.hasawards=="\"N\""

For escaping characters (specifically: ") use a backslack: \

I don’t use === because I can’t be sure what type Wappler casts internally, so I just stick to ==. Triple equality is for checking content and type, double equality is just for checking content

6

Thats amazing. So clean, and it worked first time.
image
Thank you!

7

There should be no bug in the UI for that expression. There are edge cases of course but they are related normally to complex expressions unlike this one.

@Robert_LM I don’t know how you were trying to build the expression with the UI because you got a really weird result.

In any case these are the steps:

Wappler 28-07-2022 10.14.22 000024

1 Like
8

I appreciate you taking time to make a short vid.
I tried it 3 times and got no results like yours:

image
image951×94 21.9 KB

from my point (using v4), When I’m starting to build the expression, I don’t know which Quote to use. Nothing steers me to single or double.
And I also missed == my first time and used =, only to edit it.
And none of my times did it add the parens. It was only after searching for “hide/show” in the forum did I find other examples and see them with parens - so I edited through the UI and my result is the 1st in my pic.

You’re also doing diff. things in the v5 UI - so maybe its better now.
But yall have to realize that this is just a TINY contributor to frustrations and massive time wasting that happens with inexperienced users. I’m more experienced than many, yet don’t know the wappler idiosyncrasies.
Imagine a non-coder bubbler guy trying this in his first 20 hours.
There’s absolutely no way one (a newbie) can know if its single/double quotes around a literal… or that in this case you’re not even supposed to use Quotes.

9

You don’t use any quotes when using the UI … exactly as Jon’s video shows, and that is the same in version 4 and 5.

10

I think you miss my point.
… which is “newcomers to wappler dont necc. know this rule”:

WHEN IN THE UI, DONT USE QUOTES AROUND LITERALS IN COMPARISONS

Probably should be posted up there alongside:

THIS IS JAVASCRIPT - NEVER USE A SINGLE = SIGN

11

Well that is the whole idea of the UI you don’t have write code inside it.
Quotes and stuff are required in code view. In the UI if you like to compare N you enter N

12

I am assuming you are just browsing the forum for answers and you are getting mixed signals. A lot of us use code because it’s second nature for us and a whole other bunch uses UI.

And sometimes us coders provide the solution to no-coders directly in code form because it is quicker for us.

So you are applying code solutions to the UI expression builder which is not expecting manual input except values(chars, strings, integers, etc).

As Ken suggested try to stick always with the UI approach until you feel comfortable discriminating UI solutions from code ones.

3 Likes
13

Jon’s advice is solid. I might add that what works for me is to always use split view. I use the interface for everything I can and I’m able to see the code that Wappler generates. Basically for every UI task I do, I learn some code.

Especially the way Wappler codes.

2 Likes
14

I tried using the expression builder without quotes (on the “Design” tab)

Screen recording

Definitely not good

2nd attempt generates the expression well, but not without hiccups:

2nd attempt

15

It’s really not that complicated:

Screen Recording 2022-07-29 at 18.02.40

1 Like
16

You didn’t select the equals from the dropdown.