Wednesday, September 6, 2017

Visualforce Componets And Edit The Records in Popup window

Controller:


public with sharing class QuickEditWithComponentController {  
    public boolean displayPopUp {get; set;}  
    public Case caseObj {get; set;}  
    public String stringCase {get; set;}  
    private List <Case> caseList;  
    public PageReference Save() {  
        displayPopUp = false;  
        update caseObj;  
        return null;  
    }  
    public QuickEditWithComponentController() {  
    }  
    public List<Case> getCaseList()  
    {  
        caseList = [Select Id, CaseNumber, Status, Priority, Type, Reason, Origin from Case LIMIT 10];  
        return caseList;  
    }  
    public void closePopup()  
    {  
        displayPopUp = false;  
    }  
    public void editAction()  
    {  
        caseObj = new Map<Id, Case>(caseList).get(stringCase);  
        displayPopUp = true;  
    }  

}




 TableComponen:

   <apex:component >  
             <apex:attribute name="caseListAttribute" description="The type of record we are viewing." type="Case[]"              required="true"/>            
             <apex:pageBlock >  
                <apex:pageBlockTable value="{!caseListAttribute}" var="c" id="pageBockTableId">  
                   <apex:column headerValue="Case Number">  
                     <apex:outputLink value="/{!c.Id}">{!c.CaseNumber}</apex:outputLink>  
                </apex:column>  
             <apex:column headerValue="Status" value="{!c.Status}"/>  
            <apex:column headerValue="Priority" value="{!c.Priority}"/>  
            <apex:column headerValue="Type" value="{!c.Type}"/>  
            <apex:column headerValue="Reason" value="{!c.Reason}"/>  
            <apex:column headerValue="Origin" value="{!c.Origin}"/>  
            <apex:column headerValue="Quick Edit">  
                <apex:commandButton value="Edit" Title="Edit Case" onclick="editButtonPress('{!c.Id}'); return false;" /> 
         </apex:column>  
        </apex:pageBlockTable>  
      </apex:pageBlock>  
    </apex:component>


        QuickEditComponent:

       <apex:component >  
          <apex:attribute name="record" description="The type of record we are viewing." type="Case" required="true"/> 
         <apex:pageBlock > 
        <apex:panelgrid columns="2" id="panelGridId">  
           Case Number :  
           <apex:outputfield value="{!record.caseNumber}" Id="caseNumber"/>   
            Status :   
           <apex:inputfield value="{!record.Status}" Id="statusfield"/>   
           Priority :   
          <apex:inputfield value="{!record.Priority}" Id="priorityField"/>   
           Type :   
           <apex:inputfield value="{!record.Type}" Id="typeField"/>   
           Case Reason : 
           <apex:inputfield value="{!record.Reason}" Id="reasonField"/>   
           Case Origin :  
          <apex:inputfield value="{!record.Origin}" Id="oroginField"/>   
          </apex:panelgrid>  
          </apex:pageBlock>
      </apex:component>
     
         Visualforce Page:

<apex:page controller="QuickEditWithComponentController">  
    <apex:form >  
        <!-- Display Cases -->  
        <c:TableComponent caseListAttribute="{!caseList}"/>   
        <!-- actionFunction to rerender Page component from custom component's button click event-->  
        <apex:actionFunction name="editButtonPress" action="{!editAction}" reRender="popup">  
            <apex:param name="fieldName" assignTo="{!stringCase}" value=""/>  
        </apex:actionFunction>  
        <!-- Quick Case edit panel-->  
        <apex:outputPanel id="popup" >  
            <apex:outputPanel styleClass="quickEditPanel " layout="block"   rendered="{!displayPopUp}">   
                
                
                <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup"/>  
                <c:QuickEditComponent record="{!caseObj}"/>  
                
                <apex:commandButton title="Save Case" value="Save" action="{!Save}" styleClass="saveButton" rerender="pageBockTableId, popup"/>  
            </apex:outputPanel>  
        </apex:outputPanel>  
    </apex:form>  
    <style type="text/css">  
        .quickEditPanel {  
        background-color: white;  
        border-style: solid;  
        border-width: 2px;  
        padding: 10px;  
        position: absolute;  
        z-index: 9999;  
        width: 33%;  
        top: 20%;  
        left: 33%;  
        } 
    </style>
</apex:page>
















No comments:

Post a Comment

Note: Only a member of this blog may post a comment.