Création d'une balise de propriété modifiable

Une balise de propriété modifiable est utilisée pour rendre modifiables les zones et les métadonnées des objets de contenu et des zones de site lors de l'affichage par le biais d'un portlet d'afficheur de contenu Web lorsque la page est en mode édition.

Pourquoi et quand exécuter cette tâche

Exemple de format d'une balise de propriété modifiable :

[EditableProperty field=" " context=" " type=" " name=" " format=" " pre=" "
     callback=" " stateChangeCallback=" " refreshValueOnEdit=" " class=" " mode=" " placeholder=" "]

[/EditableProperty]

Remarque : Cette balise ne fonctionne pas correctement si les caches de rendu de base ou avancés sont activés, car les mises à jour de création ne s'affichent pas immédiatement sur la page rendue.

Pour créer une balise d'élément modifiable :

Procédure

Cliquez sur Insérer une balise dans un modèle de présentation, le composant ou la zone de conception d'élément. La boîte de dialogue Aide sur les balises s'ouvre.
Sélectionnez EditableProperty comme type de propriété.
Sélectionnez un type de propriété. Ce paramètre est ajouté à la balise en tant que paramètre field=" " :
Remarque : Seuls ces types de propriété sont modifiables :
- Titre
- Nom
- Description
- Auteurs
- Propriétaires
- PublishDate
- ExpiryDate
- GeneralDateOne
- GeneralDateTwo

Sélectionnez le type d'élément et le contexte utilisés pour déterminer l'élément à référencer :

Tableau 1. Matrice de contexte et de type d'objet
Context and Item Type	type="auto"	type="content"	type="sitearea"	type="parent"	type="top"
context="Selected" Si cette option est sélectionnée, le contexte est défini par l'objet sélectionné. Vous pouvez sélectionner un objet en cliquant sur Sélectionner. Ce paramètre est ajouté à la balise en tant que paramètre name=" " :	Ce paramètre rend modifiable la propriété de l'élément sélectionné lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété de l'objet de contenu sélectionné lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément sélectionné est une zone de site, ce paramètre rend modifiable la propriété de la zone de site lorsque la page est en mode édition. Si l'élément sélectionné est un objet de contenu, ce paramètre rend modifiable la propriété de la zone de site parent de l'objet de contenu lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété du parent de l'élément sélectionné lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété du premier élément dans le chemin de l'élément sélectionné lorsque la page est en mode édition.
context="Current" Si cette option est sélectionnée, le contexte est défini par l'objet courant.	Ce paramètre rend modifiable la propriété de l'élément affiché lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété de l'objet de contenu en cours lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément affiché est une zone de site, ce paramètre rend modifiable la propriété de la zone de site en cours lorsque la page est en mode édition. Si l'élément affiché est un objet de contenu, ce paramètre rend modifiable la propriété de la zone de site en cours lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété de la zone de site parent de l'élément affiché lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété du premier élément dans le chemin de l'élément affiché lorsque la page est en mode édition.
context="Autofill" Utilisez cette option lorsque l'élément qui est référencé est déterminé par les paramètres de recherche d'un composant de menu, de navigateur ou de taxinomie. Si la balise n'est pas utilisée dans un composant de menu, de navigateur ou de taxinomie, le contexte revient à l'élément en cours.	Ce paramètre rend modifiable la propriété de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété d'un objet de contenu renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément en cours renvoyé par un composant de menu, de navigateur ou de taxinomie est une zone de site, la propriété de la zone de site est modifiable lorsque la page est en mode édition. Si l'élément en cours renvoyé par un composant de menu, de navigateur ou de taxinomie est un objet de contenu, ce paramètre rend modifiable la propriété de la zone de site parent lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété de l'élément parent de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.	Ce paramètre rend modifiable la propriété du premier élément dans le chemin de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.

Indiquez si des sections de début et de fin doivent être incluses. Vous pouvez entrer du texte supplémentaire entre les sections de début et de fin de la balise et d'autres balises de contenu Web, telles qu'une balise de composant ou d'élément.
Cliquez sur OK pour ajouter la balise à votre conception de navigateur.

Que faire ensuite

Lorsque vous ajoutez la balise à votre conception, vous pouvez également ajouter les paramètres suivants à la balise :

Tableau 2. Paramètres de balise supplémentaires
Paramètres des balises	Détails
`name=" "`	Vous devez spécifier le nom de l'élément qui est référencé lorsque `context="selected"`. Si vous spécifiez `name="./itemName"`, le chemin réel n'est pas résolu tant que l'élément n'est pas rendu. La résolution du chemin d'accès prend légèrement plus longtemps que la spécification du chemin d'accès de l'élément.
`format=" "`	Si vous spécifiez `format="div"`, la région modifiable est rendue dans une balise div. Si aucun format n'est indiqué, une balise div est utilisée par défaut. If you specify format="span", the editable region is rendered within a span tag.
`pre=" "`	Affectez la valeur `pre="true"` pour activer la prise en charge multiligne. Ce paramètre ne s'applique qu'à la zone Description. Si ce paramètre est activé, les retours à la ligne saisis par l'utilisateur lors de la modification de la zone Description sont reconnus lors de leur rendu. Si ce paramètre n'est pas activé, par défaut, il prend la valeur false.
`mode=" "`	Ce paramètre détermine le mode d'édition en ligne. Spécifiez `mode="inplace"` pour activer l'édition à la volée d'une propriété. Tous les champs ne prennent pas en charge le mode d'édition interne. Si une propriété ne prend pas en charge le mode d'édition interne, une boîte de dialogue est utilisée. Spécifiez `mode="embed"` pour activer l'édition imbriquée d'une propriété. Toutes les zones ne prennent pas en charge le mode imbriqué. Si une propriété ne prend pas en charge le mode imbriqué, le mode boîte de dialogue est utilisé à la place. Spécifiez `mode="dialog"` pour activer l'édition dans une boîte de dialogue. Toutes les zones prennent en charge le mode boîte de dialogue. Remarque : L'éditeur de texte enrichi par défaut est toujours employé avec le mode 'édition interne' ou 'imbriqué'. Lorsque le mode 'boîte de dialogue' est utilisé, l'éditeur de texte enrichi sélectionné dans les paramètres de portlet de création, ou dans le modèle de contenu pour les objets de contenu, est utilisé.
`callback=" "`	Ce paramètre est utilisé pour faire référence à une promesse i$. La promesse est résolue si l'édition en ligne est terminée, et elle est rejetée si l'édition en ligne est annulée. Pour plus d'informations sur les promesses i$, reportez-vous à la documentation Javadoc. Par exemple: Un rappel standard peut être écrit sous la forme suivante : `var myCallBack=new i$.Promise(); myCallBack.then(function(){window.alert('resolved')}, function(){window.alert('rejected')});return myCallBack;` Si `myCallBack` figure dans une promesse `i$`, le rappel peut être écrit comme suit : `myCallBack`. Une fonction qui renvoie elle-même une nouvelle promesse chaque fois qu'elle est exécutée peut être écrite comme suit : `return (function() {var myCallBack = new i$.Promise(); myCallBack.then(function() {window.alert('resolved');}, function() {window.alert('rejected');}); return myCallBack;})();`
`stateChangeCallback=" "`	Ce paramètre est utilisé pour faire référence à des rappels de changement d'état JavaScript pour tous les changements d'état. Consultez la documentation Javadoc pour plus d'informations. Par exemple, pour spécifier `stateChangeCallback="myStateChangeCallback"`, vous pouvez créer la fonction de rappel de changement d'état suivante : /** * : ID de la région de l'élément d'édition en cours * état : nouvel état * additionalData : données supplémentaires, telles qu'un type de balise, un nom d'élément, des messages */ function myStateChangeCallback(element, state, additionalData) State Constants: // loading value StateChangeEvent.STATE_LOADING = 0; // editing StateChangeEvent.STATE_EDITING = 1; // saving StateChangeEvent.STATE_SAVING = 2; // saved StateChangeEvent.STATE_SAVED = 3; // cancelled StateChangeEvent.STATE_CANCELLED = 4; // error StateChangeEvent.STATE_ERROR = 5; La fonction JavaScript enregistrée est exécutée à chaque changement d'état. Remarque : L'état de chargement est exécuté uniquement la première fois qu'un utilisateur édite l'élément.
`refreshValueOnEdit=" "`	Ce paramètre force l'actualisation de la valeur de balise lorsque la zone est éditée par un utilisateur. Ce paramètre est activé par défaut. Si vous souhaitez désactiver cette fonction, affectez la valeur false à ce paramètre. Restriction : Si ce paramètre a pour valeur false, il n'existe aucun état de chargement pour la zone.
`class=" "`	Ce paramètre permet d'indiquer une classe CSS à la balise div ou span spécifiée à l'aide du paramètre de format. Remarque : La classe personnalisée que vous indiquez ici doit inclure des styles nommés "saving", "editing" et "error." Ces paramètres sont requis pour afficher la zone modifiable en mode édition, lors de l'enregistrement d'un élément, et pour afficher les messages d'erreur. La classe css par défaut utilisée pour les zones modifiables à la volée est wcm-default-inplace-editable. Cette classe peut être remplacée en ajoutant le paramètre suivant dans le service `WCM WCMConfigService` à l'aide de la console WebSphere®Integrated Solutions Console : `inplaceEdit.defaultClasses=class1 class2` Toutes les classes requises sont ajoutées à ce paramètre, séparées par des espaces. Vous devez baser vos classes personnalisées sur la feuille de style par défaut située dans le répertoire `AppServer_root\installedApps\nodename\wcm.ear\wcm-inplaceEdit.war\css\default-style.css`. Remarque : Toutes les classes indiquées dans la balise EditableElement ou EditableProperty sont prioritaires sur cette valeur. Si vous devez également utiliser la classe css par défaut, ajoutez-le à la liste des classes. Par exemple: `inplaceEdit.defaultClasses=wcm-default-inplace-editable class1 class2`
`placeholder=" "`	Le texte entré pour ce paramètre s'affiche lorsqu'il n'existe pas de valeur initiale pour le corps de la zone de propriété modifiable. Par exemple: `placeholder="Enter title"` Vous pouvez également l'utiliser conjointement avec un fournisseur de texte pour restituer le texte traduit. Par exemple: `placeholder="[Plugin:TextProvider provider="com.mycompany.mybundle" key="enter_title"]"` Ces valeurs spéciales sont utilisées pour restituer le texte provenant de sources existantes : placeholder="useName" Ce paramètre permet de rendre le nom de la propriété. placeholder="useTitle" Ce paramètre permet de rendre le titre de la propriété. placeholder="useHelpText" Ce paramètre permet de rendre le texte d'aide de la propriété. placeholder="useNone" Ce paramètre permet de n'afficher aucune marque de réservation.

Le texte supplémentaire, le code HTML ou les balises doivent être ajoutés entre les balises [EditableProperty] et [/EditableProperty]. Le texte et les balises ajoutés ici sont ce qui s'affiche sur la page. Lorsque la page est en mode édition, cette région est modifiable. Lorsqu'elle est ajoutée pour la première fois à votre conception, une balise de propriété correspondante est ajoutée par défaut.

Par exemple, pour créer un titre modifiable, utilisez les balises suivantes :

[EditableProperty type="content" context="current" field="title"]
<h1>[Property type="content" context="current" field="title"]</h1>
[/EditableProperty]

L'ajout de la valeur pre="true" à la balise de propriété modifiable force la propriété modifiable à conserver le formatage de ligne qui est saisi par l'utilisateur. Par exemple, si un utilisateur saisit des retours à la ligne, ces derniers sont conservés lorsque la zone est sauvegardée. Cette fonction ne s'applique qu'à la zone Description. Ce paramètre doit également être ajouté à la balise de propriété pour que les retours à la ligne soient également rendus.

Par exemple:

[EditableProperty type="content" context="current" field="description" pre="true"]
[Property type="content" context="current" field="description" pre="true"]
[/EditableProperty]

Remarque : Les paramètres context de portalContext et portalMapping ne peuvent pas être utilisés avec la balise editable property. Ce contexte s'applique à la fois à la balise editable property et aux autres balises référencées entre les balises [EditableProperty] et [/EditableProperty].