How do viewport tab communicate with each other?

[Marianne Emmane]

Hello, we are currently working on a form in UI Builder and using the Tab set component configured as viewport tabs (which means every tab is a different page) so we can use a button to select the current tab index. And the issue we are experiencing is that, we cannot access the data on each of the tabs. We are aware of the properties, however:

• Is it possible to declare Global variables to the main page that can be accessed on each viewport tabs?
• And why are the field values gets cleared when switching tabs? (Pill component included – gets unselected when switching to other tabs)

Thank you for any help in advance!

[Brad Tilton]

Hi Marianne,

The child pages with your viewports can't talk to each other directly, but you can pass data resources and client state parameters from the parent page to the child pages, and then the child pages can communicate with the parent via events.

Here are some rough steps to pass data into a viewport.

First create a page property on the parent page

1. Click on Body in the content tree
2. Click the config tab on the right
3. Click Edit
4. Click the +Add button
5. Name your property
6. Click Apply
7. Click Save

In the new dataToChild page property enter some text or bind some data to that property from somewhere else and save the page. I bound a client state parameter with the same name of dataToChild with a value of Here is a value!

In your viewport subpage, go through the same steps and create a page property on the subpage. I named mine dataFromParent. Then you can bind the parent page's property to the child page's property through @context.props.dataToChild.

You can then bind the page property to a component or wherever you plan on using it.

[UIB Whisperer]

Hi Brad,

I was wondering if it's possible to dynamically pass data to a viewport. I'd like to have a view port inside a repeater and pass data from the current item to the viewport.

[Brad Tilton]

You're generally passing dynamic data anyway, so I don't see why it wouldn't work. That being said, I've not put a viewport inside a repeater before so I'm not sure what sort of weird issues you might run into.

[kevclark]

Hey Brad! 

A colleague and I are having some problems with what we suspect might be a race condition with viewports.   Our goal is to pass the record sysid of the parent page to the viewport so that we can use the viewport to query its own data resources and render some components (for example a form data resource and form component to show content from a related record)

 Here's the steps we've taken (Utah):

1. Create a workspace using AES.

2. On the workspace record page, add an empty tab to the tabbing system with a viewport component.

3. Clicked the "replace with viewport" button on the viewport component.

4. Edit the viewport content to enter the subpage and create a variant

5. In the viewport Page config create a property called "fromParent" hardmapped to the string "test"

6. Add a stylised text bound to the new @context.props.fromParent property - observe that the subpage renders the text "test"

7. return to the parent page and add a page property called "toChild" hardmapped to the string "Sent from Parent".

8. Add an event to the Page Configuration for "Page Ready" for the handler "UXF Macroponent Viewport Load Requested" with the element and pageroute for the new viewport path (to ensure it renders).

9. Launch the page itself and observe that the Viewport tab will render the "test" page property view hardcoded in step 5.

10. return to the subpage and replace the fromParent string value with a databinding to @context.props.toChild on the parent page.

11. Launch the page itself again - observe that the Page shows "Sent from Parent" in the stylised text (following a cache.do flush).

12. On the parent page, change the hard-coded "Sent from Parent" value to databind to @context.props.sysId - observe that the UIB canvas shows the sysid on the viewport.

13. Launch the page again - observe that the viewport's stylised text is showing "undefined" which means that the toChild property is NOT able to retrieve the context.props.sysId object for a real-life page view.

We've tried a few different things to get the Page Property to receive the SysID property like setting a State Parameter on page load (at the same time as the viewport event) or onclick, but nothing we do seems to be able to get the Page Parameter to reflect the SysID Parameter.  Any hints?  Is there an order in which Page Properties get set when a page is rendered properly outside UIB?

Cheers,

Kevin