User interface

This chapter gives a short overview of the Effector user interface, its components and the relations between them. While modeling the customer’s system, a great deal of attention is paid to the user interface to be developed. It has to adapt to the user’s needs to the greatest possible extent and lead the user intuitively, thereby facilitating their daily work.

Several options are available to create a well-designed, customized user interface (from here on UI).

Login

Logging-in is done with the usual username-password combination.

Login

Application screen

The Application screen can be divided into various parts: the menu system is located on top, while the screen specific to the selected menu is visible below it. The user indicator and some global features are on the righthand side of the menu.

Application screen

Technical design

Technical design

Menu system

Effector features a two-level menu system. Items listed in the main menu are called “Menus”, which include further menu items required to perform various functions. Submenus open up the individual application ’screens`.

Menu system

Screens

Screens linked to menu items are structured as follows: the backbone of each screen is made up of one or more items called components. These components define specific fields, where the objects responsible for visual representation are located. These will be discussed in detail later. Besides field definition, the individual components have an additional important task. With their help a master-detail relationship can be formed between particular view objects. These relationships are defined by Filters. Such filters bring about the communication between two components.

Screen

When using Effector, certain screens may open up further views. The number of such overlaying screens is not limited.

Multiple screens

Components

These are the hard-to-detect building blocks of screens, which may contain one or more display objects. The default display becomes visible at the appearance of the component, while further displays can be made visible by using the tabs at the top of the component. The shortcuts of the given component, such as Refresh or ’save panel view` are also displayed in this upper area.

Filters

These invisible elements connect the individual components and convey information needed for data filtering.

Technical information

By pressing the Ctrl + Shift key combination and clicking on the screen, the Technical info window appears providing useful information primarily about the screen design: it shows the real-time values of the input and output filters of the XML-files and panels used for the screen.

Technical info.

Technical info

Technical info with filters.

Technical info

In Effector Studio, users holding a developer license can edit files instantly by clicking on the file names listed in the Technical info.

Technical info

View objects

  • Objects allowing data manipulation:
    • EditForm: the data of individual business objects can be modified here via various input fields.

EditForm

-    PRS: Short for ProcessResultSet, this feature allows users to make changes of their choice on a selected object.
  • Objects used for data display:

    • Grid view: It is used for displaying database query results, complementing the data display with filtering options and action buttons with various functions (such as new record, export to excel). These filters and action buttons together are called ControlPanel Control. Links can also be placed on the grid views to display the data of a given object (e.g. project, event, person) on predefined screens, thus performing a drill-down.
      • Data grid: DataGrid: Simple grid view with filtering and sorting functions, used for general data display.

Data Grid

    -    Card view: `CardView`, `CardGrid`: A card-based view with a unique design, which can display a single record on a card while retaining the behavior of grid views. This visual representation allows for diverse graphical elements on the card view, making the system more colorful and user-friendly.

Card view

    -    Section List ’sectionList`: It is similar to the CardView, where data are displayed in a strict sorting order. Individual data rows appear continuously, one under the other, without spacing. It is excellent for generating an HTML-like page based on the data.

Section list

    -    Tree view: `TreeView`: A type of card view, where data are displayed in a tree structure, such as a flowchart.

Tree view

    -    Calendar : `Calendar`: The calendar view is similar to the day view of a general task calendar, where filters are used to define the number of days to be shown.

 Calendar view

-    Graph: `Graph`: This view is used for displaying graphs.

Diagram view

-    Website: `EmbeddedWebDisplay`: It is used for embeddig a separate website to the view.

Website view

Names used in parametrization:

  • Menu (Minor Menu): MM
  • Screen: Screen
  • Screen component: Component
  • Filter: Filter
  • Maintenance form: EditForm
  • Grid view: GridView
  • Controls and action buttons: ControlPanel Control and ActionButtom
  • Data grid: DataGrid
  • Card view: CardView, CardGrid
  • Section list: SectionList
  • Tree view: TreeView
  • Calendar: Calendar
  • Chart
  • Website: EmbeddedWebDisplay

  • Last update: 6 weeks 10 hours ago
  • Effector