K2BOrion Design System

K2BOrion design system is a design system provided by K2BTools whose aim is to help GeneXus developers to creating applications with great UX.
The amins of K2BOrion are:

  • Effectivness: Users can complete their goals with a high degree of accuracy
  • Efficiency: the user complete their goals in a fast way.
  • Learn and remember: The system is easy to learn, and the user remembers how to complete the goals.

This all with a consistent and beautiful design.

Components in Orion Design System

Work With

WorkWithInterface
Work With default interface

The WorkWith user interface is automatically generated by K2BEntityServices pattern. This interface allows the user to insert, update, delete and display instances of an entity.

One of the main components of this interface is a grid showing all the instances for the associated entity. All grids generated by K2BTools come with several features available out of the box that are generated automatically with no developer intervention. These features can be disabled by the developer if needed. Some of these features are: grid page size selection, runtime column selection, and common UI elements such as pagination, ordering, and filtering controls.

Depending on the transaction the developer can choose how the work with edit mode will be:

  • In a complex transaction with many attributes, the "Standard" Edit Mode will probably be better.
  • In a simple transaction the developer can choose between "Master-Detail" and "PopUp" Edit Modes.

StandardEditMode
Edit Mode = "Standard" example. Work With and Entity Manager interfaces are shown separately

EditModeTwoPane EditModePopup
Edit Mode = "Master-Detail" example Edit Mode = "Popup" example

For more information about the "Edit Mode" read Edit Mode property.

Also, the developer can choose to use other types of grids. For example, each instance is best represented by an image, a custom grid ban be selected to take advantage of that fact.

CustomGridExample
Custom grid example

Filters

When working with grids, K2BTools supports a wide range of filter types in order to enhance the user experience.

The first filtering option is the "Generic" filter. This filter allows the end user to quickly search for a term in several attributes. This frequently is the easiest way for the user to search for information, as the user simply provides the value and does not have to figure out where to look for that value. In the "Orion" design system, this filter is shown on the top-left corner above the grid.

In many cases, users require more complex queries to find the information they need. For these scenarios K2BTools includes the "Detailed Filters" option. Using this filters, the end user can:

  1. Create queries by selecting search terms for independent fields.
  2. Create queries based on date ranges.
  3. Create queries selecting several values for a certain field.

In the "Orion" design system, detailed filters are included in a region that is collapsed by default. This is helpful to focus the user's attention to what's really important: the grid's data.

However, the user must also be able to tell which filters are being used quickly. To do so, K2BTools includes a summary of the filter values. For more information, read Filter Summaries.

FilterSummaryTextRunTime
"Filter Summary" text

In the detailed filters, the developer can enhance the user experience by using these options:

  • Multiple filters: In many scenarios it is necessary to define filters that allow the user to select more than one value. K2BTools allows the creation of these filters with two user interfaces: Combo, and Tags Collection. For more information read Multiple filters
    MultipleFilterCombo MultipleFilterTags
    Multiple Filter Type = "Combo" Multiple Filter Type = "TagsCollection"

  • Date Range filters: These filters allow the user to define a date range from/to boundaries. It is also possible to select a “Semantic Date Filter” to simplify this process, by predefining intervals such as “Last 120 days”, “Last Month”, etc. For more information read Date Range filters
    SemanticDateRangeFilterRuntimeYear
    Example of semantic date filter

  • In some cases grids contain lots of filters, and a large number of them are used sporadically. For this problem, there are two possible solutions in K2BTools.
    • Separate filters based on how much they are used by adding a line separator. The LineSeparator will generate a collapsible section to keep the filters invisible while they are not needed.
      LineSeparatorRuntimeOpen LineSeparatorRuntimeClose
      Appearance when opened Appearance when closed

    • Adding advanced filters. When using Advanced Filters, new filters can be added dynamically to the user interface.
      AdvancedFiltersRuntime
      Advanced Filters Runtime Apperance

Entity Manager

EntityManagerInterface
Entity Manager default interface

The Entity Manager interface shows an Entity's data and how the entity relates to other entities in the system. Some relations are one to one (Parallel Components) and others are one to n (SubWorkWith components).

The SubWorkWith components are very similar to WorkWith interfaces. The only difference is that in these components, only the data related with the entity instance being shown in the Entity Manager is included.

By default, each component is shown in a Tab. However, the developer can choose to customize how the components are shown by combining cards and tabs to organize them semantically.

Some tips to take into consideration:

  • The most important components should be always visible by default using cards.
  • For less important components you may use:
    • Collapsible cards: A card may be collapsed by default, allowing the user to see the contents only when necessary.
      EntityManagerCollapsedCard
      Units component appears collapsed by default.

    • Tabs
      EntityManagerComponentDistribuitionTabs
      Using tabs to separate components inside an Entity Manager.

    • Link List
      LinkListRuntime
      Link list runtime appearance

For more information read Component Group in Entity Manager and Edit Mode in General and Parallel Sections.

Selection

Single selection

PromptInterface
Prompt default interface

Single selection interfaces can be automatically generated by K2BPrompt pattern.

If the instance the user is searching for has not been created yet, it can be created within the selection interface. For more information read Modes (Prompt)

Multiple selection

RowSelectionRT
Example of a multiple selection in runtime

Multiple selection interfaces can also be generated in very easily using K2BTools. Depending on the scenario, these user interfaces can be generated using RowSelection = "Multiple" in actions: In K2BTools user actions can be added. When the developer configures an action to have multiple selection, a checkbox appears in the grid, in order to allow the user to select which instances of the entity should be passed on to the action. K2BTools takes care of keeping track of the selected rows, so when data is filtered or pagination is applied to the grid, the selected rows remain selected while the user navigate. For more information read Row selection in actions.

When selecting items in large grids the user may lose track of which elements are selected. This can happen when the grid has many pages, or when the user changes the filters used while selecting items.

Sometimes actions act on all the items that were selected, regardless of which are visible at the moment of execution. In this case, losing track of the selected items is troublesome as the user may be performing the action on items that weren’t supposed to be selected.

The Selection Summary feature can be used to mitigate this issue. When using it, the user can see all the selected items alongside the grid. These items are shown always, and paging/filtering do not apply to this list.

The developer can choose how the items are shown. Currently, three options are available: On grid’s right side, below it, or as a “Tab”. The choice between these options is up to the developer, see which option fits its needs the best.

SelectionSummaryBottom
Selection summary below

SelectionSummaryTab
Selection summary tab

SelectionSummaryRight
Selection summary on the right

If none of these options fit the developer needs, a new one custom made for its scenario can be created.

For information on how to create a selection summary read Selection Summary in grids

Wizard

WizardUI
Wizard UI

There are many scenarios in which the user needs to accomplish a very complex task. One strategy to simplify the task is to split it in a sequence of steps. For this purpose a wizard user interface is needed. K2BTools provides an easy, flexible and powerful way of creating Wizard User Interfaces.

WizardComponents
Wizard Components

A Wizard is composed of a series of steps, each step implements a part of the Wizard. When using WPD, each step is implemented by a WebComponent that is in charge of validating the data entered in the step. If the data is correct, the wizard goes to the next step. Each WebComponent can only belong to one Wizard.
There is a WebPanel that is in charge of the wizard navigation, which also implements the “Next” and “Previous” standard actions, and is in charge of showing the Wizard Progress Bar. This WebPanel will be called “Wizard Main Panel”.
In the Wizard, it is needed that all steps share some data, in order to read it and update it. The “Wizard Main Panel” is in charge of passing this data to all steps. The data is stored in an SDT, that will be defined by the developer. This SDT will be called “Wizard SDT”.

To see how to create a wizard user interface with K2BTools read Creating Wizard user interfaces

Popovers

There are many scenarios in which the user needs to see additional information that will help in completing a task. As this is secondary information, it should be shown in the same UI where the user is completing the task. Popovers can help solve this problem, allowing the user to see the secondary information only when necessary. A Popover will be shown when the user hovers over a field for a few seconds with the mouse pointer. It is closed automatically when the user moves away from that field.


K2BToolsWWPopOverGif
Popover in a Workwith


In K2BTools there are two ways to add Popovers:

  1. Manually adding a Popover
  2. Generating automatic Popovers using the "EntitySummary" node.

Analysis user interaces

In large applications being able to analyze what's happening in the application is essential. For this purpose GeneXus provides the Query object. This object can be easily integrated with K2BTools. For example the user interface below can be easily generated by using K2BTools.

Dashboard User interface example created with Web Panel Designer
Example of a Analysis User Interface generated by using WebPanelDesigner

The query object can be also used in a WorkWith interface to create a "Business Analysis" view. This view shows the same data shown in the grid, taking advantage of the query object to analyze it.


BusinessAnalysisViewExample
Business Analysis View example

The grid filters are integrated with the queries automatically. For more information read Business Analysis View.

User Menus

K2BTools allows the developer to define a menu, and show it in the user interface, also allows the menu to be defined in run time by the user.

For defining a menu, K2BMenu pattern can be used. . In the k2BMenu pattern, developer can choose which web panels will be shown.

K2BMenuInstance K2BMenuExample
K2BMenu instance K2BMenu in RunTime


In many scenarios, the menu can be defined static by the developer. For this case the generated static procedure can be used. However there can be other scenarios in which the menu must be defined or modified in run time. In order to achieve this, the K2BMenu pattern allows to create a initialization procedure, that can be used to initialize by default a menu structure. When using GAM, the initialization procedure can be used to load the GAM Menu tables. When GAM Integration Module is installed, the user interface to define the menu in runtime is provided. Also a user control is provided in order to show the menu. For more information read K2BMenu Pattern and Getting started with K2BMenu

Native Smart Devices design

Nowadays applications are accessed by differents devices. In order to give the user an excellent experience in this devices, the application should be adapted to the device. This can be achieved by two different approaches.

Generate a native smart device application

There are many cases in which some activities of the application are better done with a mobile native application. For this purpose the SD Designer can be used to generate this user interface.
The SD Designer has the same specification languageas the WebPanelDesigner, and it generates a SDPanel instead of a WebPanel. K2BTools provides a catalog of common user interfaces, and the developer can add more interfaces to the catalog in a easy way.

SDSharedLanguage
Shared language between Web and SD

It also provides with certain common features to create grids, filters, actions....

SDUIAllPlatforms
User interfaces in all platforms

SD Designer, provides a catalog of common user interfaces that can be used by the developer, or can be extended in order to create other user interfaces.

AddGridFromTransctionChooseLayoutSD
Catalog Selection

You can create a small application using the SD Designer following the tutorial.