topic Re: Display features on side panel esri Javascript API 4.3 in ArcGIS JavaScript Maps SDK Questions

Display features on side panel esri Javascript API 4.3

Naga_RaghuveerModala — Thu, 30 Mar 2017 21:26:16 GMT

Is there any example that I can use to display features on side panel using Javascript API 4.3 ?

Re: Display features on side panel esri Javascript API 4.3

RobertScheitlin__GISP — Thu, 30 Mar 2017 22:09:37 GMT

What do you mean display features in the panel? Are you talking about the feature popup?

Re: Display features on side panel esri Javascript API 4.3

Naga_RaghuveerModala — Fri, 31 Mar 2017 11:37:58 GMT

Not a popup. I have a feature service showing some events. I want to display a list of those events in the side panel.

Re: Display features on side panel esri Javascript API 4.3

RobertScheitlin__GISP — Fri, 31 Mar 2017 11:41:12 GMT

Naga,

Then I would look at this sample:

View padding | ArcGIS API for JavaScript 4.3

Re: Display features on side panel esri Javascript API 4.3

Naga_RaghuveerModala — Fri, 31 Mar 2017 11:51:46 GMT

Thank you Robert. I will explore it.

Re: Display features on side panel esri Javascript API 4.3

Naga_RaghuveerModala — Fri, 31 Mar 2017 16:10:23 GMT

But, how can I get the list on the side panel ? The events get updated everyday

Re: Display features on side panel esri Javascript API 4.3

RobertScheitlin__GISP — Fri, 31 Mar 2017 16:48:27 GMT

Naga,

What do you mean... You just use the divs id and set the innerHTML for the div like you would do for any DOM manipulation.

Re: Display features on side panel esri Javascript API 4.3

ThomasSolow — Fri, 10 Dec 2021 21:43:41 GMT

What do you mean by list of features?

Do you mean that, for each graphic on the map (AKA feature), you want to want to place that feature in a list somewhere off the map? If so, what information do you want to include in that list? Do you want to see the symbol for each feature in the list?

If so you can pull in 'esri/symbols/support/symbolPreview' and use it like this:

// feature
var graphic;
// reference to list HTML element
var listRef;

var symbol = graphic.symbol ? graphic.symbol : graphic.layer.renderer.getSymbol(graphic);  

symbolPreview.renderPreviewHTML(symbol,{
   opacity: 1
}).then(svgElement => listRef.appendChild(svgElement))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you want to continuously add and remove features from the list, you have several options. You could add a listener to the layerView's collection of graphics and add/remove items from the list as they are added and removed to this map.

If this seems too complicated the legend widget might be what you want though. It can be rendered off the map in whatever element you pass in.

Re: Display features on side panel esri Javascript API 4.3

Naga_RaghuveerModala — Fri, 31 Mar 2017 18:51:31 GMT

Yes, for each graphic on the map I want to place that feature in a list. I want to list the name and few attribute information along with the symbol on the list. I am looking something similar to the "Info Summary" widget in Web App Builder. The features on the map are added and deleted continuously.

Re: Display features on side panel esri Javascript API 4.3

ThomasSolow — Fri, 10 Dec 2021 21:43:44 GMT

My approach would be to add a listener to the collection of client side graphics.

You could do this like:

view.whenLayerView(featureLayer).then(function(layerView){
   layerView.featuresView.graphics.on("change", function(changes){
      changes.added.forEach(function(graphicAdded){
         // add graphic to list.  create a new html element, fill it with information
         // from graphic, append it to list.  give it a unique id based on the graphic.uid
         // if you want to render the graphic's symbol, use renderer as shown above here
      })
      
      changes.removed.forEach(function(graphicRemoved){
         // remove graphic from list. use graphic uid to find element to remove
      })
   })
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can use the symbolPreview approach I mentioned above to get the symbol for a given graphic.

Re: Display features on side panel esri Javascript API 4.3

BarbaraPutnam1 — Wed, 12 Apr 2017 21:31:49 GMT

In the 4.3 api I don't see 'esri/symbols/support/symbolPreview', The only object under esri/symbols/support is JsonUtils. Where did you find symbolPreview? It sounds like it will generate the SVG descripter from an input symbol or graphic which is what I want to do. Thanks

Re: Display features on side panel esri Javascript API 4.3

RobertScheitlin__GISP — Wed, 12 Apr 2017 22:34:33 GMT

Babara,

It is a class that has not be documented yet. I spoke the the dev team about this last month at the Dev Summit.

Re: Display features on side panel esri Javascript API 4.3

BarbaraPutnam1 — Wed, 12 Apr 2017 22:59:40 GMT

Is it in the 4.3 api currently? When I try to reference it from my app, it says it can't be found. Is there a way to get ahold of the code if its not in the package? Thanks

Re: Display features on side panel esri Javascript API 4.3

RobertScheitlin__GISP — Thu, 13 Apr 2017 12:57:57 GMT

Barbara,

Yes it is part of 4.3 (it is just not documented). Thomas gives examples of how to add it to your requires and some basic code for it's use above.

Re: Display features on side panel esri Javascript API 4.3

ThomasSolow — Thu, 13 Apr 2017 13:02:30 GMT

Yeah, like Robert said, it's not in the SDK documentation, but it is in 4.3.

You can pull it in the same way you'd pull in any other module: JS Bin - Collaborative JavaScript Debugging

Re: Display features on side panel esri Javascript API 4.3

BarbaraPutnam1 — Fri, 14 Apr 2017 18:39:54 GMT

Thanks Thomas and Robert!,