Forum Academy Marketplace Showcase Pricing Features

Creating a Tab Element

I’m trying to create a Tab Element wtih two tabs for my books collection site: Most Voted, Recently Added.

I was able to create a repeating group to push the book to the top which receives highest votes. But I’m not able to figure out how to assign these results to the most voted tab. Also, how do I switch to a new tab which shows records with latest creation date. Any help is appreciated.

1 Like

Within the RG, set the data source to sort by # of votes or date added. To do it dynamcially, when user clicks one of those tabs that have it update the data source.

Note - it’s a best practice to include the sort within the search parameter instead of adding :sort after the search.

1 Like

@sridharan.s, I was able to tweak the requirement a little with the help of your direction. The Most upvoted tab is showing the RG with the highest votes.

However, when I click Tab 2 on editor to build an RG similar to the one built for MostVoted tab, the Tab2 content space is not getting empty. How would I be able to create an RG for Tab2? Kind of lost here, your help is very much appreciated. Below is the screenshot for reference.

I’m not sure I know what you mean by “content space”

If you’d like the layouts to the be the same for each, then use the same RG. And, on the conditions tab, you can set the data source to be different (and perhaps use the same query, but change the sort order).

Another way to do it would be have 2 separate RGs. And, have one display when tab 1 is selected and hidden the rest of the time, and the 2nd one display when tab 2 is selected and hiddent the rest of the time. This approach probably isn’t quite as fast as the first one though.

Does that answer your question?

@sridharan.s The Content Space I’m referring to was the Repeating Group(Tab 2 Content), please refer to the screenshots below.

I like to create a Repeating Group for Tab 2 similar to the one created for Tab1.

Ohh, I see.

I haven’t used the tab element that you’re using so I’m not sure exactly how to do it. I’d imagine that when you select a new tab it’s changing a custom state on the page and that’s causing a new group to display (and the original one to not display).

As such, you’ll want to figure out which group is display when tab 2 is selected and then you’ll want to add your new RG to that group.

@sridharan.s Sorry that I forget to thank your contribution. Thank you so much!

I’m still trying to figure this out, hopefully I get this sorted out.

You’re welcome. Glad I could be of at least some help on this.

Hey @rams419 :slight_smile: It’s hard to see but on the left-side, you can expand the list of elements within the “Group Tab”, and then toggle the visibility of groups 1, 2 and 3 using the eye icons. Groups 2 and 3 are hidden by default:

On the left side, I then clicked the eye to the right of Group 1 to hide Group 1 (since it was already visible), and click the eye of Group 2 to show Group 2 (since it was hidden):

You can then paste in a repeating group, or any content, into Groups 2 and 3. :slight_smile:

4 Likes

I have a tab control demo on my demo app

and in the editor:

7 Likes

@fayewatson Lol. Your directions helped, I see that Tab2 content container now :slight_smile: This reminds me that problems are not real problems, just that we are not looking at the right direction.

I really appreciate your contribution, this solved my problem.

2 Likes

@DaveA thank you. This is exactly what I was looking for. Appreciate your time.

2 Likes

Hi @fayewatson, I was able to create RG manually in the other tab content area. However, when I’m trying to copy Tab1 content with workflows and past it to Tab2 content, it is ending up pasting the copied content on top of Tab1. Before I tried to paste the content in Tab2, I kept Tab1 in hidden mode, yet it still doing the same. Am I missing something here?

Awesome! :slight_smile: Can you share a link to the app editor? If not, I would try clicking on the Tab 2 Group (so the blue border displays in the editor), and then within that group, right-click and select paste with workflows. That should place the content within the Tab 2 group, but let me know if not!

@fayewatson I did try to highlight the Tab2 content section first before trying to paste. It did not work for me.

Below is the link to the app editor:

Ohh I see; It’s because the element within the Group 2 Tab looks like a group, but it’s actually a text element:

Delete that element, and then you can paste with workflows the repeating group within the group called “Group Tab 2 Content”.

This topic was automatically closed after 70 days. New replies are no longer allowed.