Skip to content

Commit 03571c6

Browse files
hugoabernierhugoabernier
authored
Merge pull request #1507 from ahmad-jad-alhak/main
2 parents d3cc26f + 7c0e01b commit 03571c6

37 files changed

+38997
-0
lines changed

‎samples/react-application-copy-page/README.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# Copy Page SPFx Application Customizer
2+
3+
## Summary
4+
5+
This SPFx Application Customizer empowers content authors to **copy modern site pages** across sites with full control over:
6+
7+
- **Publishing State**: Choose between `Published` or `Draft`.
8+
- **Promotion as News Post**: Optionally promote the page as a news post.
9+
- **Local Page Templates**: Save the page as a local template for reuse.
10+
11+
![Copy Page UI](assets/preview-01.png)
12+
![Copy Page UI](assets/preview-02.png)
13+
![Copy Page UI](assets/preview-03.png)
14+
![Copy Page UI](assets/preview-04.png)
15+
16+
17+
## Features
18+
19+
- Copy modern site pages across SharePoint sites.
20+
- Control publishing state (`Published` or `Draft`).
21+
- Promote pages as news posts.
22+
- Save pages as local templates in the target site.
23+
- Fully integrated with SharePoint Framework (SPFx).
24+
25+
## Used SharePoint Framework Version
26+
27+
![version](https://img.shields.io/badge/version-1.21.1-green.svg)
28+
29+
## Applies to
30+
31+
- [SharePoint Framework](https://aka.ms/spfx)
32+
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
33+
34+
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
35+
36+
## Prerequisites
37+
38+
- The source and destination sites must use modern pages and have the **Site Pages** library.
39+
- User must have contribute permissions on the destination site.
40+
41+
## Contributors
42+
43+
- [Ahmad Jad Alhak](https://github.com/ahmad-jad-alhak)
44+
45+
## Version history
46+
47+
| Version | Date | Comments |
48+
|---------|----------------|----------------------------|
49+
| 1.0 | Initial release| Basic copy page and template |
50+
51+
## Disclaimer
52+
53+
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED.**
54+
55+
---
56+
57+
## Minimal Path to Awesome
58+
59+
```bash
60+
git clone https://github.com/ahmad-jad-alhak/React-Application-Copy-Page.git
61+
cd react-application-copy-page
62+
npm install
63+
gulp serve
64+
```
65+
66+
---
67+
68+
## Deployment Instructions
69+
70+
To deploy this SPFx Application Customizer, follow these steps:
71+
72+
1. **Build the solution**:
73+
```bash
74+
gulp build
75+
gulp bundle --ship
76+
gulp package-solution --ship
77+
```
78+
79+
2. **Upload the package**:
80+
- Navigate to your SharePoint tenant's App Catalog.
81+
- Upload the `.sppkg` file generated in the `sharepoint/solution` folder.
82+
83+
3. **Deploy the package**:
84+
- Select the uploaded package in the App Catalog.
85+
- Click **Deploy** to make the solution available across your tenant.
86+
87+
4. **Enable the extension**:
88+
- Add the Application Customizer to your site using the following PowerShell command or manually via site settings:
89+
```powershell
90+
Set-PnPWeb -WebPart -ClientSideComponentId <ComponentId>
91+
```
92+
93+
5. **Verify functionality**:
94+
- Navigate to a modern page in your site.
95+
- Ensure the copy page functionality is available and working as expected.
96+
### Deployment via UI
97+
98+
To deploy this SPFx Application Customizer using the SharePoint UI:
99+
100+
1. **Upload the package**:
101+
- Navigate to your SharePoint tenant's App Catalog.
102+
- Upload the `.sppkg` file generated in the `sharepoint/solution` folder.
103+
104+
2. **Deploy the package**:
105+
- Select the uploaded package in the App Catalog.
106+
- Click **Deploy** to make the solution available across your tenant.
107+
108+
3. **Enable the extension**:
109+
- Navigate to the site where you want to enable the extension.
110+
- Click the **Settings wheel** in the top-right corner of the site.
111+
- Select **Add an app**.
112+
- Locate the Application Customizer in the list of available apps and add it to your site.
113+
114+
4. **Verify functionality**:
115+
- Navigate to a modern page in your site.
116+
- Ensure the copy page functionality is available and working as expected.
117+
118+
119+
## Features
120+
121+
122+
This SPFx Application Customizer demonstrates:
123+
124+
- Copying client-side pages across site collections
125+
- Toggling **Publish Page**: determines whether the page is immediately published or saved as draft
126+
- Toggling **Promote as news post**: marks the page for news rollups (uses `PromotedState`)
127+
- Support for all 4 SharePoint page promotion states:
128+
- Draft (not promoted)
129+
- Draft news (`PromotedState = 1`)
130+
- Published page
131+
- Published news (`PromotedState = 2`)
132+
- Optionally saving a page as a **local template**
133+
-
134+
- ### Explanation
135+
136+
- **NotPromoted (`0`)**: Default state for pages. The page remains unpromoted.
137+
- **PromoteOnPublish (`1`)**: The page is marked for promotion but will only be promoted when published.
138+
- **Promoted (`2`)**: The page is already promoted and treated as a news post.
139+
140+
## Feedback and Contributions
141+
142+
We welcome feedback and contributions! Feel free to submit issues or pull requests to improve this solution.
143+
144+
145+
## References
146+
147+
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
148+
- [SharePoint client-side pages API](https://pnp.github.io/pnpjs/sp/clientside-pages/)
149+
- [PnPjs Documentation](https://pnp.github.io/pnpjs/)
150+
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp)
151+
152+
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-copy-page" />

‎samples/react-application-copy-page/assets/preview-01.png‎

517 KB
Loading

‎samples/react-application-copy-page/assets/preview-02.png‎

132 KB
Loading

‎samples/react-application-copy-page/assets/preview-03.png‎

68.8 KB
Loading

‎samples/react-application-copy-page/assets/preview-04.png‎

68.4 KB
Loading

‎samples/react-application-copy-page/assets/sample.json‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
[
2+
{
3+
"name": "pnp-sp-dev-spfx-extensions-react-YOUR-SOLUTION-NAME-GOES-HERE",
4+
"source": "pnp",
5+
"title": "Copy Page SPFx Application Customizer",
6+
"shortDescription": "This SPFx Application Customizer empowers content authors to copy modern site pages across sites with full control over:",
7+
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/YOUR-SOLUTION-NAME-GOES-HERE",
8+
"longDescription": [
9+
"This SPFx Application Customizer empowers content authors to copy modern site pages across sites with full control over:"
10+
],
11+
"creationDateTime": "2023-12-25",
12+
"updateDateTime": "2023-12-31",
13+
"products": [
14+
"SharePoint"
15+
],
16+
"metadata": [
17+
{
18+
"key": "CLIENT-SIDE-DEV",
19+
"value": "React"
20+
},
21+
{
22+
"key": "SPFX-VERSION",
23+
"value": "1.21.1"
24+
}
25+
],
26+
"tags": [],
27+
"categories": [
28+
"SPFX-APPLICATION-EXTENSION"
29+
],
30+
"thumbnails": [
31+
{
32+
"name": "preview-01.png",
33+
"type": "image",
34+
"order": 100,
35+
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-application-copy-page/assets/preview-01.png",
36+
"alt": "Web Part Preview"
37+
},
38+
{
39+
"name": "preview-02.png",
40+
"type": "image",
41+
"order": 101,
42+
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-application-copy-page/assets/preview-02.png",
43+
"alt": "Web Part Preview"
44+
},
45+
{
46+
"name": "preview-03.png",
47+
"type": "image",
48+
"order": 102,
49+
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-application-copy-page/assets/preview-03.png",
50+
"alt": "Web Part Preview"
51+
},
52+
{
53+
"name": "preview-04.png",
54+
"type": "image",
55+
"order": 103,
56+
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-application-copy-page/assets/preview-04.png",
57+
"alt": "Web Part Preview"
58+
}
59+
],
60+
"authors": [
61+
{
62+
"gitHubAccount": "https://github.com/ahmad-jad-alhak",
63+
"pictureUrl": "https://github.com/ahmad-jad-alhak.png",
64+
"name": "Ahmad Jad Alhak"
65+
}
66+
],
67+
"references": [
68+
{
69+
"name": "Overview of SharePoint Framework Extensions",
70+
"description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
71+
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
72+
},
73+
{
74+
"name": "Use page placeholders from Application Customizer",
75+
"description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
76+
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
77+
}
78+
]
79+
}
80+
]

‎samples/react-application-copy-page/config/config.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"copy-page-application-customizer": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/extensions/copyPage/CopyPageApplicationCustomizer.js",
9+
"manifest": "./src/extensions/copyPage/CopyPageApplicationCustomizer.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"CopyPageApplicationCustomizerStrings": "lib/extensions/copyPage/loc/{locale}.js",
17+
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
18+
}
19+
}

‎samples/react-application-copy-page/config/deploy-azure-storage.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "react-application-copy-page",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎samples/react-application-copy-page/config/package-solution.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "react-application-copy-page-client-side-solution",
5+
"id": "7e4d57ab-668c-4031-8d70-36ea94799f57",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.21.1"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "react-application-copy-page description"
20+
},
21+
"longDescription": {
22+
"default": "react-application-copy-page description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "Application Extension - Deployment of custom action",
31+
"description": "Deploys a custom action with ClientSideComponentId association",
32+
"id": "53306dba-984f-41e7-8057-9026ab800f17",
33+
"version": "1.0.0.0",
34+
"assets": {
35+
"elementManifests": [
36+
"elements.xml",
37+
"ClientSideInstance.xml"
38+
]
39+
}
40+
}
41+
]
42+
},
43+
"paths": {
44+
"zippedPackage": "solution/react-application-copy-page.sppkg"
45+
}
46+
}

‎samples/react-application-copy-page/config/sass.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
3+
}

0 commit comments

Comments
 (0)