Admin Panel Reference

The CWA admin panel is shipped as part of the layer and requires no setup. It becomes accessible at /_cwa for any user with ROLE_ADMIN.

Admin Routes

This is the complete list of admin routes. The Admin Panel tours what an editor does with them.

The layer also registers /_cwa/[cwaPage0], which isn't an admin page. It renders a CWA resource by its IRI, for links built with getInternalResourceLink.

All /_cwa routes are client-only (SSR disabled). Every admin page under /_cwa uses the layer's cwa-admin route middleware, set on the /_cwa parent page and inherited by each admin page: a signed-out visitor is sent to /login?redirect=… and returned after sign-in, and a signed-in non-admin is sent to /. Signing out while on an admin route sends you back to /. To guard your own admin-only pages, use the same middleware — see Protecting Pages.

Linking to the add page data form

A link can open the add form for a page data type with its parent and template already chosen. The add form is /_cwa/data/<type>/add, where <type> is the class's short name with a lower-case first letter (App\Entity\TrainingModuleData → trainingModuleData). Add any of these query parameters:

For example, a course page can have an "Add a training module" button that opens the add form with the course as the parent and the training module template chosen:

<template>
    <NuxtLink
        :to="{
            path: '/_cwa/data/trainingModuleData/add',
            query: { parentPageData: courseIri, template: moduleTemplateIri },
        }"
    >
        Add a training module
    </NuxtLink>
</template>

Pass the query as an object, as here, so the IRIs are encoded for you.

• The route can't be filled in. The path isn't a page data field. After saving, the form opens the Routes tab, where you add it.
• The parameters only apply when adding. Opening an existing page data ignores them.

Edit Mode

When an admin visits a content page, an edit bar appears at the top of the page (rendered by <CwaAdminHeader>). Clicking "Edit" toggles edit mode:

const cwa = useCwa()

cwa.admin.isEditing        // whether edit mode is active (a reactive boolean, not a ref)
cwa.admin.toggleEdit()     // open/close edit mode

In edit mode, every rendered component gains a selection overlay. Clicking a component opens its resource manager panel (<CwaAdminResourceManager>).

The edit bar also shows the other signed-in admins: an avatar for each one on this page, +N elsewhere for the rest, and a list of where each one is. Components and fields they have selected are outlined in their colour. See Real-Time Updates › Who Else Is Here.

The Resource Manager

The resource manager is a panel that slides in when a component is selected. It shows tabs for editing the component's data fields. The standard tabs (resource info, UI styles, publish, ordering) ship with the Nuxt module. Custom tabs are added using useCwaResourceManagerTab.

The panel's More actions menu, beside the publish button, adds a component before or after the selection, clones it into another place, and moves it. A clone is the same component, with the same IRI, never a copy; a move takes the selected instance out of its place. See The Admin Panel › Cloning a Component and The Admin Panel › Moving a Component. A component used in more than one place shows a Shared · N places badge beside the publish button, see The Admin Panel › Shared Components.

Custom Manager Tab

Create a Vue component in app/app/cwa/components/[ComponentName]/admin/[TabName].vue. Use useCwaResourceManagerTab to register it:

<!-- app/app/cwa/components/Title/admin/SEO.vue -->
<template>
    <div class="p-4 space-y-4">
        <CwaUiFormLabelWrapper label="Meta Title">
            <CwaUiFormInput
                :model="metaTitleModel"
                placeholder="Override page title for search engines"
            />
        </CwaUiFormLabelWrapper>
    </div>
</template>

<script setup lang="ts">
import { useCwaResourceManagerTab, useCwaResourceModel } from '#imports'

const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'SEO', order: 10 }) 
const metaTitleModel = useCwaResourceModel<string>(iri, 'metaTitle')

defineExpose(exposeMeta) </script>

The tab appears in the resource manager whenever a Title component is selected.

cwa.admin API

Edit mode, the selection stack and the navigation guard are controlled through cwa.admin. Its members are listed in cwa.admin.

Navigation Guard

While edit mode is on, the module blocks programmatic navigation, <NuxtLink> clicks included, so an edit in progress isn't lost. cwa.admin › Navigation Guard covers what is blocked, the ?cwa_force=true bypass and setNavigationGuardDisabled().

Navigating away while a component is being added opens a dialog asking whether to discard it. See cwa.admin › Navigation Guard.