Cannot access element actions in children slots

Issues
1

I have a code component in my global PageLayout component that exposes element actions and some data in $ctx

I’m successfully able to:
• Use the data within the PageLayout component
• Use the element actions within the PageLayout component
• Use the data in the pages that use PageLayout (ie “children” slot)
However, I can’t seem to access the element actions in the pages that use PageLayout (ie its children) (even though I can access it’s data in there).

Is this expected behaviour? Any way around it?

@jason this relates to what we were talking about earlier (see thread)

image.png
image.png442×589 26.4 KB

2

AuthProvider and plasmic-init attached

AuthProvider.tsx

plasmic-init.ts

3

I’m in Nextjs pages router, using Plasmic Loader

4

Note that I first tried using AuthProvider as a global context, but typescript said that refActions was not available (ie element actions were not allowed in a global context)

5

Hi @definitive_ermine! Does it work if you use globalActions in the global context registration, instead of refActions?

6

Yes I agree global actions will work better here. Note globalActions is a new feature we just released. I’m working on docs for it now.

7

To your original question

However, I can’t seem to access the element actions in the pages that use PageLayout (ie its children) (even though I can access it’s data in there).
You’re correct that element actions in a component can’t be called by consumers of the component. They can only be used internally right now (unlike DataProvider). We’ll look into the possibility of allowing them to be used by consumers.

Here are a few workarounds for this:

  1. Use global context with global actions as mentioned by Victor
  2. Expose actions as functions in the DataProvider, like:
interface AuthData {
  user: User
  login: (credentials) => { /* login */ }
  logout: () => { /* logout */ }
}

Now when you add an interaction, use “Run code” and type in $ctx.auth.login(). It’s a bit more code instead of clicking, but the actions will properly flow.
3. Change ParentLayout to a code component and expose AuthProvider functions as element actions on the code component as usual.

8

Thanks heaps for the help!

I ended up using Global Context, and exposing functions in the DataProvider of the Global context.
I tried global actions and couldn’t get them to work

Cheers

9

Hey Callum, sorry you had trouble setting up the global context. That’s partially our fault since we didn’t have the docs updated. I just took the time to update these docs in case you try again!

https://docs.plasmic.app/learn/global-contexts/

10

Thanks, I’ll give it another try. I was defining the global actions incorrectly