Need a SidePopper example

[KenBuja]

Is there any working code available to show how to use the SidePopper in the settings.tsx? While the code in the documentation works on the doc page, it doesn't create a SidePopper in my application. The only places I see it used in the code base are in js files.

<>
  <div
    data-layoutid="right-sidebar-right-layout"
    style={{
      border: '1px solid',
      height: 'calc(100% - 70px)',
      minHeight: '350px',
      padding: '16px',
      position: 'absolute',
      right: 0,
      top: 0,
      width: '260px'
    }}
  >
    <h3>
      Widget setting panel
    </h3>
    <div
      ref={{
        current: '[Circular]'
      }}
      style={{
        border: '1px solid'
      }}
    >
      <h4>
        Side popper trigger area
      </h4>
      <p>
        Clicking this area won't close the side popper.
      </p>
      <p>
        Clicking other area will close the side popper.
      </p>
      <Button onClick={() => {}}>
        Toggle side popper
      </Button>
    </div>
  </div>
  <SidePopper
    position="right"
    toggle={() => {}}
  />
</>

[JeffreyThompson2 · Accepted solution]

Anytime the Storybook has a ()=>{} it means fill this in with a function that does what you want.

To make the SidePopper work, you will need some piece of state to handle it opening and closing. It should look something like this.

const [open, setOpen] = useState(false)

return(
<>
<Button onClick={()=> (setOpen(!open))}><Button/>
<SidePopper isOpen={open} />
</>
)

There's probably some sort of syntax error in there somewhere, but it should be close to right.

[KenBuja]

Thanks Jeffrey

I really wish Esri would step up their efforts on getting proper documentation for Experience Builder. So many things are missing from the API Reference and it's tough digging through the code base to figure out how to use things.

[JeffreyThompson2]

No argument here. But, there is something of a technical limitation to proper documentation for the Storybook specifically. Because the Storybook itself is written in React, if the functions were actually written out, they would be active and could cause all sorts of chaos. Still, they could include some comments about "you need to write a function here."