Toolbar & Workflow

Draft management, saving, resetting, deleting and previewing pages in the portal editor.

The editor toolbar sits at the top of the canvas and provides all the actions you need to manage the lifecycle of a page — from drafting changes through to previewing and saving.

Toolbar buttons (left to right)

Element	Visibility	Description
Unsaved draft indicator	When changes exist	A small label that reads “Unsaved draft”, shown whenever the current layout differs from the last saved version.
Page status selector	Custom pages only	A dropdown to set the page visibility: Unpublished, Hidden (Private), Published, or Only Members.
Delete page	Custom pages (saved)	Permanently deletes the custom page. Requires confirmation.
Reset	Always	Discards all unsaved changes and reverts to the last saved version (or the default layout for built-in pages). Requires confirmation.
Delete outline	Built-in pages only	Removes all customisations from a built-in page and restores the factory-default layout. Requires confirmation.
Preview	Always	Opens a full preview of the current layout in a new browser tab.
Save	Always	Persists the current layout to the server.

Unsaved drafts

The editor automatically tracks whether you have unsaved changes:

• Every edit you make is compared against the last saved version.
• If there is a difference, the “Unsaved draft” indicator appears in the toolbar.
• Drafts are stored in your browser’s localStorage so they survive page refreshes and accidental tab closes.
• The localStorage key follows the pattern editor-draft-{pageName} for built-in pages and editor-draft-file-{fileId} for custom pages.

Drafts are stored locally in your browser. If you switch to a different browser or clear your browser data, unsaved drafts are lost. Always Save important changes.

How draft detection works

1. When you open a page, the editor loads any existing draft from localStorage first, falling back to the saved version from the API, and finally to the default layout.
2. On every change in the editor, the current state is compared to the saved reference.
3. If they differ, hasDraft is set to true and the indicator appears.
4. Saving or resetting clears the draft from localStorage and hides the indicator.

Page status (custom pages)

Custom pages have a visibility dropdown with four options:

Status	Behaviour
Unpublished	The page is not accessible to anyone. Useful for work-in-progress pages.
Hidden (private)	The page exists but is not listed in the navigation. Only accessible via direct URL.
Published	The page is visible to everyone and appears in the navigation (if added).
Only Members	The page is only visible to authenticated members (i.e. customer with an active contract for one of your plans).

The status is set in the toolbar and saved together with the page content when you click Save.

Reset

Clicking Reset shows a confirmation dialog:

“This will discard all unsaved changes and revert to the last saved version. Are you sure?”

• For custom pages, the editor reloads the page content from the API.
• For built-in pages, the editor reloads the saved layout, or the default layout if no customisation has been saved.
• The draft is cleared from localStorage.

Delete outline (built-in pages)

Built-in pages can be customised but never truly deleted. The Delete outline button removes your customisations and restores the factory-default layout:

“This will restore the default layout for this page. All your customisations will be lost. Are you sure?”

After confirming:

• The saved customisation is deleted from the API.
• The editor loads the default layout from the built-in defaults.
• The draft is cleared from localStorage.

This action does not remove the page itself — the page continues to exist with its default layout.

Delete page (custom pages)

For custom pages that have been saved at least once (i.e. they have a page ID), the Delete button permanently removes the page:

“Are you sure you want to delete this page? This action cannot be undone.”

After confirming:

• The page is deleted from the API.
• The localStorage draft is cleared.
• You are redirected away from the editor.

Preview

Clicking Preview opens a new browser tab showing the page as a member would see it — including the current unsaved changes.

How preview works

1. The editor encodes the current page layout as a Base64 string.
2. A preview URL is constructed with ?previewOutline=<base64>&previewName=<identifier> parameters.
3. For built-in pages, the URL points to the page’s standard route.
4. For custom pages, the URL points to /pages/{fileId}/{slug}.
5. When the portal loads, it reads the URL parameters, stores the preview data in localStorage, and strips the parameters from the URL.

Preview banner

While preview outlines are active, the portal shows a yellow warning banner at the top of every page:

• Text: “Preview mode — You are browsing the site with unsaved page previews.”
• Button: “Clear preview” — removes all preview data from localStorage and reloads the portal.
• The banner does not appear inside the editor itself.

Preview data persists in the browser until you click “Clear preview” or close the tab. This lets you navigate around the portal and see how the previewed page interacts with the rest of the site.

Save

Clicking Save persists the current layout:

• New custom pages (ID = 0): the editor sends a POST request to create the page. On success, the URL updates to reflect the new page ID.
• Existing custom pages: the editor sends a PUT request to update the page.
• Built-in pages: the editor sends a PUT request to update the named outline.
• The draft is cleared from localStorage.
• The hasDraft indicator disappears.

Viewports

The canvas supports three viewport sizes for responsive design:

Viewport	Width	Icon
Desktop	1400 px	Monitor
Tablet	768 px	Tablet
Mobile	375 px	Smartphone

Switch between viewports using the icons in the toolbar to see how your layout adapts to different screen sizes.