Apply unique value symbology to a feature layer in custom widget

986
3
Jump to solution
04-04-2022 12:15 PM
KisakyeM
New Contributor III

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 

1 Solution

Accepted Solutions
mileslee_esri
New Contributor II

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.

View solution in original post

3 Replies
mileslee_esri
New Contributor II

Hi KisakyeM, 

This is my working account for my personal account @milesleeaus, if you haven't solved this issue yet, would you please send me your completed widget folder about this question via my work email: mlee@esriaustralia.com.au  let's see what we can help you with ! Also let us know your EXB dev edition version, 1.7 right I guess !

0 Kudos
KisakyeM
New Contributor III

I sent the code to the email that you posted. Thank you. And yes. I am using ExB version 1.7.

0 Kudos
mileslee_esri
New Contributor II

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.