+ Start a Discussion
bujjibujji 

Visualforce UI format

Hi,

 

How can we do the below format in visualforce page.

 

 

I am not getting this format exactly.Its urgent thanks you.

 

Thanks,

Bujji

Best Answer chosen by Admin (Salesforce Developers) 
Abhay AroraAbhay Arora

<apex:pageblock>

<apex:pageBlockSection title="search">

<apex:outputlabel>Search</apex:outputlabel>

<apex:inputText></apex:inputText>

</apex:pageBlockSection>

<apex:pageBlockSection title="Results">

<apex:outputlabel>Search</apex:outputlabel>

<apex:inputText></apex:inputText>

</apex:pageBlockSection>

</apex:pageblock>

 

 

Above is what you need

All Answers

SRKSRK

User the below mention code as ref

 

<apex:page id="thePage" standardController="Lead" extensions="SearchAINewLeadController" tabstyle="Lead" standardStylesheets="true" title="Search Duplicates" showHeader="true" sidebar="false" >
 <apex:form id="theForm1">
    <apex:pageBlock id="thePageBlock1" tabStyle="Lead" >
   
   <apex:pageBlockSection id="thePBSection1" collapsible="false"  >
    

            

    
    <apex:pageBlockSectionItem id="thePBSItem3" >
     <apex:outputLabel id="AccountLabel" for="Account" value="Customer Name" />
     <apex:pageBlockSectionItem id="thePBSItem4" >
       <apex:inputtext id="Account" value="{!accopp}"/>
    <apex:outputLabel value="(Aurobindo Pharma)" />
    </apex:pageBlockSectionItem>  
   
    </apex:pageBlockSectionItem>

   </apex:pageBlockSection>
 
   <apex:pageBlockButtons location="bottom">
         <apex:commandButton id="btnSearch" value="Search" onclick="return check();"  />            
              <apex:actionfunction action="{!search}" id="searchaction" name="searchaction" reRender="redpanel" />
   </apex:pageBlockButtons>
  </apex:pageBlock>
 <apex:outputPanel id="redpanel" rendered="{!showLeadList}">
<apex:PageMessages />
 
   <apex:pageBlock title="Lead Details" tabStyle="Lead">
                <apex:pageBlockTable value="{!lstExistingLead}" var="ld" >                
                    
                    <apex:column width="8%">
                        <apex:facet name="header">
                         Name
                        </apex:facet>
                        <apex:outputlink value="/{!ld.Lead__r.id}">{!ld.Lead__r.Name}</apex:outputlink>
                    </apex:column>
                    
                    <apex:column width="16%">
                        <apex:facet name="header" >
                         Customer name
                        </apex:facet>
                        {!ld.Lead__r.Company}
                    </apex:column>
                                   
                   <apex:column width="16%">
                        <apex:facet name="header" >
                         CAS No.
                        </apex:facet>
                        {!ld.Name}
                    </apex:column>  
                    
                    <apex:column width="16%">
                        <apex:facet name="header" >
                         Product Name
                        </apex:facet>
                        {!ld.Product__r.Name}
                    </apex:column>
                    
                    <apex:column width="16%">
                        <apex:facet name="header" >
                         Lead Status
                        </apex:facet>
                        {!ld.Lead__r.Status}
                    </apex:column>
                       <apex:column width="10%">
                        <apex:facet name="header" >
                         Lead Owner
                        </apex:facet>
                        {!ld.Lead__r.Owner.Name}
                    </apex:column>  
               
                </apex:pageBlockTable>
            </apex:pageBlock>
 
  </apex:outputPanel>
 </apex:form>
</apex:page>

SRKSRK

For me it look like this

bujjibujji

Hi,

 

But i am able to do that. but i want "search" with color on background and "results" on the with color on background.

 

Thanks,

Shaik

 

 

Abhay AroraAbhay Arora

<apex:pageblock>

<apex:pageBlockSection title="search">

<apex:outputlabel>Search</apex:outputlabel>

<apex:inputText></apex:inputText>

</apex:pageBlockSection>

<apex:pageBlockSection title="Results">

<apex:outputlabel>Search</apex:outputlabel>

<apex:inputText></apex:inputText>

</apex:pageBlockSection>

</apex:pageblock>

 

 

Above is what you need

This was selected as the best answer
bujjibujji

Thanks Abhay, can we remove those arrow or bullet before search.

 

Thanks,

Bujji

Abhay AroraAbhay Arora

Yes just use collapsible attribute in your section