function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
mohammadd ismailmohammadd ismail 

styling of vf page

Can someone help me how to make styling fields as required for a visual force page.

thanks in advance.
Best Answer chosen by mohammadd ismail
NagendraNagendra (Salesforce Developers) 
Hi Ismail,

Please find the sample code below.

VisualForce Page:
<apex:page standardController="Contact" extensions="RequiredStylingExt">
  <style>
    .requiredBlock {
       background-color:#CC0000;
       bottom:1px;
       left:-4px;
       position:absolute;
       top:1px;
       width:3px;
    }

    .requiredInput {
       height:100%;
       position:relative;
    }
  </style>
  
  <apex:sectionHeader title="Create Contact" />
  <apex:pageMessages />
  <apex:form >
    <apex:pageBlock mode="mainDetail">
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" />
        <apex:commandButton value="Cancel" action="{!cancel}" />
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="Details">
        <apex:inputField value="{!contact.Salutation}"/>
        <apex:inputField value="{!contact.FirstName}"/>
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Last Name"/>
          <apex:outputPanel id="detailrequiredpanel" layout="block" styleClass="requiredInput">
            <apex:outputPanel layout="block" styleClass="requiredBlock" />
            <apex:inputText value="{!Contact.LastName}"/>
          </apex:outputPanel>
        </apex:pageBlockSectionItem>
        <apex:inputField value="{!contact.phone}" />
        <apex:inputField value="{!contact.email}" />
        <apex:inputField value="{!contact.fax}" />
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Controller Page:
public with sharing class RequiredStylingExt 
{
    // the standard controller that is being extended
    private ApexPages.StandardController stdCtrl;
    
    // constructor
    public RequiredStylingExt(ApexPages.StandardController std)
    {
        stdCtrl=std;
    }
    
    // Validates that the contact name and one of email/phone is provided before 
    // delegating to the standard controller save method
    public PageReference save()
    {
        Contact cont=(Contact) stdCtrl.getRecord();
        Boolean error=false;
        
        if (String.IsBlank(cont.name))
        {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Please enter the contact name'));
            error=true;
        }
        
        if ( (String.IsBlank(cont.Email)) && (String.IsBlank(cont.Phone)) )
        {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Please supply the email address or phone number'));
            error=true;
        }
        
        PageReference result=null;
        if (!error)
        {
            result=stdCtrl.save();
        }
        
        return result;
    }

}

Please make sure to mark this post as solved if it helps.

Best Regards,
Nagendra.P

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Ismail,

Please find the sample code below.

VisualForce Page:
<apex:page standardController="Contact" extensions="RequiredStylingExt">
  <style>
    .requiredBlock {
       background-color:#CC0000;
       bottom:1px;
       left:-4px;
       position:absolute;
       top:1px;
       width:3px;
    }

    .requiredInput {
       height:100%;
       position:relative;
    }
  </style>
  
  <apex:sectionHeader title="Create Contact" />
  <apex:pageMessages />
  <apex:form >
    <apex:pageBlock mode="mainDetail">
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" />
        <apex:commandButton value="Cancel" action="{!cancel}" />
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="Details">
        <apex:inputField value="{!contact.Salutation}"/>
        <apex:inputField value="{!contact.FirstName}"/>
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Last Name"/>
          <apex:outputPanel id="detailrequiredpanel" layout="block" styleClass="requiredInput">
            <apex:outputPanel layout="block" styleClass="requiredBlock" />
            <apex:inputText value="{!Contact.LastName}"/>
          </apex:outputPanel>
        </apex:pageBlockSectionItem>
        <apex:inputField value="{!contact.phone}" />
        <apex:inputField value="{!contact.email}" />
        <apex:inputField value="{!contact.fax}" />
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Controller Page:
public with sharing class RequiredStylingExt 
{
    // the standard controller that is being extended
    private ApexPages.StandardController stdCtrl;
    
    // constructor
    public RequiredStylingExt(ApexPages.StandardController std)
    {
        stdCtrl=std;
    }
    
    // Validates that the contact name and one of email/phone is provided before 
    // delegating to the standard controller save method
    public PageReference save()
    {
        Contact cont=(Contact) stdCtrl.getRecord();
        Boolean error=false;
        
        if (String.IsBlank(cont.name))
        {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Please enter the contact name'));
            error=true;
        }
        
        if ( (String.IsBlank(cont.Email)) && (String.IsBlank(cont.Phone)) )
        {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Please supply the email address or phone number'));
            error=true;
        }
        
        PageReference result=null;
        if (!error)
        {
            result=stdCtrl.save();
        }
        
        return result;
    }

}

Please make sure to mark this post as solved if it helps.

Best Regards,
Nagendra.P
This was selected as the best answer
mohammadd ismailmohammadd ismail
thanks nagendra.