[Word] (ShapeFill) Add snippet for clear and set (#1022)

Author: ElizabethSamuel-MSFT

samples/word/45-shapes/manage-geometric-shapes.yaml

@@ -14,6 +14,8 @@ script:
         document.getElementById("get-first-geometric-shape").addEventListener("click", () => tryCatch(getFirstGeometricShape));
         document.getElementById("get-first-heptagon").addEventListener("click", () => tryCatch(getFirstHeptagon));
         document.getElementById("get-first-moon-fill").addEventListener("click", () => tryCatch(getFirstMoonColorFill));
+        document.getElementById("clear-first-moon-fill").addEventListener("click", () => tryCatch(clearFirstMoonColorFill));
+        document.getElementById("set-first-moon-fill").addEventListener("click", () => tryCatch(setFirstMoonColorFill));
 
         async function insertGeometricShape_Heptagon() {
           await Word.run(async (context) => {
@@ -136,6 +138,56 @@ script:
           });
         }
 
+        async function clearFirstMoonColorFill() {
+          await Word.run(async (context) => {
+            // Clears the color fill properties of the first moon found in the document body.
+            const moon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.moon])
+              .getFirstOrNullObject();
+            moon.load("fill");
+            await context.sync();
+
+            if (moon.isNullObject) {
+              console.log("No moons found in the document body.");
+              return;
+            }
+
+            const moonFill: Word.ShapeFill = moon.fill;
+            console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+            moonFill.clear();
+            moonFill.load();
+            await context.sync();
+
+            console.log("Cleared the color fill properties of the first moon found in the document body:", moonFill);
+          });
+        }
+
+        async function setFirstMoonColorFill() {
+          await Word.run(async (context) => {
+            // Sets color fill properties of the first moon found in the document body.
+            const moon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.moon])
+              .getFirstOrNullObject();
+            moon.load("fill");
+            await context.sync();
+
+            if (moon.isNullObject) {
+              console.log("No moons found in the document body.");
+              return;
+            }
+
+            const moonFill: Word.ShapeFill = moon.fill;
+            console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+            moonFill.setSolidColor("green");
+            moonFill.load();
+            await context.sync();
+
+            console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
+          });
+        }
+
         // Default helper for invoking an action and handling errors.
         async function tryCatch(callback) {
           try {
@@ -171,8 +223,15 @@ template:
             <button id="get-first-heptagon" class="ms-Button">
                 <span class="ms-Button-label">Get first heptagon</span>
             </button>
+            <h4>Work with color fill properties of the first moon</h4>
             <button id="get-first-moon-fill" class="ms-Button">
-                <span class="ms-Button-label">Get color fill of first moon</span>
+                <span class="ms-Button-label">Get color fill</span>
+            </button>
+            <button id="clear-first-moon-fill" class="ms-Button">
+                <span class="ms-Button-label">Clear color fill properties</span>
+            </button>
+            <button id="set-first-moon-fill" class="ms-Button">
+                <span class="ms-Button-label">Set color fill properties</span>
             </button>
         </section>
     language: html

snippet-extractor-metadata/word.xlsx

@@ -28252,6 +28252,62 @@ Word.ShapeFill:class:
       console.log(`\tTransparency: ${moonFill.transparency}`);
       console.log(`\tFill type: ${moonFillType}`);
     });
+Word.ShapeFill#clear:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
+
+
+    await Word.run(async (context) => {
+      // Sets color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
+      await context.sync();
+
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
+      }
+
+      const moonFill: Word.ShapeFill = moon.fill;
+      console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+      moonFill.setSolidColor("green");
+      moonFill.load();
+      await context.sync();
+
+      console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
+    });
+Word.ShapeFill#setSolidColor:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
+
+
+    await Word.run(async (context) => {
+      // Sets color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
+      await context.sync();
+
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
+      }
+
+      const moonFill: Word.ShapeFill = moon.fill;
+      console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+      moonFill.setSolidColor("green");
+      moonFill.load();
+      await context.sync();
+
+      console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
+    });
 Word.ShapeFillType:enum:
   - >-
     // Link to full sample: