En la última entrada en Español estuvimos aprendiendo como empezar con Apex y Visualforce. Mostramos una nueva página con algunos campos del objeto Cuenta (Account). Hoy veremos cómo pasar de campos de lectura a escritura.

Lo primero de todo, intentaremos cambiar los campos que teníamos en la pantalla anterior a modo escritura. Para ello lo único que tenemos que hacer es utilizar un tag diferente: apex:outputField

En este caso, la página se llamará accountedit ya que la vamos a utilizar para modificar la información que ofrece.

<!-- accountedit -->
<apex:page standardController="Account">
  <apex:form >
    <apex:pageBlock title="Vista Cuenta">
      <apex:pageBlockSection title="Campos Cuenta">
        <apex:inputField value="{!account.name}"/>
        <apex:inputField value="{!account.site}"/>
        <apex:inputField value="{!account.type}"/>
        <apex:inputField value="{!account.accountNumber}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Si escribimos una Url similar a esta:

https://<instancia>salesforce.com/apex/accountedit

vemos como ahora tenemos unos cuadros de texto donde añadir la información.

De igual forma que en la anterior entrada, si queremos ver la información de una cuenta en concreto para modificarla, debemos simplemente añadir el Id único de la misma, en la url.

Si haces una búsqueda en Google y pones algo del tipo “añadir campo de escritura en mi visualforce” aparecerá otro tag que también podrías usar: apex:outputText

¿Cual es la diferencia entre ambos tag si el resultado es el mismo? La principal es que outputField va a respetar el tipo de campo que quieras mostrar, mientras que outputText añade eso, un texto. Veamos un ejemplo que es bastante claro.

<apex:page standardController="Account">
  <apex:form >
    <apex:pageBlock title="Vista Cuenta">
      <apex:pageBlockSection title="Campos Cuenta">
        <apex:outputText value="{!account.type}"/>
        <apex:outputField value="{!account.type}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

En el código de arriba vemos como queremos mostrar un campo de tipo picklist en nuestra página visualforce. Uno con outputField y el segundo es outputText. ¿Cual es el resultado?

En campos de tipo lectura no podemos encontrarla ya que muestra simplemente el valor que hay almacenado en base de datos. Sin embargo en el caso de escritura, la diferencia es mayor

Mientras que la en la primera opción muestra sólo un texto, el valor asociado a ese campo en el registro, en la segunda se puede desplegar el campo y visualizar todas las opciones que ofrece.

<apex:page standardController="Account">
  <apex:form >
    <apex:pageBlock title="Vista Cuenta">
      <apex:pageBlockSection title="Campos Cuenta">
        <apex:inputText value="{!account.type}"/>
        <apex:inputField value="{!account.type}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Esto no significa que no debamos usar outputText ó inputText, simplemente que en determinados casos, es preferible ouputField / inputField, ya que proporcionamos una mejor experiencia al usuario final.

¿Intentamos añadir más información a nuestras primeras páginas Visualforce? Algo que también nos puede interesar es mostrar información de los objetos relacionados. De igual forma que la página standard de Cuenta muestra las Oportunidades que están relacionadas con esa Account, ahora queremos mostrar esas Oportunidades en nuestra página Visualforce. Para ello utilizaremos el tag: apex:relatedList

En este caso, el tag deberemos ponerlo fuera del tag apex:form y simplemente añadir el nombre API del objeto. A partir de ese momento, Salesforce se encarga de todo el trabajo por nosotros.

 <apex:page standardController="Account">
   <apex:form >
     <apex:pageBlock title="Vista Cuenta">
       <apex:pageBlockSection title="Campos Cuenta" columns="2">
         <apex:outputField value="{!account.name}"/>
         <apex:outputField value="{!account.site}"/>
         <apex:outputField value="{!account.type}"/>
         <apex:outputField value="{!account.accountNumber}"/>
       </apex:pageBlockSection>
     </apex:pageBlock>
   </apex:form>
   <apex:relatedList list="Opportunities" />
</apex:page>

En el caso de que queramos tener la opción de modificar alguno de los valores des esta lista relacionada, necesitaremos añadir código Apex y un Controlador. Pero esto es algo que veremos en la próxima entrada. Hoy continuaremos sólo con acciones que podamos llevar a cabo con el Controlador Standard de los objetos.

Uno de los últimos pasos que vamos a dar hoy será guardar en base de datos las modificaciones que hacemos en uno de los campos. Para ello, añadiremos un botón a nuestra página mediante el tag: apex:commandbutton Revisa este tag porque es muy interesante, ya que con sus atributos puedes indicar si mostrar el botón solo en la parte de arriba de la pantalla ó en ambos lados (por defecto los muestra en los dos).

<!-- accountedit -->
<apex:page standardController="Account">
  <apex:form >
    <apex:pageBlock title="Vista Cuenta">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" value="Save"/>
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="Campos Cuenta">
        <apex:inputField value="{!account.name}"/>
        <apex:inputField value="{!account.site}"/>
        <apex:inputField value="{!account.type}"/>
        <apex:inputField value="{!account.accountNumber}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

El atributo value nos permite indicar qué nombre le queremos poner al botón y el atributo action llamará al proceso que queremos ejecutar. Como seguimos trabajando con el Controlador Standard del objeto, simplemente debemos añadir “save” y Salesforce se encarga de realizar la acción de guardado por nosotros.

Y después de modificar el valor de Account Number por 124 y darle al botón Save, accountview page muestra:

¿Qué otras acciones nos permite Salesforce? En este link encontramos información sobre ellas, pero básicamente son:

• Save
• QuickSave
• Edit
• Delete
• Cancel
• List

 

Por ultimo, una ayuda para tener que evitar modificar el id de la cuenta cada vez que queremos mostrar un registro distinto. Si hemos creado estas páginas es porque queremos ofrecer esta vista al usuario final en vez de la standard. En ese caso, Salesforce nos permite sobre escribir estas vistas en el objeto.

Si vamos a:

Setup | Customize | Accounts | Buttons, Links and Actions

Modificaremos las vistas View y Edit

En el caso de que queramos hacer lo mismo con un objeto creado por nostros, custom, en vez de Standard, solo tenemos que ir a

Setup | Create | Objects | <selecciona tu objecto> 

Y desde ahí baja a la sección Buttons,Links and Actions. La sobre escritura de la página se haría de forma similar a un objeto Standard.

En este post hemos aprendido:

• Como crear una página editable
• Diferencia entre inputField vs inputText y outputField vs outputText
• Como añadir lista de un objeto relacionado a Cuenta
• Como guarder modificaciones en la página de editado
• Como evitar modificar la url con el id cada vez que quiero mostrar un registro

Y todo esto sin añadir una línea de código en Apex, solo Visualforce, ya que hemos usado el controlador Standard que los objetos nos ofrecen.