sp-dev-fx-webparts/samples/react-timeline
Nanddeep Nachan 7727eafd28 Support for localization 2020-07-10 14:19:07 +00:00
..
assets Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
config Support for localization 2020-07-10 14:19:07 +00:00
sharepoint/assets Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
src Support for localization 2020-07-10 14:19:07 +00:00
teams Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
.editorconfig Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
.gitignore Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
.yo-rc.json Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
README.md Support for localization 2020-07-10 14:19:07 +00:00
gulpfile.js Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
package-lock.json Support for localization 2020-07-10 14:19:07 +00:00
package.json Support for localization 2020-07-10 14:19:07 +00:00
tsconfig.json Added sample "react-timeline" 2020-07-08 07:13:15 +00:00
tslint.json Added sample "react-timeline" 2020-07-08 07:13:15 +00:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
React
07/08/2020 12:00:00 AM

Timeline

Summary

This sample displays list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates paralleling it, and coexisting events. This web part helps to draw the timeline based from SharePoint list with pre-defined schema.

Web part preview

When added to SharePoint site, the source list containing timeline information, layout, date format, and sort direction can be configured from web part properties.

SharePoint list schema

Users with "Manage Web" permissions will be able to add, edit, and delete events from web part.

Event CRUD

Layouts

The sample helps to represent the timeline in 2 layouts:

Vertical layout

Represents the events vertically one below other.

Vertical layout

Horizontal layout

Represents the events horizontally one after other.

Horizontal layout

SharePoint Asset

A SharePoint list (named "Timeline") is provisioned to store the timeline information, along with supported site columns and content type. The schema of the list is as below. List Schema

  • The "Title" column stores the event title.
  • The "Event Date" column represents the date of event.
  • The "Picture" column stores the url of image to be displayed for the event.
  • The "Link" column represents the url to event.
  • The "Description" column represents the more information about the event.

The sample also provisions sample data to the "Timeline" list, which can be used as an example to start using the web part. List Sample Data

NPM Packages Used

Below NPM package is used to develop this sample.

  1. @pnp/sp (https://www.npmjs.com/package/@pnp/sp)
  2. @pnp/spfx-controls-react (https://pnp.github.io/sp-dev-fx-controls-react/)
  3. @pnp/spfx-property-controls (https://pnp.github.io/sp-dev-fx-property-controls/)

Used SharePoint Framework Version

1.10.0

Applies to

Solution

Solution Author(s)
react-timeline Nanddeep Nachan (SharePoint Consultant, @NanddeepNachan )
  Ravi Kulkarni (SharePoint Consultant)

Version history

Version Date Comments
1.0.0 July 08, 2020 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.


Prerequisites

  • SharePoint Online tenant
  • Site Collection created under the /sites/ or /

Minimal Path to Awesome

Features

This sample web part displays list of events in chronological order with data stored in a SharePoint list.

  • SharePoint assets provisioning
  • Creating extensible services
  • Using @pnp/sp