Customize rendering of ActivePivot Live pivot tables

There are two ways to achieve your goal. Let's say you have a measure whose name is pnl.SUM and you want the PivotTable cells associated with that measure to be colored green if the value is positive and red otherwise.

You can:

• Use MDX formulas

  Create a calculated MDX formula using dynamic formatting. ActivePivot Live provides many useful tools for handling MDX queries, and one of them is dynamic formatting. It allows you to format the measure according to a simple statement like "if pnl.SUM is positive then use green, otherwise use red" and the equivalent MDX code is Member [Measures].[pnl.SUM_COLORED] AS [Measures].[pnl.SUM], BACK_COLOR=IIf( [Measures].[pnl.SUM_COLORED] >= 0, RGB( 0, 255, 0 ), RGB( 255, 0, 0 ))
  
  . After creating it, you can even save it as a bookmark for later use and share this bookmark with other users!

  This is the fastest and most flexible way to proceed, but you must use this new measure (pnl.SUM_COLORED) instead of the old (pnl.SUM) to actually see the colored cells in every request.

  Here's the result:

  

• Implement your own class responsible for rendering cells

  ActivePivot Live has convenient code entry points to suit your needs. The LiveContentCellRenderer class implements the IContentCellRenderer interface and is designed to create a css style to apply to each cell in an html table. Extend this class to change basic behavior, here's an example:

  public class PnlColoredContentCellRenderer extends LiveContentCellRenderer {
  
  @Inject
  public PnlColoredContentCellRenderer(ICellMeasureRetriever cellMeasureRetriever, ICellEditPresenter cellEditPresenter) {
      super(cellMeasureRetriever, cellEditPresenter);
  }
  
  @Override
  public String getStyle() {
      String cellHTMLStyle = super.getStyle();
  
      if(getMeasure().equals("pnl.SUM")) {
          cellHTMLStyle += ((Double) cursor.getCell().getValue() >= 0) ? " background-color: green; " : " background-color: red; ";
      }
  
      return cellHTMLStyle;
    }
  }
  
        
  
          
          
          
        
  
      

  And add this line to your binding config:

  bind(IContentCellRenderer.class).to(PnlColoredContentCellRenderer.class);
  
  

  Now you can use the pnl.SUM measure as normal, coloring will be done while rendering the pivot table without affecting rendering performance. Unlike the previous method, you cannot change the style attributes from the UI, but you can use any CSS attributes you need!

  Here's the result: