[Plugins for Beginners]: Accessing Input and Output Fields in Plugin Action Javascript Code

[timothymugendi]

Thanks @marca

[timothymugendi]

Guys I struggled to return my request body with no results. Interestingly this code is running with results in test environment. Inside bubble even trying to return plain text wasn’t successful.

Here is my code:

function(properties, context) {
var request = require(‘request’);
request(‘http://www.google.com’, function (error, response, body) {

return{“text_out”: body}
});

}

Any suggestions?

[timothymugendi]

Hello @marca @vini_brito

I am still stuck with an issues of returning a value from request response. The specific issue is actually how to return results of a function which is inside a function. Here are the instruction from API service

and below is my code so far. I looking to return access_token from the response object as text.

var request = require('request'),
  consumer_key = "RCEaA2z5efHfmX76Znv5nJKFZ8yKKOl3",
  consumer_secret = "kYTv4Sx9oNfpsmfQ",
  url = "https://sandbox.safaricom.co.ke/oauth/v1/generate?grant_type=client_credentials"
  auth = "Basic " + new Buffer(consumer_key + ":" + consumer_secret).toString("base64");

  request(
    {
      url : url,
      headers : {
        "Authorization" : auth
      }
    },
    function (error, response, body) {
      // TODO: Use the body object to extract OAuth access token


return response


    }
  )
var results = someFunction(response)

var obj2 = JSON.parse(results);

var acce_tkn = obj2.access_token;
alert(acce_tkn);

return {"text_out": acce_tkn}

Please assist

[vini_brito]

Hi @timothymugendi are you setting this as a server side action or as an API call? Because this is usually much easier through a API call, you don’t have to code the request yourself, it’s just too much work and complexity, leave that to the coders haha. Bubble has already built in the API calls so we don’t have to manually code them.

Probably you can use the API connector (set as data source) and get that key, then pass that key to whatever other plugin action via normal Bubble workflow, specifically properties.access_token.

I’m currently building something like that, I’m integrating a payment processor, I get the key via API call then I pass that key to a plugin action. I’ve tested the pieces individually, but right now I’m going to test it all together to do some final testings.

[timothymugendi]

@vini_brito

i @timothymugendi are you setting this as a server side action or as an API call? Because this is usually much easier through a API call, you don’t have to code the request yourself, it’s just too much work and complexity, leave that to the coders haha. Bubble has already built in the API calls so we don’t have to manually code them.

Hello @vini_brito,

You guys you taught me how to use btoa library for base64 encoding and succeeded, we even brought out a bug that was solved by @marca and now you want us to leave this midway?

Whats pushing me is the plugin user experience. I already did it through API call tab but the user experience for plugin is not good. The user will have do a number of things manually.

I didn’t find it too hard to code given that there is some good documentation and we are also working with some mainstream coders. The problem is when their charm doesn’t work in bubble environment and this is where I was asking for guidelines.

[vini_brito]

Oh no no I didn’t said to drop it all and do it via API. Just a specific part of it, which is the network request operation you shared in the previous message.
It would add one manual step for the plugin user, yes, but an easy and small one.

That’s the way I deal with API network requests, so I suggested what I know about, but I understand it may not be fit in every situation.

[marca]

Hey everyone,

We’re aware that debugging of server side action code leaves a lot to be desired at the moment. We’re working on a feature right now that will allow you to see console output of your functions, which along with some improved documentation should make the plugin development process considerably smoother.

Thank you for bearing with us and being early users of this feature!

[marca]

@vini_brito @timothymugendi Server side actions now send their console output and any error messages to the logs tab, when used on an app running in test mode. This should make them considerably more debuggable–add all the console.logs you want, run your action in the test app, and you’ll be able to see what’s going on.

The formatting of output is wonky at the moment, but this is going to be cleaned up shortly in a more general overhaul of the logs tab.

[JonL]

@marca Any possibility to enable a debugging endpoint to use the Chrome integrated devtools for node?

Debugging Node.js with Chrome DevTools

[marca]

@JonL unfortunately not. I’m all in favor of debuggers, but they don’t play nicely with AWS Lambda.

[JonL]

Thanks for the info. Just read some literature about it. Indeed not a lot of options. The ones I’ve seen don’t seem to be very reliable and others you have to pay for additional computing time.

Anyway, lets hope AWS improves external debugging for Lambda.

[timothymugendi]

@vini_brito

Probably you can use the API connector (set as data source) and get that key, then pass that key to whatever other plugin action via normal Bubble workflow, specifically properties.access_token .

Hello @vini_brito, this solution helped to cut a few steps for my users. Thank you so much.

[justinkaese]

@antony you saved me on this one! Thanks so much!

[akash]

@antony

Now the next part depends on which kind of action you are defining…

For an Action which runs on the Server…
Then you have to realise that when you try to access this input (properties.anything), it will probably be empty (null in javascript parlance), even though you specified a value in your workflow. That is because, as a user defined thing rather than just a piece of text, it needs getting from the database. So first you need the line:

properties.anything.get();

( For an Action which is part of an Element… you don’t need to do this - in fact the above line will throw an error.)

And to save yourself typing the “properties.” bit the whole time, it can be useful to define a variable for this:

var anything = properties.anything;

which will send the plugin off to the database to go and fetch it. There is a bit of an issue around the timing of that process and whether your function will run more than once, which you can read about in the manual - click here for all the details.

Now it exists in your code… but how on earth do you access its field values?

Well firstly, you need to run a very special function to see what the fields have been renamed to now they are in javascript land. Execute this line of code and send the result to a text output or the console:

x = anything.listProperties() + "\n";

(If you don’t have the + “\n” part concatenated, you may need to convert the type to a string, so with the line:
x = toString(anything.listProperties());

This gives you a big comma separated list. It is easier to read with each field name on a new line, which with a bit of javascript digging around, can be done like this:

t = x.replace(/,/g,'\n');

which globally replaces the commas with a new line. Then you end up with a usable list of the field names, which will look something like:

first_name_text
deleted_boolean
number_number
start_date3_date

(note that the names may not match your Bubble field names if you have been renaming some of your Type’s field names in Bubble)

And then… you can access the values of the individual fields with the syntax:

t = anything.get("first_name_text") + "\n";

(assuming you defined the variable
var anything = properties.anything;
as shown above).

Can you share the code for the quoted text, I’m not sure how to do the above part.

[jaredg]

From a server side action, is it possible from javascript to access context or properties of an element within the same plugin?

How do you take results of a SSA and send them for access inside a plugin element’s initialize or update functions?

[jared.gibb]

HEY! I am having struggles while trying to create a plug in to help me create charts faster. hoping someone can help!

I have created the input field

I am trying to access this input field with this code and use the input data in a javascript array of strings

I have created a list data type to hold the info I will pass to the plugin

I populate this with text using this workflow

this is how i tie in the variable to the plugin to populate data

I’m using this to make sure the list exists on each load

now, i can save to the list. but when i try to call the list into my plugin via the inputs, somewhere it breaks down.

in the image below, there should be as many labels on the chart as there are words below the text input, but instead I only see [object object]

I have tried JSON.stringfy(sessions) and the output is {}

can anyone help?!

[amit1]

@antony @sudsy @vini_brito
Antony, thanks for this post.
it all works fine, except for I don’t know how to pass back a list of things (publishState).
I have an array of objects called “resarray”, which contains

0:
   attribute_id_number: "1600000"
   attribute_text_text: "Storage Type"
   category_text_text: "Key Specs"
1:
  attribute_id_number: "2400000"
  attribute_text_text: "Graphics"
  category_text_text: "Key Specs"

I’m trying to pass my array using publishSate, but it returns empty
instance.publishState(“specification_object”, resarray);

Huge thanks for anyone diving in to help. I’m lost.

[vini_brito]

My dream is to be able to publish objects to custom states, but @Bubble team hasn’t given that grace to us yet, hopefully they’ll do it one day…

Anyway, you’ll have to publish it as lists of texts and send an array of strings.

[amit1]

Oh, that’s a bummer.
So for each “column” of my thing I need to send an array?
and have an API workflow on a list for each published state? hopefully, they will be in the same order?

[vini_brito]

How exactly you’ll do depends on the context (:
There are always different ways to design the same thing.