Web Components Formatação condicional de planilha

    O componente Planilha Web Components permite formatar condicionalmente as células de uma planilha. Isso permite que você destaque diferentes partes de seus dados com base em uma condição.

    Web Components Spreadsheet Conditional Formatting Example

    Conditional Formatting Overview

    Você pode configurar a formatação condicional de uma planilha específica usando os vários Add métodos expostos na conditionalFormats coleção dessa planilha. O primeiro parâmetro desses Add métodos é a região de cadeia de caracteres da planilha à qual você gostaria de aplicar o formato condicional.

    Muitos dos formatos condicionais que você pode adicionar à sua planilha têm uma cellFormat propriedade que determina a aparência das células quando a condição nesse formato condicional for verdadeira. Por exemplo, você pode usar as propriedades anexadas a essa cellFormat propriedade, como fill e font para determinar as configurações de plano de fundo e fonte de suas células, respectivamente.

    Quando um formato condicional é criado e aplicado cellFormat, há um subconjunto de propriedades que atualmente são suportadas pela célula da planilha. As propriedades que atualmente são respeitadas cellFormat​ ​fill são, Border propriedades formatString e algumas font propriedades, como tachado, sublinhado, itálico, negrito e cor. Muitos deles podem ser vistos no trecho de código abaixo.

    Existem alguns formatos condicionais que não têm uma cellFormat propriedade, pois sua visualização nas células se comporta de maneira diferente. Esses formatos condicionais são os DataBarConditionalFormat e. ColorScaleConditionalFormat​ ​IconSetConditionalFormat​

    Ao carregar uma pasta de trabalho pré-existente do Excel, os formatos serão preservados quando essa pasta de trabalho for carregada. O mesmo vale para quando você salva a pasta de trabalho em um arquivo do Excel.

    Veja a seguir uma lista dos formatos condicionais com suporte no controle Web Components IgcSpreadsheetComponent:

    • AverageConditionalFormat: Adicionado usando o addAverageCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de uma célula estar acima ou abaixo da média ou desvio padrão para o intervalo associado.
    • BlanksConditionalFormat: Adicionado usando o addBlanksCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor da célula não estar definido.
    • ColorScaleConditionalFormat: Adicionado usando o addColorScaleCondition método, esse formato condicional expõe propriedades que controlam a coloração de uma célula de planilha com base no valor da célula em relação aos valores mínimos, médios e máximos de limite.
    • DataBarConditionalFormat: Adicionado usando o addDataBarCondition método, esse formato condicional expõe propriedades que exibem barras de dados em uma célula de planilha com base no valor da célula em relação ao intervalo de valores associado.
    • DateTimeConditionalFormat: Adicionado usando o addDateTimeCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de data de uma célula estar dentro de um determinado intervalo de tempo.
    • DuplicateConditionalFormat: Adicionado usando o addDuplicateCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de uma célula ser exclusivo ou duplicado no intervalo associado.
    • ErrorsConditionalFormat: Adicionado usando o addErrorsCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base na validade do valor da célula.
    • FormulaConditionalFormat: Adicionado usando o addFormulaCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor da célula atender aos critérios definidos por uma fórmula.
    • IconSetConditionalFormat: Adicionado usando o addIconSetCondition método, esse formato condicional expõe propriedades que exibem ícones em uma célula de planilha com base no valor da célula em relação aos valores de limite.
    • NoBlanksConditionalFormat: Adicionado usando o addNoBlanksCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor da célula estar definido.
    • NoErrorsConditionalFormat: Adicionado usando o addNoErrorsCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base na validade do valor da célula.
    • OperatorConditionalFormat: Adicionado usando o addOperatorCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor da célula atender aos critérios definidos por um operador lógico.
    • RankConditionalFormat: Adicionado usando o addRankCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de uma célula estar dentro da classificação superior ou inferior de valores no intervalo associado.
    • TextOperatorConditionalFormat: Adicionado usando o addTextCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de texto de uma célula atender aos critérios definidos por uma cadeia de caracteres e um FormatConditionTextOperator valor conforme colocado nos addTextCondition parâmetros do método.
    • UniqueConditionalFormat: Adicionado usando o addUniqueCondition método, esse formato condicional expõe propriedades que controlam os atributos visuais de uma célula de planilha com base no fato de o valor de uma célula ser exclusivo no intervalo associado.

    Dependencies

    Para adicionar formatação condicional ao IgcSpreadsheetComponent controle, você precisará importar as seguintes dependências:

    import { CellFill } from "igniteui-webcomponents-excel";
import { Color } from 'igniteui-webcomponents-core';
import { ColorScaleType } from "igniteui-webcomponents-excel";
import { FormatConditionAboveBelow } from 'igniteui-webcomponents-excel';
import { FormatConditionIconSet } from 'igniteui-webcomponents-excel';
import { FormatConditionOperator } from 'igniteui-webcomponents-excel';
import { FormatConditionTextOperator } from 'igniteui-webcomponents-excel';
import { FormatConditionTimePeriod } from 'igniteui-webcomponents-excel';
import { FormatConditionTopBottom } from "igniteui-webcomponents-excel";
import { WorkbookColorInfo } from 'igniteui-webcomponents-excel';

    Code Snippet

    O snippet de código a seguir demonstra como adicionar cada um dos formatos condicionais a uma planilha no IgcSpreadsheetComponent controle:

    let sheet = this.spreadsheet.activeWorksheet;

let red = new Color();
red.colorString = "#ff0000";

let blue = new Color();
blue.colorString = "#0000ff";

let green = new Color();
green.colorString = "#00ff00";

let gray = new Color();
gray.colorString = "#d3d3d3";

let avgFormat = sheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
avgFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let blanksFormat = sheet.conditionalFormats().addBlanksCondition("B1:B10");
blanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let colorFormat = sheet.conditionalFormats().addColorScaleCondition("C1:C10", ColorScaleType.ThreeColor);
colorFormat.minimumThreshold.formatColor = new WorkbookColorInfo(red);
colorFormat.midpointThreshold.formatColor = new WorkbookColorInfo(blue);
colorFormat.maximumThreshold.formatColor = new WorkbookColorInfo(green);

let dataBarFormat = sheet.conditionalFormats().addDataBarCondition("D1:D10");

let dateTimeFormat = sheet.conditionalFormats().addDateTimeCondition("E1:E10", FormatConditionTimePeriod.NextWeek);
dateTimeFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let duplicateFormat = sheet.conditionalFormats().addDuplicateCondition("F1:F10");
duplicateFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let errorFormat = sheet.conditionalFormats().addErrorsCondition("G1:G10");
errorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let formulaFormat = sheet.conditionalFormats().addFormulaCondition("H1:H10", "=H1>2");
formulaFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let iconFormat = sheet.conditionalFormats().addIconSetCondition("I1:I10", FormatConditionIconSet.IconSet3TrafficLights1);

let noBlanksFormat = sheet.conditionalFormats().addNoBlanksCondition("J1:J10");
noBlanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let noErrorFormat = sheet.conditionalFormats().addErrorsCondition("K1:K10");
noErrorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let operatorFormat = sheet.conditionalFormats().addOperatorCondition("L1:L10", FormatConditionOperator.Greater);
operatorFormat.setOperand1(500);
operatorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let rankFormat = sheet.conditionalFormats().addRankCondition("M1:M10", FormatConditionTopBottom.Top, 5);
rankFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let textFormat = sheet.conditionalFormats().addTextCondition("N1:N10", "A", FormatConditionTextOperator.Contains);
textFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let uniqueFormat = sheet.conditionalFormats().addUniqueCondition("O1:O10");
uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

    API References