Passing User Input Text to an Imported Function (.jsw)

Ask the community
,
1

Trying to set or reset the value of a secret with some User Input Text, so I can retrieve later when building headers.

Updating the value seems easiest - after setting an initial value in the Secrets manager. But at this point, I’m looking to createSecret just to understand how the Javascript works.

Running into trouble figuring out how to create a placeholder variable inside a function called from aModule.jsw. Tried using a global variable myGlobal and attach the text as an object property twiHan.

aModule.jsw file:

import wixSecretsBackend from ‘wix-secrets-backend’ ;

export var myGlobal = {};

export function createNewSecret () {
const secret = {
name : “UserNamer” ,
value : myGlobal.twiHan , //the function doesn’t like this term!
description : “Twitter Handle Temp Stor” //works with string value tho
};

return wixSecretsBackend . createSecret ( secret )
. then (( id ) => {
return id ;
})
. catch (( error ) => {
console . error ( error );
});
}

And here’s the event handler code:

import { createNewSecret } from ‘aModule.jsw’ ;
import { myGlobal } from ‘aModule.jsw’ ;

function button3_click ( event ) {
myGlobal.twiHan = $w ( “#input2” ). value ;
console . log ( myGlobal.twiHan );
createNewSecret ();
}

I’m a little unclear on the whole onReady() thing - waiting until page is loaded to declare button functionality. The code worked without it, but not with it. Strange. Also not completely clear on export function() versus function() when passing functions and objects between backend and front.

So, what basic protocols on variables and declaring properties am I missing here?

2

You need to use function parameters

Backend Code:

import wixSecretsBackend from 'wix-secrets-backend';

export function createNewSecret(twitterHandle) {
    const secret = {
        name: "UserNamer",
        value: twitterHandle,
        description: "Twitter Handle Temp Stor"
    };

    return wixSecretsBackend.createSecret(secret)
        .then((id) => {
            return id;
        })
        .catch((error) => {
            console.error(error);
        });
}

Frontend Code:

import { createNewSecret } from 'aModule.jsw';

function button3_click(event) {
    createNewSecret($w("#input2").value);
}

Important Notes about your code:
Name your elements don’t use input2 as id rewrite ids of elements to understand your code easier.

And you can take Codecademy JavaScript + Velo course. Search it on Google.

3

Yes, I didn’t know proper syntax for addressing the parameters. Thank you so much. I hear you re: best practices on element ids. I didn’t bother only because it’s literally a single line text form, a button, and an image - no other user input on the entire site. But I’ll change to get in the habit.

Thanks again, I felt it was something quite simple I was missing.

4

I searched for the same thing for hours when I started coding so don’t worry it’s quite normal to miss very easy things even Senior Developers doing similar things.

And if my answer was right, you can pick it as best answer so post will be shown as answered.

5

So, if I run the function from the Editor Preview, it makes the call with null and returns undefined . (Which makes sense because the event hasn’t happened to define the key value.)

But when Published, I get static event handler errors, and it’s not recognizing the jsw file.

I’ve tried a few different changes, trying to wrap the front end in $w.onReady( function() - and I’ve done some Googling, and I’m still not sure why the module isn’t recognized.

Do I need to assign a path? I tried ./ thinking it was a directory problem, but that didn’t solve it.

6

If you can give me access to your website I can try to help. (Add this email aydontloss@gmail.com)

7

I don’t feel comfortable giving access. The only code is the code we are currently working on. The rest of the site is just portfolios and links.