Digital businesscard, API Connector problem

[jacob]

Hey Bubble

I run a digital business card company. We want to make it able for our users, via vCard to add people to there contacts.

I use a API from vcardhosting.com (as shown below)

I dont know if my settings on bubble is correct.

Can someone help with this, if more info is need please let me know

[keith]

Well, if it IS configured correctly, clicking “Modify Call Types” will present you with return data from the API.

But I’m guessing here that you still need to send format and xml key value pairs.

If your call is not set up correctly, you may get a helpful error message from the API on “Modify Call Types” click.

[jacob]

I get these return values, so i must do someting right
Although i cant figure out how to use them to solve my problem… can you help with this?

What do you mean by “send format and xml key value pairs”

[keith]

Uh, I was just reading the documentation that YOU posted? (You send it some XML data which it uses to update the vCard. Apparently if you don’t send that it still does SOMETHING, but your screenshot doesn’t show us what.)

See? Anyway, one is usually NOT interested in the header info from an API so uncheck that option so you can see the actual payload that you expect. (Uncheck Capture Headers and click modify call types again.)

In that screen, you select what things you want to return to Bubble.

Then you can CALL your API in a workflow. Anywhere that you can use any other data values, you can use Get data from an API - vcard - some_call_youve_configured.

BTW, u probably want to change the name of this call from the default.

[jacob]

Okay i see, but what format should i write the things i want to return to Bubble in?

[keith]

Huh?

It’s really a lot simpler than I think you think it is. When your test API call that you’re setting up in the API Connector is configured such that the API is returning the stuff you expect, you just use the Modify Call Types screen (the screen that pops up on success is called “Returned Values”) to select the data types you want to be able to select inside of Bubble.

Here’s a really simple example with one of my own APIs. This API call “getDatesFromRange” returns a list of dates, given a starting date and ending date. (It’s just a utility function, if you will. Bubble doesn’t have a feature like this, so this API call is sometimes useful to me.)

This is a POST type call, rather than a GET type call (like the one you are dealing with), but that’s just the way this one works. (Don’t get spun over that.)

Setting it up in the API Connector looks like this:

Now, when I click “Modify Call Types”, the API Connector will show me what the API returns:

Like I said, it returns just one thing: A list of dates which the API calls “DaysBlocked”. The “Return Values” page can be used to tell Bubble how it should interpret the data being returned. For example, instead of interpreting this data as a list of dates, I could force Bubble to see it as a list of strings (texts), or even “ignore field” to NOT pass this data back to Bubble.

The data type pulldown on the right lets me select how I want the data interpreted. In this case, Bubble correctly saw that these things are dates and so automatically selected the “date” option for me. But I could use the pulldown to change that if I desired:

Now that my API Call is configured, I can use the results of that call anywhere I could use any other data. So, for example, I could just print a list of dates to the screen using a text element:

A pop-up lets me configure the parameters that are sent to my API. Here I’m gonna send it “today” (Current Date/Time) as the Start Date and “6 days from now” (Current Date/Time +days: 6) as the End Date.

So now my text element, in edit mode looks like this:

Now in run mode, Bubble will call this API and show me the values it returned in that text element. (Obviously, I’m just giving you a simple example. In reality we’d use this date list in other ways, like store it in the database to be used for something in the future, store it temporarily in a custom state, or whatever. Basically I can use it anywhere I can use any other type of data).

Here’s what that looks like in run mode (this is just a text representation of that list of date/time objects):

In YOUR case, this “Create vCard” call you’re setting up creates a Vcard over in vcardhosting and sends you back information on that card. The most useful thing it seems to send back is the URL to the card.

Presumably, you’re interested in storing that in your database, possibly along with some of the other stuff.

But you should now see how that would work. Taking my “getDates” API as an example, I could store that list of dates in my database in the usual way (using Create a New Thing… or Make Changes to a Thing…).

Like I could shove that list onto the User. (That’s not a useful thing to do, I’m just showing you HOW its done, OK?). This would be done in a Workflow, when some condition is met (or it could be part of a scheduled workflow, etc.). But here, I’m just gonna create a button and when the button is clicked, it will shove this silly list of dates onto the User. Here’s a button:

Here’s the button’s workflow when clicked:

So, if that button gets clicked, this list of dates gets created and then stored as “Current User’s Some Stupid List of Dates”.

So there’s a really, really simple example of how you might use data from APIs.