Dynamic Filtering a List


#1

Hi,

Can we filter the received results of a Dynamic List using a Text Input without recalling API?

i.e When “Text Changed”, hide Tiles which do not contain the input text or show tiles which contains the text etc.


#2

Hi Cem, currently you can only filter API array results from the status code events of a request (as this tutorial outlines https://help.dropsource.com/docs/resources/tutorials/working-with-apis/filter-api-array-values/). I don’t believe you can currently achieve the same functionality from an element event as the array isn’t in scope there, so yes you would need to recall the API - I’ll mark this as a feature request though!


#3

Hello @sue and @seanhoots

I am using Bubble API for my Dropsource app. I would like to filter a Dynamic list which is getting data from lets say array (Request). My filter(s) is a value from a field in another array (user). Would you mind to take me through a step by step guide on how I can do that. I tried following example on above link without success.

In below step of the example, I want to filter the list based on a value from a field in user array or a variable that equals to value in the field of interest that is related to current user. eg email user ID, company name etc. as opposed to a static text as per the example.

Thanks in advance.


#4

Hi @TimNjeru, the most effective way to filter data returned from a Bubble request for display is to use the Bubble constraints action. This way you would essentially run the request including the constraint you want to filter on, and only the relevant results will be received into the app. If you check out the Search and Filter section of the Bubble tutorial you’ll see how that works:


#5

Hi @TimNjeru,
As Sue pointed out, the best way is to do the filtering at bubble’s end so that only the relevant results are returned in your response in Dropsource.

Here is another alternative if you don’t want to write the constraints in Dropsource to attach to your request.
The reason why sometime you may consider this is if you find writing the constraint in dropsource cumbersome (there are about 4 steps to create a constraint to attach to a request).
The idea is to do the filtering at bubble’s end yourself using a workflow endpoint.
So with this approach you will define a workflow endpoint in bubble that takes as parameters the values you will be using for specifying the constraint in bubble. Then in your workflow action in bubble you do the normal “Do a search for” then in the constraint you pull whatever parameters you sent in your request for specifying the constraint.
Both approaches will work but there are times specifying the constraint in Dropsource is easier and there are times it’s easier doing it yourself with an endpoint in bubble.
Note that if you’re using my approach, you need to create workflow endpoint for getting data. With what @sue suggested you can simply use the normal Rest api that bubble automatically generate for you.
So you have to weight the pros and cons of each approach and use which one you find simpler to work with.
Then there is also the question of performance, which one is faster? That is something i haven’t looked into.

But personally if my constraints are complicated i go with the endpoint approach and if its simpler i specify the constraint in Dropsource.


#6

Thanks for quick response @sue and @seanhoots.

I had tried the bubble constraint method several times but stilll seem not to get it. Now trying the @seanhoots method. will let you know how it goes.


#7

Hi @seanhoots
I think I couldn’t am not sure if I am doing the right thing in regard to your method. would you mind to do a sample in bubble and share a link please.

@sue I couldn’t do the filtering dynamically using values from a different array. Would you mind to share screenshots as well. @DenisMutegi and I are getting stuck at this point:

We want to be able to select value dynamically from another array.


#8

Hi @TimNjeru, do you mean you want the constraint value to be e.g. a value the user selected from a dynamic element displaying an array? In that case you would need to add your actions in that context e.g. the tapped event of a table cell or whatever (that way you can get the selected value from the data source container), but if you can clarify where the value in the other array is coming from and how that fits into what you want to happen when the app runs I might be able to provide more detail.


#9

Hi @sue @seanhoots ,

The value is coming from a different array that contains current user’s particulars.

We are building a platform kind of an application. We have different apps for different user types.
e.g. App type A for user 1, user 2 and user 3
App type B for user 10, user 11, and user 12.

Users 1 of App type A can view data posted by users 11 and 12 of App type B and vice versa. This means user 10, and user 11 decided who is the intended recipient of a particular post.

Data exchanged between these apps is transactional in nature.

Our interest now is to display a dynamic list in Dropsource filtered such that the current user will view only data meant for him/her as per the user particulars upon dynamic list loading and WITH NO other external action/input from the user. In other words we need the app to display already filtered data automatically. It works the way you view SMS from different people on your phone. You see a list of SMS that is intended for you without doing any manual filtering.

Within user array in Bubble back-end, we have a column called company name. So whenever a user (lets call him creator) post some data, say a request which is stored in an array called REQUESTS, Creator’s company name and the intended recipient’s company name is passed to REQUESTS array.

This is how our user array fields look in the Bubble DB

So, our problem is how we can display data from REQUESTS array with data filtered by recipients company name values.

Below is a snapshot of fields contained in the array we intend to display based on recipient’s company name field value. We want the the dynamic list to show the list where by the company name in MAINTENANCE REQUEST array = current user’s company name.

I hope I am clear now.

@DenisMutegi and I would like to see how you implement this kind of filtering in Drop source. We also ask @seanhoots to demonstrate how his workflow method works in Bubble.


Dynamic filter of data from Bubble data source
#10

I think your issue is not really about bubble or dropsource per se but more of how you create your data structure.
If you don’t design a good data structure for your application requirements and business logic, it’s going to be extremely difficult to be able to implement it in bubble or dropsource.
I’m not sure i’m following your data setup above. Why is Creator Company Name of User type?

Anyway from the little i can get from your explanation you simply want to associate some object with some users.
I’m not sure what the specifics are whether it is a one-to-one, one-to-many or many-to-many.

I’m going to assume a one-to-many since you used SMS as an example. That is a user can send a message to a list of other users who are a subset of the users whole contacts.

So lets assume that a Request can be sent by a User and it can be received by a list of Users, this is how you should set up your data.
In your Request Thing (or Table), you need a to have a field say Recipients which is a list of Users. Every Table created in bubble has by default the Creator field which is a user. So here the Creator of the Request this is the sender and the Recipients (list of User) are the only people who will receive the request.

Lets assume you know how you will create a new Request and so you have some data in your Request table like below

Creator | Request Id | Request Type | Recipients

User 1 | 1 | req. type1 | User2, User5,User4
User 2 | 2 | req type3 | User1
User 1 | 3 | req type3 | User3, User5

So now assuming User5 goes to his request page, he’s supposed to be shown request id 1 and 3. User1 should see request 2, User3 should see request 3 also, etc.

As i stated earlier all these are not really a bubble or dropsource issue. It’s how you setup your data structure based on your application requirements and business logic.

So now let’s look at how we will be able to filter the request data so that each user sees his intended requests.
Lets use User5 as an example. To be able to find requests that he’s a recipient of, we need to search the Request table, and for each row, we search in the Recipients field, and if that list contains User5 we include it in our result.
So in bubble you will do a Do a Search for Request then you add the constraint Recipients contains Current User
This will return rows 1 and 5 since User5 is in the Recipients list of these two rows.
So basically this will be the action (Return data from api action) you will define in a bubble workflow endpoint called say getrequest with a parameter say userid (which is the userid of the current user) and the workflow will return data which is the result of your search.

Then in dropsource its simply a matter of calling this endpoint wf/getrequests then in the body of the request you supply the current user id. You can get the current user idea from the login worflow, it returns the token, expiry and userid.

Like i stated in my earlier posts you can do all the heavy searching and filtering in bubbles end. So in this case all you need to send from dropsource to bubble is the userid to an endpoint in bubble which will return the filtered data.

Hope this helps.


#11

@seanhoots thanks a lot for taking time to explain in details. We managed to create the workflow filter.


#12

@seanhoots, does dynamic list filtering using API workflow work the same way as drop-down search you have described on this link…

Even after reviewing my data structure as per your above recommendations, I still need you to show me an example with screenshots.

I basically managed to create an API workflow but when it comes to displaying the results on the list, I don’t have parameters in the response that I can bid to my elements on dynamic list.

Note that the API workflow gives me a POST method. I don’t have a GET method.

Please take time and do some screenshots if possible a step by step tutorial.

Thanking you in advance.


#13

using the bubble constraints method, i would like to use more than one Key while filtering, how do i go about that?


#14

Hi @DenisMutegi, you should be able to use the Add Bubble Constraint action as many times as you need on the same constraints object.


#15

Hi @sue. Thank you. it has perfectly worked


#16

Hello @seanhoots

I would like to display a list object from a data type called EQUIPMENT filtered by content of another two data types namely CUSTOMER and SUPPLIER.

Each equipment is owned by a customer and a customer has multiple equipment as illustrated below:

Each customer has multiple suppliers as illustrated below:

and each supplier has multiple customers as illustrated below:

Now I want to display only a list object of equipment belonging to all customers who have a relationship with a particular supplier.

What I have succeeded in doing so far is to return a list as string of equipment unique ID through a bubble API workflow. I was hoping to all customers who have a relationship with a certain supplier.

I was hoping to use the string response within a bubble constraint to get the list of equipment objects without success. Kindly advise how to do it right.


#17

Straight to the point, this is going to be challenging due to some limitation in both bubble and dropsource (see explanation later).
From your tables, an equipment is linked to a supplier through a customer.
So given a supplier id, to get their list of equipment, you first need to get the list of customers from the supplier id, then find equipment show customer is in the list of customers obtained from the first query.

You can’t just simply use constraints to filter the search because an Equipment doesn’t have a supplier field.
And you can’t have array/list variables in dropsource (dropsource’s limitation) else you could have made the first query, save the result and use that for the second query as a constraint. That is, basically you will be making two api calls (not recommended even if dropsource supported array variables).

This means you will have to do the search at bubble’s end using api workflow. This should be easy to do but there is some limitation.
You will basically perform both queries in bubble’s server so you will make only a single api call to an api workflow.
The query will look something like:

Do a Search for Equipment  where customer id is in [ 
  ( Do a Search for Supplier where supplier id is mysupplierid )'customer unique id]

But bubble limits the data that can be returned through api workflow to i think 50 elements (Bubble limitation).
If you were doing this in a bubble application this won’t be an issue since you wont be using the api workflow.

I wan’t to believe i’m probably overthinking this and this is simple than i’m making it to be.


#18

Thanks for the response @seanhoots

I agree with you if I was doing it in bubble it would be very easy.

With Dropsource I was hoping to use List contains constraint type to get the array I want.

So if this is not possible then maybe it should go to new feature request.


#19

You can’t use list contains here because your equipment field doesn’t have any list of suppliers field.
Unless you decide to duplicate the customer table data in the equipment table. That is having a list of supplier field in the equipment table.
This isn’t recommended as it makes it challenging to enforce data and referential integrity of your database.
With such structure it will make it easy for you to query your required data but there is an overhead in storing the data becasuse anytime you make an update to the customer table you will have to update the equipments table too.

But as I said earlier if you expect your query not to ever return more than 50 rows you can easily use the api workflow approach.


#20

I might have an idea, but it depends on how Bubble will interpret the API request. If Bubble behaves as one would expect, this idea probably won’t work since it’s quite a hacky approach. I’m unfortunately not super familiar with Bubble’s constraints system so forgive me if any of this is wrong.

I think the method @seanhoots described of making two separate API calls to retrieve the final list of equipment could still be possible. The first API call would retrieve a list of Customer IDs using a given Supplier ID. The second API call would retrieve a list of Equipment, where the equipment’s Customer ID belongs to the given list of Customer IDs (as an API parameter). But as @seanhoots pointed out, we don’t currently have a way of providing lists/arrays as API parameters. It’s definitely on our list of features to explore, though I don’t have a timeline on that yet.

To get around that though, we have basic string concatenation. The way the current Add Bubble Constraint plugin works is to accept a key, a constraintType, and a value. The constraintType has several options, but one of them is List contains (hopefully this is what you want). The value is where we can trick the string into looking like an array. We can use String concatenation to “build” a JSON array.

When the first API call returns, it should return an array of Customer IDs. The Foreach action combined with String Concatenation let’s us create something that looks like a JSON array.
Here’s a rough sketch of what the logic would look like:

  1. Create an empty string (perhaps as a Page Variable)
  2. Append [ to the string
  3. Do a foreach on the list of Customer IDs
    3a. Append " to the string
    3b. Append the Customer ID to the string
    3c. Append ", to the string
  4. Append ] to the string
  5. Use that string as the value parameter of the Add Bubble Constraints action

The only way this will actually work though is if Bubble reads that value property, detects it’s a String, and attempts to convert it to an array. It would be odd if it actually did that but would make this suggestion possible. Again, it’s probably unlikely that this will work, but it’s unfortunately all I can think of at the moment.

We’ll try to look into ways of supporting array parameters. There are some technical complications involved with that which is why we haven’t been able to do it yet, but I’ll bring it up to the team again to see if we have any fresh ideas.


List of objects as Page Variable
List of objects as Page Variable