SharePoint Web Part - SPS Accordion for Document Library Web Part

SPS Accordion for Document Library Web Part

SPS Accordion for Document Library web part allows users to see the documents and its details in accordion format. Admin can select specific sites, any document library and view the list of documents which admin or site collection admin wants to show to the user in SPS Accordion for Document Library web part. Users can create a view in SharePoint document library & choose that view to filter down the list of documents. This web part showcases documents in form of accordion on your SharePoint pages.

We have created 6 different layouts to present events in the web part. We have 33 panel layouts which gives good appeal to the web part. This web part is very easy to use.

You can choose Category column to create Accordion and then choose 6 fields/ column to display on the item display card.

We have lots of features here i.e.

  • Selection of web part panel from 33 layouts
  • Selection of web part layout from 6 layouts
  • Setting height of web part.
  • Using default color theme to show layouts.
  • Use of Fluent UI Icons in the layouts.
  • Selection of fields / columns to show on item card.

SPS Accordion for Document Library Web Part is responsive & usage SharePoint theme for it's coloring.

Currently this web part is for SharePoint Online version only.

We have following web part property sections & properties: -

1. Web Part Settings

  • Web Part Title

    - Add / update web part title to show on web part.

  • Web Part Description

    - Add web part description here

  • Web Part Icon

    - Select web part Icon to show. The default web part icon is Diamond.

  • Default Icon for Data

    - Select default icon for each blank record. The selected icon will be displayed when icon is not present in the item or you have not selected icon field.

  • Select Image for layout #11 and #32

    - There are 2 web part layouts which has image settings. You can chose image for the background.

  • Height of web part

    - User can resize the height of the web part in pixcels. Default height is 440px.

2. Web Part Data Settings

  • Select Site

    - Select a site to get the list & other fields.

  • Select List

    - Select a list to show the items from.

  • Select View

    - Select a list view to show the filtered items.

  • Select field to show as category in the accordion title

    - Select a field which can be used as group by column. Right now user can choose Single line of text column, User Column (Single user), Choice type of column (Single choice), Lookup column (Single lookup).

  • Select Title field to show as title in the accordion

    - Select a field which will be used to show as title of the accordion. User can selecte single line of text and multiline of text column.

  • Select Description field to show as description in the web part

    - Select a field which will be used to show as description of the accordion. User can selecte single line of text and multiline of text column.

  • Select third field to show on card.

    - Select a field which will be used to show as third of the accordion. User can selecte Single line of text, Multiline of text, Lookup, User, Computed, Taxonomy Field Type Multi, Number, Taxonomy Field Type, Lookup Multi, Currency, Choice, Multi Choice, Boolean column.

  • Select forth field to show on card.

    - Select a field which will be used to show as forth of the accordion. User can selecte Single line of text, Multiline of text, Lookup, User, Computed, Taxonomy Field Type Multi, Number, Taxonomy Field Type, Lookup Multi, Currency, Choice, Multi Choice, Boolean column.

  • Select fifth field to show on card.

    - Select a field which will be used to show as fifth of the accordion. User can selecte Single line of text, Multiline of text, Lookup, User, Computed, Taxonomy Field Type Multi, Number, Taxonomy Field Type, Lookup Multi, Currency, Choice, Multi Choice, Boolean column.

  • Number of items to show

    - Select number of items to show on the webpart. Default value is 6 and minimum value is 100 and maxmium value is 500.

3. Web Part Panel Layout

  • Select panel layout

    - You can select web part panel from 1 to 33. You can click here to check.

4. Web Part Layout

  • Select layout number

    - With this option, the user can select any layout from 1 to 6.

5. App Version Information

  • Here we are showing information about the app version , solution version, manifest version, Help & Support email.

6. License

  • In this section, we are showing information about licenses.

How to use

Here we are showing how to use the web part

DOWNLOAD PACKAGE FILE

Supported Hosts :

  • SharePoint
  • SharePoint Full Page
  • Teams Tab

Installation of App :-

  1. Click here to download the sppkg file.
  2. Visit the Microsoft 365 SharePoint Admin Center
  3. Go to Apps -> App Catalog. If you don't have app catalog, here are the instructions for creating one.

    If you have Site Collection level App Catalog, just to to Apps for SharePoint from your site collection.
  4. Click 'Upload' and select sps-quick-links.sppkg file to upload.




  5. Check the box for Make this solution available to all sites in the organization and click the Deploy button.


  6. A successful installation will look like this:


  7. if you receive an App Package Error Message stating, "Deployment failed," as shown here, simply delete the .sppkg file and repeat steps 4 and 5 to redeploy.
  8. Now go to the site where you want this tool. Just create a new page or edit existing page and add a webpart 'SPS Accordion for Document Library Web Part'.








  9. The SPS Accordion for Document Library webpart can be setup with Edit Web Part properties :



  1. Showing view what you have selected #1

  2. Showing view what you have selected #2

  3. Showing view what you have selected #3

  4. Showing view what you have selected #4

  5. Showing view what you have selected #5

  6. Showing view what you have selected #6

Contact

Contact With Me

Gaurav Goyal

Chief Operating Officer

I am available for any help. Connect with me via and call in to my account.

Phone: +91-982-621-1734 Email: gauravgoyal_5@yahoo.com