What are your favorite examples of no-code formulas in WeWeb?

[Joyce]

Hello

I’m working on improving the documentation and video tutorials to explain the power of no-code formulas in WeWeb.

Are there formulas that you find really confusing? Things you’d like to be able to do with formulas but don’t think are possible?

Do you have a couple of favorite, go-to formulas that you use regularly or a use case you’re particularly proud of that you’d like to share?

My personal favorites:

• concatenating text using + – For example, “Hi “+ userNameVariable to greet an authenticated user
• display different content based on the device of the user with an if statement – For example, if (breakpointVariable = “mobile”, “This is text for mobile”, “This is text for tablet and desktop”)
• using the rollup formula to get all the values from a column in a collection – For example, if you have a list of phone calls in a table, to get a new list with only the information from the “duration” column: rollup(selectedCollection['data'],"duration")
• using the filterByKey to filter through a list – For example, if you have a list of phone calls in a table, to get a new list with only the calls where the “phone_number” column matches a specific number: filterByKey(selectedCollection,"callTo","+351-xxx-355-xxxx")
• the ability to nest formulas inside of each other – For example, calculating the sum of values in a list, doing a division and then using the round formula to format the result in a nice way
• the ability to write your own custom no-code formulas and re-using them throughout your project
• the ability to combine a no-code formula with JavaScript

Would love to learn more about what you love and what frustrates you about formulas right now so I can take that onboard and hopefully help more people unlock that potential.

[MichaelLovell]

I came across the Date extension yesterday! That is super helpful and something that will have relevance to everyone’s applications.

Something that I’m just getting my head around is setting viewport height on elements so they fill the remaining vertical space. Hiding within one of the weweb templates I found that you can use the string eg."calc(100vh - (56px + 20px))". In my case, I’m setting the height of some middle elements after subtracting the header and footer px heights.

[aeynaud]

Sorry for the long post

What I think would be super helpful would be to have multiple lines of formula and the ability to declare variables. Yes, I am aware that this somewhat defeats the purpose.

But when a formula (which is used in a unique-enough component so as to not require a global formula) starts looking like this:

if(displayVar = 'small', filterByKey(mytable, 'id', toNumber(filterByKey(myClients, 'id', toNumber(selectedClient))[0]['mytable_table_id'])), if(displayVar = 'medium', filterByKey(mytable, 'id', toNumber(filterByKey(myClients, 'id', toNumber(selectedClient))[0]['mytable_table_id']))[0]['client_name'],'none'))

(I made it up just then so, not coherent, but case in point.)

It would be easier in the JavaScript formula tab - however not actually, because I would have to copy/paste the collection and variable UIDs and it would be a visual mess.

Having something like this:

getContent = filterByKey(mytable, 'id', toNumber(filterByKey(myClients, 'id', toNumber(selectedClient))))

if(displayVar = 'small', getContent, if(displayVar = 'medium', getContent[0]['client_name', 'none'))

Would be much clearer to me. Add the fact that this couple of lines is easy on the eyes because of the elegant color-padding that the Formula field adds to the functions, variables + collections, and you now have very comfortable low-code to read.

Finally, people who come from non-coding backgrounds tend to nest a lot of if() statements, this is the first thing people do in a coding 101 class. Advanced users might make a global formula that uses more complex logic to get the wanted output, but the first reflex people have is to do the following:

if(displayVar = "small", "This is a small box", (if displayVar = "medium", "This is a medium box", if(displayVar = "big", "This is a big box", if(displayVar = "very big", "This is a very big box", if(displayVar = "very very big", "This is a very very big box", "There are no boxes")))))

A slightly more experienced coder might do:

if( displayVar != "", ("This is a" + displayVar + " box"), "There are no boxes")

But in the meantime, it is always more intuitive for beginners (I think…) to see something like this instead:

nestif(displayVar,
if("small", "This is a small box"),
if("medium", "This is a medium box"),
if("big", "This is a big box"),
else("There are no boxes")
)

Again, above is made up and there is no such thing as a nestif() function (for now )
Breaking the if() formulas into multiple lines would be quite useful in my opinion.

[IdeaGarage]

Hi,

WeWeb no-code formulas are very very good, nothing to say except input area is too narrow, can’t resize and lack of my knowledge.

I wonder If I can simply write Javascript code with beauty WeWeb variables, collections, auth, etc.
cf. variables[‘ac220dd3-5aa7-4213-bae3-cd69ed1cc8b0’] → {{variableName}}

Then, I can write various code with help of ChatGPT in seconds, or correct code.

I also wonder if I can register JavaScript code to WeWeb formulas.

Isn’t it useful?

[dorilama]

I think what you want is already doable.
On every binding formula there is the option to switch to javascript. Try to add a nocode formula and then switch to javascript mode.

[aeynaud]

Yes, but it doesn’t look any less confusing with all the UID replacing variable/collection/function names.

Especially after a while, going back to a previously written nested formula that isn’t as fresh in your mind will still look bulky and you wouldn’t know which collections or variables you are accessing unless you memorized what “5dge6z-78aHvS-9jska5-ag3RtF-8JhB3z” stands for.

And at that point, switching back to normal Formula erases all of your JavaScript code

[IdeaGarage]

Once you switch to JavaScript, then insert some variable, then a comment for that variable is inserted automatically.

[aurelie]

Both Formula and Javascript support native javascript, we just add internally the “return” at start for formula. So you could use formula mixed with normal javascript.

We had a discussion a while ago to add a third mode “Complex formula”, with an interface similar to workflow. This will allow local variables, and more complex things with branches. Can it be a good solution?

[aurelie]

Also, you can go with variables.NAME_OF_VARIABLE, there are aliases for that, but we are not promoting this too much, because if you change the name of your variable (or folder) your formula will be broken

[IdeaGarage]

Thanks, Aurelie.
For a while, I’ll test using “variables.NAME_OF_VARIABLE” in Javascript.

I’m curious in “Complex formula”.

I simply want to use normally JavaScript commands like ‘for’, ‘let’ or so. These commands seems to be not valid in Formulas for now.

[aurelie]

@IdeaGarage the reason its not working is because formula are a piece of javascript and we put a “return” before. So you cannot control what and when you return the result.
Maybe with an IIFE ((function() {})()), but that’s really a hacky way, does not really improve lisibility and will not work well on a single line :s

I think it’s better to go with the javascript version
Currently what do you not like with the javascript version? Visualization of variable?

[IdeaGarage]

Okay! I understand the restrict of formulas.
I’ll use what is suitable for the situation.

I think it would be more helpful for us to write JavaScript code:

1.visualization of variable(same to formulas)
2.undo / redo
3.built-in checker(like jshint.com)
4.import custom functions by connection of github
5.reduce steps to reach JavaScript code(I should click 3-5 times at the moment)

Additionally, I think it is efficient for workflows(JS / formulas):

1.list of workflows in one place(global, page, element)
2.word search across multiple workflows( in this page, in this appplication)
3.filtering variables only using current page/element, or related current page/element
4.easy access to workflow only clicking element’s lightning icon(or right click)
5.ability to open preview in external tab/window(it’s efficient when trying fine tuning many times)
6.optimization of editor experience(editor’s modals open from left,right,downside…)
7.example of workflows(if possible, access to real editor)

Sorry for asking too much!
I hope and believe WeWeb is the best product for developing MVPs quickly and efficient.

[dorilama]

@aurelie

Currently what do you not like with the javascript version?

May I suggest a monospace font for the javascript editor? Maybe one without ligatures because they may confuse people new to code that follow tutorials.

A great addon for people actually writing the code in an external editor would be 2 buttons:

1. copy the code from the editor to the clipboard
2. replace the code in the editor with the text from the clipboard

[foliodc]

I use toBool() frequently to change visibility. Example: toBool(item.data[‘img_cover’][‘url’]) will hide the image box if the image is not set because it returns false.

Sometimes the Formula editor can get really messy, especially for tricky visibility settings. Perhaps there is a way to clean this up, like splitting AND/OR statements similar to the no-code filtering on collections.

Could each line have a statement that resolves to true/false?

I also like the suggestion to set variables within the formula. Variables specific to a process would also be useful in the workflow editor and less messy than dozens of global variables for small tasks. I have some other requests there too, but will save them for another post haha.

[ilan]

Late response to this question, but if I understanding correctly I think this would be very useful!

[mitsley]

Big +1 to multiple lines in the formula editor!

[twinsticks]

I have found formulas useful when I want to change a color or an icon depending on a field form the collection. Super simple but effective, and thats why I have stuck with weWeb so far.

Note: there might be better ways of doing this… but my way worked for me

switch(context.item.data['_this_items_value']['type'],"Question","fas fa-question-circle","Info","fas fa-info-circle","Guide","fas fa-comment-dots",)

In this case I am using the string that is returned… but you should caution away from that as string often change… so you can adapt to using integers or variables etc…

I have also been using this with the ability to add additional states (not just hover) to elements, the condition field is really useful and again combining that with a formula has allowed me to really adapt the frontend to the data in my backend.

Beginner stuff… but useful