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

Fix react-slide-swiper not displaying any data when deployed to SharePoint

This commit is contained in:
Giacomo Pozzoni 2019-11-01 15:13:30 +01:00
parent b4e5538de2
commit 9edd934338
4 changed files with 82 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-slide-swiper/README.md
View File

@ -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. - How JavaScript library can be loaded by the help of requirejs in web part.
- Mobile Touch capabilities - 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.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-slide-swiper" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-slide-swiper" />

6
samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx
View File

@ -8,11 +8,11 @@ export default class Card extends React.Component<ICardProps, {}> {
return ( return (
<div className={styles.card}> <div className={styles.card}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<img src={this.props.listItem.imageUrl} className={styles.image} /> <img src={this.props.listItem.ImageUrl} className={styles.image} />
<a href="#" className={styles.url} > <a href="#" className={styles.url} >
<h3 className={styles.title}>{this.props.listItem.title}</h3> <h3 className={styles.title}>{this.props.listItem.Title}</h3>
</a> </a>
<p className={styles.description}>{this.props.listItem.description}</p> <p className={styles.description}>{this.props.listItem.Description}</p>
</div> </div>
</div> </div>
); );

6
samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts
View File

@ -1,6 +1,6 @@
export class ListItem { export class ListItem {
public title: string; public Title: string;
public description:string; public Description:string;
public imageUrl: string; public ImageUrl: string;
} }

144
samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts
View File

@ -9,124 +9,124 @@ export class ListMock implements IListService {
const fakeData: Array<ListItem> = [ const fakeData: Array<ListItem> = [
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
}, },
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
}, },
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
}, },
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
}, },
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
}, },
{ {
title: 'A convergent value empowers the standard-setters', Title: 'A convergent value empowers the standard-setters',
description: 'The General Head of IT Strategy benchmarks business-for-business agilities', Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
}, },
{ {
title: 'The Digital Marketers empower a digitized correlation', Title: 'The Digital Marketers empower a digitized correlation',
description: 'Whereas synchronized brand values promote strategy formulations', Description: 'Whereas synchronized brand values promote strategy formulations',
imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
}, },
{ {
title: 'The market thinker strategically standardizes a competitive success', Title: 'The market thinker strategically standardizes a competitive success',
description: 'The thinkers/planners benchmark a disciplined growth momentum', Description: 'The thinkers/planners benchmark a disciplined growth momentum',
imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png' ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
}, },
{ {
title: 'We are going to secure our cross-pollinations', 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', 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' ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
} }
]; ];