Solved (via backend function): Text field (string) into value (number) for progress bar

Ask the community
,
1

Hello,

I try to create a code which takes the information from my text field, changes it into a value (number) and display it on my progress bar.

I want this 200 point to be shown in the progress bar.
Hint: The points are from my dataset and do change regularly.

The same I want for my target value. The 500P on the image, which do change as well.

Here is my Code:

$w . onReady (()=>{
$w ( ‘#PunkteKonto’ ). onReady (()=>{
// progressBar1 target value
let PunkteNextLevel = Number($w ( ‘#progressBar1’ ). targetValue ) ;
$w ( ‘#PunkteNextLevel’ ). text = PunkteNextLevel . toString ();

// progressBar1 value
let Punkte = Number($w ( ‘#progressBar1’ ). value ) ;
$w ( ‘#Punkte’ ). text = Punkte . toString ();
})})

Any idea? Thx

2 
$w.onReady(() => {
$w('#dataset1').onReady(() => {
const punkte = $w('#dataset1').getCurrentItem().punkte;//use the field key
$w('#progressBar').text = punkte.toLocaleString() + 'P';
})
})
3

Hi J.D.,

I guess you misunderstood me.
I don´t want the text to show up on the progressbar.
I want the value of my text to be displayed in my progressbar.


This are the 200 Points, but I just added the number now.
As the number changes, I want my code to adapt to the change number.

Additonally I got an error with your Code, which says it expected 1 argument and got 3.

Thx

4 
$w.onReady(() => {
$w('#dataset1').onReady(() => {
$w('#progressBar').value = $w('#dataset1').getCurrentItem().punkte;
})
})
5

@J.D.

Probably, this code explains more what I try to achieve, but this also do not show the expected result:

//ProgressBar1
$w . onReady (() => {
$w ( ‘#PunkteKonto’ ). onReady (() => {
let nextlevelpunkte = $w ( ‘#PunkteKonto’ ). getCurrentItem (). nextlevel ;
if ( typeof nextlevelpunkte === ‘string’ ) {
nextlevelpunkte = Number ( nextlevelpunkte );
$w ( ‘#progressBar1’ ). targetValue = nextlevelpunkte ;

**let**  punkte  =  $w ( '#PunkteKonto' ). getCurrentItem (). punkte ; 
    **if**  ( **typeof**  punkte  ===  'string' ) { 
        punkte  =  Number ( punkte ); 
    **if**  ( punkte  <  nextlevelpunkte ) { 
        $w ( '#progressBar1' ). value  =  punkte ; 

}}}})

})

Do you know what i missed? Thx

6

  1. The if condition is not so clear (the logics there is not correct. Why does the typeof punkte depend on the type of nextlevelpuncte? Aren’t they independent fields?).
    Anyway, why wouldn’t store all the puncte & next level as numbers?

  2. To show the textual value, put a text element over the progress bar and use:

$w('#progressBarText').text = puncte + 'P';
7

  1. Yes you are right, they are independent fields.
    Next Level: is for the target value of the progressbar &
    Punkte: is for the value in the progress bar

    Reason for not storing the fields as numbers is that I got the values
    from googlesheets and can not set them up in googlesheets in the
    needed format for Wix.
    Or do you have an idea how to set it up from googlesheets?


Green is the manual change in Wix. As I get a lot of numbers, manual change is not sufficient.
Red is the format from googlesheets. Thats why I want to use code.

8

You can make it a number even where you import it from google spreadsheet. Explain to me how you imported it from google spreadsheet and I’ll tell you how to convert it into number.

Anyway, if you wish to keep it a string, you can do:

const item = $w('#PunkteKonto').getCurrentItem();
$w('#progressBar').value = Number(item.punkte.trim());
$w('#progressBar').targetValue= Number(item.nextLevel.trim());
$w('#progressBarText').text = Number(item.punkte.trim()).toLocaleString();
//if you don't want to format it as locale (i.e. locale String is with comma/point after the thousands depends on the visitor's country convention) you can just do: $w('#progressBarText').text = item.punkte;
//P.S. the trim method used to get rid of unwanted spaces before and after the number string.
9

I import it via backend http-function.js from Zapier.
Googlesheets is the trigger and the action is passed from Zapier to Wix backend.

The Code for it looks like this:

It works without issues, but do not set the values as numbers even when I tried to set it in google sheets.

If you have an idea here, that would be the better solution.

10 
function toNumber(value){
 if(typeof value === 'string'){
  if(!isNaN(value.trim())){
   return Number(value.trim());
  }
 }
 return value;
}

let recordInsert = {
level: body.Level,
punkte: toNumber(body.Punkte),
nextLevel: toNumber(body.NextLevel)
}
11

Tried it, but it gives me an error message, which says that:
argument of type string is not assignable to parameter of type value

671×555 20.8 KB

12

Sorry I missed a parenthesis. Updated the code.

13

Yes, but I still get the same error message:
Argument of type string is not assignable to parameter of type value

14

It might be an IDE false error message. Try it and see if it works.

15

Seems to work from the backend.
Thank you

16

Hi J.D.,

I have a similiar topic to this, but I want to change textfield (string) into value (date) this time. Also via my backend-function.

Do you have an idea how the code for that would look like?
I opened a new post for that:
https://www.wix.com/velo/forum/coding-with-velo/text-field-string-into-value-date-via-backend-function

Thanks

17

See my answer there.