i4connected Knowledgebase 5.6

Opening tiles in edit mode


Check out this article and learn all that you need to know about management of Tiles and how you can change their size, position, parameters and even remove them.

The process of editing Tiles is done directly in the UI. The Tiles edit mode, is accessed by means of Edit tiles option, displayed in the global menu bar. This functionality is guarded by the following permissions:

  • Manage shared tiles - allows the user to manage tile shared by all system users

  • Manage personal tiles - allows the user to manage only own tiles.


The Edit tiles option

As soon as the Edit tiles option is selected, an overlay is applied to the Tiles grid, presenting the user with following edit options:


Edit Tiles mode

Editing tiles

Open this article to learn how to edit tiles and how to manage their parameters. It is not complicated once you learn how to do it by yourself!

The user can edit a Tile by clicking the pen symbol Pen_Symbol.jpg. The Edit Tile panel is opened at the right side of the screen, allowing the user to organize a set of changes at level of Tile properties and JSON parameters.


Edit Tile panel

The toolbar of the Edit Tile panel features following options:


Edit Tile toolbar

  • Move Tile - the scope of this function is to allow the user to move a Tile from the current page, to another page.

    By clicking this option, the Move Tile panel is opened. In this view, user can select the move destination page. By default, the selector is empty.


    Move Tile panel

    To select a destination page, where the Tile should be moved, click on the selector to open the Page List panel.

    The Page List panel displays the list of all pages available in the current i4connected project. For a better overview, the user can also filter la page list, by using the the search function. The list can also be refreshed by clicking the Refresh toolbar button or updated with new pages, via the Add toolbar button.

    As soon as the desired page has been identified in the list view, clicking on it, closes the Page List panel and adds the selected page, to the Move Tile panel.


    Destination page selected

    To proceed with the move action, user can click the Move button in this panel. To cancel the move and close the Move Tile panel, user can click the Close button.

  • Copy Tile - the copy function allows the user to copy a Tile from the current page to another one. This way, the Tile will be available on both pages.

    Clicking this toolbar button, opens the Copy Tile panel, where similar to the Move Tile panel, user is required to select a destination page, where the Tile to be copied.


    Copy Tile panel

    Clicking the Destination page selector, opens the the Page List panel. The Page List panel displays the list of all pages available in the current i4connected project. For a better overview, the user can also filter la page list, by using the the search function. The list can also be refreshed by clicking the Refresh toolbar button or updated with new pages, via the Add toolbar button.

    As soon as a selection is done, the Page List panel is closed and the Copy Tile panel is updated with the required Destination page.


    Destination page selected

    To confirm the copy action, the user can click the Copy button. To discard changes and close the Copy Tile panel, the Close button can be closed.

  • Reset - the scope of Reset function is to allow user possibility to revert all changes organized in the Edit Tile panel. However, reset will be effective only if the changes were not yet saved.

Further on, the Edit Tile panel allows the user to update the Tile properties, as follows:


Edit Tile properties

  • Tile type - Tiles can be either Personal or Shared. The selected value is highlighted in green color.

    Tiles of type Personal are visible only to the currently logged in user. On the other hand, the Shared Tiles will be visible to all users, that have the assigned Tile roles.

  • Title - The Tile name, displayed when the panel is opened.


    Example of Tile Title

  • Subtitle - The Tile subtitle, displayed when the panel is opened.


    Example of Tile Subtitle

  • Assign roles - The roles attributed to the respective Tile. The scope of role assignment is to control which of the project users will have access to view the Tile.

    The roles are selected from the Tile roles panel, opened at the right side of the screen.


    The Tile Roles panel

Besides the above indicated properties, further preview settings are also available:


Edit Tile preview properties

  • Tile size - Allows the user to manually update the size of the respective Tile. The default Tile size is 1x1, which is also the minimum values, but it can be adjusted to higher values such as: 1x2, 2x1, 2x2, 3x1 and the maximum of 3x2.

  • Panel size - Allows the user to select the size of the current panel. User can selected from the available options, starting with the smallest value of xs (extra small) and ending with the highest 6xlg (6 times large).

  • Enable status - defines if the Tile is active (enabled) or inactive (disabled). A disabled Tile is grayed out in the Tiles grid.

  • Classes - Tiles can be attributed to a particular Class, which adds the respective Tile to a subcategory. The Tile classes are selected from a predefined drop-down list of class values. The appartenance of a Tile to a Class, may bring along some visibility particularities of that Class (e.g. color), as follows:

    • none - black

    • wf-i4-monitoring - purple

    • wf-i4-energy - green

    • wf-i4-maintenance - blue

    • wf-i4-analytics - orange

    • wf-i4-scada - red


    The colors of each of the above listed classes can be customised, on request.

Last, but not least, while editing a Tile, the user can maintain a set of JSON parameters.


Edit Tile parameters

In this area of the panel user can decide how to edit the JSON parameters of the Tile panel:

  • Parameter selector tab

    The available parameter selectors, depend on the selected Tile, each Tile panel having its own particularities. However, following type of selectors can be distinguished:

    • Date type selectors - the selection of a date is done in the calendar.


      Calendar view

    • List selectors - the selection is done from a separate panel, containing the electable elements. The user can select one or more elements from the list.


      List selector

    • Drop-down list selectors - the selection is done from a drop-down list.


      Drop-down list selector

    • Textual fields - free text can be inserted in this field.


      Text field

    • Numerical fields - numerical characters can be inserted in this field.


      Numerical field

    • Boolean selectors - the user is provided with two selection options.


      Boolean selector

    • Filter selectors - these fields consist in a JSON structure, generated on basis of parameter selections. Basically, the user can define various sets of filter settings, which are automatically parsed in JSON format.


      Filter selector

    In the parameter selector area, three constant options can be recognized:

    • Copy to clipboard button - allows the user to copy to clipboard the respective field tag. Scope of this function is to ease the process of manual definition of the JSON structure, in the Parameters editor area.

      Hovering over the Copy to clipboard button, a tooltip is displayed, indicating exactly which is the content that will be copied. Clicking the Copy to clipboard button is followed by a confirmation message, indicating whether the action was performed successfully or not.


      Copy to clipboard

    • Use placeholder option - allows the user to connect the parameters of a tile to a particular entity, by means of placeholders.


      Use placeholder

      The advantage provided by this functionality is to reduce the amount of pages, in case the i4connected application is running on large projects, acting (globally) in building / facility management or remote service.

      A parameter is defined with opening and closing double curly brackets: e.g. {{parameter}}. As the name of the parameter is just a string, a valid parameter could be {{id}}.

      Array parameters can be defined by opening and closing double curly brackets and square brackets: e.g.{{[ {{parameter1}}, {{parameter2}} ]}}. Each array item will be separated by an comma, so a valid array parameter could be: {{[ {{id}}, {{name}} ]}}.

      The replacement is done using the string replacement before the object is deserialised, into a JavaScript object.

      Parameter replacements are optional arguments, basically key-values of an object which map the placeholder name to an actual value. The values can be of any type: e.g. JavaScript objects, arrays or values.

      The responsibility of applying parameter replacements goes to the tile view model (e.g. the panel navigation tile). The panel navigation tile checks if any placeholders are present, and if so, it calls the page system to obtain the replaced parameter ID and use the returned ID when performing the navigation.

      The page infrastructure exposes a mechanism to obtain the replaced parameters, based on the following algorithm:

      • Obtain the un-encoded JSON string from the original parameter ID.

      • Perform all placeholder replacements inside the JSON string.

      • Perform a server round-trip to obtain or generate a new parameter ID, matching the replaced JSON string.

      • Return the new parameter.


      Given the fact that any existing values are lost when marking the Use placeholder check-box, this function should be used wisely. This warning is also visible in the Parameters selector area, by hovering over the placeholder_warning.jpg symbol, next to the Use placeholder check-box.


      Placeholder warning

      To remove a placeholder, the user can simply unmark the Use placeholder checkbox. The placeholder will be cleared and the field remains empty, until further changes. The value of the parameter will be changed to value "null".


      Parameter with "null" value

      For a step based tutorial of placeholders usage, please also visit the tutorial under: Usage of placeholders for Sites Analysis.

    • Reset button - allows user to reset any unsaved values, at the length of one click. The Reset function will also allow the user to revert to the parameter value that existed before a placeholder was used.


      Reset button

  • Parameter editor tab

    The parameter editor reflects the JSON structure, generated on basis of parameter selections, organised in the Parameter selector area. The user can also manually edit the JSON structure.


    The changes organised in Parameters editor are consistent with the ones in Parameters selector and vice-versa.


    Parameter editor

To preserve the changes at level of Tile properties and panel parameters, the user has to click the Save button. In order to exit the Edit Tile panel, without saving the changes, user can click the Close button.

Adjusting tiles position

Learn how to adjust the positioning of your tiles inside your pages, by reading this article and try it by yourself!

As indicated, the Tiles position can be manually adjusted by the user, by selecting the cross symbol Cross_symbol.jpg of the Tile, while in edit mode.


Adjust Tile position option

As soon as the cross symbol has been selected, Tile can be dragged and drooped to the new position. The permitted Tile position is highlighted in red, as in below screenshot.


Drag and Drop Tile

The changes organised at level of Tile position are automatically preserved, by leaving the Tiles edit mode, without any additional saving actions.

Adjusting tiles size

Open this article and learn how to adjust the size of your tiles and which are the available sizes that you can apply.

The Tiles size and orientation can be adjusted, using the corner symbol Corner_Symbol.jpg.


Adjust Tile size button

To enlarge a Tile, the user can drag the corner symbol to acquire the desired size, up to a maximum stretch value of 3x2.


Enlarge Tile

To narrow a Tile, the user can drag the corner symbol to acquire the desired size, down to a minimum stretch value of 1x1.

The Tiles can be stretched to following size values: 1x1, 1x2 , 2x1 , 2x2, 3x1 and 3x2.

Once the size of a Tile has been defined, no further saving actions are necessary as changes are automatically preserved.

Deleting tiles

Do you have unnecessary tiles on your pages? Learn how to remove them permanently without any ounce of effort!

The redundant Tiles can removed, by clicking the X symbol X_symbol.jpg, while in Tiles edit mode.


Delete Tiles button

By clicking the Delete Tile button, a new panel is opened at the right side of the screen. The Delete Tile panel provides user with a mandatory deletion confirmation code.

After typing the confirmation code in the field and clicking the Delete button, the Tile is permanently removed. The Tile deletion is an operation that cannot be revered.


Delete Tile panel

Managing tiles roles

Check out this article and learn how to manage the roles asigned to a tile of type shared in a fast and easy manner.

As earlier indicated tiles visibility is secured on basis of role assignments. As roles can only be assigned to tiles of type shared, we can distinguish two methods of tile roles management:

The Tile roles panel can be accessed by clicking the Lock symbol Lock_symbol.jpg displayed on a tile, while in edit tiles mode. The Tile roles option is available only for users having the Manage shared tiles permission enabled.


The Tile roles panel

In this view, the list of all roles already assigned to the selected tile is displayed.

By clicking the Change toolbar button, the Select roles panel is opened displaying all the roles available for assignment.


The Select roles panel


The list of roles depends on the currently logged in user permissions. Users having the Configure security permission enabled, will see a complete list of all system roles. Users that do not have this permission enabled will only see the roles of the currently logged in user, along with their linked roles.

After chosing the desired roles, the user can click the Select button in order to proceed with the assignment or the Close button to aboard the operation.