Apex Code Development You need to sign in to do that
Don't have an account?
Adjust visualforce tab background colors based on a picklist value on controller
Hey All,
I have a visualforce page that has 3 tabs for 3 different products that we offer subscriptions for. Each product has a status that's a picklist field on the account object (3 picklist fields) and I want to change the background color of a products tab based off of the picklist value of its respective Picklist. I know I could adjust the render settings based off of the picklist values and duplicated the code with a ton of pageblocks with conditional rendering but there are dozens of combinations that I would have to account for and I would like to have a jquery run when the page is loaded.
Here is the page without any query
Right now everything is showing green because I don't have it adjusting anything and I can move through the tabs and view the data.
Here is the page with a query I found but I modified for an onload function.
With this, I adjusted the tab classes and the tabs are the colors in the tab class and won't adjust and the tabs are not responsive.
Also here is the extension
Any help would be appreciated!
I have a visualforce page that has 3 tabs for 3 different products that we offer subscriptions for. Each product has a status that's a picklist field on the account object (3 picklist fields) and I want to change the background color of a products tab based off of the picklist value of its respective Picklist. I know I could adjust the render settings based off of the picklist values and duplicated the code with a ton of pageblocks with conditional rendering but there are dozens of combinations that I would have to account for and I would like to have a jquery run when the page is loaded.
Here is the page without any query
<apex:page standardController="Account" showHeader="true" extensions="TestDisplayQueryResults" >
<style>
.TSMactiveTab {background-color: #4CAF50; color:white; background-image:none}
.TSMNotactiveTab { background-color: #f44336; color:black; background-image:none}
.TSMOnHoldTab { background-color: #ff9800; color:black; background-image:none}
</style>
<apex:pageBlock id="Block1" rendered="{!AND(Account.TS_M_Status__c == 'Active', Account.SM_Status__c == 'Active', Account.RIPL_TSM_Status__c == 'Active')}">
<apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" >
<apex:tab label="PCS" name="name1" id="tabOne" styleClass="TSMactiveTab">
<apex:pageBlock title="PCS Subscription Items">
<apex:outputField value="{!Account.TS_M_Status__c}"/>
<apex:pageBlockTable value="{!PCSSubItems}" var="item">
<apex:column value="{!item.Subscription_ID__c}"/>
<apex:column value="{!item.name}"/>
<apex:column value="{!item.Product__c}"/>
<apex:column value="{!item.Item_Status__c}"/>
<apex:column value="{!item.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
<apex:tab label="Survey Manager" name="name2" id="tabTwo" styleClass="TSMactiveTab">
<apex:pageBlock title="Survey Manager Subscription Items">
<apex:pageBlockTable value="{!SMSubItems}" var="SMitem">
<apex:column value="{!SMitem.Subscription_ID__c}"/>
<apex:column value="{!SMitem.name}"/>
<apex:column value="{!SMitem.Product__c}"/>
<apex:column value="{!SMitem.Item_Status__c}"/>
<apex:column value="{!SMitem.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
<apex:tab label="RIPL" name="name3" id="tabThree" styleClass="TSMactiveTab">
<apex:pageBlock title="RIPL Subscription Items">
<apex:pageBlockTable value="{!RIPLSubItems}" var="item2">
<apex:column value="{!item2.Subscription_ID__c}"/>
<apex:column value="{!item2.name}"/>
<apex:column value="{!item2.Product__c}"/>
<apex:column value="{!item2.Item_Status__c}"/>
<apex:column value="{!item2.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
</apex:tabPanel>
</apex:pageBlock>
</apex:page>
Right now everything is showing green because I don't have it adjusting anything and I can move through the tabs and view the data.
Here is the page with a query I found but I modified for an onload function.
<apex:page standardController="Account" showHeader="true" extensions="TestDisplayQueryResults" >
<html>
<body onload="loading('tabOne'); loading('tabTwo'); loading('tabThree');">
<style>
.PCSTab {background-color: #4CAF50; color:white; background-image:none}
.SMTab { background-color: #f44336; color:white; background-image:none}
.RIPLTab { background-color: #ff9800; color:white; background-image:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
if(jQuery)
{
jQuery.noConflict();
}
function loading(tabname)
{
var tabname = '[id$='+tabname+'_lbl]';
var tabname2 = '[id$='+tabname2+'_lbl]';
var tabname3 = '[id$='+tabname3+'_lbl]';
if(Account.TS_M_Status__c == "Active")
{
jquery(tabname).css({"background-color": "#4CAF50"; "color":"white"; "background-image":"none"});
}
if(Account.TS_M_Status__c == "Not Active")
{
jquery(tabname).css({"background-color": "#ff9800"; "color":"white"; "background-image":"none"});
}
if(Account.TS_M_Status__c == "On Hold")
{
jquery(tabname).css({"background-color": "#f44336"; "color":"white"; "background-image":"none"});
}
if(Account.SM_Status__c == "Active")
{
jquery(tabname2).css({"background-color": "#4CAF50"; "color":"white"; "background-image":"none"});
}
if(Account.SM_Status__c == "Not Active")
{
jquery(tabname2).css({"background-color": "#ff9800"; "color":"white"; "background-image":"none"});
}
if(Account.SM_Status__c == "On Hold")
{
jquery(tabname2).css({"background-color": "#f44336"; "color":"white"; "background-image":"none"});
}
if(Account.RIPL_TSM_Status__c == "Active")
{
jquery(tabname3).css({"background-color": "#4CAF50"; "color":"white"; "background-image":"none"});
}
if(Account.RIPL_TSM_Status__c == "Not Active")
{
jquery(tabname3).css({"background-color": "#ff9800"; "color":"white"; "background-image":"none"});
}
if(Account.RIPL_TSM_Status__c == "On Hold")
{
jquery(tabname3).css({"background-color": "#f44336"; "color":"white"; "background-image":"none"});
}
}
</script>
<apex:pageBlock id="Block1">
<apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" >
<apex:tab label="PCS" name="name1" id="tabOne" styleClass="PCSTab">
<apex:pageBlock title="PCS Subscription Items">
<apex:outputField value="{!Account.TS_M_Status__c}"/>
<apex:pageBlockTable value="{!PCSSubItems}" var="item">
<apex:column value="{!item.Subscription_ID__c}"/>
<apex:column value="{!item.name}"/>
<apex:column value="{!item.Product__c}"/>
<apex:column value="{!item.Item_Status__c}"/>
<apex:column value="{!item.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
<apex:tab label="Survey Manager" name="name2" id="tabTwo" styleClass="SMTab">
<apex:pageBlock title="Survey Manager Subscription Items">
<apex:pageBlockTable value="{!SMSubItems}" var="SMitem">
<apex:column value="{!SMitem.Subscription_ID__c}"/>
<apex:column value="{!SMitem.name}"/>
<apex:column value="{!SMitem.Product__c}"/>
<apex:column value="{!SMitem.Item_Status__c}"/>
<apex:column value="{!SMitem.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
<apex:tab label="RIPL" name="name3" id="tabThree" styleClass="RIPLTab">
<apex:pageBlock title="RIPL Subscription Items">
<apex:pageBlockTable value="{!RIPLSubItems}" var="item2">
<apex:column value="{!item2.Subscription_ID__c}"/>
<apex:column value="{!item2.name}"/>
<apex:column value="{!item2.Product__c}"/>
<apex:column value="{!item2.Item_Status__c}"/>
<apex:column value="{!item2.Quantity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:tab>
</apex:tabPanel>
</apex:pageBlock>
</body>
</html>
</apex:page>
With this, I adjusted the tab classes and the tabs are the colors in the tab class and won't adjust and the tabs are not responsive.
Also here is the extension
public with sharing class TestDisplayQueryResults
{
public String currentRecordId {get;set;}
public Account acc{get;set;}
public List<Subscription__c> PCSSubs{get; set;}
public List<Subscription__c> SMSubs{get; set;}
public List<Subscription__c> RIPLSubs{get; set;}
public List<Subscription_Item__c> PCSSubItems{get; set;}
public List<Subscription_Item__c> SMSubItems{get; set;}
public List<Subscription_Item__c> RIPLSubItems{get; set;}
public TestDisplayQueryResults(ApexPages.StandardController controller)
{
currentRecordId = ApexPages.CurrentPage().getparameters().get('id');
PCSSubItems = new List<Subscription_Item__c>();
SMSubItems = new List<Subscription_Item__c>();
RIPLSubItems = new List<Subscription_Item__c>();
acc = [select id ,name from Account where id =: currentRecordId ];
PCSSubs = [select id, Name, (Select id, name, Product_Code_PCS_TSM__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_Code_PCS_TSM__c = true) from Subscription__c where Account_ID__c = :acc.Id];
SMSubs = [select id, Name, (Select id, name, Product_is_Survey_Manager__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_is_Survey_Manager__c = true) from Subscription__c where Account_ID__c = :acc.Id];
RIPLSubs = [select id, Name, (Select id, name, Product_is_RIPL_TSM__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_is_RIPL_TSM__c = true) from Subscription__c where Account_ID__c = :acc.Id];
for(Subscription__c PCSSubs : [select id, Name, (Select id, name, Product_Code_PCS_TSM__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_Code_PCS_TSM__c = true) from Subscription__c where Account_ID__c= :acc.Id])
{
for(Subscription_Item__c items: PCSSubs.Subscription_Items__r)
{
PCSSubItems.add(items);
}
}
for(Subscription__c SMSubs : [select id, Name, (Select id, name, Product_is_Survey_Manager__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_is_Survey_Manager__c = true) from Subscription__c where Account_ID__c = :acc.Id])
{
for(Subscription_Item__c items: SMSubs.Subscription_Items__r)
{
SMSubItems.add(items);
}
}
for(Subscription__c RIPLSubs : [select id, Name, (Select id, name, Product_is_RIPL_TSM__c, product__c, Quantity__c, Item_Status__c, Subscription_ID__c from Subscription_Items__r where Product_is_RIPL_TSM__c = true) from Subscription__c where Account_ID__c = :acc.Id])
{
for(Subscription_Item__c items: RIPLSubs.Subscription_Items__r)
{
RIPLSubItems.add(items);
}
}
}
}
Any help would be appreciated!
You can just do conditions in there to determine what tab style is being used.
Code now reads:
<apex:page standardController="Account" showHeader="true" extensions="TestDisplayQueryResults" > <style> .TSMactiveTab {background-color: #4CAF50; color:white; background-image:none} .TSMNotactiveTab { background-color: #f44336; color:black; background-image:none} .TSMOnHoldTab { background-color: #ff9800; color:black; background-image:none} </style> <apex:pageBlock id="Block1"> <apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" > <apex:tab label="PCS" name="name1" id="tabOne" styleClass="{!IF(Account.TS_M_Status__c == 'Active', "TSMactiveTab", IF(Account.TS_M_Status__c == 'On Hold', "TSMOnHoldTab", "TSMNotactiveTab"))}"> <apex:pageBlock title="PCS Subscription Items"> <apex:outputField value="{!Account.TS_M_Status__c}"/> <apex:pageBlockTable value="{!PCSSubItems}" var="item"> <apex:column value="{!item.Subscription_ID__c}"/> <apex:column value="{!item.name}"/> <apex:column value="{!item.Product__c}"/> <apex:column value="{!item.Item_Status__c}"/> <apex:column value="{!item.Quantity__c}"/> </apex:pageBlockTable> </apex:pageBlock> </apex:tab> <apex:tab label="Survey Manager" name="name2" id="tabTwo" styleClass="{!IF(Account.SM_Status__c == 'Active', "TSMactiveTab", IF(Account.SM_Status__c == 'On Hold', "TSMOnHoldTab", "TSMNotactiveTab"))}"> <apex:pageBlock title="Survey Manager Subscription Items"> <apex:pageBlockTable value="{!SMSubItems}" var="SMitem"> <apex:column value="{!SMitem.Subscription_ID__c}"/> <apex:column value="{!SMitem.name}"/> <apex:column value="{!SMitem.Product__c}"/> <apex:column value="{!SMitem.Item_Status__c}"/> <apex:column value="{!SMitem.Quantity__c}"/> </apex:pageBlockTable> </apex:pageBlock> </apex:tab> <apex:tab label="RIPL" name="name3" id="tabThree" styleClass="{!IF(Account.RIPL_TSM_Status__c == 'Active', "TSMactiveTab", IF(Account.RIPL_TSM_Status__c == 'On Hold', "TSMOnHoldTab", "TSMNotactiveTab"))}"> <apex:pageBlock title="RIPL Subscription Items"> <apex:pageBlockTable value="{!RIPLSubItems}" var="item2"> <apex:column value="{!item2.Subscription_ID__c}"/> <apex:column value="{!item2.name}"/> <apex:column value="{!item2.Product__c}"/> <apex:column value="{!item2.Item_Status__c}"/> <apex:column value="{!item2.Quantity__c}"/> </apex:pageBlockTable> </apex:pageBlock> </apex:tab> </apex:tabPanel> </apex:pageBlock> </apex:page>