Can we get calculated measures in customizeCell ?

Answered
kiran bangar asked 3 days ago

Hi team,

i am using two columns to calculate diff and storing it as a new diff column.
Problem here is i am using customizeCell to style my cells based on some values or highlighting its background.

As calculated measure doesnt exist in dataset as rule , i am unable to get it in customizecell . How can i get it in customize to style the same way other cells are styled.

 

below is my code

[
                   {
  uniqueName: "diffNP",
   formula: "sum('parameters_theoNP') - sum('parameters_actualNP')",
  caption: "diffNP",
  format: 'total'
},
 {
  uniqueName: "diffNPAbs",
  formula: "ABS(sum('parameters_theoNP') - sum('parameters_actualNP'))",
  caption: "diffNPAbs",
  format: 'total'
}]

3 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 2 days ago

Hello,

Thank you for contacting us.

By default, calculated values are treated as any other values in the customizeCell function. Could you please provide us with more details on how you style the cells in the customizeCell function? It would greatly assist us in continuing our investigation.

Looking forward to hearing from you.

Kind regards,
Nadia

Public
kiran bangar 2 days ago

This is my customizeCellFunction , also can help me in optimizing it 

 
    customizeCellFunctionCallback(cell: CellBuilder, data: any): void {
        try {
            cell.attr["title"] = data.label;

            if(data.hierarchy.uniqueName == 'parameters_manualActivity') {
                cell[`${data.rowIndex}${this.totalManualActivityIndex}`] = data.label
            }

            const totalManualActivityPortfolios = cell[`${data.rowIndex}${this.totalManualActivityIndex}`] || 0;

            // Add hierarchy-based highlight logic - check if this row should be highlighted
            const currentHierarchyPath = this.buildHierarchyPath(data);
            const isHighlightedRow = this.highlightedHierarchy !== '' &&
                                   currentHierarchyPath === this.highlightedHierarchy;
       
            if (data.columnIndex > 1 && data.hierarchy.uniqueName != "parameters_monitor") {
                // Apply CSS classes instead of inline styles
                if (!isNaN(Number(totalManualActivityPortfolios)) && Number(totalManualActivityPortfolios) >= 1) {
                    // Apply green background class for rows with manual activity
                    cell.addClass('cell-manual-activity');
                    if (isHighlightedRow) {
                        cell.addClass('cell-highlighted-manual-activity');
                    }
                }
                else {
                    // Apply alternating row color classes for zebra striping
                    if (data.rowIndex % 2 === 0) {
                        // Even rows - light gray
                        cell.addClass('cell-row-even');
                    } else {
                        // Odd rows - slightly darker
                        cell.addClass('cell-row-odd');
                    }
                   
                    // Add highlight class if this row is selected
                    if (isHighlightedRow) {
                        cell.addClass('cell-highlighted');
                    }
                }
            } else if (isHighlightedRow) {
                // Apply highlighting even for first columns if the row is selected
                cell.addClass('cell-highlighted');
            }

            if (data.measure && data.type != 'header' &&
                data.measure.uniqueName == "parameters_manualActivity"
            ) {
                if (typeof data.value == 'number' && data.rows) {
                    delete data.value;
                    let summary: string = '';
                    data.rows.forEach((r: any) => {
                        if (summary) {
                            summary = summary + '>' + r.caption;
                        } else {
                            summary = r.caption;
                        }
                    })
                    data.value = summary;
                }

                // onchange="window.positionViewComponent?.handleCheckboxChange();"
                const customizeCellValid = this.strategyAccessValidator(cell, data);
                cell.text = !customizeCellValid ? '' : `
            <label class="custom-checkbox-container" onclick="event.stopPropagation();" onmouseenter="window.positionViewComponent?.handleMouseEnter('${data.value}')"
         onmouseleave="window.positionViewComponent?.handleMouseMovement('${data.value}')">
              <input type="checkbox"
                     onclick="event.stopPropagation(); window.positionViewComponent?.handleCheckboxChange('${data.value}', ${data.rowIndex}, event);"
                     name="fm-checkbox"
                     value="${data.value}-Strategy"
                     ${this.tableControl.checkedFields[data.value + '-Strategy'] ? 'checked' : ''}>
              <span class="checkmark" onclick="event.stopPropagation();"></span>
            </label>;
                // Apply CSS class instead of inline z-index
                cell.addClass('cell-checkbox-container');
            }

            if (
                data &&
                data.hierarchy &&
                data.hierarchy.uniqueName == "parameters_initialized" &&
                data.type === 'value'
            ) {
                let totalPortfolios = 0;
                if (Array.isArray(data.recordId)) {
                    totalPortfolios = data.recordId.length;
                }
                const val = data.value >= 1 ? data.value : 0;
                const initializedPercentage = (val / totalPortfolios) * 100;
                const roundedInitializedPercentage = Math.floor(initializedPercentage);

                // Use CSS class with CSS custom properties for dynamic width
                cell.text = <div class="progress-bar" style="--progress-width: ${initializedPercentage}%">${roundedInitializedPercentage}% (${val}/${totalPortfolios})</div>`;
            }

            // Apply row highlighting to ALL cells in the highlighted row (universal highlighting)
            if (isHighlightedRow) {
                // Always add highlighting class for any cell in the highlighted row
                cell.addClass('cell-highlighted');
            }
        } catch (error) {
            console.log('Something went wrong while customizing cell', error)
        }
  }

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 17 hours ago

Hello,

Thank you for sharing the details.

We suppose that the highlighting logic is based on the raw data that you load into Flexmonster. However, calculated measures are only available within the pivot, after Flexmonster has processed the dataset. Therefore, we recommend considering switching the highlighting logic based on data in the pivot.

To highlight the specific data, you can use one of the following approaches:

  1. The conditional formatting:
    You can check the following guide in our documentation: https://www.flexmonster.com/doc/conditional-formatting/. Here is an example for reference: https://jsfiddle.net/flexmonster/rya2mnj6/.
  2. The customizeCell function:
    Please check the following example: https://jsfiddle.net/flexmonster/wy3hub2s/.
  3. A combination of the conditional formatting and customizeCell function:
    If you have complex conditions for specific values, you can check the following example for illustration: Customizing cells based on the conditional formatting.

Please let us know if it works for you.

Kind regards,
Nadia

Please sign in or register to submit your answer