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
Alexis KasperaviciusAlexis Kasperavicius 

Conditional formatting - querying different rows within a table

I'm kind of a newbie, so please excuse if this is simplistic - but I can't find anything on it. Here goes:

 

WIthin Visualforce, is it possible to look at a cell in ANOTHER row and format the current cell based on it what it finds?

 

In Excel's conditional formatting it would be something like =IF(A2 <> A1, black, grey)

 

All I want is to change the style of  a cell if the one above it is the same, giving me:

 

Type SKU
Switch17982
Switch17983
Switch17985
Button17988
Button17989
Knob19827
Knob19829

 

 

While something like this could be achieved within the controller, I'm trying to make it work on a Visualforce page so that if dynamic filters within the page are applied, the page formatting adjusts without having to do another query.

 

I did find another post which does something similar within the same row, (Re: conditional styling in table), but there's no mention of how this type of referential access might be achieved within a table.

 

Has anyone done something similar? If so, how did you manage? Any help is most appreciated.

 

 

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

Hi

 

You can do this by just 2 different CSS classes like

 

<tr class={!IF(a1>a2,'blackBg','whiteBg')}>

in above you just need 2 css classes named blackBg and whiteBg also a1 and a2 are 2 numbers

All Answers

Anup JadhavAnup Jadhav

If you want to do dynamic formatting based on the values displayed in the UI without querying the controller, then your best bet is using a javascript library like jQuery which allows you to manipulate the DOM (document object model) to your hearts content.

 

jQuery lets you style, change, and animate certain aspects of your html document based on certain user actions, or changes in the value.

 

Hope this helps!

 

- Anup
Abhay AroraAbhay Arora

Hi

 

You can do this by just 2 different CSS classes like

 

<tr class={!IF(a1>a2,'blackBg','whiteBg')}>

in above you just need 2 css classes named blackBg and whiteBg also a1 and a2 are 2 numbers

This was selected as the best answer
Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference:

 

-------- vf page------------

 

<apex:page controller="csstest_styleon_pageBlckTble_wthCodtion"  tabStyle="Opportunity">

 

<apex:form >

<apex:sectionHeader title="Opps List" />

<apex:pageBlock title="" id="pageBlock">

<apex:pageMessages ></apex:pageMessages>

<apex:pageBlockTable value="{!opportunities}" var="o" rendered="{!NOT(ISNULL(opportunities))}">

<apex:column value="{!o.Name}"></apex:column>

<apex:column value="{!o.Account.Name}"></apex:column>

<apex:column value="{!o.Amount}"></apex:column>

<apex:column >

<apex:facet name="header">Status</apex:facet>

<div style="background-color:{!IF(o.CloseDate > TODAY(),'#7CFC00', '#FFA07A')}">

{!IF(o.CloseDate > TODAY(),'Open', 'Closed')}

</div>

</apex:column>

<apex:column style="{!IF(o.StageName=='Closed Lost','background:lightgreen',IF(o.StageName=='Closed Won','background:red','background:yellow'))}" >{!o.StageName}</apex:column>

<apex:column style="{!IF(o.StageName=='Closed Lost','background:lightgreen',IF(o.StageName=='Closed Won','background:red','background:yellow'))}" >{!o.Name}</apex:column>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:form>

 

</apex:page>

 

----- apex controller----------------

public class csstest_styleon_pageBlckTble_wthCodtion {

 

private List<Opportunity> opportunities;

public List<Opportunity> getOpportunities()

{

opportunities = [Select Name, Amount, Account.Name, CloseDate,StageName from Opportunity];

return opportunities;

}

}

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

 

 
Alexis KasperaviciusAlexis Kasperavicius

While we can have two different styles based on an IF statement,  this doesn't address the problem of looking up to or querying the previous row. That's where I'm stuck.

 

How do I look at the previous row in an IF statement strictly within Visualforce? 

 

In Excel, using "A2<>A1" would automatically change to "A3<>A2";"A4<>A3", etc., row after row unless you used "$A$2 <> $A$1"

 

When using row or the repeat function within visualforce we need the code to compare THIS ROW with PREVIOUS ROW - and that I'm beginning to think is not possible.

 

Unless you can do something like:

 

{!IF(o.Name[1] != o.Name[2],style1,style2)}

 

AND have the bracketed number automatically increment with each repeated row? ...or is there a way to dynamically address rows?

 

I don't know. Just grasping at straws here...maybe Javascript is the only way? 
crop1645crop1645

Lexlex

 

You need to create a wrapper class and pageblocktable for your table list that looks something 

public class LineItemListWrapper {

  public List<LineItem> liList {get; private set;}  

  public class LineItem {
    public String type {get; set;}
    public String sku {get; set;}
    private Integer ixWithinList;
    private LineItemListWrapper liListW;  // points at containing obj
    public String getStyle() {
       if (ixWithinList > 0)
           if (liListW[ixWithinList-1].type == 'foo'  // look at previous value
              return 'style 1';
           else
              return 'style 2';
      return 'style default';
     } 
  
    public LineItem (LineItemListWrapper liListW, Integer ix) {
      this.liListW = liListW;
      this.ixWithinLiList = ix;
  }
}
}


// populate your LineItemListWrapper somewhere in controller

public List<LineItemListWrapper.LineItem> getLineItems() {
   return this.liListW;
}
private LineItemListWrapper liListW = new LineItemListWrapper();
Integer i = 0;
for (Product2 p : [some soql]) {
  liListW.add(new LineItemListWrapper.LineItem (liListW,i);
  i++;
}

// Now your apex table looks something like this:

<apex:pageBlockTable value="{!lineItems}" var="li">
  <apex:column headerValue="Type" style="{!li.style}">
    <apex:outputText value="{!li.type}"/>
  </apex:column>
  <apex:column headerValue="SKU">
    <apex:outputtext value="{!li.sku}"/>
  </apex:column>
</apex:pageBlockTable>