My actions script is not returning anything

[agoo7714]

Hi, I know this question probably seems very stupid and basic, but can anyone tell me why this isn’t returning the result?

[jared.gibb]

Try formatting your return object key with parenthesis

[aaronsheldon]

In JSFiddle that reports as a “line breaking error” after the return statement. Try moving the left-handed opening curly bracket up to the same line as the return.

[agoo7714]

Hi @aaronsheldon ,

this still isn’t working for me.

Just to confirm, all I need to do is refresh the plugin page and the preview of the app im testing on for it to update?

Thanks for your help aswell

[agoo7714]

Thanks I think I’ve done that and I’m still getting nothing

EDIT: This is working, thanks both @jared.gibb and @aaronsheldon for your help

[agoo7714]

Hey jared, I can see you have use a node module here. I am trying to use the cryptojs module in my plugin. How would I go about installing this so I can use it across my plugin? Thanks

crypto-js - npm (npmjs.com)

[aaronsheldon]

Enable the checkbox this action uses node modules, and then place the usual require statements according to the NPM documentation. Bubble will automatically generate a depends.json. You can even edit the dependencies to pin versions.

[agoo7714]

Thanks @aaronsheldon , got this all working now.

Do you know much about making api calls in server-side plugins? I’ve written this script which is not throwing any errors, but it also isn’t returning a response when it should be.

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var ourRequest = new XMLHttpRequest();
    
    ourRequest.open(method,url,true)
	ourRequest.onload = function(){
    	console.log(ourRequest.responseText);
    }
    
    ourRequest.send();

I have a feeling this might be something to do with the server limitations regarding asynchronous script server side? but I’m not too sure

[aaronsheldon]

That looks correct. The console.log(...) should be writing to the server logs, which can be found under the logs tab. Use the advanced search to specify the type of server log records you want returned.

Ideally you should be using Bubble’s context.request implementation of the request NPM to make external HTTP requests through server-side actions.

[agoo7714]

@aaronsheldon Thank you so much for your help, I have got the context.request function working. You have been such as help. Is there anyway I can then return the response so that the user can access the JSON objects similar to how the bubble built API Connector returns the json objects after initialization?

Really appreciate your assistance I have learnt alot about plugin development in just the past few days. Thanks

[jared.gibb]

How to return objects from plugins (SSA, CSA, Element Update & Element Workflow Actions)

This stumps so many of us when we first start with the plugin editor that I wanted to make a couple quick videos to demonstrate returning an object from your plugin. Video 1: Returning an object from a server-side action – those notes I was writing are below. https://api.thecatapi.com/v1/images/search Getting an object back from the server side actions seems impossible at first but it actually really easy. Let’s start by creating a new plugin! We will start by heading to t…

[aaronsheldon]

For response = context.request(...) synchronous function call with the header set to accept JSON, the returned response from the function will contain the JSON in the body field, response.body. Roughly for posts:

const options = {
    uri: requesturl,
    method: "POST",
    json: requestjson
};

const responsejson = context.request(options).body;

[agoo7714]

@jared.gibb Thanks that video has helped me a lot. Very useful learning tool

[agoo7714]

@aaronsheldon This works great for server side plugins. Do you know how to import javascript libraries into client-side elements? I am getting the following error thrown

Also is context.request doesn’t seem to be listed as a method for making api requests in client-side elements. Do you know what the best practice is for making custom api calls client-side? Thanks

[aaronsheldon]

The server-side environment is run in Node.js. Likely no greater than version 15.0.0, because of the following deprecation warning from the Fibres maintainers, at the top of the page here. The requires syntax is a Node.js idiom that is not part of the browser ECMAScript Language Specification. I find the best documentation for the browser Javascript API is available at the Mozilla Developer Network.

You are correct in noting that the context.request() function is not available server side. As I mentioned before this functionality is provided by the Node.js Request NPM. Equivalent functionality is provided client-side. It is available in the Request API supported by a broad range of browsers, see the browser support table at the bottom of the page.

For loading resources you have a number of options.

1. Most obviously the script element.
2. The newer import function
3. Within a web worker you can use the importScripts function.

However, you need to be aware that because of syntax and API differences you will often not be able to use native Node.js scripts in a browser. To do so requires a transpiler, typically Babel, which is run through a build automation tool, like Gulp. Furthermore, what you transpile to depends on the choice of module loading tool you want to use. A few of the options are:

1. RequireJS
2. SystemJS
3. WebPack

Once you have built your browser ready code, you will then have to host it somewhere. The typical method is to publish to NPM which is then picked up by CDNs like unpkg and jsdelivr.

If at all possible I recommend working with pre-built libraries that are ready for browser consumption and can be loaded using a script element. If they are well built and supported they will dynamically load the needed resources behind the scenes without you having to write any code, aside from the usual glue code for Bubble Element Actions, Events, and States.

Finally, when writing client-side code do not trust the environment you are working in. There is an enormous variety of browsers and versions in the wild on the internet. You don’t have to scratch the surface too deeply to find edge and corner cases of inconsistent Javascript API support across browsers, e.g. printing support.

[agoo7714]

thankyou @aaronsheldon , that’s a very informative response. Much appreciated!