Microsoft Sharepoint Web Parts

Tabs & Accordion List SharePoint Web Part

Accordion Layout Tabs Layout FAQ Example FAQ 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 'Modern' version » Product Price Tabs & Accordion List Web Part for Sharepoint 2010 30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2013  30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2016  30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2019  30 day Evaluation Version Free Tabs & Accordion List Web Part License Key per Server License USD 190.00 Deployment  Instructions for SP 2010 Deployment  Instructions for SP 2013/2016/2019 You can also send us a PO via e-mail to info@amrein.com

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 support@amrein.com 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 “groupttemplate” 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