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.
|
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.
|
Edit Mode = "Standard" example. Work With and Entity Manager interfaces are shown separately |
|
|
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.
|
Custom grid example |
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:
- Create queries by selecting search terms for independent fields.
- Create queries based on date ranges.
- 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.
|
"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
|
|
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
|
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.
|
|
Appearance when opened |
Appearance when closed |
- Adding advanced filters. When using Advanced Filters, new filters can be added dynamically to the user interface.
|
Advanced Filters Runtime Apperance |
|
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.
|
Units component appears collapsed by default. |
- Tabs
|
Using tabs to separate components inside an Entity Manager. |
- Link List
|
Link list runtime appearance |
For more information read Component Group in Entity Manager and Edit Mode in General and Parallel Sections.
|
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)
|
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.
|
Selection summary below |
|
Selection summary tab |
|
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 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.
|
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
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.
|
Popover in a Workwith |
In K2BTools there are two ways to add Popovers:
- Manually adding a Popover
- Generating automatic Popovers using the "EntitySummary" node.
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.
|
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.
|
Business Analysis View example |
The grid filters are integrated with the queries automatically. For more information read Business Analysis View.
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.
|
|
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
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.
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.
|
Shared language between Web and SD |
It also provides with certain common features to create grids, filters, actions....
|
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.
|
Catalog Selection |
You can create a small application using the SD Designer following the tutorial.
|