excel-no-fill-vs-white-detection.yaml

name: No Fill vs FFFFFF Detection Test
description: Demonstrates that getCellProperties() and format.fill.color both return FFFFFF even when a cell has No Fill in Excel.
host: EXCEL
api_set: {}
script:
  content: |-
    document.getElementById("setup").addEventListener("click", setup);
    document.getElementById("run").addEventListener("click", runRead);

    async function setup() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();

        // Clean up and label
        const used = sheet.getUsedRangeOrNullObject();
        used.load("address"); await context.sync();
        if (!used.isNullObject) used.clear();

        sheet.getRange("B1").values = [["A1: No Fill"]];
        sheet.getRange("B2").values = [["A2: Solid White (#FFFFFF)"]];
        sheet.getRange("B4").values = [["Select A1 or A2, then click 'run'"]];

        const a1 = sheet.getRange("A1");
        const a2 = sheet.getRange("A2");
        a1.format.fill.clear(); // No fill
        a1.values = [["(A1)"]];
        a2.format.fill.color = "#FFFFFF"; // Explicit white
        a2.values = [["(A2)"]];

        sheet.activate();
        await context.sync();
        console.log("Setup complete — A1: No Fill; A2: #FFFFFF.");
      });
    }

    async function runRead() {
      await Excel.run(async (context) => {
        const range = context.workbook.getSelectedRange();

        // Read only fill color and pattern
        const propsReq = range.getCellProperties({
          format: { fill: { color: true, pattern: true } }
        });

        // Compare legacy .load API
        range.format.fill.load("color");
        await context.sync();

        const props = propsReq.value;
        const first = props[0][0];

        console.log("=== Read Results ===");
        console.log("getCellProperties.fill.color:", first.format.fill.color);
        console.log("getCellProperties.fill.pattern:", first.format.fill.pattern);
        console.log("format.fill.color (load):", range.format.fill.color);
        console.log(
          "Is getCellProperties.fill.color === #FFFFFF ?",
          (first.format.fill.color || "").toUpperCase() === "#FFFFFF"
        );
      });
    }
  language: typescript
template:
  content: |-
    <button id="setup" class="ms-Button">
        <span class="ms-Button-label">Setup</span>
    </button>
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts

  https://unpkg.com/[email protected]/dist/css/fabric.min.css
  https://unpkg.com/[email protected]/dist/css/fabric.components.min.css