Microsoft Sharepoint Web Parts
Tabs & Accordion List SharePoint Web Part
|
 Accordion Layout  Tabs Layout  FAQ Example  FAQ  |
- download the Web Part Installation Instructions (PDF file, see above)
- either install the web part manually or deploy the feature to your server/farm as described in the instructions.
- 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 |
|
© 2021 AMREIN ENGINEERING AG
Great product! Easy install, just what we needed to get some quick wins!
