diff --git a/samples/react-slide-swiper/README.md b/samples/react-slide-swiper/README.md index 5d8575acd..0769b7a4e 100644 --- a/samples/react-slide-swiper/README.md +++ b/samples/react-slide-swiper/README.md @@ -58,6 +58,10 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew - How JavaScript library can be loaded by the help of requirejs in web part. - Mobile Touch capabilities +## SharePoint info + +When using the webpart in SharePoint, either in the SharePoint Workbench or deployed, the webpart reads by default from a List called "Swiper Content" with fields Title, ImageUrl, Description of type Single line of text. The list has to be created manually. + diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx index 0adca85e4..515882c6e 100644 --- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx +++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx @@ -8,11 +8,11 @@ export default class Card extends React.Component { return (
- + -

{this.props.listItem.title}

+

{this.props.listItem.Title}

-

{this.props.listItem.description}

+

{this.props.listItem.Description}

); diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts index be5a061bd..774b7cea0 100644 --- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts +++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts @@ -1,6 +1,6 @@ export class ListItem { - public title: string; - public description:string; - public imageUrl: string; + public Title: string; + public Description:string; + public ImageUrl: string; } \ No newline at end of file diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts index 0506adedb..7913617c7 100644 --- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts +++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts @@ -9,124 +9,124 @@ export class ListMock implements IListService { const fakeData: Array = [ { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' }, { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' }, { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' }, { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' }, { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' }, { - title: 'A convergent value empowers the standard-setters', - description: 'The General Head of IT Strategy benchmarks business-for-business agilities', - imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' + Title: 'A convergent value empowers the standard-setters', + Description: 'The General Head of IT Strategy benchmarks business-for-business agilities', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' }, { - title: 'The Digital Marketers empower a digitized correlation', - description: 'Whereas synchronized brand values promote strategy formulations', - imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' + Title: 'The Digital Marketers empower a digitized correlation', + Description: 'Whereas synchronized brand values promote strategy formulations', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' }, { - title: 'The market thinker strategically standardizes a competitive success', - description: 'The thinkers/planners benchmark a disciplined growth momentum', - imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' + Title: 'The market thinker strategically standardizes a competitive success', + Description: 'The thinkers/planners benchmark a disciplined growth momentum', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' }, { - title: 'We are going to secure our cross-pollinations', - description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', - imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' + Title: 'We are going to secure our cross-pollinations', + Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success', + ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png' } ];