Integration manual

This page describes how to integrate modification actions on pages and content from the front office into a charter.

  1. Foreword
    1. Restrictions
    2. The different modification modes
    3. Loading the necessary scripts
  2. Front-edition tools
    1. Switch to edit mode
    2. Content modification
      1. Modifying content field by field
      2. Modify all fields simultaneously
      3. Content workflow
    3. Front-edition tools for content
      1. Adding content to a page
      2. Labeling content
      3. Modify the content lifecycle
      4. Moving content within its zone
      5. Recover the current workflow state of a content item
      6. Retrieve content status
    4. Front-edition tools for pages
      1. Add page
      2. Deleting a page
      3. Rename a page
      4. Page labeling
      5. Move a page under a target page
      6. Move a page up or down
      7. Retrieve page content status
      8. Scheduled publication of a page
    5. Front-edition tools for page elements
      1. Remove content/service from a page
  3. Helpers XSL
    1. AmetysFrontEditionHelper
      1. hasFrontEditionRight
      2. hasWorkflowRight
      3. getPageStatus
      4. getZoneItemPosition
      5. getZoneSize
      6. getContentWorkflowId
      7. getContentStatus
      8. isContentLive
    2. AmetysXSLTHelper
      1. isEditionMode
  4. Advanced integration
    1. Override HTML rendering of all buttons
    2. Override a button's HTML rendering
    3. Customize paragraph styles in the rich text editor

Foreword

Restrictions

  • Front-office editing buttons are visible only from the front.
  • Front-edition tools can only be integrated on non-cacheable pages
  • Front-edition tools and scripts are loaded and visible only to users with "Site modification" rights.

The different modification modes

There are 2 ways of integrating front-edition tools:

  • wiki mode: modifications made from the front are directly online (working on the Live version)
  • edit mode: modifications made from the front only impact the draft version (working on the default version)
    In this mode, you need to add a "switch to edit mode" button to switch to the draft version, and a "Publish" button to validate modifications online.

In addition to these 2 modes, there are also 2 content modification modes:

  • simple mode: fields are modified individually field by field (default mode)
  • full mode: all fields can be modified on a single form

Loading the necessary scripts

plugin provides a XSL file containing the XSL templates to be called for each action (add page, add content, etc.)
It is therefore necessary to import this file first:

<xsl:import href="plugin:front-edition://stylesheets/front-edition.xsl"/>

Puis pour chaque page intégrant des outils de front-edition, il est nécessaire de faire appel au template XSL "ametys-front-edition-head" dans la section <head> du template.
Ce template XSL permet de charger les scripts JS nécessaires au fonctionnement des outils front-edition.

Its parameters are as follows:

  • start Indicates whether to directly load javascript files required for editing (default: start)
    • false: only loads the bare minimum, page loading is not affected. You'll need to insert a button to start the front-edition modification. This button must call AmetysFrontEdition.start(); and only after this call will the modification be possible.
    • start: Load files on first modification action. Page loading will be little affected by front-edition, but the first modification will be slow.
    • load: Load files as soon as the page is loaded. Page loading will be slowed down, but the first modification will be immediate.
    • debug: Do not use (only for plugin front-edition development)
  • edition-mode-only: Edition is limited to edition mode (default: 'true'). Set to false() to activate wiki mode (modifications automatically online)
  • editActionId: identifier of the workflow action used for field-by-field editing (default: 2). Note that if wiki mode is used (edition-mode-only=false), the edit workflow action must also validate the content.
  • insertAttachmentActionId: workflow action identifier to be used when uploading content attachments (default: 12)
  • theme [from 1.6.0]: ExtJS theme loaded as a path to a folder (optional)
  • js-loading-html [from 1.6.0]: advanced parameter to customize the HTML code used for the front-edition loading screen. Defaults to <div id="front-edition-js-loading-div" class="front-edition-js-loading|front-edition-js-loaded">
  • start-callback [from 1.6.1]: optional callback function to be called after front-edition initialization

For example:

<xsl:call-template name="ametys-front-edition-head">
    <xsl:with-param name="start">load</xsl:with-param>
    <xsl:with-param name="editActionId">42</xsl:with-param>
    <xsl:with-param name="insertAttachmentActionId">42</xsl:with-param>
    <xsl:with-param name="edition-mode-only" select="false()"/>
</xsl:call-template>

Front-edition tools

Note
Buttons will only be displayed if you have the necessary rights linked to the functionality (e.g. the right to add a page) in addition to the right to modify online(Front_Edition_Access_Right).

Switch to edit mode

To insert a button to switch to edit mode (and vice versa), call the template "ametys -front-edition-insert-toggle-edition-mode-button ".
The parameters are as follows:

  • class: css class to be added to the button. Default front-edition-toggle-edition-mode

For example:

<xsl:if test="edition:hasFrontEditionRight()">
    <xsl:call-template name="ametys-front-edition-insert-toggle-edition-mode-button" />
</xsl:if>

As a reminder, there are 2 editing modes: wiki mode, which works on the validated version of the site, and edition mode, which works on the draft version of the site.
This button is only required when you wish to use edition mode.

Content modification

To enable content fields to be modified, simply add a "data-ametys-metadata" attribute to the html element displaying the field.

The "data-ametys-metadata" attribute contains the content identifier and the metadata path, separated by a semicolon;

At the end of front-edition loading, a "modify" button will be automatically added to editable fields (taking into account the rights of the logged-in user) to enable them to be modified.

The css class "ametys-front-edition-possible" is automatically added to all html elements with the "data-ametys-metadata" attribute for which modification is possible. The "ametys-front-edition-hover" class is also added.
A <button class="ametys-front-edition-button">Modifier</button> is added to the element.


To make this button visible only on hover, simply add the following rule css :

.ametys-front-edition-button { display: none }
.ametys-front-edition-hover .ametys-front-edition-button { display: inline-block }

Example to change the content title:

<div class="content-title rs-editable__pseudo-text" data-ametys-metadata="{@id};title"><xsl:value-of select="metadata/title"/></div>  

The HTML code generated will be:

<div class="content-title rs-editable__pseudo-text ametys-front-edition-possible" data-ametys-metadata="content://a0a38c54-e6d4-48ec-a519-0f60cc5e7a8b;title">
    <button class="ametys-front-edition-button">
        <span class="ametys-front-edition-button-text">Modifier</span>
    </button>
    Titre du contenu
</div> 

How do I authorize the modification of empty fields?

Only one displayed field can be modified.

To be able to modify an empty field, you need to add a "placeholder", only for users authorized to modify this field.

To do so, 

  • if in edit mode (working on the draft version):
    placeholders are displayed regardless of the current user's rights. This solution is easy to implement.

    For example:

<xsl:choose>
    <xsl:when test="metadata/title != ''">
        <span class="content-title summary" data-ametys-metadata="{@id};title"><xsl:value-of select="metadata/title"/></span> 
    </xsl:when>
    <xsl:when test="ametys:isEditionMode()">
        <!-- Placeholder -->
        <span class="content-title summary" data-ametys-metadata="{@id};title">Ajouter un titre</span> 
    </xsl:when>
</xsl:choose>
  • if in wiki mode (working on the validated version):
    placeholders are always present but hidden in the HTML code and must be displayed in javascript for users with access rights.

    Example of implementation from version 1.6.1+.
<xsl:choose>
    <xsl:when test="metadata/title != ''">
        <span class="content-title summary" data-ametys-metadata="{@id};title"><xsl:value-of select="metadata/title"/></span> 
    </xsl:when>
    <xsl:otherwise>
        <!-- Placeholder (caché par défaut) -->
        <span style="display: none" class="content-title summary front-edition-placeholder" data-ametys-metadata="{@id};title">Ajouter un titre</span> 
    </xsl:otherwise>
</xsl:choose>

The plugin must be loaded by specifying a callback function to the existing call. This JS function will make visible the "placeholder" containing the edit button (identified by the css class "ametys-front-edition-button").

<xsl:call-template name="ametys-front-edition-head">
    <xsl:with-param name="start">load</xsl:with-param>
    ...
    <xsl:with-param name="start-callback">function() { $j('.front-edition-placeholder .ametys-front-edition-button').parent('.front-edition-placeholder').show(); }</xsl:with-param>
</xsl:call-template>

Note importante
La taille du champ du formulaire permettant la modification de la donnée sera la même que la taille de l'élément html portant l'attribut "data-ametys-metadata".
Il est donc conseillé d'ajouter cet attribut sur des éléments <div> plutôt que des <span> et de prévoir une largeur minimun (et une hauteur minimun pour les champs de type texte riche ou texte multiligne).

To date, the types supported by the front-office modification are as follows:

  • STRING
  • DATE
  • DATETIME
  • RICH_TEXT
  • CONTENT
  • FILE

Since version 1.11 (Ametys 4.6), an image widget has been available as a default for FILE types with the "image" filter enabled. This widget has a "shape" parameter which can take:
- the value "circle" if the widget is to be displayed as a circle, for a profile photo for example.
- the value "square" if the widget is to be forced as a square image
- the default value "rectangle" for an image without forced size

Widget and parameters

Since version 1.11 (Ametys 4.6), it is possible to specify a widget with the attribute "data-ametys-widget" to replace the default value. Only widgets provided by plugin Front Edition are available.

Since version 1.11 (Ametys 4.6), it has been possible to specify widget parameters with the attribute "data-ametys-widget-params" in the form of a JSON. Be careful to escape braces within XSL .

<div data-ametys-metadata="{/view/content/@id};illustration/image" 
  data-ametys-widget-params="{{ &quot;shape&quot;: &quot;circle&quot; }}">

Modifying content field by field

There's nothing more to do to use this editing mode.
Content fields are edited individually, and changes are saved each time they are made.

Modify all fields simultaneously

In this mode, add a general "Modify" button and hide the individual "Modify" buttons.

The "ametys -front-edition-edit-content-button " template displays a button for modifying all visible content fields in a single form, and displays a toolbar with workflow actions that can be performed.

The parameters are as follows.

  • content-id: identifier of the content to be modified
  • workflow-ids list of workflow actions to make available. Default [2]
    • Given a list of integers [2, 4, 5], the button names will be the names of the actions defined in the workflow
    • Il est aussi possible de surcharger les noms d'actions :  [{id:2,text:'<xsl:value-of select="$workflow-2-text" />'}, 42]. Le texte doit être décodé dans la balise (voir exemple ci dessous)
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-edit-content
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example with a text overload for the modify action

<xsl:variable name="workflow-2-text">                 
    <xsl:value-of select="ametys:escapeJS(ametys:translate(concat('skin.', ametys:skin(), ':FRONT_EDITION_SAVE_CONTENT')))" />                 
</xsl:variable>                 
<xsl:call-template name="ametys-front-edition-edit-content-button">                 
    <xsl:with-param name="content-id" select="@id"/>                 
    <xsl:with-param name="workflow-ids">[{id:2,text:'<xsl:value-of select="$workflow-2-text" />'}, 42]</xsl:with-param>                 
</xsl:call-template>                 

To hide individual edit buttons, simply add a rule css:

.ametys-front-edition-button { display: none; }

Content workflow

For content for which you wish to authorize modification from the front-office, it is strongly recommended that you add an action to the workflow allowing :

  • automatically validate content each time it is modified, if the current version is the validated version
  • keep the content in draft form if the current version is a draft version

Here's an example of an action with a conditional result, assuming that "1" is the draft state and "3" the released state:

<action id="42" name="plugin.default-workflow:WORKFLOW_ACTION_EDIT_FO">                 
    <restrict-to>                 
        <conditions type="AND">                 
            <condition type="avalon">                 
                <arg name="role">org.ametys.cms.workflow.ContentCheckRightsCondition</arg>                 
                <arg name="right">Workflow_Rights_Edition_Online</arg>                 
            </condition>                 
            <condition type="avalon">                 
                <arg name="role">org.ametys.cms.workflow.LockCondition</arg>                 
            </condition>                 
        </conditions>                 
    </restrict-to>                 
    <pre-functions>                 
        <function type="avalon">                 
            <arg name="role">org.ametys.cms.workflow.EditContentFunction</arg>                 
        </function>                 
    </pre-functions>                 
    <results>                 
        <!-- Modification et validation -->                 
        <result old-status=" " status=" " step="3">                 
            <conditions type="AND">                 
                <condition type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.ContentCurrentStepCondition</arg>                 
                    <arg name="step">3</arg>                 
                </condition>                 
                <condition type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.ValidateMetadataCondition</arg>                 
                </condition>                 
            </conditions>                 
            <post-functions>                 
                <!-- edition -->                 
                <function type="avalon">
                    <arg name="role">org.ametys.cms.workflow.extensions.ExtensibleFunction</arg>
                    <arg name="extension-point">org.ametys.cms.workflow.extensions.PostContentEditionFunctionsExtensionPoint</arg>
                </function>                
                <function type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.SetCurrentStepIdAndNotifyFunction</arg>                 
                </function>                 
                <function type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.CreateVersionFunction</arg>                 
                </function>                 
                <!-- validation -->                 
                <function type="avalon">
                    <arg name="role">org.ametys.cms.workflow.extensions.ExtensibleFunction</arg>
                    <arg name="extension-point">org.ametys.cms.workflow.extensions.PostContentValidationFunctionsExtensionPoint</arg>
                </function>                
                <function type="avalon">                 
                    <arg name="role">org.ametys.web.workflow.ValidateContentFunction</arg>                 
                </function>                 
                <function type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.ValidationStepFunction</arg>                 
                </function>                 
            </post-functions>                 
        </result>                 
        <!-- Modification uniquement -->                 
        <unconditional-result old-status=" " status=" " step="1">                 
            <post-functions>                 
                <!-- edition -->                 
                <function type="avalon">
                    <arg name="role">org.ametys.cms.workflow.extensions.ExtensibleFunction</arg>
                    <arg name="extension-point">org.ametys.cms.workflow.extensions.PostContentEditionFunctionsExtensionPoint</arg>
                </function>                   
                <function type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.SetCurrentStepIdAndNotifyFunction</arg>                 
                </function>                 
                <function type="avalon">                 
                    <arg name="role">org.ametys.cms.workflow.CreateVersionFunction</arg>                 
                </function>                 
            </post-functions>                 
        </unconditional-result>                 
    </results>                 
</action>                 

Front-edition tools for content

Important
The tools described in this chapter must not be called up from the content view, as this view is cached and can cause serious side effects (see https://issues.ametys.org/browse/FRONTEDIT-78 ).

To call them, put your code in zone-item-before or zone-item-after of your template (see Writing a template).

Adding content to a page

To insert a button for adding content, use the template "ametys-front-edition-add-content-button " with the following parameters:

  • page-id: page identifier
  • content-types: type(s) of content to be created. If several types are to be declared for the same content, separate them with semicolons ;
  • zone-name: name of zone in which to add content. Default: default
  • content-title: default content title
  • init-workflow-action-id: identifier of the initialization workflow action. Default: 1
  • workflow-name: name of the workflow linked to this content. Default: content
  • local: content language
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-add-content
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example of a button to create a new article:

<xsl:if test="ametys:isEditionMode()">
    <xsl:call-template name="ametys-front-edition-add-content-button">
        <xsl:with-param name="page-id" select="/cms/page/@id"/>
        <xsl:with-param name="content-types" select="'org.ametys.web.default.Content.article'"/>
        <xsl:with-param name="zone-name" select="'right'"/>
        <xsl:with-param name="content-title"><i18n:text i18n:key="FRONT_EDITION_EMPTY_ARTICLE_TITLE" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
        <xsl:with-param name="locale" select="$lang"/>
        <xsl:with-param name="button-text"><i18n:text i18n:key="FRONT_EDITION_NEW_ARTICLE" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
    </xsl:call-template>
</xsl:if>

Labeling content

To insert a button to label content, use the template "ametys-front-edition-insert-tag-content-button " with the following parameters:

  • content-id: identidiant of the content to be tagged
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-tag-content
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

For example:

<xsl:if test="ametys:isEditionMode() and $contentId">
    <xsl:call-template name="ametys-front-edition-insert-tag-content-button">
        <xsl:with-param name="content-id" select="$contentId" />
        <xsl:with-param name="button-text"><i18n:text i18n:key="FRONT_EDITION_ACTION_TAG_CONTENT_LABEL" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
    </xsl:call-template>
</<xsl:if>

Modify the content lifecycle

To insert a button to perform a workflow action on content, use the template "ametys -front-edition-content-workflow-button " with the following parameters:

  • content-id: identifier of the content on which to execute the workflow action
  • workflow-id: identifier of the workflow action to be executed
  • workflow-text: text to be displayed (by default, the action label defined in the workflow)
  • title-i18n : i18n key to be used as button title
  • class: css class to be added to the button. Default front-edition-workflow-action
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example of adding 2 buttons to unpublish or publish content depending on its current status:

<xsl:if test="ametys:isEditionMode() and $contentId">
    <!-- get content status -->
    <xsl:variable name="status">
        <xsl:call-template name="ametys-front-edition-get-content-validation-status">
            <xsl:with-param name="content-id" select="$contentId"/>
        </xsl:call-template>
    </xsl:variable>

    <xsl:choose>
        <xsl:when test="$status = 'validated'">
            <!-- inseration d'un bouton "dépublier"
            <xsl:call-template name="ametys-front-edition-content-workflow-button">
                <xsl:with-param name="content-id" select="$contentId"/>
                <xsl:with-param name="workflow-id" select="'10'"/>
                <xsl:with-param name="workflow-text"><i18n:text i18n:key="FRONT_EDITION_ACTION_UNPUBLISH_CONTENT_LABEL" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
                <xsl:with-param name="title-i18n">skin.<xsl:value-of select="$skin"/>:FRONT_EDITION_ACTION_TO_DRAFT_TITLE</xsl:with-param>
                <xsl:with-param name="class">front-edition-workflow-action-validated</xsl:with-param>
            </xsl:call-template>
        </xsl:when>
        <xsl:otherwise>
            <!-- insertion d'un bouton "publier" -->
            <xsl:call-template name="ametys-front-edition-content-workflow-button">
                <xsl:with-param name="content-id" select="$contentId"/>
                <xsl:with-param name="workflow-id" select="'4'"/>
                <xsl:with-param name="workflow-text"><i18n:text i18n:key="FRONT_EDITION_ACTION_PUBLISH_CONTENT_LABEL" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
                <xsl:with-param name="title-i18n">skin.<xsl:value-of select="$skin"/>:FRONT_EDITION_ACTION_TO_PUBLISH_TITLE</xsl:with-param>
                <xsl:with-param name="class">front-edition-workflow-action-draft</xsl:with-param>
                </xsl:call-template>
        </xsl:otherwise>
    </xsl:choose>
</xsl:if>

Moving content within its zone

To insert a button for moving content within its zone, use the template "ametys -front-edition-move-content-button " with the following parameters:

  • zone-item-id: identifier of the zoneItem to be moved
  • zone-name: name of parent zone to which to move content
  • offset: -1 to go up a level, 1 to go down a level
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Defaults to front-edition-move-content-up or front-edition-move-content-down depending on offset direction.
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Recover the current workflow state of a content item

To retrieve a content's workflow state identifier, use the template "ametys-front-edition-get-content-workflow-step " with the following parameters:

  • content-id: content identifier
  • prefix: text prefixing the return (optional)

Returns the workflow state identifier for this content, prefixed by prefix

Retrieve content status

To retrieve content status, use the template "ametys -front-edition-get-content-validation-status " with the following parameters:

  • content-id: content identifier
  • prefix: text that will prefix the return

Returns "[prefix]validated" if the content is validated or "[prefix]draft" otherwise.

For example:

<xsl:variable name="status">
    <xsl:call-template name="ametys-front-edition-get-content-validation-status">
         <xsl:with-param name="content-id" select="$contentId"/>
     </xsl:call-template>
</xsl:variable>

Front-edition tools for pages

Add page

To insert a button for adding a page, use the template XSL "ametys-front-edition-insert-create-page-button". The main parameters are as follows:

Example

<xsl:call-template name="ametys-front-edition-insert-create-page-button">                 
    <xsl:with-param name="page-id" select="@sitemap:id"/>                 
    <xsl:with-param name="callback">someAwesomeCallBackFunction</xsl:with-param>                 
    <xsl:with-param name="config">{                 
        "force": true,                
        "show-card-type" : false,         
        "show-card-content" : false,         
        "show-card-tags" : false,         
        "default-pagetype" : "template",                 
        "default-template" : "page3col",                 
        "default-pagecontent-type" : "contenttype",                 
        "default-contenttype" :  "org.ametys.plugins.news.Content.news",                 
        "default-content-title" : "Jolie nouvelle actualité",                 
        "default-contenttype-label" : "Actualité"                 
    }</xsl:with-param>                 
</xsl:call-template>                 

The default setting is

{                 
    'pagetype-template' : true,                 
    'pagetype-redirection-cms' : true,                 
    'pagetype-redirection-http' : false,                 
    'pagetype-blank' : false,                 
    'pagecontent-card-content-filter' :                 
    [                 
        'org.ametys.plugins.news.Content.news',                 
        'org.ametys.web.default.Content.article'                 
    ],                 
    'pagecontent-service' : false                 
}                 

There's no need to re-declare everything: if a single parameter needs to be changed, simply pass it to the conf (a merge of the passed conf and the default conf is performed).

Prior to Ametys 4.3, it was sufficient to specify "force":true to display only the card of choice for the page title. Now you must explicitly specify the set of cards to be hidden, the list being: show-card-type, show-card-content, show-card-tags.
force is used to force the application of default values, in most cases it is useful to set it when hiding cards.

Example 1: creation of a News page and content with label selection from a restricted list

<xsl:call-template name="ametys-front-edition-insert-create-page-button">
    <xsl:with-param name="page-id" select="$rootNewsPageId"/>
    <xsl:with-param name="title-i18n"><xsl:value-of select="concat('skin.', $skin, ':SKIN_HOME_NEWS_CAROUSEL_ADD_NEWS_BTN_TITLE')"/></xsl:with-param>
    <xsl:with-param name="button-text"><h2 class="ametys-truncate" data-lines="2"><i18n:text i18n:key="SKIN_HOME_NEWS_CAROUSEL_ADD_NEWS" i18n:catalogue="skin.{$skin}"/></h2><span class="ametys-portlet__content_newproj_icn"><i class="fas fa-pen"></i></span></xsl:with-param>
    <xsl:with-param name="edition-mode-only" select="false()"/>
    <xsl:with-param name="class">ametys-portlet__content_newproj</xsl:with-param>
    <xsl:with-param name="callback">function(page)
    {
        var path = AmetysFrontEdition.CONTEXT_PATH + "/" + AmetysFrontEdition.LOCALE + "/" +         page.getPath() + ".html";
        window.location.href = path;
    }
    </xsl:with-param>
    <xsl:with-param name="config">{
        "title": "<xsl:value-of select="ametys:escapeJS(ametys:translate(concat('skin.', $skin, ':SKIN_HOME_NEWS_CAROUSEL_ADD_NEWS_DIALOG_TITLE')))"/>",
        "force": true,
        "workflowInitActionId": "14", 
        "show-card-content" : false, 
        "show-card-type" : false, 
        "show-card-tags" : true,
        "pagecontent-card-tags-categories-filter":         ["provider_org.ametys.plugins.workspaces.categories.CategoryTagProvider", "NEWS_CATEGORIES"],
        "pagecontent-card-tags-categories-filter-only-subcategories": false,
        "default-pagetype" : "template",
        "default-template" : "page",
        "default-zone" : "default",
        "default-pagecontent-type" : "contenttype",
        "default-contenttype" : "org.ametys.plugins.news.Content.news",
        "default-content-title" : "<xsl:value-of select="ametys:escapeJS(ametys:translate(concat('skin.', $skin, ':SKIN_HOME_NEWS_CAROUSEL_ADD_NEWS_DEFAULT_TITLE')))"/>",
        "default-contenttype-label" : "<xsl:value-of select="ametys:escapeJS(ametys:translate(concat('skin.', $skin, ':SKIN_HOME_NEWS_CAROUSEL_ADD_NEWS_CONTENT_TYPE_LABEL')))"/>",
        "pagecontent-service" : false}
     </xsl:with-param>
</xsl:call-template>

In this example:

  • Dialog box title is overloaded
  • The type of content to be created is imposed (news)
  • The wizard will consist of 2 pages: one to define the title of the page to be created, a second to select labels from a list of daughter labels of the "NEWS_CATEGORIES" label and from a list of labels of the "org.ametys.plugins.workspaces.categories.CategoryTagProvider" label provider.

Deleting a page

To insert a button for deleting a page, use the template XSL "ametys-front-edition-insert-delete-page-button".
The parameters are as follows:

  • page-id: identifier of the page to be deleted
  • page-title: page title to be specified in the dialog box
  • button-text: button text
  • title-i18n: i18n key to be used for the button tooltip
  • class: css class to add to the button. Default front-edition-delete-page
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

If the page contains content, it will be automatically deleted unless it is shared.

<xsl:call-template name="ametys-front-edition-insert-delete-page-button">
    <xsl:with-param name="page-id" select="ametys:pageId()"/>
    <xsl:with-param name="button-text"><span class="btn-icon docicon-delete"></span><span class="btn-txt"><i18n:text i18n:key="SKIN_FO_EDITION_PAGE_DELETE" i18n:catalogue="skin.{$skin}"/></span></xsl:with-param>
    <xsl:with-param name="edition-mode-only" select="false()"/>
</xsl:call-template>

Rename a page

To insert a button for renaming a page, use the template XSL "ametys-front-edition-insert-rename-page-button".
The parameters are as follows:

  • page-id: identifier of the page to be renamed
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-rename-page
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example

<xsl:call-template name="ametys-front-edition-insert-rename-page-button">
    <xsl:with-param name="page-id" select="ametys:pageId()"/>
    <xsl:with-param name="button-text"><span class="btn-icon docicon-rename g-font-size-16 g-mr-10"></span><span class="btn-txt"><i18n:text i18n:key="SKIN_FO_EDITION_RENAME" i18n:catalogue="skin.{$skin}"/></span></xsl:with-param>
    <xsl:with-param name="edition-mode-only" select="false()"/>
</xsl:call-template>

Page labeling

To insert a button for tagging a page, use the template XSL "ametys-front-edition-insert-tag-page-button".
The parameters are as follows:

  • page-id: identifier of the page to be tagged
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-tag-page
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

For example:

<xsl:call-template name="ametys-front-edition-insert-tag-page-button">
    <xsl:with-param name="page-id" select="ametys:pageId()"/>
    <xsl:with-param name="button-text"><span class="btn-icon docicon-tag g-font-size-16 g-mr-10"></span><span class="btn-txt"><i18n:text i18n:key="SKIN_FO_EDITION_TAG" i18n:catalogue="skin.{$skin}"/></span></xsl:with-param>
    <xsl:with-param name="title-i18n" select="concat('skin.', $skin, ':SKIN_FO_EDITION_TAG')"/>
    <xsl:with-param name="edition-mode-only" select="false()"/>
</xsl:call-template>

Move a page under a target page

To insert a button to move a page in the tree to a target page, use the template XSL "ametys-front-edition-insert-move-page-button".
The parameters are as follows:

  • page-id: identifier of the page to be moved
  • page-parent-id: identifier of the new parent page
  • page-new-pos: position of the page in its new parent (integer)
  • button-text: button text/html
  • class: css class to be added to the button
  • link-title-i18n : i18n key to be used as button title
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

This template is only to be used to change parents; for a move within the same parent (re-ordering), we recommend using the 2 templates below.

Move a page up or down

To insert a button to move a page up or down while preserving its parent, use the template XSL "ametys-front-edition-insert-move-page-up-button " and "ametys-front-edition-insert-move-page-down-button " respectively.

The parameters are as follows:

  • page-id: identifier of the page to be moved
  • page-parent-id: parent page identifier
  • page-pos: current page position (used to validate whether or not the button is displayed, and to calculate future position) (page count starts at 1, not zero)
  • number-of-pages: number of child pages under the parent page
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-move-page-up
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example:
In the example below, a "Move" menu includes 2 items for moving the page up or down

<xsl:variable name="currentPage" select="/cms/inputData/sitemap//page[@sitemap:current = 'true']"/>
<xsl:variable name="parentId" select="$currentPage/parent::*[local-name() = 'page' or local-name() = 'sitemap']/@sitemap:id"/>
<xsl:variable name="currentPos" select="count($currentPage/preceding-sibling::page) + 1"/>
<xsl:variable name="nbPages" select="count($currentPage/../page)"/>

<xsl:if test="$nbPages &gt; 1">
    <li class="morelist__has-submenu">
        <a href="#!">
            <span class="btn-icon docicon-move g-font-size-16 g-mr-10"></span>
            <span class="btn-txt">Déplacer la page</span>
        </a>
        <ul class="list-unstyled user__panel__dropdown g-brd-around g-brd-secondary-light-v2 g-bg-white rounded g-py-7 u-shadow-v1-3 sub-morelist">
            <xsl:call-template name="ametys-front-edition-insert-move-page-up-button">
                <xsl:with-param name="page-id" select="$currentPage/@sitemap:id"/>
                <xsl:with-param name="page-parent-id" select="$parentId"/>
                <xsl:with-param name="page-pos" select="$currentPos"/>
                <xsl:with-param name="number-of-pages" select="$nbPages"/>
                <xsl:with-param name="button-text"><span class="move-up-icon"></span><span>vers le haut</span></xsl:with-param>
                <xsl:with-param name="class">g-py-5 g-px-20 g-font-size-14</xsl:with-param>
                <xsl:with-param name="edition-mode-only" select="false()"/>
            </xsl:call-template>

            <xsl:call-template name="ametys-front-edition-insert-move-page-down-button">
                <xsl:with-param name="page-id" select="$currentPage/@sitemap:id"/>
                <xsl:with-param name="page-parent-id" select="$parentId"/>
                <xsl:with-param name="page-pos" select="$currentPos"/>
                <xsl:with-param name="number-of-pages" select="$nbPages"/>
                <xsl:with-param name="button-text"><span class="move-down-icon"></span><span>vers le bas</xsl:with-param>
                <xsl:with-param name="class">g-py-5 g-px-20 g-font-size-14</xsl:with-param>
                <xsl:with-param name="edition-mode-only" select="false()"/>
            </xsl:call-template>
        </ul>
    </li>
</xsl:if>

Retrieve page content status

To retrieve the status of a page's contents, use the template XSL "ametys-front-edition-get-page-status".

The parameters are as follows:

  • page-id: page identifier
  • prefix: prefix to be added at the beginning of the string (optional)

This template returns [prefix]validated|draft|mixed according to the page content status:

  • validated: all page content is validated
  • draft: all page contents are drafts
  • mixed: the page contains validated content and drafts
  • "": nothing is returned if no content is found.

Scheduled publication of a page

Available from front-edition 1.7 onwards

To insert a button for scheduled publication of a page, use the template XSL "ametys-front-edition-insert-schedule-publication-button". The only parameter is :

  • page-id: identifier of the page to be programmed (default: identifier of the current page)
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-schedule-publication

Example

<xsl:call-template name="ametys-front-edition-insert-schedule-publication-button">                 
    <xsl:with-param name="page-id" select="@sitemap:id"/>               
</xsl:call-template>                 

 

Front-edition tools for page elements

Remove content/service from a page

To insert a button for deleting content or a service on a page (zoneitem), call the template "ametys -front-edition-remove-zoneitem-button " with the following parameters:

  • page-id: page identifier
  • zone-name: name of the zone in which a zoneItem will be deleted
  • zone-item-id: identifier of the zoneitem to be deleted
  • button-text: button text/html
  • title-i18n : i18n key to be used for the button tooltip
  • class: css class to be added to the button. Default front-edition-remove-content
  • edition-mode-only: false() to authorize the button even when not in edition mode (default is true())

Example:

<xsl:call-template name="ametys-front-edition-remove-zoneitem-button">                                    
    <xsl:with-param name="page-id" select="ametys:pageId()"/>                                    
    <xsl:with-param name="zone-name" select="'right'"/>                                    
    <xsl:with-param name="zone-item-id" select="ametys:zoneItemId()"/>                                
</xsl:call-template>                 

Helpers XSL

AmetysFrontEditionHelper

The class org.ametys.plugins.frontedition.AmetysFrontEditionHelper provides a few methods for retrieving template arguments, which can also be used during integration to decide whether or not to call certain templates (essentially hasFrontEditionRight).

hasFrontEditionRight

Two possible signatures:

  • boolean hasFrontEditionRight(String rightId, String pageId, boolean editionModeOnly)
    Enables you to check whether a right is accessible to the user (to verify whether the user can modify a page or content, for example).
  • boolean hasFrontEditionRight()
    Checks only if the user has Front_Edition_Access_Right rights in the general context

hasWorkflowRight

Two possible signatures:

  • boolean hasWorkflowRight(int actionId, String contentId, boolean checkEditionMode)
  • boolean hasWorkflowRight(List<Integer> actionIds, String contentId, boolean checkEditionMode)

Checks that the user can perform a workflow action (can also check if in edit mode)

getPageStatus

String getPageStatus(String pageId)

Returns page content status (draft/validated or mixed if both)

getZoneItemPosition

long getZoneItemPosition(String zoneItemId, String pageId)

Retrieves the position of a zoneItem in a page

getZoneSize

long getZoneSize(String zoneName, String pageId)

Retrieves the number of zoneItems in a zone

getContentWorkflowId

long getContentWorkflowId(String contentId)

Retrieves workflow step id for a content

getContentStatus

String getContentStatus(String contentId)

Retrieves "validated" or "draft" depending on whether the content has a validated (Live) version or not.

isContentLive

boolean isContentLive(String contentId)

As above, but returns true if the content has a validated version (Live).

AmetysXSLTHelper

The org.ametys.web.transformation.xslt.AmetysXSLTHelper class provides a useful method for using front-edition.

isEditionMode

boolean isEditionMode()

Linked to use of template ametys-front-edition-insert-toggle-edition-mode-button which switches between normal mode (uses LIVE from the front) and edition mode (uses workspace DEFAULT, and therefore allows access to draft content and empty pages).
This function returns TRUE if in front AND in edition mode. (in preview mode, false will always be returned).

Advanced integration

Override HTML rendering of all buttons

Each template manages its display through the template ametys-front-edition-insert-button-simple which is passed the following parameters :

  • button-text
  • javascript-function
  • class
  • title-i18n

Here's the current template code, which can be rewritten to customize the general display of all buttons

<xsl:template name="ametys-front-edition-insert-button-simple">                 
    <xsl:param name="button-text"/>                 
    <xsl:param name="javascript-function"/>                 
    <xsl:param name="class"/>                 
    <xsl:param name="title-i18n"/>
                
    <a class="{$class}" title="{$title-i18n}" i18n:attr="title" href="javascript:void(0)" onclick="{$javascript-function}"><span><xsl:copy-of select="$button-text"/></span></a>                 
</xsl:template>                 

 

Override a button's HTML rendering

All the templates listed above are the ones to call, but for modularity's sake, each of these templates calls an intermediate one so that a skin can rewrite it to modify the graphic rendering if necessary.

Apart from ametys-front-edition-move-content-buttonall templates with names ending in -button have an intermediate template with the same name, but ending in -.button-simple.

For ametys-front-edition-move-content-button, there are 2 intermediate levels. The templates to be rewritten if necessary are ametys-front-edition-move-content-button-up-simple and ametys-front-edition-move-content-button-down-simple.

All these intermediate templates require the same parameters:

  • button-text
  • javascript-function
  • title-i18n
  • class

And they call the final button display template: ametys-front-edition-insert-button-simple (passing it these same parameters)

Customize paragraph styles in the rich text editor

From version 1.7.0

The list of paragraph styles is automatically formatted by copying the following styles from the rich editor's CSS :

font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow

You can override this behavior in CSS by adding the prefix ".tox-menu" to your rules CSS.
For example :

.htmleditor-1,
.tox-menu .htmleditor-1 { 
... 
}

 

As of version 1.5.4, it was possible to customize this list manually by prefixing it with ".mce-container.mce-menu". This is now obsolete.

Make sure that css is imported on the front side.

Back to top

Front Edition