topic Re: How to show dialog box (with either radio buttons or dropdown list) in Experience Builder Custom Widgets

How to show dialog box (with either radio buttons or dropdown list)

MichaelLev — Mon, 05 Feb 2024 08:33:49 GMT

From custom widget, I need to ask the user to select between some choices, and the like.

I thought to present him with a dialog box.

I failed to open a jQuery dialog box from my function widget (even that I don't get an error message),

and I don't yet know how to use react to display a dialog box (and get result from it).

Help will be greatly appreciated

Re: How to show dialog box (with either radio buttons or dropdown list)

JeffreyThompson2 — Mon, 05 Feb 2024 13:30:33 GMT

It's important to keep in mind when working in React that everything is happening in the Javascript through the Virtual DOM and nothing is actually in the DOM. It's very difficult to get jQuery to work with React because jQuery manipulates the actual DOM, not the Virtual DOM.

For related reasons, you will also need to build a function to capture any user inputs and store them in state. A simple textArea input would look something like this.

const [textarea, setTextarea] = useState( "The content of a textarea goes in the value attribute" ); const handleChange = (event) => { setTextarea(event.target.value) } return ( <form> <textarea value={textarea} onChange={handleChange} /> </form> )

Re: How to show dialog box (with either radio buttons or dropdown list)

MichaelLev — Mon, 05 Feb 2024 15:08:31 GMT

@JeffreyThompson2 thank you very much for your bright explanation. Indeed I have found in the internet some code examples for implementing radio buttons in react environment, and I'll analyse them and implement as fits me.

Meanwhile I used js prompt to get user's choice, and this deceived me to think jQuery will also work same as js prompt works.

Re: How to show dialog box (with either radio buttons or dropdown list)

MichaelLev — Thu, 15 Feb 2024 15:31:30 GMT

@JeffreyThompson2 I tried to follow How to create Dialog Box in ReactJS? but it uses Material UI lib, and I do not know how to incorporate this lib either to the widget or to the whole app. I need instructions how to do it.

Re: How to show dialog box (with either radio buttons or dropdown list)

JeffreyThompson2 — Thu, 15 Feb 2024 18:18:04 GMT

Experience Builder comes packaged with reactstrap as the default UI library. You can use the modal component to get what you want. https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-index-modal--docs

Re: How to show dialog box (with either radio buttons or dropdown list)

MichaelLev — Sun, 25 Feb 2024 12:26:16 GMT

@JeffreyThompson2 , Thank you for showing the way. I searched in EXB for "Modal" and found its usage in dist/widgets/arcgis/query.

Since I'm new to React, It'll help me if I can see some simple barebone code example, or get some explanations how to adapt it from there.

Re: How to show dialog box (with either radio buttons or dropdown list)

JeffreyThompson2 — Mon, 26 Feb 2024 15:42:03 GMT

A simple model would look like this.

import {React} from 'jimu-core' import {Modal, Button} from 'jimu-ui' const {useState} = React const Widget = (props) => { const [open, setOpen] = useState(false) const handleOpen = () => { setOpen(!open) } return( <div> <Button onClick={handleOpen} > Open Modal </Button> <Modal isOpen={open} > Modal Content <Button onClick={handleOpen} > Close Modal </Button> </div> ) }