This is the sample code to show the usage of slicer richapi

Slicer-Sample.EXCEL.yaml

name: Slicer-Sample
description: This is the sample code to show the usage of slicer richapi
host: EXCEL
api_set: {}
script:
  content: >
    $("#createaslicer").click(() => tryCatch(createslicer));

    $("#slicerstyleandposition").click(() => tryCatch(slicersandp));

    $("#deselectsliceritems").click(() => tryCatch(deselectsliceritems));

    $("#sliceritemoperation").click(() => tryCatch(sliceritem));

    $("#sliceritemagelessthan20").click(() =>
    tryCatch(sliceritemagelessthan20));

    $("#clearselection").click(() => tryCatch(clearselection));

    $("#deleteslicer").click(() => tryCatch(deleteslicer));

    $("#slicerstyle").click(() => tryCatch(slicerstyle));


    var sheetname = "RayDemo";

    var colname = "Country";

    var pivotname = "Table1";

    var slicerpos = 0;

    var slicerMystyle = 1;


    async function createslicer() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicerAdded = sheet.slicers.add(pivotname, colname);
        slicerAdded.load("name");
        await context.sync();
        console.log(`Happiness slicer created: "${slicerAdded.name}".`);
      });
    }


    async function slicersandp() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        if (slicerpos > 4) {
          slicerpos = 0;
        }
        slicer.left = slicerpos * 100;
        slicer.top = slicerpos * 100;
        slicerpos++;
      });
    }


    async function slicerstyle() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        //slicer.style = "SlicerStyleLight2";
        if (slicerMystyle > 6) {
          slicerMystyle = 1;
        }

        slicer.style = "SlicerStyleLight" + slicerMystyle;
        slicerMystyle++;
      });
    }


    async function deselectsliceritems() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        slicer.load("name");

        // deselect slicer items
        var slicerItemCount = slicer.slicerItems.getCount();
        await context.sync();
        console.log(`Slicer item count: "${slicerItemCount.value}".`);

        slicer.selectItems();
        await context.sync();

        console.log(`Deselect slicer items of slicer: "${slicer.name}".`);
      });
    }


    async function sliceritemagelessthan20() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        slicer.load("name");
        // operate on slicer1 items
        var slicerItemCount = slicer.slicerItems.getCount();
        await context.sync();
        console.log(`Slicer item count: "${slicerItemCount.value}".`);

        slicer.selectItems(["7", "8", "10", "11", "14"]);
        await context.sync();

        console.log(`Select slicer items with age < 20 slicer: "${slicer.name}".`);
      });
    }


    async function sliceritem() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        // operate on slicer1 items
        var slicerItemCount = slicer.slicerItems.getCount();
        await context.sync();
        console.log(`Slicer item count: "${slicerItemCount.value}".`);

        // read properties
        var slicerItem1 = slicer.slicerItems.getItemAt(0);
        slicerItem1.load("name");
        slicerItem1.load("key");
        slicerItem1.load("isSelected");
        slicerItem1.load("hasData");
        await context.sync();
        console.log(`Slicer item1 name: "${slicerItem1.name}".`);
        console.log(`Slicer item1 key: "${slicerItem1.key}".`);
        console.log(`Slicer item1 isSelected: "${slicerItem1.isSelected}".`);
        console.log(`Slicer item1 hasData: "${slicerItem1.hasData}".`);

        // write property
        await context.sync();
        slicerItem1.isSelected = false;

        slicerItem1.load("isSelected");
        await context.sync();
        console.log(`Slicer item1 isSelected: "${slicerItem1.isSelected}".`);
      });
    }


    async function clearselection() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        slicer.clearFilters();
        await context.sync();
        console.log("slicer filter cleared");
      });
    }


    async function deleteslicer() {
      await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getItem(sheetname);
        var slicer = sheet.slicers.getItem(colname);
        slicer.delete();
        await context.sync();
        console.log("slicer deleted");
      });
    }


    /** Default helper for invoking an action and handling errors. */

    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        OfficeHelpers.UI.notify(error);
        OfficeHelpers.Utilities.log(error);
      }
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p>This sample shows how slicer works using the Excel RichAPI.</p>\n</section>\n \n\t<section class=\"samples ms-font-m\">\n\t\t<h3>Slicer</h3>\n        <button id=\"createaslicer\" class=\"ms-Button\">\n            <span class=\"ms-Button-label\">Create a slicer</span>\n        </button>\n\t    <button id=\"slicerstyleandposition\" class=\"ms-Button\">\n            <span class=\"ms-Button-label\">change position</span>\n        </button>\n\t\t\t\t<button id=\"slicerstyle\" class=\"ms-Button\">\n\t\t\t\t            <span class=\"ms-Button-label\">change Style</span>\n\t\t\t\t  </button>\n\n\t\t<button id=\"clearselection\" class=\"ms-Button\">\n            <span class=\"ms-Button-label\">Select all slicer items</span>\n        </button>\n\t\t<button id=\"deleteslicer\" class=\"ms-Button\">\n            <span class=\"ms-Button-label\">Delete the slicer</span>\n        </button>\n    </section>\n\n"
  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

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  @microsoft/[email protected]/dist/office.helpers.min.js
  @microsoft/[email protected]/dist/office.helpers.d.ts

  [email protected]
  @types/jquery