Dynamic Value in GET API URL

Need help APIs
1

Hi,

I need to use an API that includes a partially dynamic URL as shown below.
.../2020/teams/{{teamUrlCode}}/roster.json

The dynamic section is defined with the {{teamURLCode}}string that should be changed accordingly to the team name (such as teamA, teamB, teamC).

My question is quite simple:

  • How to properly set the API call on the API connector to tell bubble it should look for a dynamic value?
  • How to properly add this value when making the call in-app ?

Use case-example:

I have a list of team coming form an API call displayed and for each team, a button “see roster”. The API call gives me the teamUrlCode (among other data).

When I clic on that button, I go to the team roster page and show the list of players for this team. To show that roster list, I need to trigger an second API call to gather the data to be displayed on this page upon which team “see roster” button was clicked. I assume I can pass the teamUrlCodewith the clicked button but then, I don’t see how to inject in the API call the dynamic teamUrlCodevalue.

Thanks

2

To add dynamic values within the API URL use square brackets [] for the dynamic value, then specify a value to use in the initialization of the call.

so in your case: .../2020/teams/[team_code]/roster.json

Then you need to define the parameter value when you initialize the call (so just use any valid team code, i.e. one you already know, or the one returned in the previous API call).

Make sure the ‘Private’ box is unchecked so that you can define the team code dynamically in your workflows.

In your app workflow run the first API call to generate the teamUrlCode then use that value for the dynamic team code in the second API call (i.e. for the ‘my_team_code’ parameter use ‘results of step 1’s teamUrlCode’).

3 Likes
3

Thanks !

The value between the brackets can be randomly set right ?
I assume Bubble will inject in place of this value between bracket the proper string. Correct ?

Is my setting well made ?

Capture d’écran 2021-02-18 Ă  15.17.46
Capture d’écran 2021-02-18 Ă  15.17.461652×996 72.2 KB

Then, I understood how to add that parameter to an API call on-page but the missing part is that I don’t get the team_codevalue from the button the page was opened. As a remainder, I open a roster page from a button that is inside a repeating group listing all the teams. I configured the action “when button is clicked” as followed but pretty sure something is wrong


Capture d’écran 2021-02-18 Ă  15.30.32
Capture d’écran 2021-02-18 Ă  15.30.321776×868 58.7 KB

Capture d’écran 2021-02-18 Ă  15.30.11
Capture d’écran 2021-02-18 Ă  15.30.111034×1226 68 KB

I was expecting to see the “data to send” value somewhere in the roster page to be selected as a parameter value to add for the API call but sadly, I was wrong

4

I see that your API call is set up as a data call (so ignore the bit in my last reply about workflows). So in that case you can set the dynamic value of your teamUrlCode parameter when accessing the API data in your data source (presumably for your repeating group).

The value you set can be anything as long as it’s a valid teamUrlCode recogised by the API provider, so if you want to use a random one then you’ll have to have a predefined list of valid team codes to choose from.

Where you get the value to include will depend on how and where you’re making the first API call.

If you’re making it on a previous page to the one you’re making the teamUrlCode one then you’ll need to pass the returned value from that page to the new one using a URL query parameter. Then you can get the value from the URL on the next page and apply it to the API call in your repeating group data source.

I don’t know exactly how your app works, but I assume that on one page you have a repeating group showing teams, and then when a user clicks on a team they are taken to another page showing that team’s roster.

In that case, I’m guessing the data source for the first repeating group is the first API call you’re making, which should return the teamUrlCode for each team.

If that’s the case, when a team is clicked, use the navigation action ‘Go to page roster_page’, then tick ‘send more parameters to the page’.

Add a parameter and give it a name (such as teamcode) and add the value as the current cell’s teamUrlCode (or whatever it is called in the returned data) - as long as you have initialized your API call and saved that particular field you should see it there.

Then, on the next page, in the data source for your next repeating group, set the value of the teamUrlCode by using ‘Get Data From Page URL’, selecting type ‘Parameter’ entering the name of ‘teamcode’ (or whatever you called your parameter), and leaving it set as a text type.

That enter the teamUrlCode from the previous pages selected cell’s team into the API call of the current page.

5

Almost done, except for the last bit, the addition of the dynamic text to the API call

I got the method right, but for some reason, Bubble doesn’t allow me to set this parameter properly.

When I open the data source, the teamUrlCode is set as team A as I added this value for initializing the call. We can see it’s written (path) before the parameter name. Is that right ?

Capture d’écran 2021-02-18 Ă  16.38.50
Capture d’écran 2021-02-18 Ă  16.38.501516×602 57 KB

Then, I still make what you required.

Capture d’écran 2021-02-18 Ă  16.38.32
Capture d’écran 2021-02-18 Ă  16.38.321576×714 75.6 KB

But the formula return and error:

Capture d’écran 2021-02-18 Ă  16.48.26
Capture d’écran 2021-02-18 Ă  16.48.263336×1916 588 KB

6

That all looks like it’s set up correctly in terms of accessing the correct parameter from the URL and passing it into the API call.

However the data source and data type for the repeating group is not set up correctly at the moment


I don’t know the particular API you’re using or how it’s structured, so can’t say for sure


But, presumably, the API returns a list of games/matches etc, so you need to set the data source to be the actual returned list, rather than just the API call itself.

If you click on ‘more’ after NBE - Team Roster Call you should be able to select the list of matches (or whatever it is you’re trying to display) from the menu.

Then you’ll need to change the ‘Type of Content’ to match that.

7

That was exactly the issue. Solve it while you were answering

I manage now to get the roster for team I clic on !

The really tricky part here is that none of this data is stored in the app (API content only). So I need to go from call to call to fetch data to be sure everything is correctly displayed. Though for a newbie but thanks to you, I understood the method !

1 Like
8

That is just the formula required to display the full name of a player filtered by the teamIDparameter that matches actual displayed team’s roster.

Capture d’écran 2021-02-18 Ă  17.32.51
Capture d’écran 2021-02-18 Ă  17.32.512398×1456 409 KB

Can’t imagine when I will require to display the full stat line