Working with Tabpanels
Thank you for joining me for this video. Servoy University, I’m Bob Cusick. In this video, I’m going to show you how to display related information on a form. The example that we’re going to take a look at is kind of a classic. It’s going to be customers and those customers have orders. So here I have my customers form and I’ve created a very simple order form that just has some basic information on it. And what I want to do is I want to show all of the related orders for this customer down here at the bottom. The first thing that I need to do is to create a relation between the customers and the orders so that we can show all of the orders for a particular customer. To do that, I’m going to come over to my relations, right-click, and say, create relation. So we need to pick the source and the destination tables. Now there’s two ways you can do this. You can click the little button and it will show you a list of all of your data providers. And I can come down here and say, customers, which is what our source is going to be. Or you can also go right into the destination and you can start typing. The other type of example data, a period, and then orders. And then, Servoyautomatically say, hey, look, there’s a custom right-deal over here. And there’s a customer idea over here. Is that what you want to join on? And in this case, it is. So we’re all set. Now I’m going to hit save. All right, so now I have a relation between customers and orders based on the customer ID. Now what I’m going to do is come back to my customer form. And I need a way to display that order form on this form. And the way that you’re going to do that is through a tab panel. A tab panel can hold one or more different forms either related or not related. And you can choose to show the tabs on them or not to show the tabs on them. I’ll show you what I mean. So we’re going to come down here to the tab panel object and we’re going to drag it out. And I’m going to come down here. We’re going to make it a little bit smaller, so it fits on our form. And I’m also going to set the anchors to top, left, right, and bottom so that as the page resizes, this box will grow along with it. All right, so now I just have this tab panel shell. I’m going to change the tab orientation. As you can see, you can have tabs on the top, bottom, left, right, or hide. So I’m going to hide them. And the next thing you want to do is you want to actually add a tab to this tab panel. I’m going to drag a tab out to the tab panel. And now it’s going to say which form do you want to show in this tab panel? So I’m going to double click. And the form that I want to show is through my relation. So I want to see only the orders for this customer. I’m going to do the down arrow, click on orders, and click OK. So now I’m going to go ahead and save this. And now I’ll just go ahead and launch them up in both the smart client and the web client. So here you can see, now we have our orders form displaying in our tab panel. For this first customer, they have six orders. And I can go through each of those six orders. When I go to the next record here, or row 10 actually, they have 14 orders and I can see all of them here. It worked exactly the same way in the web client. So here’s their six orders. I can scroll through them. And I can also go here to the 10th record. And they have 14 records and I can scroll through them here. That’s about it. And you can see it’s very easy to add a tab panel to show related data in Servoy. I hope you enjoyed this video. Thanks for watching.