Display Data on Repeating Groups | Bubble.io

so in this bubble application we are going to create a repeating Group which will display the list of customer that we have in our database [Music] here in our application I have created a simple page with some text and heading for our database to display today in this video we will be using repeating group to show list of database entry in our application repeating group is a special type of container to show the list of items here in our application I have already created a data type of customers here and my application already contains some of the entries for the data type of customers so here you can see I have four entries with all the details listed here address company email address full name phone number and even profile picture so what we're trying to do here is we we are trying to display all these datas to our application which is this so I will begin with uh drawing a repeating group here simple and and now type of content is customers and data source should be do search for customers with no any constraints because we are trying to display all the customers database here and as our customers could be unlimited maybe our customers should be like maybe two or maybe 200 400 so I'm unchecking it uh so that it will list the all the number of customers in our application and I'm setting minimum height of 60 to make it nicer and also to to display some effects when while we hover over the customers and I'm drawing a group here here a group and I'm and and the type of content should be customers and data source should be current sales customer and to apply some condition what I'm trying to do here is uh this group when this group is hovered I want to change background color so or maybe we can set background Style flat color and background color is let's make it a bit Blackish yeah so when so when when when this customer is hovered the background color will change okay let's stretch it and let's try or maybe let's begin with creating a profile picture first so I'm drawing an image here and for the sake of example I'm just uploading one image just to let you know how how it works and how it displays on front end so let's upload this one and let's as this image is already round but there could be some images which are square so we want to make it round so we can just go to roundness and make 100 all right so let's make it a bit bigger yeah so we have the customers profile picture here now we want to add customers full name for that let's draw a text here and for the example let's let's type a name John Joy yeah and let's apply some styling let's make it 500. all right so this is full name now let's now let's make email address for that let's draw a text yeah and write example order it sample.com for an example and let's child it and make its size to 10 or maybe 11 let's go with the 11. so we have email address here let's stretch it let's Center it okay so we have full name here we have email address now we want company name so for company name we can copy this and paste it and we can just try it over here and we can write Apple Inc for an example let's stretch it and we also want phone number for that let's go here and let's type down an example phone number zero seven and for the address let's again copy and paste it just down below address yeah so London yeah for an example so yeah we have formatted our repeating group you can see we we have all the required elements to display our data so we have profile picture full name email address company name phone number and address let's try by previewing it how it how it looks here so see we have the list of customers but what you can notice here is it is showing the same that we have that we have entered here right so what we are missing here is to connect these elements to our data source so to do that first let's go with the profile picture and clear this profile picture and insert it dynamically so parent groups customers and profile picture so now we have linked our profile picture to our database back in here this profile picture so let's go to application editor and let's do the same with name full name inserted dynamically parent groups customer and full name I'm going to do same with all the all the fields here this is email address done this is company name this is company name inserted dynamically and Company all right phone number do the same phone number for address do the same address yeah all right so we have linked all these fields to our database and if we preview this it should work perfectly and it should display all of our full data entry that we have here all these so let's go and try preview so all right see so we have all all the four customers name and details here um which we have here in data so we have successfully used the repeating group to list the uh list of customers here okay so you can customize it further so you can see that we once we uh hover over the group it changes its color it's because we have another group inside repeating group and once it hope once it gets over then it changes its color okay so uh yeah so we we just use the repeating group to display a list of items from our database you can customize it further to add to ad search and filter function or edit and add databases and so many more if you have any questions regarding this using this repeating group you can just comment down below I will happy to help you with your project or your learning uh please subscribe to my channel if you want the videos like this to come in near future thank you so much for watching this video thank you guys

Channel: Z Studioo

Views: 10,927

Keywords: bubble.io, repeating groups

Id: 1a5aWZhm3Ds

Length: 9min 16sec (556 seconds)

Published: Sat Dec 17 2022