Menu focus sending data to a group on the page

@cmarchan - For my ‘single page’ inventory management app, I am using page forms and not popup forms when creating and editing a Product.

So if I’m using the menu focus group ‘Edit Product’ button to show the Add/Edit Product form on the page, how do I set up the workflow to be able to navigate to the Edit Product form section as that page form isn’t accessible in the menu focus group reusable element?

I’m assuming I would need to make use of custom states and/or variables.

Also, I’d like to go to the Add/Edit Product form when clicking on the Product Name located in the horizontaltable_fixedcolumn reusable element. So I assume it would be the same issue here as the menufocus group.

Hello @AndyC !

One way to think of reusable elements is that they are self-contained components. So … “they” do not know what page they are on.

Given this, the “outside” communicates with “them” … and … “they” communicate with the “outside” in three ways:

  1. URL parameters
  2. Custom states
  3. Custom events

Each of the above can be used interchangeably as needed … or in some cases … as preferred.

Given that you are building a single page app, “conventional wisdom” says that custom states would be in order if you are aiming to wrap your app for native mobile use. But this is not necessarily the case. URL parameters can also be used.

Content groups use URL parameters for visibility conditions in Canvas. You can think of the blocks that you import via the Chrome extension as a content group in this context.

… Having said all of the above … I am not clear in what context is the menu focus group being used. Is it placed somewhere outside a repeating group? … or is it placed inside one? … Are there two of these placed on both … inside a repeating group? … or outside.

Please advise if the page form used looks something like the example below. Also please provide screenshots and a bit more information on how the page is set up and what reusable or reusables are being used.

1 Like

@cmarchan - Apologies for not providing more context to my problem.

I am using the Infinite Columns Horizontal Scroll Data Table with Fixed First Column block to display my list of products.

This block uses the ‘horizontaltable_fixedcolumn_template’ reusable element for the table data and within the table there is the ‘menufocus_template’ reusable element for each row in the table.

So when I click ‘Edit product’ on the menufocus group, I’d like parent’s product data to be sent to the form on the page. I am using the 1-Column Standard Form Inputs Group form.

I have managed to send the parent product’s data from the products table to the form using a custom state on the horizontaltable reusable element.

But since the menufocus group is a reusable element within the horizontaltable reusable element, I am struggling to pass the parent’s product data to the form via the multiple reusable elements.

Hi @AndyC

Best way would be to use URL parameters. As their function is elaborate to explain, I suggest the following two videos to watch. Most of the needed information (if not all) is covered in both:


1 Like

Thanks @cmarchan!. I have done these tutorials before but forgot those details.

I got it working now, thank you.

1 Like