+ Start a Discussion
Saikiran KolliSaikiran Kolli 

How to dull or shade a button in visual force page

I'm having a visualforce page with two buttons button 1 and button 2 .
If I click on button1 , button2 should be shaded or darken but it has to be work. same like If I click on button2 , button1 must be shaded or darken but it has to work.
 
UC InnovationUC Innovation
Hi Saikiran,

Try putting a boolean in your controller default to false. Set to tru at the beggining of the meathod handling the button press and check this in the vf page with an if statement in the disabled attribute. Let me know if you need futher help with this and I will be happy to help if you provide some code to work off of.

Hope this helps!

AM
Saikiran KolliSaikiran Kolli
Hi,

The code is shown below. The requirement is If we click the "All Intitaive" button it should be highlighted and the second button "My Intiatives" should be dull but it has to be work. When we click the "My Intitaive" button it should be highlighted and the second button "All Intiatives" should be dull but it has to be work.


Page-----------------------------------------------------------

<apex:page controller="initiativeController"  sidebar="false">
<apex:form >
    <apex:pageBlock title="Initiative Section">

<div align="center" draggable="false" >
      <apex:commandButton value="All Initiatives" action="{!callAllMethods}" />
  
<script type="text/javascript">
window.onload = setFocus
function setFocus() {
              document.getElementById('$!callAllMethods').focus();
              />
}
</script>
        
        
    <apex:commandButton value="My Initiatives" action="{!callMyMethods}"
       />
       </div> 
       
        
      <br><apex:commandButton style=" margin-left:230px; width: 80px; height: 70px; margin-right:150px;" value="Initiatives"/>        
         <apex:commandButton style="width: 80px; height: 70px; margin-right:150px;" value="Sensors"/>
         <apex:commandButton style="width: 80px; height: 70px; margin-right:150px;" value="Active"/>
           <apex:commandButton style="width: 80px; height: 70px; margin-right:150px;" value="Completed"/>
           <apex:commandButton style="width: 80px; height: 70px; margin-right:200px;" value="Future"/></br>
           
           
        <!--    <apex:image url="{!$Resource.UP}" width="25%" height="25%"/>  -->

        <apex:pageBlockSection id="pageblock" columns="1" collapsible="true">
            <apex:pageblockTable value="{!initiative}" var="a">
                <apex:column value="{!a.Name}"/>
                <apex:column value="{!a.Start_Date__c}"/>
                <apex:column value="{!a.End_Date__c}"/>
                <apex:column value="{!a.No_Of_Milestones__c}"/>
                
                <apex:column value="{!a.No_of_Sensors__c}"/>
                <apex:column value="{!a.Sensing_Trend__c}"/> 
            </apex:pageblockTable>      
        </apex:pageBlockSection>
        <!--The below section is for displaying All Initiatives -->
        <!-- Created by Harsha at 11/13/2016 as per requirement gather from Ticket #3233-->
        <!-- Started Changing the code -->
        
        <apex:pageBlockSection id="initiative" columns="1" collapsible="true">
            <apex:pageblockTable value="{!initiatives}" var="a">
                <apex:column value="{!a.Initiative_Type__c}"/>
                <apex:column value="{!a.Initiative_Goal__c}"/>
                <apex:column value="{!a.Name}"/>
                <apex:column value="{!a.Description__c}"/>
                <apex:column value="{!a.Visibility_Level__c}"/>
                <apex:column value="{!a.Criticality__c}"/>
                <apex:column value="{!a.Profile__c}"/>
                <apex:column value="{!a.Start_Date__c}"/>
                <apex:column value="{!a.End_Date__c}"/>
                <apex:column value="{!a.Parent_Initiative__c}"/>
                <apex:column value="{!a.Projected_Investment__c}"/>
                <apex:column value="{!a.Projected_Duration__c}"/>
                <apex:column value="{!a.Projected_Effort__c}"/>
                <apex:column value="{!a.No_Of_Milestones__c}"/>
                <apex:column value="{!a.No_of_Sensors__c}"/>
                <apex:column value="{!a.Sensing_Trend__c}"/>
                <apex:column value="{!a.Owner_Feedback__c}"/> 
            </apex:pageblockTable>      
        </apex:pageBlockSection> 
        
        <!-- Ended Changing the Code -->
             <apex:pageBlockSection id="milestones" columns="1" collapsible="true">
            <apex:pageblockTable value="{!milestone}" var="a">
                <apex:column value="{!a.For_Initiative__c}"/>
                <apex:column value="{!a.Allocated_Points__c}"/>
                <apex:column value="{!a.For_Initiative_Milestone__c}"/>
                <apex:column value="{!a.Participant_Type__c}"/>
                <apex:column value="{!a.Registered_Date__c}"/> 
                <apex:column value="{!a.Sensor_Status__c}"/>  
                <apex:column value="{!a.Weightage__c}"/>        
            </apex:pageblockTable>      
        </apex:pageBlockSection>        
    </apex:pageBlock>
</apex:form> 
</apex:page>

Controller---------------------------------------------------------

public class initiativeController {

       boolean isAllButtonDisabled = false;
    boolean isMyButtonDisabled = false;
    
    public list<Initiative__c> initiative{get; set;}
    public list<Milestone_Sensor__c> milestone{get; set;}                          
                                                                                   
    public list<Initiative__c> initiatives{get; set;}
                                                                                                       
    public initiativeController(){
        initiative = [SELECT id,    
               Initiative_Type__c,
               Initiative_Goal__c,
               Name,
               Description__c,
               Visibility_Level__c,
               Criticality__c,
               Profile__c,
               Start_Date__c,
               End_Date__c,
               Parent_Initiative__c,
               Projected_Investment__c,
               Projected_Duration__c,
               Projected_Effort__c,
               No_Of_Milestones__c,
               No_of_Sensors__c,
               Sensing_Trend__c,
               Owner_Feedback__c
               from Initiative__c];
        system.debug('Query Records:'+initiative);
    }
    

    public PageReference callMyMethods() {
         myInitiatives();
          create();
          return null;
}

    public PageReference callAllMethods() {
          allInitiatives();
          save();
          return null;
}

  
    public PageReference myInitiatives()
    {
    
        milestone = [SELECT id,
                     For_Initiative__c,
                     Allocated_Points__c, 
                     For_Initiative_Milestone__c,
                     Participant_Type__c,
                     Registered_Date__c,
                     Sensor_Status__c   ,
                     Weightage__c
                    from Milestone_Sensor__c];
        system.debug('Query Records:'+milestone);
        return null;
      }  
      
          public PageReference allInitiatives()
    {
    
   initiatives = [SELECT id,
               Initiative_Type__c,
               Initiative_Goal__c,
               Name,
               Description__c,
               Visibility_Level__c,
               Criticality__c,
               Profile__c,
               Start_Date__c,
               End_Date__c,
               Parent_Initiative__c,
               Projected_Investment__c,
               Projected_Duration__c,
               Projected_Effort__c,
               No_Of_Milestones__c,
               No_of_Sensors__c,
               Sensing_Trend__c,
               Owner_Feedback__c
               from Initiative__c];
        system.debug('Query Records:'+initiatives);
        return null;
      }    
    
public void save() {
isAllButtonDisabled = true;
isMyButtonDisabled = false;
}
 
public void create() {
isAllButtonDisabled = false;
isMyButtonDisabled = true;
}
 
public boolean getIsAllButtonDisabled() {
return isAllButtonDisabled;
}
 
public boolean getIsMyButtonDisabled() {
return isMyButtonDisabled;
}
}