{"id":20998,"date":"2020-09-02T11:22:51","date_gmt":"2020-09-02T09:22:51","guid":{"rendered":"http:\/\/support.ilevia.com\/?p=20998"},"modified":"2026-01-07T14:27:25","modified_gmt":"2026-01-07T13:27:25","slug":"user-interface","status":"publish","type":"post","link":"https:\/\/support.ilevia.com\/en\/app-interface\/user-interface\/","title":{"rendered":"User interface"},"content":{"rendered":"[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.16″ custom_padding=”0px|||||” transparent_background=”off” locked=”off” global_colors_info=”{}”][et_pb_row admin_label=”row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” custom_padding=”0|0px|27px|0px|false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Introduction” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid” global_colors_info=”{}”]\n

USER INTERFACE<\/strong><\/h1>\n[\/et_pb_text][et_pb_divider _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_divider][et_pb_text _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”30px||||false|false” use_border_color=”off” border_color=”#ffffff” border_style=”solid” global_colors_info=”{}”]\n
\n

INTRODUCTION<\/h2>\n<\/blockquote>\n

The end user can choose between two different user interfaces (Classic and Map). Ilevia Manager<\/a> always provides the Classic arrangement as the default interface for each new user of the project. However, it is possible to easily edit this setting by getting access to the specific user management panel and changing the “User interface style”. Doing so, the arrangement of the user interface tab adapts itself depending on the selected user and its specific settings.<\/p>\n

If the customer requires the creation of both interfaces, you will need to create two separate users and set a different style for each one of them. (Please refer to “Multiuser management<\/a>” guide).<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid” global_colors_info=”{}”]Both Classic and Map interface creation depends on the drag and drop function. Just select the icon\/component and drag it to the correspondent interface area. Once here drop it. The system does not\u00a0provide buttons for the interface creation.
\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”30px|||||” global_colors_info=”{}”]\n

\n

Interface\u00a0creation<\/strong><\/h2>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid” global_colors_info=”{}”]\n

Now let’s see how to create the Classic user interface and a specific\u00a0Map user interface:<\/p>\n

– Classic interface<\/a>, for a quick interface creation suitable for mobile devices;<\/p>\n

– Map interface<\/a>, <\/strong>where no choice is left to chance, 100% customization.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ width=”100%” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Interface management” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid” global_colors_info=”{}”]\n

OVERVIEW<\/strong><\/h1>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.4″ custom_margin=”30px||0px||false|false” custom_padding=”||0px||false|false” global_colors_info=”{}”]\n

Once defined the user interface style that will be used by the end-user, proceed with the selection of the specific selected user.\u00a0Both “Classic Interface” and “Map interface” tabs are\u00a0arranged into two different areas:<\/p>\n

1. Icons \/ My components area<\/strong> (right area):\u00a0this area is subdivided into 2 different tabs:<\/p>\n