AMREIN ENGINEERING SharePoint Web Parts   |   Office 365 Web Parts   |   Blog   |   Support   |   Search   |   About us   |   Home  


Sharepoint Web Parts  

2019/SE Modern Web Parts  

Digital Clock Webpart  

Alerts Webpart  

Event Manager Webpart  

Sitemap Webpart  

Stock Chart Webpart  

Stock Quotes Webpart  

Dilbert Webpart  

Mega Menu Webpart  

Quote of the Day Webpart  

Webpart Tabs Webpart  

"Spotlight On.." Webpart  

"Tip of the Day" Webpart  

Lightbox Webpart  

Page HeaderSolution  

Tabs & Accordion Webpart  

Weather Webpart  

Slideshow Webpart  

Currency Rates Webpart  

Media Player Webpart  

YouTube Player Webpart  

Map Chart Webpart  

Org Chart Webpart  

Tiles Webpart  

Chart Webpart  

Google Chart Webpart  

Hero Webpart  

News Tiles Webpart  

Cafeteria Webpart  

RSS Feed Ticker Webpart  

SQL Viewer Webpart  

Google Map Webpart  

Quick Poll Webpart  

Quick Survey Webpart  

Audio Player Webpart  

Geo Mapper Webpart  

SQL Chart Webpart  

Exchange Calendar Webpart  

Exchange Events Webpart  

Call to Action Webpart  

Quick Links Webpart  

Filter Webpart  

Image Rotator Webpart  

Navigator Webpart  

KPI Webpart  

Page Hits Webpart  

Picture Menu Webpart  

Timer Webpart  

Podcast Webpart  

SQL Bullet Graph Webpart  

User Spotlight Webpart  

List View Webpart  

Staff Directory Webpart  

Birthday Reminder Webpart  

News Carousel Webpart  

Team Members Webpart  

Christmas Webpart  

Classifieds Webpart  

Image Menu Carousel Webpart  

Timeline Webpart  

Banner Rotator Webpart  

AZ Index Webpart  

Blog Roll Up Webpart  

Discussion Roll Up Webpart  

Document Roll Up Webpart  

News Roll Up Webpart  

Task Roll Up Webpart  

Calendar Roll Up Webpart  

Quick Form Webpart  

Twitter Webpart  

Upcoming Events Webpart  

Welcome Webpart  

Color Calendar Webpart  

Image Carousel Webpart  

Metro Grid Webpart  

Goal Thermometer Webpart  

Swipe Gallery Webpart  

List Items Webpart  

List Rotator Webpart  

List Search Webpart  

Bullet Graph Webpart  

Accordion & Tabs Bundle  

Accordion List Webpart  

Tabs List Webpart  

Microblog/Chat Webpart  

Toast Notifications  

Vacation Planner Webpart  

Multilevel Tile Webpart  

Inspired Tiles Webpart  

Facebook Timeline Webpart  

File Explorer Webpart  

Zip Creator  

AEWebparts  

Web Part Bundle  

Web Parts by Category  

Microsoft Sharepoint Web Parts

Tabs & Accordion List SharePoint Web Part




The "Tabs  & Accordion" web part helps you to save screen space, focus attention and have more content available instantly with only one click.

The web part groups list items by a group field you select in either accordion or tabs style and displays the list items of only one group at a time. Thus is allows to focus the attention of the user to specific information.

Moreover it allows you to format group fields and list items with HTML and CSS code and add informative words. Thus lists can be presented in a fully customized and user friendly way.

You can configure the following web part properties:

  • The list you want to show
  • The list view to sort and filter the list items
  • The grouping field by which you want to group the list items
  • The list items (content) you want to show
  • The template to customize the presentation of the list items (content)
  • Optional search filters for interactive searching/filtering

SharePoint 2019/SE 'Modern' version »


Product Price
Tabs & Accordion List Web Part for Sharepoint 2010
30 day Evaluation Version
Free download..
Tabs & Accordion List Web Part for Sharepoint 2013 
30 day Evaluation Version
Free download..
Tabs & Accordion List Web Part for Sharepoint 2016 
30 day Evaluation Version
Free download..
Tabs & Accordion List Web Part for Sharepoint 2019 and SE 
30 day Evaluation Version
Free download..
Tabs & Accordion List Web Part License Key
per Server License
USD 190.00
Deployment  Instructions for SP 2010 download..
Deployment  Instructions for SP 2013/2016/2019/SE download..
Deployment  Instructions for SP 2019 "modern" pages download..
You can also send us a PO via e-mail to [email protected] 

Installation Instructions:

  1. download the Web Part Installation Instructions (PDF file, see above) 
  2. either install the web part manually or deploy the feature to your server/farm as described in the instructions.
  3. Configure the following Web Part properties in the Web Part Editor "Miscellaneous" pane section as needed:

    • Site Name: Enter the name of the site that contains the List or Library:
      - leave this field empty if the List is in the current site (eg. the Web Part is placed in the same site)
      - Enter a "/" character if the List is contained in the top site
      - Enter a path if the List in in a subsite of the current site (eg. in the form of "current site/subsite")
    • List Name: Enter the name of the desired Sharepoint List or Library
      Example: Project Documents
    • View Name: Optionally enter the desired List View of the list specified above.
      A List View allows you to specify specific data filtering and sorting.
      Leave this field empty if you want to use the List default view.
    • Group By: optionally enter the List column to define the grouping.
      Example: Department
    • Nbr. of List Items: enter the maximum number of items to be displayed.
      Enter "0" to display all items.
    • Navigation Type: choose one of the below Navigation types.
      - None
      - Tabs
      - Accordion
      - Tiles
      - Cards

      The "Cards" type displays the list items as cards:


    • Template Type: choose one of the below Template types.
      - List
      - Bullets
      - Table
    • Field Template: enter the desired List fields surrounded by curly braces.
      You can specify HTML tags and CSS styles to freely format the text.
      If you choose the "Table" Template Type setting, you can add the table column separators by entering "|" pipe characters.
      Example:
      {Picture} | <b>{Title}</b><br>{Description} | <b>{Price}</b>

    • Item CSS Style: enter optional CSS styles to format the list items.
    • Group Header CSS Style: enter optional CSS styles to format the group headers
    • Webpart CSS Style: enter optional CSS styles to format the web part container.
    • Header Text: display the optional web part header text. You can include HTML tags as needed.
    • Footer Text: display the optional web part footer text. You can include HTML tags as needed.
    • Search Filters: optionally enter one or more List columns (separated by semicolons) to allow for interactive searching.
      Example: LastName;FirstName

      If you want to display a search filter as a dropdown combo, please enter it with a leading "@" character:
      LastName;FirstName;Department;@Office



      Friendly Search Box Labels:
      If you would like to display a “friendly label" instead of the default property name please append it to the User property, separated by the “|” pipe symbol.
      Example:
      WorkPhone|Office Phone;Office|Office Nbr


    • Align Search Filters vertically: allows you to align the seach input boxes vertically to save horizontal space:
    • Show Table Headers: display the table headers when choosing the "Table" template type.
    • Open Links in popup window: open the links in a Sharepoint dialog windor or in a new browser tab.
    • Show 'Add New Item' Button: display the button to add  new list items (contributors only).
    • Show 'Template Edit' Button: display the button to edit the web part's "FIeld Template" setting (contributors only).
    • Options: enter any additional options as needed.
    • License Key: enter your Product License Key (as supplied after purchase of the Web Part license key).
      Leave this field empty if you are using the free 30 day evaluation version.




Please enter a comment below if you have problems with the installation, want to give feedback or have suggestions for improvements:

User Comments Post a Comment 

Tim Carlson  
8/10/2021 18:35 
Is the tabs/accordion web part available for O365?
Juerg  
8/10/2021 18:41 
Tim,
we have the „Accordion” web part for Office 365:
https://amrein.bitalus.com/products/webparts/o365/accordion

However, it has no feature to display the groups as tabs.
Sascha  
8/11/2021 16:19 
Is it possible to create an accordion within an accordion so that it can be expanded twice?

How can I move the Webpart anywhere on the page?
Juerg  
8/11/2021 17:57 
Sascha,
the Tabs & Accordion web part currently only supports a single expansion level.
However, you can create a two-lecel accordion using the "List Search" web part (see /apps/page.asp?Q=5805):



Just send an e-mail to [email protected] so we can give you the detailed configuration settings.
Justin  
8/12/2021 00:02 
Is there an option to "pre-expand" all accordion/rows?
Juerg  
8/12/2021 12:19 
Justin,
we have now added the new “expandall” option (to be added to the web part’s “Options” setting):

expandall=1

Please re-download the web part and then update the solution.
Justin  
8/12/2021 16:53 
Thanks!

A couple more features would also help……they were on the previous version of this web part:

Pre-expand only the first accordion/row (so people know it can be clicked and opened)

Add “ group header template”: sometimes people want to display more info on the great header, for example people’s name + title.

Thanks!
Juerg  
8/13/2021 13:44 
Justin,
we have now added the new “expand” option (to be added to the web part’s “Options” setting):

expand=all
expands all the entries

expand=top
expands just the top entry

We also added the new “grouptemplate” option (also to be added to the web part’s “Options” setting) as eg.

expand=top|grouptemplate=Author:{Created By} : {Title}

where you embed the column name(s) enclosed in curly braces

Please re-download the web part and then update the solution.
Anna  
9/6/2021 12:24 
Is it possible to change the colour of the selected tab?
Juerg  
9/6/2021 12:37 
Anna,
yes, please enter the below into the web part's "Group Headder CSS Style" setting:

active:tab color value

Example:
active:red
Heather  
4/19/2022 16:16 
Seem to be having a few issues with the AE Tabs Web Part - been using it a about a year but have recently been getting an "Attempted to use an object that has ceased to exist" error on pages where this web part is used. Is this a known issue or has anybody else experienced it. Any advice would be useful.

Thanks
Heather
Rhonda  
10/18/2022 17:55 
Does grouptemplate work in the trial version? If so, are there any other "Options" or specific settings we need to use in order for it to work?
We just downloaded the trial version last week.
Juerg  
10/19/2022 11:31 
Rhoda,
yes it works. You typically do not need to use any "Options" except in cases where you need to configure some seldom used feature.
Rhonda  
10/19/2022 23:46 
My Sharepoint list contains a link that opens the list item in edit mode. When I use this same field in this web part using Tabs and Table with the field name specified {Last_name}, the field is not a link. How do I specify that the field is a link to this web part so that I can have that edit item capability?
Juerg  
10/20/2022 11:28 
Rhonda,
please append "/view" to the column to be linked to the item's detail view as eg.

{Last_name/view}
Rhonda  
10/25/2022 23:23 
Is there any way to line up the column headers and the columns using CSS in the webpart? Is there any way to use CSS in the webpart to modify the Header and Footer Text? Am I missing a link to documentation somewhere? I am asking a lot of questions that seem simple.
Juerg  
10/26/2022 16:18 
Rhonda,
you can directly embed HTML code and CSS styles both in the "Header Text" and the "Footer Text" settings as for example:

<p style="color:red;font-weight:bold">This is the header</p>

Regarding the column headers:
if you are using the "Table" template type setting and have checked the "Show Table Headers" setting, the column headers should align with the columns properly.
Jaison  
10/26/2022 18:43 
Is there a way to change the grouping icon from and arrow putting down to the + symbol of the old accordian webpart?
Jaison  
10/26/2022 19:24 
Also, is there a way to make .AELIaccordian {float: left} instead of {float:right}
Jaison  
10/26/2022 19:25 
Correction to below***

Also, is there a way to make .AELIaccordian::after {float: left} instead of {float:right}
Juerg  
10/27/2022 11:51 
Jaison,
we have now added the new "up" and "down" options (to be added to the web part's "Options" setting) which lets you specify the symbols used for the arrows. To display "+" and "-" symbols, please enter the corresponding "Font Awesome" unicode characters:

up=067|down=068

To also display the arrows at the left (as opposed to at the right), please also add "arrows=2" as eg.

up=067|down=068|arrows=2

Please re-download the web part and then update the solution.
Jaison  
10/27/2022 21:14 
Thank you very much! Great help!
Jaison  
11/28/2022 19:16 
Hello, I have the web part working perfectly with document libraries, but with a list, when you click on the item, it does not open the document associated with the list item directly. It just opens the list item with the link to the document as a property. Is there a setting to have a list item that has a document attached to open the file directly like the old Accordion web part? Thanks!
Juerg  
11/29/2022 12:27 
Jaison,
is the document to be opened defined as a list item attachment or as a property of type "Hyperlink or Picture" ?
Jaison  
11/29/2022 21:16 
Juerg, they are SharePoint lists with a text field containing the URL to the document.
Juerg  
11/30/2022 14:43 
Jaison,
please rather use a field of type "Hyperlink or Picture" to define the document URL. This then also allows you to assign/display a friendly name (as opposed to the raw URL).
Rhonda  
12/15/2022 20:33 
We have about 40K list items. The list is grouped by the Year as the tab. Loading of the page is very slow (1.5 minutes with the web part added to the page). If I restrict the number of items, I only get one or two years since there are approximately 6K per year. Is there anything I can do to speed up the loading process?
Juerg  
12/16/2022 16:52 
Rhonda,
are you also using the interactive search filter via the web part's "Search Filters" setting ?
rhonda  
1/23/2023 22:43 
We are continuing to experience very slow response time on the grouped by year tab. We are using the interactive search filer via the web part's "Search Filters" setting, but I am referring to when the page initially loads prior to a user filtering any of the data. It is several minutes before the page loads the data. With the standard SP OOTB view, the same data load within seconds. Any ideas on what we can do to speed up the webpart? If not, we may have to move away from uisng this one.
Micael  
1/26/2023 15:24 
Hi Juerg,

I'm trying to set up tabs on a modern page that are based on a document library.
The documents go up well according to the "view" and "group by" chosen.

However, it is only raw text that appears.
Is it possible to add the hyperlink for opening the document on the text?
I tried this code but without success: {Title/url}

With my best Regards,
Micael
Juerg  
1/26/2023 18:29 
Rhonda,
since your list contains about 40,000 items, it responds very slowly when returning all 40,000 items.
Would it be a good option to NOT return any items as long as your interactive search filter contains no filter criteria ?
rhonda  
1/26/2023 21:21 
Hi Juerg,
Unfortunately, returning NO records in not an option.
Any other ideas?
Rhonda
Juerg  
2/2/2023 13:04 
Micael,
we needed to fix an issue regarding “French” sites, so please re-download the Tabs & Accordion web part and then update the farm solution.

Please then use the below “Configuration" template where you do not include the “/view” parameter:

template={Nom}
Juerg  
2/2/2023 17:20 
Rhonda,
as long as you need to get all 40,000 list items when opening the page, it will load slow.
Can’t you restrict the number of items to be shown when the user opens the page as eg. just displaying the search filter interface or using a suitable filter preset (as eg. just displaying this year’s list items etc.) ?
Daniel  
6/23/2023 14:26 
I've seen above, it's possible to style background-color of active group header white CSS "active:tab color value". Is it also possible to style background-color of inactive tabs, similar to tabs in AE Webpart Tabs Webpart?



 
© 2024 AMREIN ENGINEERING AG
  RSS Feed   
Professional developed webparts for little money that are constantly being improved at no extra cost.

Michiel Booij, Stichting Accolade


This web part is available for:
SharePoint 2010
SharePoint 2013
SharePoint 2016
SharePoint 2019
SharePoint SE
SharePoint 2019 'modern'
SharePoint SE 'modern'
Office 365