Updated readme and sample json
This commit is contained in:
Hugo Bernier
parent
fafd4caf21
commit
afa51e8701
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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://<tenant>.sharepoint.com/sites/<your site>/_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
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-doccard-faq" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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<IReactDocCardFaqWebPartProps> {
|
||||
private _listService: listService
|
||||
private _listService: listService;
|
||||
private categories: IPropertyPaneDropdownOption[] = [];
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue