i4designer Knowledgebase

i4designer Replacement parameters tutorials

Abstract

Check out this step-based tutorial and learn more details on how to use the i4designer replacement parameters in various scenarios requiring placeholders.

The current i4connected application mappings infrastructure allows the users to define i4designer applications, connecting them via direct publishing, and consequently linking them to the following entities available on the i4connected platform:

  • Sites

  • Areas

  • Organizational Units

  • Devices

When linking applications to an entity, the user has the possibility to pass a set of standard or custom parameters to the application. These parameters can be used in the application to parameterize various components.

Using i4connected custom parameters
Abstract

Check out this article and learn how to use i4connected custom parameters in order to parse custom information to your applications.

This tutorial will guide you through the needed steps to use i4connected custom parameters to introduce various information to your components, in the context of multiple entities, while using one single application.

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag two Label components on your page.

    Labels.jpg
  3. Double click the first Label component, to open the Properties panel and identify the Default text property.

  4. Type in the desired parameter name, that needs to be replaced at run time.

    Important

    Parameters should be introduced between square brackets.

    Tip

    For this tutorial, we used a simple parameter "[Label1]".

    Label1.jpg
  5. Double click the second Label component, to open the Properties panel and identify the Default text property.

  6. Type in the desired parameter name, that needs to be replaced at run time.

    Tip

    For this tutorial, we used a simple parameter "[Label2]".

    Label2.jpg
  7. 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 all these steps, create an i4connected application, using the connection-token of your i4designer project.

When opening the application, the two Label components still have the parameter names displayed but are not resolved.

Application.jpg

The i4connected Application with non-resolved parameters

To introduce your custom information to resolve the "Label1" and "Label2" parameters, inside a Site, please proceed as follows:

Warning

For this part of the tutorial, you might need to refer to our i4connected online Knowledge Base, here.

  1. Log into the i4connected portal.

  2. Open an i4connected Site in detailed view mode and click the Manage Application toolbar button.

    MAnage_App.jpg
  3. In the Manage Application Mappings panel click on the Default Application selector.

    Default_App_selector.jpg
  4. Choose your application from the Applications panel.

  5. Add two empty Navigation parameters, using the Add parameter button.

    Navig_Param.jpg
  6. Configure your parameters as follows:

    NavParam_with_spaces.jpg
    1. Type in the first Name field the name of the first parameter, in our case "Label1".

    2. Type in the first Value field the value of your first custom parameter.

    3. Type in the second Name field the name of the second parameter, in our case "Label2".

    4. Type in the second Value field the value of your second custom parameter.

    Tip

    During this step, you can check a preview of your results, by clicking the Preview button.

    Please note that the application preview mode does not support blank spaces in the Parameter Value field. To check your results in preview mode, you can escape spaces using "%20".

    After saving and mapping your application to an entity, both blank spaces and escaped spaces will be properly applied.

    Nav_Param_added.jpg
  7. Next, click the Save button. The Site detailed view mode panel displays the application mapping with the parsed parameters.

    Escaped_Labels.jpg
Using i4connected standard replacement parameters
Abstract

Check out this tutorial and learn how to set up an i4designer project using the i4connected standard replacement parameters in order to parse some data in your visualizations.

This tutorial will guide you through the needed steps to use i4connected standard parameters to replace the Name and ID of multiple i4connected Sites, while using one single application.

  1. Open an i4connected platform project in design mode.

  2. Open the Toolbox panel and drag two Label components on your page.

    Laabel_components.jpg
  3. We shall use the first Label component to inject the siteId parameter. Double click the first Label component in order to open the Properties panel and proceed with the following settings:

    1. Search for the Default text property and type in the following syntax: siteId=[I4C_SITE_ID].

      Default_text_1.jpg

      Note

      The standard replacement parameter I4C_SITE_ID needs to be added between square brackets.

      Besides that, the user is free to add any additional text. For example:

      • This is the identification number of the Site -> [I4C_SITE_ID]

      • [I4C_SITE_ID]

    2. Proceed with any other styling, appearance, typography, or security settings, and make sure you save your changes.

  4. The second Label component will be used to inject the siteName parameter. Double click the second Label component in order to open the Properties panel and proceed with the following settings:

    1. Search for the Default text property and type in the following syntax: siteName=I4C_SITE_NAME.

      Default_text_2.jpg

      Note

      The standard replacement parameter for the name of the site is I4C_SITE_NAME. Besides that, the user is free to add any additional text. For example:

      • This is the name of the Site -> I4C_SITE_NAME

      • I4C_SITE_NAME

    2. Proceed with any other styling, appearance, typography, or security settings, and make sure you save your changes.

  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 all these steps, you can create an i4connected application and link it to several Sites. When opening these sites, the application will resolve the standard parameters and will replace them with their corresponding values:

Site_1.jpg
Site_2.jpg

Example of two different Sites using the same application.