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

[MichaelLev]

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

[JeffreyThompson2 · Accepted solution]

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>
  )

[MichaelLev]

@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.

[MichaelLev]

@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.

[JeffreyThompson2 · Accepted solution]

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-moda...

[MichaelLev]

@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.

[JeffreyThompson2 · Accepted solution]

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>
  )
}