Skip to content

Commit 9328f03

Browse files
lucabandMSFTVesaJuvonen
authored andcommitted
Update single-part-app-pages.md (SharePoint#5005)
1 parent 7dd36de commit 9328f03

File tree

1 file changed

+8
-53
lines changed

1 file changed

+8
-53
lines changed

docs/spfx/web-parts/single-part-app-pages.md

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ App pages have following characteristics:
1414

1515
* Single Part App Pages cannot be edited by end users using a browser
1616
* Currently supports hosting only single web part or Microsoft Teams application
17-
* Page layout can only be changed programatically from normal page layout to a Single Page App Page
18-
* End-users cannot parameterize exposed web part or Teams application
17+
* End users can create new app pages using the New--> Page experience available in modern sites.
18+
* Developers can change page layout programatically from normal page layout to a Single Page App Page
19+
* There's no New experience in a Single Page App Page. End users can create new Article pages or Single Page App pages by using the New/page experience present in the ribbon of any modern article pages.
1920

2021
<br/>
2122

@@ -59,58 +60,12 @@ Following web part manifest demonstrates scenario where the web part is included
5960
}
6061
```
6162

62-
## How to use the Single Part App page in your tenant?
63+
## How to provision Single Part App page in your tenant
64+
As a developer, the two most common way to provision Single Part App pages is o use PnP PowerShell or Office 365 ClI
6365

64-
You will need to perform following steps to enable Single Part App Page layout in your SharePoint site.
66+
### Changing page layout using PnP PowerShell
6567

66-
1. Create a new page
67-
1. Add a web part on the page and configure that as needed
68-
1. Change the page layout type as `SingleWebPartAppPage`
69-
70-
If you need to further modify the page, you can change the page layout back as as `Article` to enable content editing.
71-
72-
## Changing page layout using JavaScript in browser console
73-
74-
You can change existing page to use Single Page App Page layout by using browser developer tools. You can simply enable the developer tools and execute following code to change an existing page to use a `SingleWebPartAppPage` layout.
75-
76-
You will need to adjust tenant and page name based on your environment.
77-
78-
```js
79-
var siteUrl = 'https://contoso.sharepoint.com/sites/marketing/';
80-
var pageUrl = 'SitePages/page.aspx'
81-
82-
fetch(siteUrl + '_api/contextinfo', {
83-
method: 'POST',
84-
headers: {
85-
accept: 'application/json;odata=nometadata'
86-
}
87-
})
88-
.then(function (response) {
89-
return response.json();
90-
})
91-
.then(function (ctx) {
92-
return fetch(siteUrl + "_api/web/getfilebyurl('" + pageUrl + "')/ListItemAllFields", {
93-
method: 'POST',
94-
headers: {
95-
accept: 'application/json;odata=nometadata',
96-
'X-HTTP-Method': 'MERGE',
97-
'IF-MATCH': '*',
98-
'X-RequestDigest': ctx.FormDigestValue,
99-
'content-type': 'application/json;odata=nometadata',
100-
},
101-
body: JSON.stringify({
102-
PageLayoutType: "SingleWebPartAppPage"
103-
})
104-
})
105-
})
106-
.then(function(res) {
107-
console.log(res.ok ? 'DONE' : 'Error: ' + res.statusText);
108-
});
109-
```
110-
111-
## Changing page layout using PnP PowerShell
112-
113-
You can also use [PnP PowerShell](https://docs.microsoft.com/powershell/sharepoint/sharepoint-pnp/sharepoint-pnp-cmdlets?view=sharepoint-ps) to update the page layout for the existing page with following script.
68+
You can use [PnP PowerShell](https://docs.microsoft.com/powershell/sharepoint/sharepoint-pnp/sharepoint-pnp-cmdlets?view=sharepoint-ps) to update the page layout for the existing page with following script.
11469

11570
> [!NOTE]
11671
> PnP PowerShell is an open-source tool with active community providing support for it. There is no SLA for the open-source tool support from Microsoft.
@@ -125,7 +80,7 @@ $item2.Update()
12580
Invoke-PnPQuery
12681
```
12782

128-
## Changing page layout using Office 365 CLI
83+
### Changing page layout using Office 365 CLI
12984

13085
You can also use [Office 365 CLI](https://pnp.github.io/office365-cli/) to update the page layout for the existing page with following script.
13186

0 commit comments

Comments
 (0)