[Resolved] Display View Output in TABS, same Results as Grid, List and MAP

[Author]

Posts

[Don]

Tell us what you are trying to do?

I am working on my View output structure and would really like to display the results in different formats using TABS.

I want to have my View output results be displayed in 3 tabs, each updating identically as filters are set in the common View Search above:

Tab 1: Grid layout with several columns, ie typical grid
Tab 2: Grid layout with just one column stretched out to mimic a "list"
Tab 3: The Map results.

I have looked at the documentation and see how to create a Grid layout with a View in one grid column and the map block in another grid column so view output results and map display SIDE BY SIDE..... but i find that too cramped and want to have them in TABS, so that each has the full screen width when that tab is active, but want to have the data retrieval be as efficient and "shared" as possible if that makes sense.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I'm afraid, there is no built-in feature available for this, so it will require some workaround or customization.

Do you have any example page to show where this search with different formats can be seen?

You're also welcome to share a page from your website where you've already tried to create a view with a separate search form and results.

I'll be in a better position to guide you with the next steps accordingly.

regards,
Waqar

[Don]

hello and thanks for the quick reply.

I am not looking to do anything advanced or new, I just want to, on a page with a VIEW of search results, have tabbed content so that i can display the view results in different styles (grid/gallery, list and map of results) using the entire container width rather than having to put map above, or squished side by side. It looks like this used to be possible with a previous addon called Toolset Layouts, but is not longer offered? I would think there is an easy way to do this, tabbed content is pretty common and a great way to save space and organize things..... if there isnt a built in block option im open to another solution to work around it.....

[Waqar]

Thanks for writing back.

As there is no built-in feature available for showing the content inside the switchable 'tabs', the whole process can be divided into two main steps:

1. Creation of tabbed content

To show the content inside the tabs, you can use the Bootstrap 4 library's tabs:
hidden link

a). Please make sure that "Toolset should load Bootstrap 4" option is selected at WP Admin -> Toolset -> Settings -> General -> Bootstrap loading.

b). On your page, where you'd like to show these tabs, you can add a "Fields and Text" block and insert the HTML code for the tabs, for example:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-format-1" data-toggle="tab" href="#format-1" role="tab" aria-controls="format-1" aria-selected="true">Format 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-format-2" data-toggle="tab" href="#format-2" role="tab" aria-controls="format-2" aria-selected="false">Format 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-format-3" data-toggle="tab" href="#format-3" role="tab" aria-controls="format-3" aria-selected="false">Format 3</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="format-1" role="tabpanel" aria-labelledby="tab-format-1">Shortcode for Format 1</div>
  <div class="tab-pane fade" id="format-2" role="tabpanel" aria-labelledby="tab-format-2">Shortcode for Format 2</div>
  <div class="tab-pane fade" id="format-3" role="tabpanel" aria-labelledby="tab-format-3">Shortcode for Format 3</div>
</div>

When you'll check the page's output, the basic structure of your tabbed content will be working. Feel free to add/remove the tabs as needed.

2. Filling in the views in those tabs

The next step would be filling in these tabs with the actual content, i.e. the results from views shown in different formats.

a). For the output in each format, you'll create a separate view on its separate page, making sure that the search form/filters are the same for all those views and the search is set to update the results without using the AJAX option and the page should be refreshed on each search.

b). Once all the views are ready, you can use the view's shortcode to show only their results (and without the search form), like this:

[wpv-view name="view-name" view_display="layout"]

Note: You'll replace 'view-name' with each of your view's actual name and each shortcode for an individual view will replace the tabbed content lines, 'Shortcode for Format 1', 'Shortcode for Format 2', 'Shortcode for Format 3' etc.

c). The last step would be showing a single common instance of a search form from one of the views on the top of these tabs, for which you can use this shortcode:

[wpv-form-view name="view-name" target_id="self"]

Note: You'll replace 'view-name' with the name of any one of your views since the search form will be the same in all of them.

As a result, when the search will be performed using this search form, the results will be updated in all the tabs on page refresh.

I hope this helps and please let me know if you face any difficulty in making this work.

[Don]

thank you so much for the time and consideration of a solution and thorough reply. I have decided to simplify, hopefully to make the process easier and on one page, partly because i would like to keep using ajax and partly because im afraid using separate views and mixing them is over my head. So, I am hoping to achieve the following:

1) have the View Search take up the entire screen width AND
2) below that have a section with just TWO tabs, in one is the View Output (grid results) and in the other tab is the map using that view to show results.

But again, I want the grid view, when tab is selected, to be FULL WIDTH and the map, when tab is selected, also to be full width. And the view search should be full width as well...... i can imagine other people would want this or similar too, ie view results and a map in tab rather than map having to be above or below the entire view or both side by side (Cramped) with the view search width limited to the width of the view output....

If keeping it to a single view, and a map, makes it easier to achieve the tabbed view and map and full width view search i will be very pleased!

[Waqar]

A layout such as this can be achieved using a single view, however, you'll have to use the classic/legacy views editor and not the Blocks based editor.

You'll find documentation on using the classic/legacy views editor at:
https://toolset.com/documentation/legacy-features/views-plugin/#views-and-custom-search

To enable this editor on the website, please go to WP Admin -> Toolset -> Settings -> General and select the "Show both the legacy and Blocks interface and let me choose which to use for each item I build" option for "Editing experience".

After that, you'll be able to create a classic/legacy view, from WP Admin -> Toolset -> Views.

If you could share temporary admin login details for your website, I'll be able to share some more specific pointers on how to achieve this layout.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Don]

thanks for the info!

I followed the steps to enable legacy, and i also installed kadence blocks if THAT will make a difference/give other options to achieve this.... but i am still unclear how to "separate" the list search section from the list output on a page so that i could have the search in a container above everything full width and the view output in a tab section in a separate container below, with the other tab being a map, so that whichever tab is active is also full width.

[Waqar]

Thanks for writing back.

Without access to the website's admin area, it is very difficult to understand what is already done and what is missing.

As requested in the last message, can you please share temporary admin login details, along with the link to the page where you've tried to add a tabbed layout?

I'm setting your next reply as private again.

[Don]

thanks for the assistance and tips on switching back to using legacy to achieve this. I looked into it.... and on a new test page was indeed able to insert a very basic search filter shortcode into a container, and have another separate container with a tabs container, in which i put the shortcode for the output..... but i must say that after "starting" with the current toolset system, attempting to understand how to make things work in legacy, or that it could be remotely as easy to customize and all, makes it an unlikely solution. Thats too bad....... I really think that taking the views functionality and customability in the direction you did is awesome..... but i think that now "forcing" a views filtering section and output section to be basically "glued" together vertically is unfortunate, given that they COULD be separate before with legacy. I hope there is a workaround "combination" of the 2 awesome features, where we can very flexibly decide where to put a views filter section on a page, and the views output section on the page.... it seems that as long as both are "connected" to the same admin view setup it shouldnt really matter where they are on the page to work.....

[Don]

My issue is resolved now. Thank you!