State data not able to be referenced in builder modal template

Builder content link

Builder public api key
22d7e777310243139ed9f12ba85d84f0

What are you trying to accomplish
End Goal: Prepopulate a form within a modal with user information if they are logged in.

I’m using a builder template, launch modal. Within the modal, I’m trying to get a user to submit info. If the user is logged in, I’d like to pre-populate the fields with their user information. However, inside the modal I’m not able to access state, that I am able to access outside of the modal and on the general page. When I try and render state.firstName for example, it returns undefined. If I do that on the main page, when the modal is closed, it does render.

Is it possible to access state within a modal? And therefore pre-populate form data with their user information if they are logged in?

Screenshots or video link

Code stack you are integrating Builder with
angular

Hi @cedson,

Symbols in Builder are intentionally designed to maintain an independent state from the parent content. This implies that if you establish a property within the parent content’s state (e.g., setting state.firstName to ‘John’), that specific property (state.firstName) won’t be accessible within the symbol. Attempting to access state.firstName within the symbol will result in receiving an “undefined” value.

To ensure that the state is accessible within the Symbol, you can conveniently achieve this by navigating to the advanced settings of the Launch Modal (Symbol) and enabling the “Inherit State” option. By doing so, you’ll gain the ability to access the parent state within the symbol.

Please feel free to refer to the recording below, in which I attempted to recreate a similar situation and successfully resolved the issue by toggling the “Inherit State” setting to the “On” position.
Launch Modal with State access

This worked perfectly. Thank you very much!

1 Like