topic Re: Need a SidePopper example in ArcGIS Experience Builder Questions

Need a SidePopper example

KenBuja — Wed, 04 Sep 2024 20:02:54 GMT

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={() => {}} /> </>

Re: Need a SidePopper example

JeffreyThompson2 — Wed, 04 Sep 2024 20:47:20 GMT

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.

Re: Need a SidePopper example

KenBuja — Thu, 05 Sep 2024 14:19:53 GMT

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.

Re: Need a SidePopper example

JeffreyThompson2 — Thu, 05 Sep 2024 14:29:04 GMT

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