diff --git a/samples/react-doccard-faq/README.md b/samples/react-doccard-faq/README.md index d13f6fcad..00620e266 100644 --- a/samples/react-doccard-faq/README.md +++ b/samples/react-doccard-faq/README.md @@ -1,43 +1,43 @@ -# Title of the sample +# FAQ Document Card React FAQ Document Card Web Part - ## Summary For detailed instructions on how to build this web part and the needed list please watch: https://www.youtube.com/watch?v=oIr-rgGvUUk - ![picture of the web part in action](assets/FAQdocCardPreview.gif) ![picture of the web part in action](assets/reactdoccardfaq.png) + ## Compatibility -![SPFx 1.10](https://img.shields.io/badge/SPFx-1.11.0-green.svg) -![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) +![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) +![Node.js LTS 8.x | LTS 10.x](https://img.shields.io/badge/Node.js-LTS%208.x%20%7C%20LTS%210.x-green.svg) ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") -![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg) +![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") ## Applies to * [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) ## Prerequisites -1. Build a SharePoint Online list named "FAQ" -2. Rename Title column to "Question" -3. Add 3 additional columns - - Multiple lines of text column, toggle 'use rich text' to yes, name "Answer" - - Choice column, Options "Work", "Personal", and "Hobby", name "Category" - - Yes/no column, set default to No, name "Featured" -4. Add items to your list making sure to set some to 'yes' in the featured column +1. Build a SharePoint Online list named **FAQ** +2. Rename **Title** column to **Question** +3. Add 3 additional columns: + + - **Multiple lines of text** column, toggle **Use rich text** to yes, name **Answer** + - **Choice** column, Options `Work`, `Personal`, and `Hobby`, name **Category** + - **Yes/No** column, set default to `No`, name **Featured** +4. Add items to your list making sure to set some to `yes` in the **Featured** column 5. Navigate to your sites workbench (https://.sharepoint.com/sites//_layouts/15/workbench.aspx) ## Solution Solution|Author(s) --------|--------- -react-doccard-faq | Sam Collins ([@samc148](https://twitter.com/samc148)) +react-doccard-faq | [Sam Collins](https://github.com/SamC148) ([@samc148](https://twitter.com/samc148)) ## Version history @@ -73,4 +73,4 @@ RichText, Accessible Accordion from @pnp/spfx-controls-react - \ No newline at end of file + diff --git a/samples/react-doccard-faq/assets/sample.json b/samples/react-doccard-faq/assets/sample.json new file mode 100644 index 000000000..1f18be80a --- /dev/null +++ b/samples/react-doccard-faq/assets/sample.json @@ -0,0 +1,57 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-doccard-faq", + "source": "pnp", + "title": "Document Card FAQ", + "shortDescription": "React FAQ Document Card Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-doccard-faq", + "longDescription": [ + "Document Card FAQ" + ], + "created": "2021-04-05", + "modified": "2021-04-05", + "products": [ + "SharePoint", + "Office" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.10.0" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-doccard-faq/assets/FAQdocCardPreview.gif", + "alt": "Web part in action" + }, + { + "type": "image", + "order": 101, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-doccard-faq/assets/reactdoccardfaq.png", + "alt": "Web part in action" + } + ], + "authors": [ + { + "gitHubAccount": "SamC148", + "pictureUrl": "https://github.com/SamC148.png", + "name": "Sam Collins", + "twitter": "samc148" + } + ], + "references": [ + { + "name": "Build your first SharePoint client-side web part", + "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", + "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +] diff --git a/samples/react-doccard-faq/package-lock.json b/samples/react-doccard-faq/package-lock.json index e419f608d..19b00de1b 100644 --- a/samples/react-doccard-faq/package-lock.json +++ b/samples/react-doccard-faq/package-lock.json @@ -15233,7 +15233,8 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", - "dev": true + "dev": true, + "optional": true }, "pidof": { "version": "1.0.2", diff --git a/samples/react-doccard-faq/src/webparts/reactDocCardFaq/ReactDocCardFaqWebPart.ts b/samples/react-doccard-faq/src/webparts/reactDocCardFaq/ReactDocCardFaqWebPart.ts index 939a1c018..e19ab3914 100644 --- a/samples/react-doccard-faq/src/webparts/reactDocCardFaq/ReactDocCardFaqWebPart.ts +++ b/samples/react-doccard-faq/src/webparts/reactDocCardFaq/ReactDocCardFaqWebPart.ts @@ -11,7 +11,7 @@ import * as strings from 'ReactDocCardFaqWebPartStrings'; import ReactDocCardFaq from './components/ReactDocCardFaq'; import { IReactDocCardFaqProps } from './components/IReactDocCardFaqProps'; -import { IFAQList } from '../reactDocCardFaq/_helpers/listModel'; +import { IFAQList } from '../reactDocCardFaq/_helpers/listModel'; import { listService } from '../reactDocCardFaq/_helpers/listService'; import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect'; @@ -22,7 +22,7 @@ export interface IReactDocCardFaqWebPartProps { } export default class ReactDocCardFaqWebPart extends BaseClientSideWebPart { - private _listService: listService + private _listService: listService; private categories: IPropertyPaneDropdownOption[] = []; protected onInit(): Promise { diff --git a/samples/sample-metadatatemplate.json b/samples/sample-metadatatemplate.json new file mode 100644 index 000000000..2818fe7d4 --- /dev/null +++ b/samples/sample-metadatatemplate.json @@ -0,0 +1,51 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-TODO", + "source": "pnp", + "title": "TODO", + "shortDescription": "TODO", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/TODO", + "longDescription": [ + "TODO" + ], + "created": "2021-04-02", + "modified": "2021-04-02", + "products": [ + "SharePoint", + "Office" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.11.0" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/TODO", + "alt": "TODO" + } + ], + "authors": [ + { + "gitHubAccount": "TODO", + "pictureUrl": "https://github.com/TODO.png", + "name": "TODO", + "twitter": "TODO" + } + ], + "references": [ + { + "name": "Build your first SharePoint client-side web part", + "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", + "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +]