Web Parts, Web Part Pages & Wiki Pages — User Guide¶

This guide covers managing web parts, web part pages, and wiki pages in Cesivi. It includes step-by-step walkthroughs for common tasks and an API compatibility reference for developers using REST, CSOM, PnP, and SOAP.

Table of Contents¶

Overview
Web Part Types
Adding a Web Part to a Page
Editing Web Part Properties
Minimizing, Restoring, and Deleting Web Parts
Web Part Connections
Web Part Pages
Wiki Pages
Embedding Web Parts in Wiki Pages
Sub-Web (Sub-Site) Scoping
API Reference
Troubleshooting

1. Overview¶

Web parts are reusable UI components that can be placed on pages inside configurable zones. Cesivi supports the full classic SharePoint web part model:

Web Part Pages — dedicated pages composed entirely of web part zones (.aspx pages with one or more named zones like Top, Left, Right, Bottom, Main).
Wiki Pages — free-form rich-text pages (stored in SitePages) that can also host web parts in a side-by-side layout zone.

Web parts are stored per-page, per-web. A root-web page and a sub-web page with the same name hold independent sets of web parts.

2. Web Part Types¶

The following built-in web part types are available in Cesivi:

Type name	Description
`ContentEditorWebPart`	Embed rich HTML or text
`ScriptEditorWebPart`	Embed JavaScript/HTML snippet
`ListViewWebPart`	Render a list or library view
`ImageWebPart`	Display an image from a URL or document library
`PageViewerWebPart`	Display an external page via `<iframe>`
`SearchBoxWebPart`	Search input linked to the site search
`SearchResultsWebPart`	Render search results
`SiteFeedWebPart`	Activity feed for the site
`UserTasksWebPart`	Tasks assigned to the current user
`RelevantDocumentsWebPart`	Documents recently modified by the user
`SiteUsersWebPart`	Members of the current site
`XsltListViewWebPart`	SharePoint XsltListView rendering
`XmlWebPart`	Transform XML with XSL

Additional web parts may be registered via solution packages (.csp files). See SOLUTION-PACKAGES.md for details.

3. Adding a Web Part to a Page¶

Via the UI (edit mode)¶

Navigate to any web part page or wiki page (e.g. /SitePages/Home.aspx).
Click Edit in the ribbon (or the edit icon in the top-right corner). The page enters edit mode — zone borders become visible.
Click the Add a Web Part link inside the target zone. The Web Part Gallery panel opens.
Select a category (e.g. Lists and Libraries, Media and Content).
Choose a web part from the list and click Add.

The page reloads with the new web part rendered inside the chosen zone.

Via the REST API¶

POST /_api/webpartops?handler=AddWebPart
Content-Type: application/json

{
  "pageUrl": "/SitePages/Home.aspx",
  "webUrl": "/",
  "zoneId": "Main",
  "webPartType": "ContentEditorWebPart",
  "title": "My Content",
  "zoneIndex": 0
}

On success returns 200 OK with the new web part definition JSON.

Via CSOM¶

using var ctx = new ClientContext("http://cesivi-host/");
ctx.Credentials = new NetworkCredential("admin", "admin");

var file = ctx.Web.GetFileByServerRelativeUrl("/SitePages/Home.aspx");
var manager = file.GetLimitedWebPartManager(PersonalizationScope.Shared);
ctx.Load(manager.WebParts);
ctx.ExecuteQuery();
// manager.WebParts is now populated

To add a web part programmatically via CSOM, create an WebPartDefinition from XML and call manager.ImportWebPart(...) then manager.AddWebPart(...).

4. Editing Web Part Properties¶

Enter edit mode on the page.
Open the web part's context menu (click the chevron ▾ in the web part title bar).
Choose Edit Web Part.
The properties panel opens — modify Title, Chrome Type, Height, Width, and any type-specific settings (e.g. HTML content for ContentEditorWebPart).
Click OK or Apply to save changes.

Via the REST API¶

POST /_api/webpartops?handler=UpdateWebPart
Content-Type: application/json

{
  "pageUrl": "/SitePages/Home.aspx",
  "webUrl": "/",
  "instanceId": "<guid>",
  "title": "Updated Title",
  "chromeType": "Default"
}

5. Minimizing, Restoring, and Deleting Web Parts¶

Minimize / Restore¶

In edit mode, click Minimize in the web part context menu to collapse the web part. Click Restore to expand it again.
A minimized web part still occupies its zone slot but renders only the title bar.

Delete a Web Part¶

Enter edit mode.
Open the web part context menu and click Delete.
Confirm the deletion in the dialog.

The web part is removed from the zone. This action is not reversible via the UI (use version history or re-add the web part).

Via the REST API¶

POST /_api/webpartops?handler=DeleteWebPart
Content-Type: application/json

{
  "pageUrl": "/SitePages/Home.aspx",
  "webUrl": "/",
  "instanceId": "<guid>"
}

6. Web Part Connections¶

Web parts can be connected so that one web part filters or populates another. For example, a ListViewWebPart showing projects can provide row data to a ListViewWebPart showing tasks for the selected project.

Configuring a Connection¶

Enter edit mode on the page.
Open the context menu of the provider web part (the one that sends data).
Choose Connections → Send Row of Data To → and pick the consumer web part.
The Connection Wizard opens — map the provider field to the consumer filter field.
Click Finish.

Removing a Connection¶

Enter edit mode.
Open the provider's context menu → Connections → Remove Connection.

Via the REST API¶

# List connection points for a web part
GET /_api/webpartops?handler=ConnectionPoints&pageUrl=/Demo&webUrl=/&instanceId=<guid>

# List all connections on a page
GET /_api/webpartops?handler=PageConnections&pageUrl=/Demo&webUrl=/

# Create a connection
POST /_api/webpartops?handler=CreateConnection
{
  "pageUrl": "/Demo",
  "webUrl": "/",
  "providerInstanceId": "<guid>",
  "consumerInstanceId": "<guid>",
  "providerConnectionPointId": "row",
  "consumerConnectionPointId": "filter"
}

7. Web Part Pages¶

A Web Part Page is an .aspx page in a document library whose layout is defined by one or more named zones. Pages created under SitePages or via the New Web Part Page form are of this type.

Creating a New Web Part Page¶

Navigate to /_layouts/15/spcf.aspx (New Web Part Page form).
Choose a layout template (e.g. Full Page, Vertical, Header, Left Column, Body).
Enter a page name.
Click Create.

The new page opens in edit mode with empty zones ready for web parts.

Gallery¶

The Web Part Gallery at /_layouts/15/WebPartGallery.aspx lists all available web parts registered in the site collection. Administrators can upload custom .webpart or .dwp files to expand the gallery.

8. Wiki Pages¶

A Wiki Page is a rich-text page stored in the SitePages document library with a .aspx extension. Wiki pages support:

Inline rich-text editing with a formatting toolbar
Hyperlinks between wiki pages ([[PageName]] auto-linking)
Embedded web parts (see §9)

Creating a New Wiki Page¶

Option A — Via the ribbon: 1. Navigate to any existing wiki page. 2. Click Page → New in the ribbon. 3. Enter a page title. 4. Click Create.

Option B — Via newsbpage.aspx: 1. Navigate to /_layouts/15/newsbpage.aspx. 2. Fill in the Title field. 3. Click Create.

The new page opens in edit mode.

Option C — Via the REST API:

POST /_api/web/lists/getbytitle('Site Pages')/items
Content-Type: application/json;odata=verbose

{
  "__metadata": { "type": "SP.Data.SitePagesItem" },
  "Title": "My New Page",
  "WikiField": "<p>Initial content</p>"
}

Editing a Wiki Page¶

Navigate to the wiki page.
Click Edit in the ribbon or the inline Edit link. Two edit modes are available:
?editmode=1 — Standard inline editor
?editmode=2 — Full-page editor with formatting toolbar
Make your changes.
Click Save (or press Ctrl+S).

Deleting a Wiki Page¶

Navigate to the page, then Page → Delete Page in the ribbon.

9. Embedding Web Parts in Wiki Pages¶

Wiki pages can host web parts alongside their rich-text content.

Open the wiki page in edit mode.
Click Insert → Web Part in the wiki formatting toolbar. The Web Part Gallery panel opens.
Select a web part and click Add.
The web part is inserted into a side-by-side zone on the page.

Web parts embedded in wiki pages behave identically to those on dedicated web part pages — they support the same property editing, minimizing, and deletion flows.

10. Sub-Web (Sub-Site) Scoping¶

Web parts are scoped to the web (site) that owns the page. When working with sub-webs:

Always pass the correct webUrl parameter in REST calls (e.g. "webUrl": "/marketing").
In CSOM, use the correct ctx.Web.GetFileByServerRelativeUrl("/marketing/SitePages/Home.aspx").
Web parts on /marketing/SitePages/Home.aspx are completely independent from those on /SitePages/Home.aspx.

REST Example (sub-web)¶

GET /_api/webpartops?handler=PageWebParts&pageUrl=/marketing/SitePages/Home.aspx&webUrl=/marketing

11. API Reference¶

REST Endpoints (`/api/webpartops`)¶

Handler	Method	Description
`AvailableWebParts`	GET	List registered web part types (filter by `webUrl`)
`PageWebParts`	GET	Web parts on a specific page (grouped by zone)
`AddWebPart`	POST	Add a web part to a page
`UpdateWebPart`	POST	Update web part title/chrome/properties
`DeleteWebPart`	POST	Remove a web part from a page
`MoveWebPart`	POST	Move web part to a different zone or index
`MinimizeWebPart`	POST	Minimize or restore a web part
`ConnectionPoints`	GET	Connection points for a specific web part instance
`PageConnections`	GET	All connections on a page
`CreateConnection`	POST	Wire two web parts together
`DeleteConnection`	POST	Remove a connection

REST Endpoints (`/_api/web`)¶

Endpoint	Description
`GET /_api/web/GetFileByServerRelativeUrl('{url}')`	File metadata
`GET /_api/web/GetFileByServerRelativeUrl('{url}')/GetLimitedWebPartManager(scope=1)/WebParts`	Web parts collection via REST/CSOM equivalent
`GET /_api/web/lists/getbytitle('Web Part Gallery')`	Web Part Gallery list

CSOM¶

Operation	Description
`ctx.Web.GetCatalog(113)`	Web Part Gallery list (template 113)
`file.GetLimitedWebPartManager(PersonalizationScope.Shared)`	Get the web part manager for a file
`manager.WebParts`	Web part collection
`manager.ImportWebPart(xml)`	Import web part from XML
`manager.AddWebPart(def, zoneId, zoneIndex)`	Add imported web part to zone

SOAP (`/_vti_bin/webpartpages.asmx`)¶

Operation	Description
`GetWebPartPage`	Get zone information for a page
`GetWebPartProperties`	Get all web part properties on a page
`GetWebPartProperties2`	Extended properties (includes additional metadata)
`AddWebPart`	Add web part from XML definition
`DeleteWebPart`	Remove web part by storage key
`GetWebPartPageConnectionList`	List web part connections on a page

PnP PowerShell¶

# Connect to Cesivi
Connect-PnPOnline -Url "http://cesivi-host/" -Credentials (Get-Credential)

# List web parts on a page
Get-PnPWebPart -ServerRelativePageUrl "/SitePages/Home.aspx"

# Add a web part
Add-PnPWebPart -ServerRelativePageUrl "/SitePages/Home.aspx" `
               -Xml "<WebPart ...>" `
               -ZoneId "Main" -ZoneIndex 0

# Remove a web part
Remove-PnPWebPart -ServerRelativePageUrl "/SitePages/Home.aspx" -Identity <Guid>

12. Troubleshooting¶

Web part does not appear after adding¶

Confirm the page loaded fully after the add operation (hard-refresh with Ctrl+F5).
Check the browser console for JavaScript errors in webpart-editor.mjs.
Verify the pageUrl and webUrl parameters are correct — sub-web pages require the sub-web prefix in both parameters.

"Add a Web Part" link missing in edit mode¶

Ensure you are logged in as a user with Contribute or higher permissions.
Some page layouts have fixed zones — check if the zone is marked AllowAddWebPart=false in the page definition.

Web part shows "error loading" in view mode¶

Open the developer tools (F12) → Network tab, reload the page, and look for failed requests to /_api/webpartops?handler=PageWebParts.
Check the Cesivi server log for exceptions in WebPartOps.

Wiki page save fails silently¶

Ensure the browser session has not expired (re-login if needed).
Check that the WikiField value is valid HTML — malformed HTML can cause silent save failures.
Verify disk space on the data store (R:/MockData or configured DataRootPath).

13. Accessibility (WCAG 2.1 AA)¶

Surface #7 (Web Parts + Wiki Pages) is WCAG 2.1 AA compliant as of PLAN-1644 (2026-05-30). All 18 registered axe-core routes return 0 critical / 0 serious violations with KnownAxeAcceptances = []. Tested with NVDA + Windows Narrator proxy (automated DOM-inspection pass).

Feature	Keys	Notes
Skip to main content	`Tab` → Enter on first focusable	Skip-nav link appears on first Tab
Enter edit mode	`Tab` to "Edit Page" ribbon button → `Enter`	Also via `?editmode=1` URL
Wiki toolbar	`Tab` to first button, then `→`/`←` arrow keys	`role="toolbar"` — arrow-key navigation within toolbar
Wiki Link Picker (open)	Focus link-picker button → `Enter`	Dialog opens with focus on URL input
Wiki Link Picker (confirm)	`Tab` to OK → `Enter`	`Esc` closes without saving
Wiki Image Picker (open)	Focus image-picker button → `Enter`	Dialog opens with focus on URL/alt-text input
Wiki Layout chooser	`Tab` to radiogroup → `↑`/`↓` arrow keys	`role="radiogroup"` with radio items
Save wiki edits	`Tab` to Save button in Wiki toolbar → `Enter`	`#wiki-toolbar-save-btn`
Discard wiki edits	`Tab` to Discard → `Enter`	Asks for confirmation
WebPart Gallery modal (open)	`Tab` to "Add a Web Part" → `Enter`	Dialog traps focus
WebPart Gallery modal (close)	`Esc` or `Tab` to Close → `Enter`	Returns focus to trigger button
Web part edit bar	`Tab` to a web part zone → `Tab` cycles through 5 edit-bar buttons	Each button has an aria-label that includes the web part title
Connection Wizard	`Tab` opens wizard → step navigation via Tab/Enter	`role="dialog"` with progress indicator
Exit edit mode	`Tab` to Discard button → `Enter`	Or navigate away

All routes using _ModernLayout.cshtml expose the following ARIA landmarks:

Landmark	Element	`aria-label`
Skip-nav	`<a class="skip-link">`	"Skip to main content"
Banner	`<header>`	(implicit)
Navigation	`<nav>`	Site navigation / breadcrumb
Main	`<main id="cesivi-main-content">`	(implicit)
WebPart Zone	`<div role="region">`	Zone title (e.g. "Main Zone", "Sidebar Zone")
Footer	`<footer>`	(implicit)

Modal dialogs (WebPart Gallery, Connection Wizard, Link Picker, Image Picker):

Dialog	`aria-labelledby` target
Add Web Part	`#webpart-gallery-modal-title`
Connection Wizard	`#connection-wizard-title`
Link Picker	`#link-picker-title`
Image Picker	`#image-picker-title`

Contrast ratios (spot-checked)¶

Element	Foreground	Background	Ratio	Criterion
webpart-card-footer text	`#666666`	`#ffffff`	5.74:1	AA Normal text ✅
webpart-card-footer `<code>`	`#444444`	`#f0f1f3`	8.54:1	AA Normal text ✅
Placeholder description / path	`#666666`	`#f9f9f9`	5.74:1	AA Normal text ✅
Placeholder `<code>` (path)	`#444444`	`#e8e8e8`	11.78:1	AA Normal text ✅
Placeholder primary button text	`#ffffff`	`#0072c6`	4.97:1	AA Normal text ✅
Placeholder secondary button text	`#0060af`	`#ffffff`	5.00:1	AA Normal text ✅

Implementation notes (for developers)¶

CSS specificity: tokens.css rule body[data-modern-ui="true"] a { color: var(--accent-fg) } has specificity (0,1,2). Any per-page link color override must use a selector with specificity ≥ (0,1,2) or include an ancestor class. See Placeholder.cshtml for the pattern (.spm-placeholder-content a.spm-btn-primary).
_a11y.css code reset: body[data-modern-ui="true"] code { color: inherit } (0,1,2) resets inline code colors globally. Override with a compound selector like .parent-class .ancestor code to reach (0,2,1).
oklch CSS variables: axe-core 4.11 cannot parse oklch() Color Level 4 values. Any element relying on a CSS custom property that resolves to an oklch value will produce a false contrast violation. Replace with explicit hex colors in any location axe-core scans.
TestApiClient.RemoveAllWebPartsFromPageAsync: Uses WebUiClient (WebUI base URL) not _client (SPM server URL) — the /api/webpartops endpoint is in the WebUI Razor Pages layer, not the SPM REST server.

Web Parts, Web Part Pages & Wiki Pages — User Guide¶

Table of Contents¶

1. Overview¶

2. Web Part Types¶

3. Adding a Web Part to a Page¶

Via the UI (edit mode)¶

Via the REST API¶

Via CSOM¶

4. Editing Web Part Properties¶

Via the REST API¶

5. Minimizing, Restoring, and Deleting Web Parts¶

Minimize / Restore¶

Delete a Web Part¶

Via the REST API¶

6. Web Part Connections¶

Configuring a Connection¶

Removing a Connection¶

Via the REST API¶

7. Web Part Pages¶

Creating a New Web Part Page¶

Gallery¶

8. Wiki Pages¶

Creating a New Wiki Page¶

Editing a Wiki Page¶

Deleting a Wiki Page¶

9. Embedding Web Parts in Wiki Pages¶

10. Sub-Web (Sub-Site) Scoping¶

REST Example (sub-web)¶

11. API Reference¶

REST Endpoints (/api/webpartops)¶

REST Endpoints (/_api/web)¶

CSOM¶

SOAP (/_vti_bin/webpartpages.asmx)¶

PnP PowerShell¶

12. Troubleshooting¶

Web part does not appear after adding¶

"Add a Web Part" link missing in edit mode¶

Web part shows "error loading" in view mode¶

Wiki page save fails silently¶

13. Accessibility (WCAG 2.1 AA)¶

Keyboard navigation¶

Screen-reader landmark catalogue¶

Contrast ratios (spot-checked)¶

Implementation notes (for developers)¶

REST Endpoints (`/api/webpartops`)¶

REST Endpoints (`/_api/web`)¶

SOAP (`/_vti_bin/webpartpages.asmx`)¶