diff --git a/samples/react-advanced-page-properties/README.md b/samples/react-advanced-page-properties/README.md index 64114117a..48714f1f8 100644 --- a/samples/react-advanced-page-properties/README.md +++ b/samples/react-advanced-page-properties/README.md @@ -11,11 +11,16 @@ Attempts to replicate the functionality of Page Properties with the following im - Support for currency - Improved support for dates -![see the difference](diff-screencap.png) +![see the difference](./assets/diff-screencap.png) -## Used SharePoint Framework Version -![version](https://img.shields.io/badge/version-1.11-green.svg) +## Compatibility + +![SPFx 1.11](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) +![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 Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") ## Applies to @@ -26,7 +31,7 @@ Attempts to replicate the functionality of Page Properties with the following im ## Prerequisites -> Any special pre-requisites? +None ## Solution @@ -62,7 +67,7 @@ Version|Date|Comments Once the solution is installed in the app catalog and the app has been added to the site, you should see it available to a page. -![add the part](add-to-page.png) +![add the part](./assets/add-to-page.png) > Familiarity is key @@ -70,5 +75,5 @@ This web part tries to mimic the original Page Properties web part as much as po Basically add and remove properties until you are satisfied and you're good to go! -![configure the part](props.gif) +![configure the part](./assets/props.gif) diff --git a/samples/react-advanced-page-properties/add-to-page.png b/samples/react-advanced-page-properties/assets/add-to-page.png similarity index 100% rename from samples/react-advanced-page-properties/add-to-page.png rename to samples/react-advanced-page-properties/assets/add-to-page.png diff --git a/samples/react-advanced-page-properties/diff-screencap.png b/samples/react-advanced-page-properties/assets/diff-screencap.png similarity index 100% rename from samples/react-advanced-page-properties/diff-screencap.png rename to samples/react-advanced-page-properties/assets/diff-screencap.png diff --git a/samples/react-advanced-page-properties/props.gif b/samples/react-advanced-page-properties/assets/props.gif similarity index 100% rename from samples/react-advanced-page-properties/props.gif rename to samples/react-advanced-page-properties/assets/props.gif diff --git a/samples/react-advanced-page-properties/assets/sample.json b/samples/react-advanced-page-properties/assets/sample.json new file mode 100644 index 000000000..07d5e10f0 --- /dev/null +++ b/samples/react-advanced-page-properties/assets/sample.json @@ -0,0 +1,75 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-advanced-page-properties", + "source": "pnp", + "title": "Advanced Page Properties", + "shortDescription": "Replicates the functionality of Page Properties with improvements", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-advanced-page-properties", + "longDescription": [ + "Attempts to replicate the functionality of Page Properties with the following improvements:", + "- Support for theme variants", + "- Updated to standard capsule look for list options", + "- Support for image fields", + "- Support for hyperlink fields", + "- Support for currency", + "- Improved support for dates" + ], + "created": "2021-03-30", + "modified": "2021-03-30", + "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/react-advanced-page-properties/assets/diff-screencap.png", + "alt": "Web part in action" + }, + { + "type": "image", + "order": 101, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-advanced-page-properties/assets/props.gif", + "alt": "Web part in action" + }, + { + "type": "image", + "order": 102, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-advanced-page-properties/assets/add-to-page.png", + "alt": "Adding to a page" + } + ], + "authors": [ + { + "gitHubAccount": "mhomol", + "company": "ThreeWill", + "pictureUrl": "https://github.com/mhomol.png", + "name": "Mike Homol", + "twitter": "homol" + } + ], + "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" + }, + { + "name": "Supporting section backgrounds", + "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", + "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" + } + ] + } +]