Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

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.

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 FileNew Visualforce Page (Archivo | Nuevo | 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 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 resultante debe ser algo así: https://SalesforceInstance/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes Ahora debe 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 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 <apex:commandButton> action.

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.

  1. 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 etiquetas <apex:pageBlock> y <apex:pageBlockSection>, adoptan el estilo visual de la plataforma.
  2. 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 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 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. 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.

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 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 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, 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.