CSS on Crosstab Report

PHPMaker General Discussion (PHPMaker)
1

Hi, i have a Crosstab report consisting of:Row Headings = Data
Column Headings = Utente
Value = OreTotali → SUM
Value = OreGiorno → AVGOreGiorno is not mandatory and will be hidden in StartupScript with$(‘.ew-value-avg’).hide();I would like to colour the OreTotali cell when OreGiorno = OreTotali.
Row_Rendered:

 if ($this->OreTotali->CurrentValue == $this->OreGiorno->CurrentValue) {
	$this->OreTotali->CellAttrs["style"] = "color: #000; background-color: #198754";
}

but this code is not working. Do you have any idea how I can do it?
Thank you very much.

2

You may check what you can use first, e.g.var_dump($this->SummaryFields);

3

i’ve not exactly undestood what i should check, this is my var_dump($this->SummaryFields);
Outside the table:
array(2) { [0]=> object(PHPMaker2023\KoppelV4\SummaryField)#1077 (16) { [“Name”]=> string(9) “OreTotali” [“FieldVar”]=> string(11) “x_OreTotali” [“Expression”]=> string(11) “[OreTotali]” [“SummaryType”]=> string(3) “SUM” [“SummaryCaption”]=> string(3) “SUM” [“SummaryViewAttrs”]=> NULL [“SummaryLinkAttrs”]=> NULL [“SummaryCurrentValues”]=> NULL [“SummaryViewValues”]=> NULL [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } [1]=> object(PHPMaker2023\KoppelV4\SummaryField)#1083 (16) { [“Name”]=> string(9) “OreGiorno” [“FieldVar”]=> string(11) “x_OreGiorno” [“Expression”]=> string(11) “[OreGiorno]” [“SummaryType”]=> string(3) “AVG” [“SummaryCaption”]=> string(3) “AVG” [“SummaryViewAttrs”]=> NULL [“SummaryLinkAttrs”]=> NULL [“SummaryCurrentValues”]=> NULL [“SummaryViewValues”]=> NULL [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } }Inside the table:
array(2) { [0]=> object(PHPMaker2023\KoppelV4\SummaryField)#1077 (16) { [“Name”]=> string(9) “OreTotali” [“FieldVar”]=> string(11) “x_OreTotali” [“Expression”]=> string(11) “[OreTotali]” [“SummaryType”]=> string(3) “SUM” [“SummaryCaption”]=> string(3) “SUM” [“SummaryViewAttrs”]=> array(1) { [0]=> NULL } [“SummaryLinkAttrs”]=> array(1) { [0]=> NULL } [“SummaryCurrentValues”]=> array(1) { [0]=> string(4) “8.00” } [“SummaryViewValues”]=> array(1) { [0]=> NULL } [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> string(4) “8.00” } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } [1]=> &object(PHPMaker2023\KoppelV4\SummaryField)#1083 (16) { [“Name”]=> string(9) “OreGiorno” [“FieldVar”]=> string(11) “x_OreGiorno” [“Expression”]=> string(11) “[OreGiorno]” [“SummaryType”]=> string(3) “AVG” [“SummaryCaption”]=> string(3) “AVG” [“SummaryViewAttrs”]=> array(1) { [0]=> NULL } [“SummaryLinkAttrs”]=> array(1) { [0]=> NULL } [“SummaryCurrentValues”]=> array(1) { [0]=> int(8) } [“SummaryViewValues”]=> array(1) { [0]=> NULL } [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> int(8) } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> int(1) } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } } array(2) { [0]=> object(PHPMaker2023\KoppelV4\SummaryField)#1077 (16) { [“Name”]=> string(9) “OreTotali” [“FieldVar”]=> string(11) “x_OreTotali” [“Expression”]=> string(11) “[OreTotali]” [“SummaryType”]=> string(3) “SUM” [“SummaryCaption”]=> string(3) “SUM” [“SummaryViewAttrs”]=> array(1) { [0]=> NULL } [“SummaryLinkAttrs”]=> array(1) { [0]=> NULL } [“SummaryCurrentValues”]=> array(1) { [0]=> string(4) “8.00” } [“SummaryViewValues”]=> array(1) { [0]=> NULL } [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> string(4) “8.00” } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> NULL } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } [1]=> &object(PHPMaker2023\KoppelV4\SummaryField)#1083 (16) { [“Name”]=> string(9) “OreGiorno” [“FieldVar”]=> string(11) “x_OreGiorno” [“Expression”]=> string(11) “[OreGiorno]” [“SummaryType”]=> string(3) “AVG” [“SummaryCaption”]=> string(3) “AVG” [“SummaryViewAttrs”]=> array(1) { [0]=> NULL } [“SummaryLinkAttrs”]=> array(1) { [0]=> NULL } [“SummaryCurrentValues”]=> array(1) { [0]=> int(8) } [“SummaryViewValues”]=> array(1) { [0]=> NULL } [“SummaryValues”]=> array(2) { [0]=> NULL [1]=> int(8) } [“SummaryValueCounts”]=> array(2) { [0]=> NULL [1]=> int(1) } [“SummaryGroupValues”]=> NULL [“SummaryGroupValueCounts”]=> NULL [“SummaryInitValue”]=> int(0) [“SummaryRowSummary”]=> NULL [“SummaryRowCount”]=> NULL } }

4

From the output you should see that you should not compare CurrentValue, you should compare SummaryFields[$i]->SummaryValues[$j] (determine the value of $i and $j yourself).

5

If i’ve understood correctly it should be:

if ($this->SummaryFields[0]->SummaryValues[1] === $this->SummaryFields[1]->SummaryValues[1]) {
	//True
	$this->OreTotali->CellAttrs["style"] = "color: #000; background-color: #198754";
} else {
	//False
}

As for each row SummaryFields[0] = OreTotali and SummaryFields[1] = OreGiorno and SummaryValues[1] is where the values are stored.but if my argument is correct now this part: $this->OreTotali->CellAttrs[“style”] = “color: #000; background-color: #198754”; is not working.

6

You may read Inspect HTML element and add your own CSS styles.

7

To solve the problem where only the first column was considered was necessary to add a loop.

    for ($i = 1; $i <= count($this->SummaryFields[0]->SummaryValues); $i++) {
        if ($this->SummaryFields[0]->SummaryValues[$i] == 0) {
            $this->SummaryFields[0]->SummaryViewAttrs[$i - 1]['style'] = 'color: #000; background-color: #dc3545;';
        } else if ($this->SummaryFields[0]->SummaryValues[$i] < $this->SummaryFields[1]->SummaryValues[$i]) {
            $this->SummaryFields[0]->SummaryViewAttrs[$i - 1]['style'] = 'color: #000; background-color: #dc3545;';
        } else if ($this->SummaryFields[0]->SummaryValues[$i] == $this->SummaryFields[1]->SummaryValues[$i]) {
            $this->SummaryFields[0]->SummaryViewAttrs[$i - 1]['style'] = 'color: #000; background-color: #198754;';
        } else {
            $this->SummaryFields[0]->SummaryViewAttrs[$i - 1]['style'] = 'color: #000; background-color: #ffc107;';
        }
    }

the SummaryValues sarts with 1, so we need i to start with 1
the SummaryViewAttrs starts with 0, so is necessary to set a $i-1 instead $i in the array number.

8

And to solve the last problem i’ve used jquery to move the span style to the td style:
ClientScripts->TableSpecific->CrosstabReport->StartupScript

$(document).ready(function() {
  $('td ul.list-unstyled.ew-crosstab-values li.ew-value-sum span').each(function() {
    var $span = $(this);
    var style = $span.attr('style');
    $span.closest('td').attr('style', style);
    $span.removeAttr('style');
  });
});

i don’t know if it’s the best way to do it but it’s working at the moment.

9

You better add class instead of style to the cell, and then add CSS styles under HTML → Styles → User to style the

  • tags, e.g.

    .my-class li {
/* my styles */
}