Nesting Components

Sometimes in the recent past WeWeb released updated modal elements—the two things I really like about these are 1) no longer a section and 2) you can close them with the esc key. So, I’ve started deprecating all my old modals and came across a scenario where I wonder if I’m pushing the out of the box capabilities too far.

I have a date range filter. The last option is “custom.” When you click on this it opens a modal (another component) where you can select a a date range (another component). Previously the modal was its own component but Im now trying to contain it all under one umbrella.


When a custom date range is selected from the date range picker, it should close the modal AND THEN the filter dropdown. Within the component I can set this up initially by “executing component actions” but then when I insert this component into any of my other pages it breaks—I open the component to edit and all of a sudden these component actions are empty.

What am I doing wrong here?

Hi John :waving_hand:

I’m asking our tech team to see if they can help you with this.

1 Like

I’ve described the issue here essentially imagine all components on different pages as having different workflows/actions, executing a component in a workflow on one page won’t work with the same component on a different page. It’s the same with using the same component more than once on the same page. If you made a had a workflow with a execute component action in it if you opened up a second one the workflow would break cause it wouldn’t identify the right action.

Global workflow on new alert (dialog) element not working using a global workflow - Ask us anything / How do I? - WeWeb Community

Hi John!

Experienced same issue with conditional rendering. When the component you’re referring to doesn’t exist (not rendered yet or rendering was turned off before the action) the “execute component action” in the workflow becomes empty.


In my example the parent form is opened (it exists), so component action is filled with its name and action type.


The child form is not opened (== not rendered), so the component action is empty. But it becomes populated as soon as child form is opened (== rendered). So despite the temporary blank component actions, the whole workflow works correctly .

Thanks @Yaj and @Batik_Okazov for sharing your thoughts.

Yaj, I’ve certainly experienced what you are referring to, but I thought by nesting no-code components under one component—a component which has a custom drop down with a “custom date” option, which opened a no code modal, with a no code date range selector inside— I wouldn’t run into this (more on this below).

Batik, yeah, I’m unfortunately too familiar with what you are referring to. I’ve started added comments in the description of actions to remind myself and any of my peers why the action might be blank. I wish this weren’t the case.

Ultimately, I think the symptom I was observing was a mix of both issues—I’d render the layers so the components would show in the actions properly > configure the workflow properly > test on one page successfully > then switch pages to test on that; this is where it would break presumably because of what Yaj was pointing to.

SOLUTION:
Well, I came back to this today with fresh eyes, and discovered a FLAW in my workflow. When I selected a date range from the nested no code date range picker, I was choosing to trigger the parent components workflow as opposed to just manipulating the local, component-level variable—the workflow which can be executed from outside is an antiquated artifact of how the old date range modal would communicate with the dropdown, but should no longer be necessary with all functionality self contained within this single component.

1 Like

Ah yup sorry I missed that it was a nested modal part cause yea that should work!

Glad you figured it out