Apply unique value symbology to a feature layer in custom widget

KisakyeM

I am new to experience builder and javascript as a whole so please bear with me. I am creating a custom widget that will apply unique value symbols to a feature layer (set in the settings file of the widget) based on a given field. So far I have been able to access the feature layer on line 13 but I am unsure how to apply the symbology on the feature layer. On the returned feature layer's methods, I didn't see any method to set the renderer.

 

 

 /** @jsx jsx */
 import { React, AllWidgetProps, jsx, DataSourceComponent,
SqlQueryParams, DataSourceManager, QueriableDataSource,
DataSource } from "jimu-core";
 import { JimuMapViewComponent, JimuMapView, FeatureLayerDataSource } from "jimu-arcgis";
 import Point from "esri/geometry/Point";
 import { Button } from 'jimu-ui'
 export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> 
 {
 
  onButtonClicked = e => {
    const datasrc=this.props.useDataSources[0]
    const fl=DataSourceManager.getInstance().getDataSource(datasrc.dataSourceId) as FeatureLayerDataSource
    //need to set a renderer to fl here
  }

   render() {
     return <div className="widget-starter jimu-widget">
        <DataSourceComponent 
          useDataSource={this.props.useDataSources[0]}
          widgetId={this.props.id}
        />

        <Button onClick={this.onButtonClicked} size="default">
          Button
        </Button>
      </div>;
   }
 }

 

 

@Jianxia @GavinRehkemper @milesleeaus @EmilieRabeau @SpatialNinja @TonghuiMing @jcarlson @KenBuja @RhettZufelt @ShengdiZhang @ZhifangWang @DaveFullerton @DavidMartinez 

mileslee_esri

Hi KisakyeM,

Please find my modified codes which it's solved, noted that you have to modify both setting.tsx and widget.tsx and then select data source and map object. 

In your setting.tsx, I saw you disable the <MapWidgetSelector>, which I think you would need to enable it, and then you can select the Map Object for using before launching app. Then in you widget.tsx, firstly you need to set up <JimuMapViewComponent>, and then you would need to write additional lines of code to add layer into the Map Object after you select the option for rendering the symbologies, cuz I didn’t see you have codes adding the layer into the Map Object, I think this is the reason why you can’t see MapView got updated the symbology based on your selected field.

ShowColl.zip

RN_Rapport.xlsx