Salesforce - Developer - Visualforce - Forms

salesforce-developer-visualforce

https://developer.salesforce.com/docs/atlas.en-us.204.0.pages.meta/pages/pages_quick_start_input_components.htm
https://developer.salesforce.com/docs/atlas.en-us.204.0.pages.meta/pages/pages_controller_std_actions.htm
https://developer.salesforce.com/docs/atlas.en-us.204.0.pages.meta/pages/pages_variables_global_action_valid_values.htm
https://developer.salesforce.com/docs/atlas.en-us.204.0.pages.meta/pages/pages_controller_std.htm
https://developer.salesforce.com/page/Building_Visualforce_Pages_Using_the_Standard_Controller

// Salesforce - Developer - Visualforce - Forms:

Creating and editing data is a fundamental aspect of any app. Visualforce 
provides everything you need to easily create pages that can create new records, 
or retrieve a record, edit its values, and save the changes back to the database.

Here we’ll combine the standard controller with the <apex:form> component and a 
few easy to understand form elements to create a fairly sophisticated record 
editing page.

Use <apex:form> and <apex:inputField> to create a page to edit data. Combine 
<apex:commandButton> with the save action built into the standard controller to 
create a new record, or save changes to an existing one.  A page that lets 
someone edit and update a record needs to do all of the following:

1. Look up the record to edit and retrieve it from the database.

2. Put the relevant record data on the page in an editing form.

3. Receive a form submission with changed data.

4. Validate the new values.

5. Save valid changes back to the database.

6. Provide appropriate messages to the person submitting the changes, whether 
   the new data is saved successfully or if there are errors.

Visualforce does most of these things for you automatically when you use the 
standard controller and the <apex:form> component.

These are the essential aspects of this form to understand:

1. The page uses the standard controller for accounts, defined in the 
   <apex:page> component.

2. <apex:form> is a Visualforce component that packages everything inside it 
   into something that can be sent back to the server as part of a page action. 
   If you need to send data back to Salesforce, most of the time you’ll do it 
   inside an <apex:form>.

3. <apex:inputField> creates an onscreen form field for the record data field 
   that’s associated with it. You do this by providing an expression that 
   references the relevant field in the value attribute. Here that expression 
   is {! Account.Name }, which you should have no difficulty guessing is the 
   account’s Name field.

4. Finally, <apex:commandButton> adds a button to the page’s user interface. 
   This button fires an action when it’s clicked. In this case, the action is 
   the save() action method in the standard controller. Like with 
   <apex:inputField>, you connect the<apex:commandButton> with its action by 
   referencing the action method to be called in an expression provided to the 
   <apex:commandButton> action attribute.

Place form elements within <apex:pageBlock> and <apex:pageBlockSection> tags to 
organize and group them, and to have the form adopt the platform visual style.

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

As with output components, when you use input components within <apex:pageBlock> 
and <apex:pageBlockSection> tags they adopt the platform visual styling. Use 
these tags any time you want your page to look like “standard Salesforce.”

The <apex:inputField> component renders the appropriate input widget based on a 
standard or custom object field’s type. For example, if you use an 
<apex:inputField> tag to display a date field, a calendar widget displays on the 
form. If you use an <apex:inputField> tag to display a picklist field, as we did 
here for the industry field, a drop-down list displays instead.

<apex:inputField> can be used to capture user input for any standard or custom 
object field, and respects any metadata that is set on the field definition, 
such as whether the field is required or unique, or whether the current user 
has permission to view or edit it.

// Display Form Errors and Messages
Use <apex:pageMessages> to display any form handling errors or messages.

Our page should provide useful feedback when things go wrong, such as when a 
required field is missing, or when a field value fails validation. The standard 
controller actually handles all of that for you. All you need to do is tell it 
where to put the messages on the page.

Under the <apex:pageBlock> tag, add the following line:

<apex:pageMessages/>

As you can see, <apex:inputField> displays errors for its own field, but for a 
longer form it’s a nice touch to list all of the page’s errors in one place at 
the top of the page.

The standard controller already collects all of the page’s messages when the 
form is processed. The <apex:pageMessages> component enables you to display 
those messages wherever you see fit.

// Editing Related Records:

We should make it easy for users to edit related information by providing links 
to related records.  So far our forms have only edited one record at a time. 
More specifically, because they use the standard controller for the account 
object, the form can only make changes to account records.

That’s not always the most efficient workflow for users to use. While you can’t 
save changes to multiple object types in one request with the standard 
controller, you can make it easier to navigate to related records by offering 
links that perform actions such as edit or delete on those records.

<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>
            &nbsp;
            <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>

What’s new here is the column with the <apex:outputLink> components. These use 
an expression that references a global variable, $Action, and combines it with 
the contact’s ID inside the URLFOR() function. The result is a link to the 
contact’s edit or delete page, depending on the action referenced. This can be 
a very useful shortcut for users of this form.

Visualforce offers a dozen or so input components, not just <apex:inputField>. 
<apex:inputField> works well with the standard controller and for directly 
editing record data. For pages where you’re using your own custom controller 
code, or when form input doesn’t map directly to fields on a record, you’ll 
want to know about some of the others. Most of these components have names that 
begin with “apex:input”, and you can find them grouped together in the component 
reference. For select lists and radio button controls, look for the components 
with names that start with “apex:select” instead.

Visualforce offers a dozen or so input components, not just <apex:inputField>. 
<apex:inputField> works well with the standard controller and for directly 
editing record data. For pages where you’re using your own custom controller 
code, or when form input doesn’t map directly to fields on a record, you’ll 
want to know about some of the others. Most of these components have names that 
begin with “apex:input”, and you can find them grouped together in the component 
reference. For select lists and radio button controls, look for the components 
with names that start with “apex:select” instead.

The code you wrote here made use of a number of actions provided by the standard 
controller for the page. We call these standard actions, and there are quite a 
few of them. There’s a core set that are available for all objects with standard 
controllers, but many of the built-in standard objects have additional actions 
you can use.

Speaking of actions, you were able to add actions to edit and delete existing 
related contacts. How can you add the ability to create new related contacts? 
It’s not quite as easy as creating a link using the create action, the way you 
did with edit and delete. This is because those actions worked on existing 
records, which already have a relationship to the associated account. But when 
you create a new record, you need to create that relationship yourself. That 
will require you to write some custom controller code of your own.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License