function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Joe HayesJoe Hayes 

Apply onclick javascript styling to related list on tabbed account

I am using the tabbedAccount template for our accounts page. I am looking to apply additional styling with javascript when the contacts tab is clicked.
I want to change the text colour to red if the date is over 1 year ago.

I have looked at the DOM and got all the class names, i'ds etc that I need but I cannot get it working at all.
  
<apex:page standardController="Account" showHeader="true"
      tabStyle="account" >      
   <style>
      .activeTab {background-color: #F9AF31; color:black;
         background-image:none}
      .inactiveTab { background-color: #9FD8F6; color:black;
         background-image:none}
      .AcctListStyle {font-size: 10pt; font-color: #333333; background-image:none}
   </style>
   <apex:tabPanel switchType="client" selectedTab="tabdetails"
                  id="AccountTabPanel" tabClass="activeTab"
                  inactiveTabClass="inactiveTab">  
      <apex:tab label="Details" name="AccDetails" id="tabdetails" styleclass="AcctListStyle">
         <apex:detail relatedList="false" title="true"/>
      </apex:tab>
      <apex:tab label="Contacts" name="Contacts" id="tabContact" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="contacts" />
      </apex:tab>
      <apex:tab label="Opportunities" name="Opportunities" id="tabOpp" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="opportunities" />
      </apex:tab>
      <apex:tab label="Activities" name="OpenActivities" id="tabOpenAct" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="OpenActivities" />
         <apex:relatedList subject="{!account}" list="ActivityHistories" />
      </apex:tab>
      <apex:tab label="Notes and Attachments" name="NotesAndAttachments" id="tabNoteAtt" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="CombinedAttachments" />
      </apex:tab>
      <apex:tab label="Docusigns" name="Docusigns" id="Docusigns" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="dsfs__R00N80000002eb1GEAQ__r" />
      </apex:tab>
      <apex:tab label="Other Applications" name="Otherapplications" id="otherApps" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="Courses__r" title="Bespoke/In-house Courses"/>
      </apex:tab>
   </apex:tabPanel>

<script>
$(document).ready(function(){
  document.getElementById("j_id0:tabContact_lbl").onclick = function(){
   var date = document.getElementsByClassName("DateElement").value;
   var varDate = new Date(date);
   var today = new Date();
   var 1year = 3153600000;
   today.setHours(0,0,0,0);
     if(varDate <= today - 1year) {
         date.style.color = "red";
     };
  });
});
</script>
</apex:page>

Does anybody have any suggestions?

Thanks
Joe​
Ashish KumarAshish Kumar
Hi Joe,

I am not sure of which text you want to change the colour to Red but yes you can achieve it.
Below is the code snippet you can use to change background color of the record
But before that I would like to comment few things.

1. document.getElementsByClassName always return an array. so you should you the use index to get the exact element you want to use.
hence code will be  
var date = document.getElementsByClassName("DateElement")[1].value; // index is 1 here because 0th will be index of the column name having class DateElement and 1 will be index of column having the actual value of Date
2. There is a bug on line 48 line it should be like  
}; // not });
4. You need to include jquery if using $(document).ready(function() .... .. .. ..)};
3. To change the style property you need to access element/object not its value ex: 
document.getElementById("j_id0:tabContact_lbl").onclick = function(){
   var date = document.getElementsByClassName("DateElement")[1].value;
      var dataCells = document.getElementsByClassName("dataCell");
      dataCells[0].style.background = "Red"; // this will change the background color of 1st contact..
//Please follow the approach as per your requirement.
     
   var varDate = new Date(date);
   var today = new Date();
   var year = 3153600000;
   today.setHours(0,0,0,0);
     if(varDate <= (today - year)) {
         console.log(true);
        // date.style.color = "red"; date contains the value so can't access style attribute/property
     };
      
  };


P.S. In case if there will be more than one related list having the date field or you can say that in case if there will be more element having the same "DateElement" Class then it might break the functionality.

I would request you to go through javascript to learn it better.

Please mark it as best answer if it helps you understanding the concept. 

Regards,
Ashish Kr.