Custom JavaScript - For Developers - Unlock Endless Possibilities

[dejan]

Hello Divhunt community

Before I start explaining our newest feature for developers, I want to take a moment and show my gratitude to all people who stick with Divhunt and believe. Rest assured that we won’t stop until we become one of greatest no-code tools with a much larger ecosystem that you can imagine behind it.

From today, it’s possible to write custom JavaScript in any field that accepts variables, what does that mean?

1. Perform mathematical operations.
2. Perform string JS functions (replace, toLowerCase, substring, and many more).
3. Perform array JS functions (sort, reverse, reduce, filter, and many more).
4. Perform validation with regex (allow/disallow specific characters, etc)
5. and many more

We will release also UI which for this, which will generate JavaScript code for you, as we are no-code builder, but wanted to share this feature so you can use it even now for those who want to be limitless.

Let’s dive into some examples, however keep in mind that you can implement anything that’s already possible with JavaScript in your own way.

Simple Mathematical Operations
Addition, subtraction, multiplication, division, and many more.

Formatting Price
Formatting price from 2900 to $29.00

Date
Formatting date to following format “Month day, Year”

String
Converting name to slug

IF/ELSE
It’s possible to perform IF/ELSE operations as well.

There are many more uses cases, I can’t wait to see how this feature might help you

Let me know what you guys think.

@chelce @petrbilek

[chelce]

This is amazing. Maybe a bit of an outside-the-box question, but can we use “this” objects in those fields? Right now, I’m trying to set something up with a GET call using Divhunt’s API that takes a query parameter set through Properties. If I could use “this” in that field, I could target the innerText of an ancestor of “this” and effectively pull in different sets of data for different iterations of a loop. Is that possible yet, or am I jumping ahead? (Even if that won’t work, this is awesome news.)

And I’m sure I’m not the only one who feels this way, but you guys consistently make it a no-brainer to stick with Divhunt.

[dejan]

@chelce

I am not sure if I understood properly.

But if you need Query Parameters in the fields, you have inside variable $query.

If your url is domain.com?limit=10, you can use $query->get(‘limit’)

[dejan]

Here are few more examples:

Using iterable to split words into characters

Displaying length of string

Get first character

Access to window object
Get url, window size, screen size, browser size, and much more.

Access tag data
This is equivalent to $value->get(‘name’)

[chelce]

I should have clarified (my bad!). The API that I’m calling (Coda) allows me to send, as part of the GET request, a parameter that they’ve named “query” (totally different thing from the URL or any query params of the current page), the value of which filters what data Coda sends back to me.

I’m making a sort of calendar that has to have each week as a separate entity (i.e. a massive grid wouldn’t work). I was thinking I might try something like this:

1. Make a flex box for one week.
2. Loop it for all the others.
3. Change the innerText of a .weeknumber value within each one to reflect the number of the week it will hold
4. Reference that value in the “query” variable of the API call using “this”

In theory, if I could use something like this.closest('.weeknumber').innerText, in the API call, the “query” that I send to Coda could autoupdate based on the .weeknumber element within that loop item.

Does that make sense? If not, I can send screenshots (it’s a little ugly right now, but if it would help clarify the function, I can post some).

Ultimately, I guess I’m trying to see if I can use this as a loophole to effectively pull content from different sources into looped items with the dynamic “this.”

[dejan]

@chelce

Hmm, that’s not possible. Because we don’t have access to element (target).

This is the process:

Rendering element tags
Rendering tag text + attributes + classes
Showing entire HTML to page.

So we don’t have target before we show that HTML to page, but rending text happens before we show it, so it’s not possible to have access to target there.

[dejan]

@chelce

I still don’t understand fully, but what can you do, is maybe use the page query, so there’s 2 options.

You can have link tags, and under Advanced tab, there’s Query options, so you can add let’s say sort => something

And when someone click on that link, it will open the page with ?sort=something, then you can use $query->get(‘sort’)

Another way is to use form element, and on Content tab you have Page to set, meaning on form submit, it will load the page and all form elements put in query, so if you had input with name sort it will send user to page with ?sort=value_from_input

So that’s 2 ways how you can build filtering or similar.