v.1.0.93
PricingBlog
Sign up
Open app
All topics

👨👦 Trigger workflow in component from parent.

  • .mark.g-1241077747300831324

    Mark Green

    1 year ago

    I created a toast component with it's visibility triggered by a class which in turn is controlled by a variable with a boolean. I created a workflow to control the behavior of the toast (When workflow > set variable to true > sleep 5000 > set variable to false). How can I trigger this workflow from its parent which will be the main webpage? Ideally I want to be able to place a button on a page, and when click is triggered, then run my components variable.

    Not sure I'm even going about this the right way but I did try every way I could think of for about 3 hours before coming here. 😊
  • Tod-1241077749125349426

    Tod

    1 year ago

    Great energy @Mark Green! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • .mark.g-1241078813337718874

    Mark Green

    1 year ago

    👨👦 Trigger workflow in component from parent.
  • .muhlis.-1241843600795504761

    Muhlis

    1 year ago

    Hi Mark I think I now the answer but didn’t quite get what you are asking. Can you clarify a little bit
  • .mark.g-1241860657410867252

    Mark Green

    1 year ago

    Thanks! How can I trigger a workflow in a component, from the parent?
  • 767179293284892708-@Mark Green
    Thanks! How can I trigger a workflow in a component, from the parent?
    lucasg-1241906861213614090

    Lucas G

    1 year ago

    Contexts
  • https://www.youtube.com/watch?v=KHCopeS0Fk4
  • jacobkofoed-1242402415924346930

    Jacob Kofoed

    1 year ago

    I'm not sure context is the whole solution here. The short answer to "How can I trigger a workflow in a component, from the parent" is that you try your best not to. You should reverse the mental model and only trigger events in parents from children.

    Data flows down-stream (from parents to children), and events propagate up against that stream. If your event mutates data in a child, then you should probably lift the state (data) from the child to the parent.

    This is a limitation of many modern frameworks today, as it makes handling state much more scalable.

    I'm not sure I understand your exact problem, but feel free to share some more information and maybe a link to your project? Perhaps I can give you some more explicit help. For reference, I implemented a toast-component some time ago that utilize context and holds all the state in a single parent component. Each toast is just an entry in a single array held at the top. The toasts only inform the parent to close them, when they are clicked.

    https://editor.nordcraft.com/projects/ui_toast/branches/main/components/HomePage
  • gazinhio-1242493835796549672

    gazinhio

    1 year ago

    The way I dealt with this is to have a transition that lasts a certain length of time and then have a workflow on the TransitionEnd event (under Animation in Events) which sets the toast invisible. Have a look at it here is you want : https://discord.com/channels/972416966683926538/1146002864678916136
  • .mark.g-1242547790328889404

    Mark Green

    1 year ago

    Thank you guys! So with the toast component, if I want to make a click event anywhere on the screen dismisses it how can I do that? Within the component I can create the event but once I put the component on my page, I can’t trigger it from outside of the components div.
  • .mark.g-1242606832187342878

    Mark Green

    1 year ago

    Here’s a better example that explains my question: I created a component that has an input with a dropdown selection. I set it up so when you click the input, the dropdown appears, and when you click away from it, it disappears. However the click away does not work in the parent, only inside the component used.
  • 767179293284892708-@Mark Green
    Here’s a better example that explains my question: I created a component that has an input with a dropdown selection. I set it up so when you click the input, the dropdown appears, and when you click away from it, it disappears. However the click away does not work in the parent, only inside the component used.
    lucasg-1242608459803791440

    Lucas G

    1 year ago

    Try this
  • https://editor.nordcraft.com/projects/shared_components/branches/playground/components/test?leftpanel=design&canvas-width=800&canvas-height=800
  • .mark.g-1242616528805826593

    Mark Green

    1 year ago

    Thanks! What's doing the trick, the slots or the popover?
  • lucasg-1242665624971378748

    Lucas G

    1 year ago

    Popover API
  • .mark.g-1242694423997972532

    Mark Green

    1 year ago

    Wow this could definitely do the trick! Will test in the morning. Is there a way to achieve this parent > action action without APIs? Say I want to use a keydown event to navigate my popover menu inside my component?
Leave a comment
Nordcraft Co-Founders Kasper Svenning Hansen and Andreas Møller

Chat with Nordcraft

Chat with the Nordcraft team

Nordcraft Co-Founder and CEO Andreas Møller

Call our CEO

Plan a video call with Andreas

Hi Nordcraft!

Write Nordcraft

Send us an email

BlogPricingDocumentationhello@nordcraft.com
RoadmapPress KitTerms & ConditionsPrivacy PolicyAffiliate
© Nordcraft 2025. All rights reserved.