colorpicker

SarahNoakes1 · ‎10-17-2019

Hi,

I've noticed this morning that v4.13 of the JavaScript API has been released. The thing I've been waiting for before I can migrate all my apps is a colorpicker and I see that this page Functionality matrix | ArcGIS API for JavaScript 4.13 has been updated with this:

ColorPicker

Not planned

Instead, this will be available in the Esri/calcite-components project.

I've had a quick Google rummage and I can't find much out about the calcite components project. Apologies for sounding like a numpty, but can someone explain to me what it is and how I use it?
And if someone can tell me an expected date for the colorpicker, that would be brilliant.

Many thanks,

Sarah Noakes

Cornwall Council.

ReneRubalcava · ‎10-17-2019

The calcite-components are a set of web components that are used in various Esri apps. The idea is that non-GIS components, like the color picker will become part of this library. Web components make reusability much simpler for these components.

Here is a demo using the loader component with an ArcGIS JSAPI app.

jsapi with calcite-components

I can do something like this.

<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      ...
      calcite-loader {
        position: absolute;
        top: 40%;
        left: 50%;
      }
    </style>
    ...
    <script src="https://unpkg.com/@esri/calcite-components@1.0.0-beta.2/dist/calcite/calcite.js"></script>
    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(Map, MapView, FeatureLayer) {
        const loader = document.querySelector("calcite-loader");
        
        ...
        
        // when view is ready
        view.when(() => {
          loader.isActive = false;
        });
        ...

        function queryFeatures(screenPoint) {
          // set loader active
          loader.isActive = true;
          ...
          layer
            .queryObjectIds({
              ...
            })
            .then(function(objectIds) {
              ...
            })
            .then(function(attachmentsByFeatureId) {
              ...
              // set active false
              loader.isActive = false;
            })
            .catch(function(error) {
              ...
            });
        }
        ...
    </script>
  </head>
  <body>
    ...
    <div id="viewDiv">
      <calcite-loader text="Fetching data..." is-active></calcite-loader>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can treat these components like any other DOM element, but they can have properties and even methods that you can interact with.

Doesn't look like there is a set date for the color picker as of yet though, but it is in development.

SarahNoakes1 · ‎10-18-2019

Hi Rene,

That's really helpful - thank you.

Have a good weekend,

Sarah.