honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-accordion
History
VesaJuvonen 22318b95a3 Adding missing telemetry images for readme files 2019-04-15 12:49:10 +03:00
..
assets SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
config SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
src/webparts/reactAccordion SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
.editorconfig SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
.gitignore SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
.yo-rc.json SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
README.md Adding missing telemetry images for readme files 2019-04-15 12:49:10 +03:00
gulpfile.js SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
package.json SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
tsconfig.json SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00
tslint.json SPFx React Accordion sample (#599) 2018-09-10 13:06:51 +03:00

README.md

Using React Accordion plugin with SPFx

Summary

This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format.

Sample Web Part built using SPFx with React Framework showing list data in accordion format

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
react-accordion Gautam Sheth (SharePoint Consultant, RapidCircle)

Version history

Version Date Comments
1.0 August 17, 2018 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • clone this repo

  • in the command line run:

    • npm i
    • gulp serve --nobrowser

  • in your SharePoint Site create a custom list named FAQ

  • in the FAQ list, create a column Description(internal name) of type Enhanced rich text

  • add some list items with Title and Description values

  • navigate to the hosted version of SharePoint workbench, eg. https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx

  • add the Web Part to canvas and in its configuration specify:

  • name of the list where list items are stored, eg. FAQ

Features

This project contains sample client-side web part built on the SharePoint Framework illustrating how to show list data in Accordion format using React framework.

This sample illustrates the following concepts on top of the SharePoint Framework:

  • general
    • performing SharePoint GET operation in React using inbuilt SP Http Client
    • Using Fabric UI button component for pagination
    • optimizing REST responses for performance using nometadata option of JSON light
    • using PnP Webpart title control of @pnp/spfx-controls-react library
    • showing SharePoint list data in Accordion format using React Accessible Accordion plugin
    • searching in the fetched data by making use of Search Box from Office Fabric UI