diff --git a/samples/hero-webpart/README.md b/samples/hero-webpart/README.md index a35e9e7b0..089f0a1cc 100644 --- a/samples/hero-webpart/README.md +++ b/samples/hero-webpart/README.md @@ -2,12 +2,10 @@ ## Summary -This solution creates a customisable Hero style webpart that allows any number of images to be added, it will by default display just 5 but you can enable pagination which will allow all items to be loaded in a paged view. It uses a stored collection from the PnP PropertyFieldCollectionData control to store the images, Title, Description and URL fields. - -You can customise this in a number of ways but it hopefully gives a baseline for re-creating some of the functionality of the OOB Hero Webpart. - -![Hero](https://github.com/omarelanis/sp-dev-fx-webparts/blob/master/samples/hero-webpart/Sample/Hero-Webpart.gif) +This solution creates a customisable Hero Webpart, it uses a stored collection from the PnP PropertyFieldCollectionData control +[https://github.com/omarelanis/sp-dev-fx-webparts/blob/master/samples/hero-webpart/Sample/Hero-Webpart.gif] + ## Used SharePoint Framework Version ![version](https://img.shields.io/npm/v/@microsoft/sp-component-base/latest?color=green) @@ -69,4 +67,4 @@ This extension illustrates the following concepts: - [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview) - [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis) - [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview) -- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development +- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development \ No newline at end of file diff --git a/samples/hero-webpart/config/package-solution.json b/samples/hero-webpart/config/package-solution.json index 2d0892b8f..15f4a7ee5 100644 --- a/samples/hero-webpart/config/package-solution.json +++ b/samples/hero-webpart/config/package-solution.json @@ -1,7 +1,7 @@ { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { - "name": "hero-webpart-client-side-solution", + "name": "Hero Layout Webpart", "id": "5efc0426-3e59-4fc7-b638-73eb77aaf788", "version": "1.0.0.0", "includeClientSideAssets": true, diff --git a/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.manifest.json b/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.manifest.json index bd55464f7..92a471386 100644 --- a/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.manifest.json +++ b/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.manifest.json @@ -17,11 +17,15 @@ "preconfiguredEntries": [{ "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "group": { "default": "Other" }, - "title": { "default": "Hero Webpart" }, + "title": { "default": "Hero Layout Webpart" }, "description": { "default": "Provides a customisable Hero webpart that displays 5 images in a standlone or carousel view" }, "officeFabricIconFontName": "Page", "properties": { - "description": "Hero Webpart" + "description": "Hero Layout Webpart", + "isPaginated":false, + "hideFirstPageJump":false, + "hideLastPageJump":false, + "showAllHero":false } }] } diff --git a/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.ts b/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.ts index 336671851..0b3993b64 100644 --- a/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.ts +++ b/samples/hero-webpart/src/webparts/heroWebpart/HeroWebpartWebPart.ts @@ -43,7 +43,7 @@ export default class HeroWebpartWebPart extends BaseClientSideWebPart { private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => { return 1; } - + private _onRenderHeroItem = (items: any, index: number | undefined): JSX.Element => { const thumbRend = "https://media.akamai.odsp.cdn.office.net/uksouth1-mediap.svc.ms/transform/thumbnail?provider=url&inputFormat=jpg&docid="; const secondItems = items.slice(1,5); @@ -45,7 +45,7 @@ export default class Hero extends React.Component {
- +
{firstItem.Title}
{firstItem.Description ? firstItem.Description.length>150 ? firstItem.Description.substring(0, 150)+".." : firstItem.Description : "Description coming soon"}
@@ -56,7 +56,7 @@ export default class Hero extends React.Component { smalltemUrl= item.filePicker[0].Hyperlink ? item.filePicker[0].Hyperlink : "#",
- +
{item.Title}
{item.Description ? item.Description.length>150 ? item.Description.substring(0, 150)+".." : item.Description : "Description coming soon"}
diff --git a/samples/hero-webpart/src/webparts/heroWebpart/components/HeroWebpart.tsx b/samples/hero-webpart/src/webparts/heroWebpart/components/HeroWebpart.tsx index b9376580a..2cbac12de 100644 --- a/samples/hero-webpart/src/webparts/heroWebpart/components/HeroWebpart.tsx +++ b/samples/hero-webpart/src/webparts/heroWebpart/components/HeroWebpart.tsx @@ -36,61 +36,46 @@ export default class HeroWebpart extends React.Component0?this.props.items.slice(0,5):[], currentPage: 1, - totalPages: Math.ceil(this.props.items.length / 5), - pageLimit: 5 + totalPages: this.props.items.length>0?Math.ceil(this.props.items.length / 5):1, + pageLimit: this.props.pageLimit }; this._getItems(); - // Delete any expired cache items - // storage.local.deleteExpired(); - // // Get items from cache if they exist - // const items = storage.local.get("c70a33331a1e4172bd87d46ee92af341"); - // if (items===null || undefined===items[0]){ - // this._getItems(); - // }else{ - // this.setState({items: items,itemsPaginated:items.slice(0,5),totalPages:Math.ceil(items.length / 5)}); - // } - } private _getItems(){ - this.setState({itemsPaginated:this.state.items.slice(0,5),totalPages:Math.ceil(this.state.items.length / 5)}); - + let empty=[]; + if(this.state.items.length>0){ + this.setState({itemsPaginated:this.state.items.slice(0,5)}),this.setState({totalPages:Math.ceil(this.state.items.length / 5)}); + }else{ + empty=this.emptyHeroItem();this.setState({items:empty}),this.setState({itemsPaginated:empty}); + } } private _getPage(page: number){ this.setState({currentPage: page}); var itemsSlice:any[], totalPages:number; itemsSlice = this.state.items.slice((page - 1) * this.state.pageLimit, ((page - 1) * this.state.pageLimit) + this.state.pageLimit); - itemsSlice.length==0 ? this.setState({itemsPaginated: this.emptyCourse()}) : this.setState({itemsPaginated: itemsSlice},this.render); + itemsSlice.length==0 ? this.setState({itemsPaginated: this.emptyHeroItem()}) : this.setState({itemsPaginated: itemsSlice},this.render); } - private emptyCourse(){ + private emptyHeroItem(){ var b=[]; for (let i = 0; i < this.state.pageLimit; i++) { b.push({ - id:"", - thumbnail: require('../assets/blankEntry.jpg'), - title: "Coming soon!", - name: "", - profileImageSrc: "", - courseCode: "", - activity: "", + Title: "Coming soon!", description: "We don't have anything here yet, we're always open to suggestions!", - enrollment: "", - SPurl: "" + Hyperlink:"", + filePicker:[{fileAbsoluteUrl:require('../assets/blankEntry154873.jpg'),fileName:'blankEntry154873.jpg',fileNameWithoutExtension:'blankEntry154873'}] }); } return b; } public render(): React.ReactElement { - // if(this.state.items!=this.props.items){ - // this.setState({items :this.props.items}); - // } - if(this.state.items.length<1){ - //this._getItems(); + if(this.state.items.length<=0){ + this._getItems(); return(