topic Re: Customize built-in widgets in ExB in Experience Builder Custom Widgets

Customize built-in widgets in ExB

MajeedP — Fri, 01 Dec 2023 21:42:49 GMT

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:

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.

Re: Customize built-in widgets in ExB

MajeedP — Thu, 07 Dec 2023 21:37:39 GMT

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/

Re: Customize built-in widgets in ExB

ENGEOGIS1 — Tue, 05 Mar 2024 01:55:50 GMT

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!

Re: Customize built-in widgets in ExB

GeeteshSingh07 — Tue, 05 Mar 2024 04:32:19 GMT

@MajeedP @ENGEOGIS1 , I also have same question. Also, where to find the existing widgets? where is "dist" folder?

Re: Customize built-in widgets in ExB

ENGEOGIS1 — Tue, 05 Mar 2024 20:57:40 GMT

Hi @GeeteshSingh07 I downloaded the EXB dev edition, inside the client folder there are the code files for the existing widgets:

..\ArcGISExperienceBuilder\client\dist\widgets

Re: Customize built-in widgets in ExB

ENGEOGIS1 — Tue, 05 Mar 2024 20:58:36 GMT

Forgot to mention @MajeedP - if you have any insights, would highly appreciate it. Thanks!