Skip to main content

i4designer Knowledge Base

i4designer Native navigation tutorials

Abstract

Check out these articles and learn more details about the settings required to set up native navigation in i4connected.

Using native navigation to open an internal link
Abstract

Check out this tutorial and learn how to set up an i4designer project to enable native navigation on an i4connected environment.

This tutorial will demonstrate how you can set up an i4designer button component to open another project page when opening the i4connected visualization:

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag the Link button component on your project page.

    link_button_component.jpg

  3. Double click the Link button component in order to open the Properties panel.

  4. Proceed with the following settings:

    1. Search for the Button text property and type in the name that the component should display at both design and run-time.

      button_text_2.jpg

    2. Search for the Is internal link property and make sure it is set to True.

      is_internal_link.jpg

    3. Search for the Link property and click on the Open file explorer button. From the Pages drop-down list select the page that the button should navigate to, at run-time.

      link_with_page.jpg

    4. Proceed with another styling, security, or configuration setting of the component.

  5. Build and publish your i4designer project.

    Tip

    For more details about building and publishing i4designer projects, to an i4connected environment, please also refer to our tutorials here.

After processing these steps, when clicking the Link button in your i4connected visualization, the linked page will be opened in the same panel as the main page.

Next_page.jpg
Next_page_opened.jpg

Example of native internal navigation

Using native navigation to open an internal link in a new panel
Abstract

Check out this tutorial and learn how to set up an i4designer project to enable native navigation on an i4connected environment.

It may be the case that you have an i4designer project, that needs to be hosted only one single time, along with its specific pages.

This tutorial will demonstrate how you can set up an i4designer button component to open another internal project page, in a separate panel, from the i4connected run-time visualization:

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag the Link button component on your project page.

    link_button_component.jpg

  3. Double click the Link button component in order to open the Properties panel.

  4. Proceed with the following settings:

    1. Search for the Button text property and type in the name that the component should display at both design and run-time.

      next_page_in_new_panel.jpg

    2. Search for the Is internal link property and make sure it is set to False.

      is_internal_link_false.jpg

    3. Search for the Link property and fill in the i4connected tile URL followed by the name of the project page that should be opened when clicking the button at run-time.

      false_link_url.jpg

      Notice

      For the present tutorial, the URL inserted in the Link property has been built on the basis of the following syntax:i4connected tile URL + / + name of i4designer project page.

      The URL of the i4connected tile can be extracted from the portal itself, by opening the visualization tile in edit mode and simply copying the URL, available under the Parameters selector area.

      Edit_tile_mode.jpg

      Example of i4connected tile URL

    4. Proceed with another styling, security, or configuration setting of the component.

  5. Build and publish your i4designer project.

    Tip

    For more details about building and publishing i4designer projects, to an i4connected environment, please also refer to our tutorials here.

After processing these steps, when clicking the Link button in your i4connected visualization, the linked page will be opened in a new drill-down panel.

Visualization_4.jpg

Example of run-time visualization in i4connected environment

Using native navigation to open an external link
Abstract

Check out this tutorial and learn how to set up an i4designer project to enable native navigation on an i4connected environment.

Using the native navigation function you can design projects having components capable to open other i4connected panels when clicked. This way you can combine i4designer and i4connected elements, in order to fulfill multiple functions.

This tutorial will demonstrate how you can set up an i4designer button component to open an i4connected analysis module panel, at run-time:

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag the Link button component on your project page.

    link_button_component.jpg

  3. Double click the Link button component in order to open the Properties panel.

  4. Proceed with the following settings:

    1. Search for the Button text property and type in the name that the component should display at both design and run-time.

      button_text_property.jpg

    2. Search for the Is internal link property and make sure it is set to False.

      is_internal_link_3.jpg

    3. Search for the Link property and fill in the link of i4connected panel you wish to open when clicking the button. For the present tutorial, we shall add a Load profile analysis chart.

      Notice

      For the present tutorial, the URL inserted in the Link property has been built on the basis of the following syntax: i4connected portal URL + / + #pageLinkFragment + | + panelLinkFragment

      • the URL of the i4connected portal

      • the Link fragment of the page of your i4connected tile. The Link fragment of the page can be identified in the Edit page panel or from the actual i4connected environment URL.

        Link_fragment.jpg
        Link_fragment_2.jpg

        The Page Link fragment

      • the Link fragment of the panel should be opened when clicking the button.

        The Link fragment of the panel is built on basis of the following syntax: "|panelName~size/parameterId" = "|loadProfile~3xlg/23108"

        Panel_link_fragment.jpg

        The Panel Link fragment

        A panel Link fragment that does not have the parameterId suffix will not be populated with data when the user navigates to it from the i4designer visualization.

        As long as the panel Link fragment has both size and parameterId suffixes, will be opened in separate frames with the desired size and parameters.

      link.jpg

    4. Proceed with another styling, security, or configuration setting of the component.

  5. Build and publish your project, in i4designer.

    Tip

    For more details about building and publishing i4designer projects, to an i4connected environment, please also refer to our tutorials here.

After processing these steps when clicking the Link button in your i4connected visualization, a preconfigured Load profile analysis chart should be opened in a drill-down panel.

Native_navigation_1.jpg

Example of a run-time visualization from i4connected environment

Using native navigation to open multiple external links
Abstract

Check out this tutorial and learn how to set up an i4designer project to enable native navigation on an i4connected environment.

This tutorial will demonstrate how you can set up an i4designer button component to navigate to multiple external project pages, in an i4connected visualization:

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag the Link button component on your project page.

    link_button_component.jpg

  3. Double click the Link button component in order to open the Properties panel.

  4. Proceed with the following settings:

    1. Search for the Button text property and type in the name that the component should display at both design and run-time.

      button_text_3.jpg

    2. Search for the Is internal link property and make sure it is set to False.

      is_internal_false.jpg

    3. Search for the Link property and fill in the links of i4connected panels you wish to open when clicking the button. For the present tutorial, we shall add two analysis charts: a Load profile and a Carpet plot.

      two_links.jpg

      Notice

      For the present tutorial, the URL inserted in the Link property has been built on the basis of the following syntax: i4connected portal URL + / + #pageLinkFragment + | + panelLinkFragment + | + secondPanelLinkFragment

      • the URL of the i4connected portal

      • the Link fragment of the page of your i4connected tile. The Link fragment of the page can be identified in the Edit page panel or from the actual i4connected URL.

        Link_fragment.jpg
        Link_fragment_2.jpg

        The Page Link fragment

      • the Link fragment of the panel should be opened first when clicking the button. The Link fragment of the panel should be copied completely. A panel Link fragment that does not have the suffix available will not be populated with data when the user navigates to it from the i4designer visualization.

        Panel_link_fragment.jpg

        The first Panel Link fragment

      • the Link fragment of the panel should be opened second when clicking the button. The Link fragment of the panel should be copied completely. A panel Link fragment that does not have the suffix available will not be populated with data when the user navigates to it from the i4designer visualization.

        second_page_link_fragmengt.jpg

        The second Panel Link fragment

    4. Proceed with another styling, security, or configuration setting of the component.

  5. Build and publish your i4designer project.

    Tip

    For more details about building and publishing i4designer projects, to an i4connected environment, please also refer to our tutorials here.

After processing these steps when clicking the Link button in your i4connected visualization, two drill-down panels should be opened: one illustrating the Load profile chart and the other one the Carpet plot chart.

Open_multiple_links.jpg

Example of a run-time visualization from i4connected environment

In this section: