Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

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

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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. Escriba AccountEdit para el nombre de página.
  2. En el editor, sustituya cualquier marcado 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 cambios. Debe abrirse una nueva ventana, que muestra un formulario con un campo vacío único en el cuerpo.
  4. En la ventana de vista previa, agregue el Id. para una cuenta en la URL y pulse Intro. La URL debería ser algo así: https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes

Ahora debería ver el nombre de la cuenta en el campo de formulario. 

Un formulario básico para modificar el nombre de cuenta

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

Puede que no lo parezca, pero en una media docena de líneas de marcado 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 un elemento 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. Esto ocurre mediante una expresión que hace referencia al campo relevante en el atributo value. La expresión es {!Account.Name }. Seguramente ya se haya dado cuenta de que se trata del campo Name (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>, se conecta <apex:commandButton> con su acción haciendo referencia al método de acción que se va a 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 le parezca más familiar.

En el componente <apex:form>, incluya los dos elementos de formulario en las etiquetas <apex:pageBlock> y <apex:pageBlockSection>, de manera que su marcado 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>, estos adoptan el estilo visual de la plataforma.

  1. Debajo del campo de nombre de cuenta, agregue tres campos más de modo que su marcado 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 real más completo con el que trabajar. Modificar formulario de cuenta con estilo de plataforma

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 sector, 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 que gestione 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 todo eso por usted. Todo lo que necesita hacer es indicar dónde colocar los mensajes en la página.

  1. En 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.

Modificar cuentas con mensajes de error de 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.

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. 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. En la siguiente etiqueta de cierre </apex:pageBlock>, agregue el siguiente marcado.
    <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. Modificar cuenta con registros de contacto relacionados
  2. Pruebe a hacer clic en el vínculo Modificar de 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 los 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, no solo <apex:inputField>. <apex:inputField> funciona bien con el controlador estándar y para la modificación directa de datos del 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, lo mejor es obtener información acerca de algunas de las demás opciones. La mayoría de estos componentes tiene nombres que comienzan con apex:input y puede encontrarlos agrupados juntos en la referencia del componente. Para seleccionar controles de botón de opción y listas, busque los componentes con nombres que comienzan por apex:select.

Para interfaces de usuario pensadas para su uso en dispositivos móviles, le recomendamos 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 se adapten a 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, hemos podido 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 a 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í mismo. Para ello, tendrá que redactar algún código de controlador personalizado propio.

Recursos

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios