I am trying to make changes to a built-in widget. As an example, let's say I want to take Map Layers widget and modify it:
I want to change transparency to a slider, instead of current buttons. What I did was to find widget files from ArcGISExperienceBuilder\client\dist\widgets\arcgis\map-layers and create a new custom widget from them. I started working with them and noticed that it uses DataActionList like this:
<DataActionList widgetId={this.props.id} dataSet={dataSet}></DataActionList>
If I want to add a new action to the list of actions in this widget, how do I generate html component for it? I checked DataActionList and it only takes a buttonType:
/// <reference types="react" />
/** @jsx jsx */
import { React, type IMThemeVariables, type DataRecordSet, type ThemeButtonType } from 'jimu-core';
import { type ButtonSize } from './button';
export declare enum DataActionListStyle {
IconList = "ICON_LIST",
List = "LIST",
Dropdown = "DROPDOWN"
}
interface Props {
/** The widget id that is using this data-action list */
widgetId: string;
/** Whether it's batch-action, which passes in dataSets */
isBatch?: boolean;
/** The dataSet used for generating data-action list */
dataSet?: DataRecordSet;
/** The dataSets used for generating data-action list, it should work with isBatch field */
dataSets?: DataRecordSet[];
/** The data-action-list style, could be 'list', 'icon-list' or 'dropdown' */
listStyle?: DataActionListStyle;
/** The dropdown-button type */
buttonType?: ThemeButtonType;
/** The dropdown-button size */
buttonSize?: ButtonSize;
}
/** This component displays available DataAction in an list, icon-list or dropdown style.
* Widgets that need to use DataAction can use this component.
* To display in a specific style, just pass `listStyle` with 'list', 'icon-list' or 'dropdown'
*
* You can use this component by:
*
* `import { DataActionList } from 'jimu-ui'`
*/
export declare const DataActionList: React.ForwardRefExoticComponent<Pick<Props, keyof Props> & {
theme?: IMThemeVariables;
}>;
export {};
how do I modify things to add a slider for the map-layers, without writing the whole thing from scratch and incorporating it to the current Map Layers widget.
Accepted Solutions
I modified the map-layers widget so that the transparency is a slider not a data action. the code is here:
https://github.com/Majeedpy/new-map-layers-widget/
I modified the map-layers widget so that the transparency is a slider not a data action. the code is here:
https://github.com/Majeedpy/new-map-layers-widget/
Hi Majeed, may I ask how do you adapt the existing out-of-box widget code? Do you start a new custom widget folder in the "your-extensions" folder in Dev edition? and just copy the original widget from "dist" to there, did you have to change the config.json and the manifest.json files? Somehow when I did these steps above, the new custom widget is not showing up in my EXB Dev Edition UI....
See below screenshot, the left is all the custom widgets I've included inside the "your-extensions/widgets" folder (both those I started from scratch and those I adapted from default widgets from the dist code). The right shows what are available in my Dev Edition local UI. You can see a number of those adapted from default widget are NOT showing up.... Any suggestions would be greatly appreciated! Thanks!
