colorpicker

Question

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:

ColorPickerNot plannedInstead, 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.

SarahNoakes1 · Answer

Hi Rene,

That's really helpful - thank you.

Have a good weekend,

Sarah.

RRubalcava · Answer

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. <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.