Creación de un código de propiedad editable

Se utiliza un código de propiedad editable para hacer que los campos y los metadatos de los elementos de contenido y las áreas de sitio sean editables al representarse utilizando un portlet del visor de contenido web cuando la página se encuentra en la modalidad de edición.

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

[/EditableProperty]

1. Pulse Insertar un código en una plantilla de presentación, o en un campo de diseño de elemento o componente. Se abre el diálogo Ayudante de código.
2. Seleccione EditableProperty como tipo de código.
3. Seleccione un tipo de propiedad. Este parámetro se añade al código como parámetro field=" ":
   Nota: Sólo estos tipos de propiedades son editables:

   • Título
   • Nombre
   • Descripción
   • Autores
   • Propietarios
   • PublishDate
   • ExpiryDate
   • GeneralDateOne
   • GeneralDateTwo
4. Seleccione el tipo de elemento y el contexto utilizados para determinar a qué elemento se hace referencia:

   Tabla 1. Matriz de contextos y tipos de elemento

   Context and Item Type	type="auto"	type="content"	type="sitearea"	type="parent"	type="top"
   context="Selected" Si se selecciona, el contexto lo establece el elemento seleccionado. Selecciona un elemento pulsando Seleccionar. Este parámetro se añade al código como parámetro name=" ":	Este parámetro hará editable a la propiedad del elemento seleccionado cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del elemento de contenido seleccionado cuando la página esté en modalidad de edición. Si se selecciona un área de sitio, no se editará nada.	Si el elemento seleccionado es un área de sitio, entonces éste hará editable a la propiedad del área de sitio cuando la página esté en modalidad de edición. Si el elemento seleccionado es un elemento de contenido, entonces éste hará editable a la propiedad del área de sitio padre del elemento de contenido cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del padre del elemento seleccionado cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del primer elemento de la vía de acceso del elemento seleccionado cuando la página esté en modalidad de edición.
   context="Current" Si se selecciona, el contexto lo establece el elemento actual.	Este parámetro hará editable a la propiedad del elemento que se está representando actualmente cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del elemento de contenido actual cuando la página esté en modalidad de edición. Si se selecciona un área de sitio, no se editará nada.	Si el elemento que se está representando actualmente es un área de sitio, entonces éste hará editable la propiedad del área de sitio actual cuando la página esté en modalidad de edición. Si el elemento que se está representando actualmente es un elemento de contenido, entonces éste hará editable la propiedad del área de sitio padre cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del área de sitio padre del elemento que se está representando actualmente cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del primer elemento de la vía de acceso del elemento que se está representando actualmente cuando la página esté en modalidad de edición.
   context="Autofill" Utilice esta opción cuando el elemento al que se hace referencia se determina mediante los parámetros de búsqueda de un componente de taxonomía, menú o navegador. Si el código no se utiliza dentro de un componente de menú, navegador o taxonomía, el contexto volverá a ser el del elemento actual.	Este parámetro hará editable a la propiedad del elemento devuelto por un componente de menú, navegador o taxonomía cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del elemento de contenido devuelto por un componente de menú, navegador o taxonomía cuando la página esté en modalidad de edición. Si se selecciona un área de sitio, no se editará nada.	Si el elemento actual que devuelve un componente de menú, navegador o taxonomía es un área de sitio, la propiedad del área de sitio será editable cuando la página esté en modalidad de edición. Si el elemento actual devuelto por un componente de menú, navegador o taxonomía es un elemento de contenido, éste hará editable a la propiedad del área de sitio padre cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del elemento padre del elemento devuelto por un componente de menú, navegador o taxonomía cuando la página esté en modalidad de edición.	Este parámetro hará editable a la propiedad del primer elemento de la vía de acceso del elemento devuelto por un componente de menú, navegador o taxonomía cuando la página esté en modalidad de edición.

5. Seleccione si se deben incluir las secciones de inicio y fin. Se puede especificar texto adicional entre las secciones de inicio y fin del código, y otros códigos de contenido web como un código de elemento o componente.
6. Pulse Aceptar para añadir el código al diseño de navegador.

Qué hacer a continuación

Al añadir este código al diseño, podrá también añadir los siguientes parámetros al código:

Tabla 2. Parámetros adicionales del código

Parámetros de código	Detalles
name=" "	Se debe especificar el nombre del elemento al que se está haciendo referencia cuando context="selected". Si especifica name="./itemName", la vía de acceso actual no se resuelve hasta que no se represente el elemento. Esto lleva algo más de tiempo en resolverse que especificar la vía de acceso en el elemento.
format=" "	Si especifica format="div", la región editable se representará dentro de un código div. Si no se especifica ningún formato, se utilizado un código div predeterminado. If you specify format="span", the editable region is rendered within a span tag.
pre=" "	Establezca pre="true" para habilitar el soporte multilínea. Este valor solo afecta al campo de descripción. Si está habilitado, se reconocerán los saltos de línea introducidos a partir de las ediciones del usuario en el campo de descripción cuando se represente. Si no se especifica, el valor predeterminado es false.
mode=" "	Este parámetro determina la modalidad de edición en línea. Especifique mode="inplace" para habilitar la edición in situ de una propiedad. No todos los campos admiten la modalidad directa. Si una propiedad no tiene soporte para la modalidad in situ, se utiliza la modalidad de diálogo en su lugar. Especifique mode="embed" para habilitar la edición incluida de una propiedad. No todos los campos soportan la modalidad incluida. Si una propiedad no tiene soporte para la modalidad incluida, se utiliza la modalidad de diálogo en su lugar. Especifique mode="dialog" para habilitar la edición en un diálogo. Todos los campos soportan la modalidad de diálogo. Nota: El editor de texto enriquecido predeterminado siempre se utiliza con las modalidades 'inplace' o 'embed' que se utilizan. Cuando se utiliza la modalidad 'dialog', se utiliza el editor de texto enriquecido seleccionado en los valores del portlet de creación o en la plantilla de contenido para elementos de contenido.
callback=" "	Este parámetro se utiliza para hacer referencia a la promesa de i$. La promesa se resuelve si se completa la edición en línea y se rechaza si se cancela la edición en línea. Consulte Javadoc para obtener más información sobre las promesas de i$. Por ejemplo: Una devolución de llamada estándar puede escribirse de este modo: var myCallBack=new i$.Promise(); myCallBack.then(function(){window.alert('resolved')}, function(){window.alert('rejected')});return myCallBack; Si myCallBack es una promesa de i$, la devolución de llamada se puede escribir de este modo: myCallBack. Una función que devuelve una nueva promesa cada vez que se ejecuta se puede escribir de este modo: return (function() {var myCallBack = new i$.Promise(); myCallBack.then(function() {window.alert('resolved');}, function() {window.alert('rejected');}); return myCallBack;})();
stateChangeCallback=" "	Este parámetro se utiliza para hacer referencia a las devoluciones de llamada de cambio de estado de JavaScript para todos los cambios de estado. Consulte Javadoc para obtener más información. Por ejemplo, para especificar stateChangeCallback="myStateChangeCallback", puede crear la siguiente función de devolución de llamada de cambio de estado. /** * element: id of the current editing element region * state : the new state * additionalData: some additional data like tag type, element name, 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 función JavaScript registrada se ejecuta cada vez que cambia el estado. Nota: El estado de carga solo se ejecuta la primera vez que un usuario edita el elemento.
refreshValueOnEdit=" "	Este valor fuerza que se renueve el valor de código cuando un usuario edita el campo. De forma predeterminada, este valor está activado. Si desea inhabilitar esta función, establezca el valor en false. Restricción: Si se define como false, no habrá ningún estado de carga para el campo.
class=" "	Este parámetro se utiliza para especificar una clase CSS para el código div o span especificado utilizando el parámetro de formato. Nota: La clase personalizada que especifica aquí debe incluir los estilos con los nombres "guardar", "editar" y "error". Estos parámetros son necesarios para la visualización del campo editable en modalidad de edición, cuando se guarda un elemento y al visualizar mensajes de error. La clase CSS predeterminada utilizada por los campos editables in situ es wcm-default-inplace-editable. Esta clase se puede alterar temporalmente añadiendo la configuración siguiente al servicio WCM WCMConfigService que utiliza WebSphere Integrated Solutions Console: inplaceEdit.defaultClasses=class1 class2 Se añaden a esta configuración tantas clases como sean necesarias, separadas por espacios. Debe basar las clases personalizadas en la hoja de estilo predeterminada que se encuentra en AppServer_root\installedApps\nodename\wcm.ear\wcm-inplaceEdit.war\css\default-style.css. Nota: Cualquier clase especificada en el código EditableElement o EditableProperty prevalece sobre este valor. Si necesita utilizar también la clase CSS predeterminada, añádala a la lista de clases. Por ejemplo: inplaceEdit.defaultClasses=wcm-default-inplace-editable class1 class2
placeholder=" "	El texto especificado aquí se muestra cundo no hay valor inicial para el cuerpo del campo de propiedad que se puede editar. Por ejemplo: placeholder="Enter title" También se puede utilizar en combinación con un proveedor de texto para representar texto traducido. Por ejemplo: placeholder="[Plugin:TextProvider provider="com.mycompany.mybundle" key="enter_title"]" Estos valores especiales se utilizan para representar texto desde orígenes existentes: placeholder="useName" Este parámetro representará el nombre de la propiedad. placeholder="useTitle" Este parámetro representa el título de la propiedad. placeholder="useHelpText" Este parámetro representará el texto de ayuda de la propiedad. placeholder="useNone" Este parámetro no muestra ningún marcador de posición.

Se debe añadir texto adicional, HTML o códigos entre los códigos [EditableProperty] y [/EditableProperty]. El texto y los códigos añadidos aquí son los que se representan en el página. Cuando la página esté en modalidad de edición, esta región será editable. Cuando se añade primero al diseño, un código de propiedad correspondiente se añade de forma predeterminada.

Por ejemplo, para hacer un título editable, utilice los siguientes códigos:

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

Añadir pre="true" al código de propiedad editable obliga a la propiedad editable a mantener el formato de línea que el usuario ha especificado que debían conservarse. Por ejemplo, si un usuario introduce saltos de línea, estos se preservan cuando se guarda el campo. Esta característica solo afecta al campo de descripción. Este parámetro debería añadirse al código de propiedad para que también se representen los saltos de línea.

Por ejemplo:

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

Nota: Los valores del contexto de portalContext y portalMapping no se pueden utilizar con la etiqueta de propiedad editable. Este contexto se aplica al código de propiedad editable en sí mismo, y a otros códigos a los que se hace referencia entre los códigos [EditableProperty] y [/EditableProperty].