[SOLVED] Using Toolbox's Run JavaScript to return a boolean result usable on Bubble

[aoshinn]

First of all, thank you guys for always helping me out around here, I could not be working on my actual job without the orientation of these forums. I’m quite new to javascript so please forgive any mistakes I might have done (or do in the future).

I am building a Webapp for a costumer in which I need to check if the user’s social security number (here we call it CPF) is valid. CPF has an algorithm for checking the last two digits, I got this code from our IRS web site so it’s pretty neat. (Also, there’s a valid CPF generator I’m using for testing on their webste: http://www.geradorcpf.com/)

var cpf=Input Insert the CPF here’s value;
function validarCPF() {
cpf = cpf.replace(/[^\d]+/g,’’);
if(cpf == ‘’) return false;
// Elimina CPFs invalidos conhecidos
if (cpf.length != 11 || cpf == “00000000000” || cpf == “11111111111” || cpf == “22222222222” || cpf == “33333333333” || cpf == “44444444444” || cpf == “55555555555” || cpf == “66666666666” || cpf == “77777777777” || cpf == “88888888888” || cpf == “99999999999”)
return false;
// Valida 1o digito
add = 0;
for (i=0; i < 9; i ++)
add += parseInt(cpf.charAt(i)) * (10 - i);
rev = 11 - (add % 11);
if (rev == 10 || rev == 11)
rev = 0;
if (rev != parseInt(cpf.charAt(9)))
return false;
// Valida 2o digito
add = 0;
for (i = 0; i < 10; i ++)
add += parseInt(cpf.charAt(i)) * (11 - i);
rev = 11 - (add % 11);
if (rev == 10 || rev == 11)
rev = 0;
if (rev != parseInt(cpf.charAt(10)))
return false;
return true;
}
bubble_fn_valid(validarCPF());

So, somehow it is always returning false…

Sorry if this was already asked, I searched for a while (including the showcase for Toolbox) and couldn’t find any answers (they helped A LOT, but no answer specifically for this problem.)

Thank you ahead for the time and patience.

ALSO, this is the link of an example app for you to help me figuring this one out.
TESTCPF Workflow

EDIT: WHOA! I found out one thing I was doing wrong rereading the Toolbox’s Showcase right now. I was thinking you could use the JavascriptToBubble as a variable, but you can’t. But you can use it like this:

So I created a variable and assigned it to bubble_fn_valid now, it still doesn’t work, it always returns false. Ah, I updated the whole text.

[louisadekoya]

I only scanned your question very quickly, so apologies if you’ve already addressed this or if I’m way off, but can’t you literally reference “JavascripttoBubble A’s value”? I think this is only available if you tick the “Publish value” property of the element (JavascripttoBubble A)

[aoshinn]

Thank you for the quick reply, and think you’re right, and it is already ticked, I also added a text to show the value of it for testing purposes and it is always returning false. D=

[hola1]

I have copied function from http://www.geradorcpf.com/scripts.js in your example app, and now it works.

[aoshinn]

Thank you for the reply, but I couldn’t find any editing to the example. How did you implemented the Input value and the bubble_fn_valid value on your code?

[hola1]

Code is in step “Run Javascript”

First you get input value:

var cpf=Input Insert the CPF here’s value;

Then include validarCPF function:

var validcpfboolean = function validarCPF() {
cpf = cpf.replace(/[^\d]+/g,’’);
if(cpf == ‘’) return false;
…
}

Finally execute function and return value

bubble_fn_valid(validcpfboolean);

[aoshinn]

Thank you for the plain and clean explanation, now I understand bubble_fn_suffix is a function and that I can use the inputs inside the script normally.

But I’m afraid it still is returning false for every test (including my own personal CPF, which can’t be invalid).
Here are the screenshots:

[mishav]

Hi @aoshinn

The “run javascript” -> “Javascript to Bubble” method is handy when you want the script run on a workflow action.

If you want the script to run when a dynamic value updates, you can use an “Expression” element, it returns a value.

1 . Looks like @hola1 got the problem fixed, where the single and double quotes were the “curved” ones, that document editors often like to change to when they come across the “straight” quotes. These aren’t valid text delimiters in javascript.

Examples:
cpf == “00000000000”
cpf == ‘’

2 . The value being pasted in needs to be in quotes, otherwise it is treated as a part of the script and may cause syntax errors.

[aoshinn]

Thank you and @hola1 for the help so far. I don’t know why, but my app does not seem to save the alterations you make. not for me anyway, every time I login is still the same way I left it. Did you guys tested it?

@mishav
The “run javascript” -> “Javascript to Bubble” method is handy when you want the script run on a workflow action.

So, I want to save the CPF if it’s valid. So workflow looks like the best option.

where the single and double quotes were the “curved” ones, that document editors often like to change to when they come across the “straight” quotes. These aren’t valid text delimiters in javascript.

So, I decided to change all the quotes to single “straight” ones, but still no valid return whatsoever…

And sorry for being so “needy” here, but I’m trying by myself for a while now with no avail. Any help on the matter is appreciated.

[aoshinn]

Also, does it matter if I’m testing it on Development Mode or Live? I’m always testing on both because I don’t know if anything changes.

[mishav]

does it matter if I’m testing it on Development Mode or Live?

It is frustrating when working “blind”, starting with a non-working solution and not understanding why it doesn’t work … keep on practising, you’ll get the hang of it soon : )

Okay … You’ve quoted the dynamic value, so that is promising.

On the workflow, “run javascript” …

Asynchronous means the next workflow steps don’t wait for this step to complete. Then you are displaying the value in an Alert, which might show before the javascript has finished. In this case you’re better off to have synchronous, letting the function do its thing, and then go on with the alerting.

Passing a text value to HTML like that is strange … HTML formatting usually has <p> paragraphs </p> etc…, so long as you realise you are altering the Bubble page …

I added a text field that does the same thing, to help diagnose. This showed empty, which suggests that the function isn’t being called …

Looking back at the javascript …

This is defining a function and assigning the function to a variable. All okay so far, apart from the variable name being misleading for one holding a function …

This calls the custom element with the function, but it is expecting a boolean value, so its unlikely to do much with it. And there hasn’t been any instructions to run the function …

I’ve organised it a little better …

function validarCPF() {
...
}
var cpf = 'Input Insert the CPF here's value';
var validcpfboolean = validarCPF();
bubble_fn_CPF(validcpfboolean);

I also changed the input box back to text, so I could test your original test value.

Back to you, @aoshinn, I hope you have fun making lots of mistakes and learning from them : )

[aoshinn]

First of all, THANK YOU SO MUCH! This was running on my brain since last week, now I see what I did wrong.

Asynchronous means the next workflow steps don’t wait for this step to complete. Then you are displaying the value in an Alert, which might show before the javascript has finished. In this case you’re better off to have synchronous, letting the function do its thing, and then go on with the alerting.

Now I get it, so I’d only want asynchronous scripts to run if they don’t interfere with the next steps of the workflow, right?

Passing a text value to HTML like that is strange … HTML formatting usually has

paragraphs

etc…, so long as you realise you are altering the Bubble page …

I added a text field that does the same thing, to help diagnose.

Yes, I first tried with text and all the results returned empty, now I understand why!

I also changed the input box back to text, so I could test your original test value.

Is there any difference? I just tested it with integer set and it works just fine. (I was hoping to automatically remove punctuation and have a “safe filter” since I still don’t understand the regex used on the replace that well)

And yes, I’ll keep studying and practicing. You guys helped me understand this language way better now.