storeValue is not defined

Question and Answers JavaScript
1

Hi all,

I have successfully used JSObjects before, and have cases where storeValue works just fine. However, I can’t figure out why I am getting this error (it shows for showAlert() as well). I’ve tried recreated the JSObject from scratch to no avail.

I can confirm that tpath is set properly by showing by saving to a variable and saving it on the console, but after that no Appsmith {{}} syntax will work. Suggestions?

Thanks

image
image726×371 26.7 KB

2

Hi

In this particular code example, you have used the {{ }} syntax inside JSObject. This is not allowed. Within Appsmith, we use the handle bar syntax {{ }} to differentiate between text inputs and code inputs. It’s a signal to Appsmith that anything written inside the curly braces must be evaluated as JS code, while everything outside it is plain text.

Inside JSObject, it’s all code. There’s no plain text here. It’s literally like writing a JS file in VSCode.

Hence, can you please try the following & let me know if it works?

export default {
  getTemplate: () => {
    storeValue("tpath", table_templates_all.selectedRow.templateURL, false); 
  }
}

Basically, try removing the double curly braces from the line.

3

Thanks for the reply. However that doesn’t seem to change anything.

image

4

Hi,

I think you are using JSObjects inside the Input widget’s default Text.
One thing to notice is that functions like showAlert(), storeValue() etc are only available in the context of action triggers. That means you cannot use those functions inside Input widget’s default text field.
If you call the functions from events such as onSubmit or onTextChanged, those will be available in the context and you will get the expected result.

5

Ok that makes sense–and yes I was trying to calling it via default Text. Is there a way to trigger the JS when a page or modal loads (I’ve only seen APIs can be triggered this way)? That will also get to where I want to be.

Perhaps if I outline what I am trying to do you will have a better pattern for me. I was trying to use a local storage object above but would prefer not to. Here it is:

  1. Table object’s onRowSelected calls JS to work with the row data
  2. Make API call based on row data
  3. Open a modal
  4. Populate text input (in modal) with results of the API call

Right now I’m trying to use onRowSelected to do the things, which seems like it should work, but showModal() doesn’t actually show the modal.

export default {
	loadModal: () => {
		var tpath=table_templates_all.selectedRow.templateURL.replace("https://hostname/api/v1/dl/templates/","");
		showModal(modal_template_editor);
		modal_template_editor.isVisible=true;
		// API call here
		input_template.text=tpath;
	}
}

I’ve tried rearranging those things to no avail.

6

Appsmith is reactive. I think the problem is with the statements such as modal_template_editor.isVisible=true and input_template.text=tpath. This way of updating properties is not supported in Appsmith.

Try commenting out these two lines and then modal will appear on selection of row.
To update the input_template with the tpath value, you need to store the value in Appsmith store using storeValue('tpath', tpath) and change the default text of input_template to {{appsmith.store.tpath}}

7

Unfortunately changing it to just this does not open the modal:

export default {
	loadModal: () => {
		showModal(modal_template_editor);
	}
}

So I would need to store the full result of the API call in local storage, and then use {{appsmith.store.key}} in the defaultText when the modal loads?

Really appreciate the help btw.

8

In case anyone looks at this: with the last question, why showModal doesn’t work–the name of the modal needed to be in quotes.

		showModal("modal_template_editor");
1 Like