Display features on side panel esri Javascript API 4.3

[Naga_RaghuveerModala]

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

[RobertScheitlin__GISP]

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

[Naga_RaghuveerModala]

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

[RobertScheitlin__GISP]

Naga,

   Then I would look at this sample:

View padding | ArcGIS API for JavaScript 4.3 

[Naga_RaghuveerModala]

Thank you Robert. I will explore it.

[Naga_RaghuveerModala]

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

[RobertScheitlin__GISP]

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.

[ThomasSolow]

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.

[Naga_RaghuveerModala]

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.

[ThomasSolow]

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.