More info about format/syntax requirements when entering variables and expression etc

[TomD]

Quite often I’m uncertain, or perhaps just forget, what format is required when filling in fields for constants, variables or expressions in Wappler’s UI. This issue has caused much confusion and given rise to many threads over the last year or two.

Today there was such a case - where an issue was resolved by @patrick providing information about enclosing an expression in curly brackets for it to be evaluated as expected. The thread was fairly long but resolved with a simple answer. Without access to a code manual or built-in debugger, it can be difficult to track down bugs which are caused by issues like these.

Enclosing constants in quotes for example is something which I sometimes get wrong. I would expect to have to use single or double quotes, but sometimes Wappler does it automatically and sometimes it doesn’t (at least I think this the case). I’ve also been caught out by omitting the curly brackets around expressions. I always have code view displayed so keep an eye on what’s going on, but am not always sure what’s required - eg if there are nested quotes (which perhaps shouldn’t be nested).

Information popups like this can be very useful:

I think it would be very useful if these were extended, particularly in cases where you have to think twice, or simply don’t know without resorting to trial and error, what format the value should be in. Eg:

In this case, I might reasonably expect to enclose the global names in quotes. Also, in what circumstances should a value be given to ‘Global name’. The addition of more such info icons and brief descriptions might save a lot of time.

[patrick]

In server connect expressions must always have the curly brackets around them.You can always recognize the fields that accept expressions by the . If you don’t have the curly brackets arround them they are being seen as normal strings.

I agree that some extra feedback would help in some cases and we should provide more inline help.

Without documentation it is probably difficult to understand what certain properties do, the Global Name in the Set Value is a good example for that. The property is to assign the value to a global variable. When you are in a repeat it will have a local scope inside it and the Set Value will set the value in that inside scope and not update the one outside. With the Global Name you can set and update a variable in the global scope. This is only important for the repeats, conditions and the while loop don’t create a new scopes.

[TomD]

Thanks Patrick. I think it would also be useful if errors were flagged as they were made. Eg something like:

won’t work. Given there are cases where constants are quoted automatically, someone might expect it to work and be confused that it doesn’t. It might seem strange that Wappler allows you to enter such a value, but won’t allow you to correct it (via the UI); at this point, you are warned (somewhat belatedly):

I imagine it might not be easy to check errors like this, but adding a little more information would presumably be straightforward. Eg instead of the info button above showing ‘Enter the url’, it could say, ‘Enter the url, wrapped in single quotes’.

Thanks for the information about Global Name for Set Value. As you say, it’s not obvious.

[Teodor]

Hello Tom,
The example you are showing is in the App Connect panel, and for the go to url action docs it’s already explained that you must wrap static parts of the URL in quotes.

If you are entering a static URL, make sure to wrap it inside single quotes like: ‘your-page.php’.

[TomD]

Hi Teodor,

The example you are showing is in the App Connect panel

When I was suggesting more useful info popups, I meant generally, not only in Server Connect.

I appreciate the information may be in the docs, but this specific issue - and others like it - crop up regularly in topics. I was suggesting a fairly simple improvement in the way the info popups were implemented to make such issues less frequent. The recent thread about expressions when using ‘While’ is a case in point.

[patrick]

I think the App Connect is indeed a bigger problem, with Server Connect you always have to add the curly brackets for expressions. In App Connect it depends on the component and property, you can see the next to the control when it is dynamic, but it doesn’t require the curly brackets here like in Server Connect. This is probably the most confusing part.

[jeoff75]

Totally agree with @TomD.
It’s already quite a steep learning curve to move to Wappler.
(Happy to see already how much faster I’m coding right now though.)

And as Wappler quickly allows you to go back and forth between server and client side, it can get quickly confusing to know/remember what syntax should be used in such and such part of the app.

I’m not sure if it’s possible to have a consistent syntax among all components.
But a cheatsheet would probably help a lot.

(I already started my own “generic” Wappler cheatsheet where I document all things that took me hours to figure out (sometimes doing the same mistake over and over haha) and would be happy to contribute to an offical one along my Wappler’s journey)

[George]

We definately need more visual improvement of the input controls, to show indeed a clear different when a static value is required and when expression.

As Patrick explained indeed with Server Connect it is simple as there is always static and dynamic values or expressions are enclosed with {{ }} and have the thunderbolt icon next to them.

We tried to improve that in App Connect (as it historically appeared after Server Connect. And instead of enclosing everything in double curly brackets - we put expressions in dynamic attributes.
So there a static attribute has a static value and dynamic attributes - well dynamic. However on the interface it is now always clear what is static and what is dynamic input. Again the thunder icon show the difference but still it isn’t always very clear.

and to make things even more complicated with App Connect Data Formatters we allowed the user to choose what kind of expression that is:

So a lot of different ways - and many confusion is caused indeed.

So suggestions are welcome how to make this all crystal clear to the user but still be able to enter static texts, booleans, numbers or dynamic expressions…

[jeoff75]

If I had to revamp this part of Wappler, I would take advantage of the Tooltip and the amazing community to place an hyperlink “See use cases & discussions about what you can/should put in here”.

Might be a specific link for each tooltip, or a common one for a certain set of tooltips.

That link would point you to a specific thread on the forum.

The first post would be edited/updated by the forum admin to reflect one/many use case with the right syntax. And people could post below their questions or tips to improve the documentation.

Those threads might even be empty in the first place like “come back later or start the conversation to get help” so that you can structure first what’s most needed by the user’s - lean style.

To make it kind of a habit to check tooltips and centralize the relevant conversations in the forum.

[Antony]

Hey everyone…

As a newbie Bubbler with little JavaScript and PHP experience, This discussion feels really important to me.

Trouble is, I don’t understand any of the details yet.

I sense there are many kinds of variables that Wapple uses - server side, client side, local, global, get, put, maybe different syntax rules as they are PHP or JavaScript based…

… and then they all need to be used in some magical combinations with some {{…}} syntax here and there to get data in and out of the database or do funky things that need a few lines of code…

It all feels powerful but also quite daunting when Bubble just has a humble “state” variable which you only need occasionally…

Does anyone have an explanation / diagram / or even better a video which explains the big picture of how they all fit together? Something at the conceptual level?

@Hyperbytes, is this a video you could create?

Best wishes,
Antony.

[Hyperbytes]

I think it would be pretty difficult to make something as general as that, it’s more a case of things like that are woven like a thread into more specific tutorials. Having said that, i am in the process of remastering old videos and creating new ones and I will certainly remain conscious of highlighting issues like this as i go along which I hope will help.

Problem is customers keep asking for work keeping me from doing videos, most inconsiderate of them

[TomD]

So suggestions are welcome how to make this all crystal clear

A couple of features I used recently struck me as being very good examples, eg:

With help like this, you can hardly go wrong. The static option is absolutely clear and if you choose a dynamic one, the correct format will usually be taken care of automatically.

It’s not always be possible to display all the information as clearly as this, so informative popups like this work very well, eg:

With a few more popups and clear information as in these examples, confusion could be much reduced. Just a thought.

[TomD]

I think more information in the UI would be increasingly helpful as more and more features are added to Wappler. Since I started this topic, Workflows have been added and it seems more and options are going to be added to the flow editor. Toasts have also been added this week.

It’s great that all these features are appearing, but at the same, resorting to trial and error seems more and more necessary. Perhaps it’s me, but in many cases, I struggle to find consistency in the required syntax. Eg you might expect literal values in the new flow prompt feature would need to be quoted:

… but the result indicates that this is not the case:

So, based on this, you might expect this to be correct when using the new Toast feature:

… but no, in this case literal values have to be quoted. No text appears:

In this case, no error message appears. However, a message does appear - correctly - if you add only a single quote:

It would be so helpful if messages like this appeared consistently throughout the UI. It seem link a minor thing, but it would save a lot of time. If there is some logic to the syntax requirements which I’ve missed, I would be grateful for enlightenment.

[Teodor]

In App Connect static strings need to be wrapped in single quotes in all App Connect components, except in the flow steps. There you just enter the text you need.

[TomD]

Thanks @Teodor. That sounds simple. I’ll try to note when/why I’m confused if I bear this in mind. It would still be helpful if the help which is incorporated in the UI (eg in the examples I gave earlier in this thread) were consistent. Similarly with error messages - most of the time there aren’t any. However, given they appear sometimes, a user might assume that in the absence of an error message, incorrect syntax was correct and then be puzzled about why something doesn’t work.

[jeoff75]

Hello dear wappler superstars !

+1 for this

I tried to concatenate text and a value in my prompt but coudn’t find a proper syntax so far :

Single quote around text won’t work, the text is ok but value is not replaced, I get the variable name.
Double quote around text results in a json error.

Tried with and without the “weird” quotes around the expression.
Same results.

If any one knows…

Thank you and have a great week-end !

[Teodor]

I see you are using an inline flow.
Please try:

`dynamic.value + ' ' + 'static text'`

Maybe we should check how to improve this in the inline flows UI @George

[jeoff75]

@Teodor

`dynamic.value + ' ' + 'static text'`

Awesome !
Yes, this syntax works thank you.
I had to type it in the code editor though as the flow editor seems to replace/escape the quotes.

As a sidenote : apostrophes in static text have to be escaped with a double backslash or they produce a parsing error (lexer).