Introducir datos utilizando formularios

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Explicar los requisitos esenciales para un formulario de Visualforce.
  
• Distinguir elementos de formulario de Visualforce utilizando el estilo visual de plataforma de aquellos que no lo son.
  
• Indicar cuatro o más etiquetas de formulario de entrada estándar.
  
• Crear un formulario de Visualforce para modificar y guardar registros.
  

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y copie y pegue los valores en español (LATAM). Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Introducción a formularios de Visualforce

La creación y modificación de datos es un aspecto fundamental de cualquier aplicación. Visualforce proporciona todo lo que necesita para crear fácilmente páginas que pueden crear nuevos registros o recuperar un registro, modificar su valor y guardar los cambios de vuelta en la base de datos.

Aquí combinaremos el controlador estándar con el componente <apex:form> y algunos elementos de formulario fáciles de entender para crear una página de modificación de registros bastante sofisticada.

Crear un formulario básico

Utilice <apex:form> y <apex:inputField> para crear una página para modificar datos. Combine <apex:commandButton> con la acción save creada en el controlador estándar para crear un nuevo registro o guardar cambios en uno existente.

Una página que permite a algún usuario modificar y actualizar un registro necesita hacer todo lo siguiente.

• Buscar el registro para modificar y recuperarlo de la base de datos.
  
• Poner los datos de registro relevantes de la página en un formulario de modificación.
  
• Recibir un envío de formulario con datos cambiados.
  
• Validar los nuevos valores.
  
• Guardar cambios válidos de nuevo en la base de datos.
  
• Proporcionar mensajes apropiados a la persona que envía los cambios, si los nuevos datos se guardaron correctamente o si existen errores.
  

Visualforce hace la mayoría de esta cosas por usted de forma automática cuando utiliza el controlador estándar y el componente <apex:form>.

Comencemos por los aspectos básicos.

1. Abra Developer Console y haga clic en File (Archivo) | New (Nuevo) | Visualforce Page (Página de Visualforce) para crear una nueva página de Visualforce. Ingrese AccountEdit para el nombre de página.
   
2. En el editor, sustituya cualquier marca con lo siguiente.
   

   <apex:page standardController="Account">
       <h1>Edit Account</h1>
       <apex:form>
           <apex:inputField value="{! Account.Name }"/>
           <apex:commandButton action="{! save }" value="Save" />
       </apex:form>
   </apex:page>

3. Haga clic en Preview (Vista previa) para abrir una vista previa de su página que podrá ver mientras realiza los cambios. Una nueva ventana debe abrirse, mostrando un formulario con un campo vacío único en le cuerpo.
   
4. En la ventana de vista previa, agregue el Id. para una cuenta en la URL y pulse Intro. La URL debería tener el siguiente aspecto: https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes
   

Ahora debe ver el nombre de la cuenta en el campo de formulario. 

Esto verifica que obtuvo el controlador estándar funcionando con un Id. de registro válido.

Puede que no se parezca mucho, pero en una media docena de líneas de marca obtuvo un formulario completamente funcional para la actualización del nombre de una cuenta. ¡Hagamos la prueba!

Estos son los aspectos esenciales que comprender de este formulario.

• La página utiliza el controlador estándar para cuentas, definido en el componente <apex:page>.
  
• <apex:form> es un componente de Visualforce que incluye todo lo que contiene en algo que se puede enviar de vuelta al servidor como parte de una acción de página. Si necesita enviar datos de vuelta a Salesforce, la mayoría de las veces lo hará en un <apex:form>.
  
• <apex:inputField> crea un campo de formulario en pantalla para el campo de datos del registro asociado con él. Realiza esto mediante una expresión que hace referencia al campo relevante en el atributo value. Aquí esa expresión es {!Account.Name }, que no debería tener ninguna dificultad para adivinar el campo Nombre de la cuenta.
  
• Finalmente, <apex:commandButton> agrega un botón a la interfaz de usuario de la página. Este botón activa una acción cuando se hace clic en él. En este caso, la acción es el método de acción save() en el controlador estándar. Al igual que con <apex:inputField>, conecta <apex:commandButton> con su acción haciendo referencia al método de acción para llamar en una expresión proporcionada al atributo de acción <apex:commandButton>.
  

Agregar etiquetas de campo y estilo de plataforma

Coloque elementos de formulario en etiquetas <apex:pageBlock> y <apex:pageBlockSection> para organizarlos y agruparlos y para que el formulario adopte el estilo visual de la plataforma.

Revisemos su formulario de modo que parezca más familiar.

En el componente <apex:form>, incluya los dos elementos de formulario en las etiquetas <apex:pageBlock> y <apex:pageBlockSection> de modo que su marca tenga este aspecto.

<apex:page standardController="Account">
	<apex:form>
		<apex:pageBlock title="Edit Account">
			<apex:pageBlockSection>
				<apex:inputField value="{! Account.Name }"/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons>
				<apex:commandButton action="{! save }" value="Save" />
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

El estilo para esta versión del formulario es bastante diferente. Al igual que con los componentes de salida, cuando utiliza componentes de entrada en las etiquetas <apex:pageBlock> y <apex:pageBlockSection>, estas adoptan el estilo visual de la plataforma.

1. Debajo del campo de nombre de cuenta, agregue tres campos más de modo que su marca tenga este aspecto.
   

   <apex:pageBlockSection columns="1">
       <apex:inputField value="{! Account.Name }"/>
       <apex:inputField value="{! Account.Phone }"/>
       <apex:inputField value="{! Account.Industry }"/>
       <apex:inputField value="{! Account.AnnualRevenue }"/>
   </apex:pageBlockSection>

   Ahora tiene un formulario más completo y realista con el que trabajar. 
   

El componente <apex:inputField> representa el widget de entrada apropiado basándose en un tipo de campo de objeto estándar o personalizado. Por ejemplo, si utiliza una etiqueta <apex:inputField> para mostrar un campo de fecha, aparece un widget de calendario en el formulario. Si utiliza una etiqueta <apex:inputField> para mostrar un campo de lista de selección, como hicimos aquí en el campo de industria, aparece una lista desplegable en su lugar.

<apex:inputField> se puede utilizar para capturar entradas de usuario para cualquier campo de objeto estándar o personalizado y respeta todos los metadatos establecidos en la definición del campo, como que el campo sea obligatorio o único o si el usuario actual tiene permiso para verlo y modificarlo.

Mostrar mensajes y errores de formulario

Utilice <apex:pageMessages> para mostrar cualquier formulario gestionando errores o mensajes.

Su página debe proporcionar comentarios útiles cuando las cosas van mal, como cuando falta un campo obligatorio o cuando falla la validación de un valor de campo. El controlador estándar gestiona actualmente todo eso por usted. Todo lo que necesita hacer es indicar dónde poner los mensajes en la página.

1. Bajo la etiqueta <apex:pageBlock>, agregue la siguiente línea.
   <apex:pageMessages/>
2. Intente eliminar el nombre de la cuenta y guardar el registro con un nombre en blanco. Se muestran los errores de validación para la página.
   

Como puede ver, <apex:inputField> muestra errores para su propio campo, pero para un formulario más largo, es una buena idea indicar todos los errores de la página en una sola ubicación en la parte superior de la página.

El controlador estándar ya recopila todos los mensajes de la página cuando se procesa el formulario. El componente <apex:pageMessages> le permite mostrar esos mensajes donde considere oportuno.

Modificar registros relacionados

Facilite a los usuarios la tarea de modificar información relacionada proporcionando vínculos a registros relacionados.

Hasta el momento, nuestros formularios solo tienen un registro modificado al mismo tiempo. Más concretamente, como utilizan el controlador estándar para el objeto de cuenta, el formulario solo puede realizar cambios en registros de cuenta.

Este no es siempre el flujo de trabajo más eficiente para los usuarios. Aunque no puede guardar cambios en múltiples tipos de objeto en una solicitud con el controlador estándar, puede facilitar la tarea de navegación a registros relacionados mediante vínculos que realizan acciones, como modificar o eliminar en esos registros.

1. Debajo de la etiqueta de cierre </apex:pageBlock> existente, agregue la siguiente marca.
   

   <apex:pageBlock title="Contacts">
       <apex:pageBlockTable value="{!Account.contacts}" var="contact">
           <apex:column>
               <apex:outputLink
                   value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                   Edit
               </apex:outputLink>
               <apex:outputLink
                   value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                   Del
               </apex:outputLink>
           </apex:column>
           <apex:column value="{!contact.Name}"/>
           <apex:column value="{!contact.Title}"/>
           <apex:column value="{!contact.Phone}"/>
       </apex:pageBlockTable>
   </apex:pageBlock>

   Aparece una lista de los contactos de la cuenta debajo del formulario de modificación de cuenta.
   
2. Pruebe a hacer clic en el vínculo Modificar para un contacto. ¿A dónde le lleva el vínculo? ¿Qué sucede cuando guarda sus cambios o hace clic en cancelar en esa página?
   

El componente <apex:pageBlockTable> crea una tabla con una lista de contactos de la cuenta. Lo nuevo aquí es la columna con los componentes <apex:outputLink>. Estos utilizan una expresión que hace referencia a una variable global, $Action, y la combina con el Id. de contacto dentro de la función URLFOR(). El resultado es un vínculo a la página para modificar o eliminar del contacto dependiendo de la acción a la que se hace referencia. Este puede ser un acceso directo útil para usuarios de este formulario.

Más información…

Existe obviamente una mejor forma de obtener más información acerca de la creación de formularios útiles y utilizables para sus aplicaciones Web.

Para los principiantes, Visualforce ofrece una docena o más de componentes de entrada y no solo <apex:inputField>. <apex:inputField> funciona bien con el controlador estándar y para la modificación directa de datos de registro. Para páginas donde está utilizando su propio código de controlador personalizado o cuando una entrada de formulario no se asigna directamente a campos en un registro, deseará obtener información acerca de algunas de las demás. La mayoría de estos componentes tiene nombres que comienzan con apex:input y puede encontrarlos agrupados juntos en la referencia el componente. Para seleccionar controles de botón de opción y listas, busque los componentes con nombres que comienzan en su lugar por apex:select.

Para interfaces de usuario pensadas para su uso en dispositivos móviles, deseará consultar <apex:input>, que está diseñado para su uso en páginas HTML5 y le permite utilizar una variedad de funciones que hacen que los elementos de usuario de entrada resultantes sean adaptados para dispositivos móviles.

El código que escribió aquí hace uso de un número de acciones proporcionadas por el controlador estándar de la página. Las llamamos acciones estándar y hay bastantes de ellas. Existe un conjunto principal disponible para todos los objetos con controladores estándar, pero muchos de los objetos estándar integrados tienen acciones adicionales que puede utilizar.

Hablando de acciones, pudimos agregar acciones para modificar y eliminar contactos relacionados existentes. ¿Cómo puede agregar la capacidad de crear nuevos contactos relacionados? No es tan sencillo como crear un vínculo utilizando la acción create, que es el modo usado con edit y delete. Esto se debe as que esas acciones funcionaron en registros existentes, que ya tienen una relación con la cuenta asociada. Pero cuando crea un nuevo registro, necesita crear esa relación por sí solo. Esto le requerirá redactar algún código de controlador personalizado propio.

Recursos

• Guía del desarrollador de Visualforce: Uso de componentes de entrada en una página
• Guía del desarrollador de Visualforce: Uso de acciones de controlador estándar
• Guía del desarrollador de Visualforce: Valores válidos para la variable global $Action
• Guía del desarrollador de Visualforce: Controladores estándar