-- Shared with Add-in Playground

Highlight over threshold - picker.yaml

id: cix19ajs000004q6qtzou1tja
gist: 1cab73650215403dc73b6017a747483e
source: ''
author: ''
name: Highlight over threshold - picker
description: ''
script:
  content: "interface JQuery {\n    spectrum(options?: any): any;\n}\n\n$(\"#picker\").spectrum({\n\_\_\_ color: \"purple\",\n\_\_\_ showInput: true,\n\_\_\_ preferredFormat: \"hex\",\n\_\_\_ showPalette: true,\n\_\_\_ hideAfterPaletteSelect: false,\n\_\_\_ palette: [\n\_\_\_\_\_\_\_ [\"black\", \"gray\", \"silver\"],\n\_\_\_\_\_\_\_ [\"white\", \"maroon\", \"red\"],\n\_\_\_\_\_\_\_ [\"olive\", \"yellow\", \"green\"],\n\_\_\_\_\_\_\_ [\"lime\", \"teal\", \"aqua\"],\n\_\_\_\_\_\_\_ [\"navy\", \"blue\", \"purple\"],\n\_\_\_\_\_\_\_ [\"fuchsia\"]\n\_\_\_ ]\n});\n\n$('#set-random-values').click(setRandomValues);\n$('#highlight').click(highlightSelection);\n\nfunction setRandomValues() {\n    console.log(\"hello daddy!\")\n    Excel.run((context) => {\n        var selection = context.workbook.getSelectedRange();\n        selection.getCell(0,0).getOffsetRange(0, -1) .values = [[\"katrina\"]]\n        selection.format.fill.clear();\n        selection.load(\"rowCount, columnCount\");\n        return context.sync()\n            .then(() => {\n                var valuesArray = [];\n                for (var r = 0; r < selection.rowCount; r++) {\n                    var rowValues = [];\n                    for (var c = 0; c < selection.columnCount; c++) {\n                        rowValues.push(Math.floor(Math.random() * 100));\n                    }\n                    valuesArray.push(rowValues);\n                }\n                selection.values = valuesArray;\n            })\n            .then(context.sync);\n    })\n    .catch(console.log)\n}\n\nfunction highlightSelection() {\n    var threshold = 90;\n    var highlightColor = $('#picker').spectrum(\"get\").toHexString();\n\n    Excel.run((context) => {\n        var selection = context.workbook.getSelectedRange();\n        selection.load(\"rowCount, columnCount, values\");\n        return context.sync()\n            .then(function() {\n                for (var r = 0; r < selection.rowCount; r++) {\n                    for (var c = 0; c < selection.columnCount; c++) {\n                        if (selection.values[r][c] >= threshold) {\n                            selection.getCell(r, c).format.fill.color = highlightColor;\n                        }\n                    }\n                }\n            })\n    })\n    .catch(console.log);\n}\n"
  language: typescript
style:
  content: "body {\r\n    padding: 0;\r\n    margin: 0;\r\n}"
  language: css
template:
  content: |-
    <h1 class="ms-font-l">
        Basic range operations
    </h1>

    <p>
      <button id="set-random-values" class="ms-Button">
        <span class="ms-Button-label">Set random values</span>
      </button>
    </p>

    <p> 
      <button id="highlight" class="ms-Button">
        <span class="ms-Button-label">
            Highlight values above threshold
        </span>
      </button>
      <input type="text" id="picker"/>
    </p>
  language: html
libraries: |-
  // Office.js CDN reference
  https://appsforoffice.microsoft.com/lib/beta/hosted/Office.js

  // NPM CDN references
  jquery
  office-ui-fabric/dist/js/jquery.fabric.min.js
  office-ui-fabric/dist/css/fabric.min.css
  office-ui-fabric/dist/css/fabric.components.min.css

  // IntelliSense definitions
  dt~office-js
  dt~jquery

  // An external library
  https://bgrins.github.io/spectrum/spectrum.css
  https://bgrins.github.io/spectrum/spectrum.js