Page transition syntax

Power users can target a page using a full context path or a relative context path. Both paths require that you use the internal page name.

Using the internal page name

When specifying the page name for a page transition, you must use the internal page name used in the URL, not the display name used on the page tab.

Studio creates the internal name automatically when you create the page. The internal name removes spaces and special characters.

For example, while the label on the page tab is Data Results:


Page display name on the page tab

The page name in the URL is data-results:


Internal page name in the URL

While you can change the display name for a page, the internal page name does not change.

Relative context paths

For a relative context path, the power user only specifies the name of the page. The default context path is then added in front of the target page name.

The default context is set using the Framework Setting df.viewTransitionDefaultContext. The default value for the setting is /web/guest/. If your application is created within a Liferay Portal community, you can change the setting to be the path to that community.

For example, if the user enters analyze in the target page field for a component, and the default context path is /web/my-community/, the end user is redirected to /web/my-community/analyze.

Full context paths

For a full context path, the entire path is provided, and the default context path setting is ignored.

For example, for the following target value: 

/web/spend/analyze

no matter what the default context path is, end users are redirected to the /web/spend/analyze page.

Selecting a tab on a Tabbed Component Container

If the target page includes a Tabbed Component Container component, then to specify the tab that is selected, you append to the page name: 
#tabcomponentname[tabNumber]
Where:
  • tabcomponentname is the name of the tabbed component.
  • tabNumber is the number (1, 2, 3, etc.) of the tab to select.
So for example, for the following target value: 
/web/spend/analyze#Sales Numbers[1]
  • The end user is redirected to the /web/spend/analyze page.
  • On the page, the first tab of the Sales Numbers tabbed component is selected.

To select the tab to display for multiple tabbed components, use a double colon (::) to delimit the components.

For example, for the following target value: 
/web/spend/analyze#Sales Numbers[1]::Quarterly Forecast[2]
  • The user is redirected to the /web/spend/analyze page.
  • On the Sales Numbers tabbed component, tab 1 is selected.
  • On the Quarterly Forecast tabbed component, tab 2 is selected.