colorpicker

181
2
10-17-2019 01:43 AM
Highlighted
Occasional Contributor

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.

Reply
0 Kudos
2 Replies
Highlighted
Frequent Contributor

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.

Highlighted
Occasional Contributor

Hi Rene,

That's really helpful - thank you.  

Have a good weekend,

Sarah.

Reply
0 Kudos