# mod\_admin\_frontend

Source: https://zotonic.com/docs/1822/mod_admin_frontend

URI: https://zotonic.com/id/1822

Language: en



Adds editing of resources, menu-trees and collections for non-admin users.

With many sites it is needed to let “normal” users edit content. For those users the `/admin` interface is overwhelming and also gives too many options that only administrators should be using.

For this use-case the mod\_admin\_frontend is created. It reuses some templates and parts of the normal admin, but in such a way that only the most needed options and fields are present. It also enables editing a menu-tree or collection, side-by-side with the content in the menu-tree.

Interface and dispatching
-------------------------

The interface is a one-page interface which uses postbacks to update the currently edited resource and forms. The editing history is maintained by using hashes in the url.

The URL of the edit page is generated by the dispatch rule `admin_frontend_edit`:

```erlang
[
    {admin_frontend_edit, ["edit"], controller_page, [{acl, is_auth}, {template, "page_admin_frontend_edit.tpl"}]},
    {admin_frontend_edit, ["edit", id], controller_page, [{acl_action, edit}, {template, {cat, "page_admin_frontend_edit.tpl"}}]}
].
```

The template uses the `menu_rsc` filter to find the contextual menu for the resource being edited. Per default the `menu_rsc` filter will fallback to the resource with the name `main_menu`. Hook into the `#menu_rsc{}` notification to change this behavior.

To edit a specific resource in the context of a menu that is non-standard for the resource, use the following code:

```erlang
<a href="{% url admin_frontend_edit id=my_menu %}#edit_id={{ id }}">Click to edit {{ id.title }}</a>
```

Customizing and templates
-------------------------

The `mod_admin_frontend` makes heavy use of `catinclude` to find the correct templates.

The column with the menu is rendered using `{% catinclude "_admin_menu_menu_view.tpl" tree_id ... %}`. The resource-column with the main editing form is rendered using `{% catinclude "_admin_frontend_edit.tpl" id ... %}`. This column is loaded lazily via a postback.

### Editor profile

With `mod_editor_tiptap`, frontend editing defaults to the `advanced` profile. Set `mod_admin_frontend.editor_profile` to `simple`, `normal`, or `advanced` in the site configuration to choose another profile. An unset or empty value uses `advanced`; unrecognized profile names fall back to Tiptap's `normal` profile.

The setting is applied as `data-editor-profile` on the resource edit form, including forms loaded via postbacks. A nearer attribute on a field container or textarea overrides it. Profile definitions and site overrides are provided by `_editor_tiptap_profiles.tpl` in `mod_editor_tiptap`. This setting does not change TinyMCE configuration.

### Responsive menu column

When less than 1100 CSS pixels remain for the editor, the menu column collapses. A Menu button in the editor toolbar temporarily shows the menu in place of the form. The form remains mounted, preserving unsaved edits. Selecting a resource closes the menu. The available width is observed, so resizing the live preview also updates the layout. Site toolbar overrides using `save-buttons` inherit this behavior through the core frontend script and styles.

### Customizing the menu column

Extra content can be added above or below the menu view by overruling the blocks `above_menu` and `below_menu`.

### Customizing the main edit column

The main edit template `_admin_frontend_edit.tpl` provides the main edit-form, javascript initializations and fields for basic publication status editing.

The main edit block `edit_blocks` is defined as follows and can be overruled for specific categories:

```django
{% block edit_blocks %}
    {% catinclude "_admin_edit_basics.tpl" id is_editable=is_editable languages=languages %}

    {% if id.category_id.feature_show_address %}
        {% catinclude "_admin_edit_content_address.tpl" id is_editable=is_editable languages=languages %}
    {% endif %}

    {% all catinclude "_admin_edit_content.tpl" id is_editable=is_editable languages=languages %}

    {% if id.is_a.media or id.medium %}
        {% include "_admin_edit_content_media.tpl" %}
    {% endif %}

    {% catinclude "_admin_edit_body.tpl" id is_editable=is_editable languages=languages %}
    {% catinclude "_admin_edit_blocks.tpl" id is_editable=is_editable languages=languages %}
    {% catinclude "_admin_edit_depiction.tpl" id is_editable=is_editable languages=languages %}
{% endblock %}
```

If any content needs to be added on top of the page, between the publication checkbox and the main edit fields, then overrule the block `meta_data_after`.

If you click on the cog icon on the right, then a meta data panel is shown (for access-control options and language settings). This panel can be extended with extra tabs using the blocks `meta_tabs` and `meta_panels`.

Live view
---------

The Open panel / Close panel button toggles a right-hand iframe showing saved content without saving the form. A hint in the panel header reminds the user to save when the form has unsaved changes. Resource, media and incoming/outgoing edge events for both the edited resource and `tree_id` refresh the preview. Switching resources replaces the subscriptions; closing the panel releases them. Unsaved form changes are not rendered.

The preview uses the form's `view_location` override, falling back to `page_url` in the editing language. Keep `_admin_edit_preview_context.tpl` inside the `rscform` block so site overrides of `view_location` apply. Sites replacing the outer editor layout or navbar must include `_admin_edit_preview.tpl` once and `_admin_edit_preview_button.tpl` in their toolbar. The iframe is same-origin and uses the editor's existing permissions. External destinations can be opened in a new tab. Opening an admin or admin\_frontend editor inside the preview navigates the top window to that editor. Open state and width are remembered for the browser session.

Preview languages are document-local. Embedded navigation and background requests do not update the shared `z.lang` cookie, and embedded language switches do not change the user's saved language preference. Authentication refresh uses the document's language for its MQTT session, keeping lazy templates and postbacks in the preview language. Custom HTTP loaders must likewise include their document's language in their URL or `z_language` argument instead of relying on the cookie.

Accepted Events
---------------

Delegate callbacks:

- `event/2` with `postback` messages: `admin_menu_edit`.
- `event/2` with `postback_notify` messages: `<<"admin-menu-edit">>`.

License: 

Attribution: 

Related resources: https://zotonic.com/api/agent/related/1822?language=en


## API access

- [API help](<https://zotonic.com/api-help>)
- [OpenAPI specification](<https://zotonic.com/openapi.json>)
- [This resource as JSON](<https://zotonic.com/api/agent/resource/1822?language=en>)