Modal as part of component

Ask us anything How do I?
,
1

Hi there,

I am trying to create a component that I can use in different contexts.

I managed to define a collection paramater, to bind the correct Xano collection for each context. So I am able to contextually render the correct data in a data list (table). The table is using the same column structure for each context.

In the component I have added a Button to add a new record to the data list. I want to trigger a modal with a simple form. But I am not able to add the Modal in the component, because the modal is based on a section.

As a workaround I added a variable that is exposed outside of the component to show the modal.

Now I need to add the Modal on page level. But I prefer to have the modal being part of the component itself, because this would make the elements used on the page where I want to use the component and memory usage of the editor more efficient.

Furthermore, the variable that is exposed outside of the component is available to be assigned in the display property of the modal section, but it is not available in the workflow on the modal on page level. For example: I can’t change to exposed variable value on the close icon of the modal.

Questions I have:

  • Is there a way or workaround to have a modal like functionality on component level?
  • Is it possible to have access to exposed component variables in workflows on page level?
1 Like
2

Did you find any solutions for this? We would also need that

3

Not yet. I did put de content of the modal in a component. But the modal itself is on the root page. It not ideal but it works for now.

1 Like
4

maybe @Joyce has an idea? :slight_smile:

5

Stumbled upon this when searching for something else, and I have the solution. Then I asked Claude.ai to coolify the recipe :laughing:

DIY Modal Component: The Cool Way

Hey there, modal enthusiast! So you wanna make your own reusable modal, huh? Let’s break it down into bite-sized chunks:

  1. The Backdrop (aka “The Dimmer”):
  • Whip up a div that covers the whole screen
  • Stick it in place with position: fixed
  • Crank up that z-index so it sits on top of everything
  • Give it a semi-transparent black background for that dramatic effect
  • Make it clickable to close the modal (fancy!)
  1. The Star of the Show (Your Modal):
  • Nest this bad boy inside your backdrop
  • Throw in a dropzone so you can stuff whatever content you want in there
  1. Click Control:
  • Use that fancy “stopPropagation” thing on clicks inside the modal
  • This way, clicking the modal doesn’t accidentally close it (whoops!)
  1. Open Sesame (and Close-y):
  • Create a boolean called “open” (original, right?)
  • Cook up a workflow to flip this boolean on and off
  • Here’s the kicker: Make sure this workflow can be triggered from outside the component (Think of it like a remote control for your modal)
  • Use this boolean to play peek-a-boo with your backdrop div
  1. Showtime:
  • Whenever you need your modal, just trigger that open/close workflow
  • Voila! Modal magic at your fingertips

And there you have it! A flexible, reusable modal that you can sprinkle all over your project like confetti. Now you’ve got a modal that plays nice with others and comes when it’s called. Happy coding!

image
image2395Ă—1213 198 KB

1 Like
6

step 6 make it accessible :slight_smile:

7

I didn’t quite understand what you shared here

8

It’s now possible with the new Modal (Dialog) in production!

3 Likes