Skip to main content

76 docs tagged with "web"

View All Tags

Customisation (general)

Our design systems and components are highly configurable. Let's have a look at how you can take advantage.

Data grid

A more light-weight grid for scenarios where you don't need the full power of Grid Pro.

Design Systems - Introduction

A design system is a collection of resources for interactive media that promotes brand alignment. Typically, it consists of the following:

Foundation UI - integration

Genesis Foundation UI libraries can be used on their own to build modern web sites and applications, but they are also designed to be used in combination with a wide variety of existing technologies. This section of our documentation is dedicated to helping you get Genesis Foundation UI working with your existing or preferred stack.

Grid Pro - Cell

This is a slotted component that allows a "visual approach" when configuring cell renderers. Each grid-pro-cell takes an ICellRendererFunc typed function.

Grid Pro - Column

This is a slotted component that allows a more "visual approach" when defining columns. Each grid-pro-column takes a ColDef typed object.

Grid Pro - Genesis datasource

Used in Connected Data scenarios, this will fetch data from a Genesis server (or any other server that implements the Genesis protocol). Available attributes and props may change in the future and are open for feedback but are reflecting the DATA_LOGON message options](/creating-applications/defining-your-application/integrations/rest-endpoints/#data_logon)

Grid Pro - Renderers

When dealing with data, you usually have to render the data in a way that is meaningful to the user. This is the purpose of the grid-pro-renderers. The rendering can vary from one column to another, from boolean typed columns that need to be rendered as a checkbox to a column that needs to be rendered as a percentage.

Grid Pro - Simple data

The examples below use JSX syntax. Real-world scenarions might be different, depending on the client application tooling and structure.

Integrations - Angular

Genesis Foundation integrates nicely with Angular. Let's take a look at how you can set up an Angular project, starting from scratch.

Integrations - React

Genesis Foundation can be used in React applications. Let's take a look at how you can set up a project, starting from scratch.

Integrations - Vue

Genesis Foundation works great with Vue. Let's take a look at how you can set up a Vue project, starting from scratch.


Welcome to the reference documentation on operating Genesis applications. Here, you will find details of a wide range of operating concerns, including specs of the complete Genesis command set and the use of Genesis Console.

Web - Http Polling Mode

If the target environment does not support websockets the client can be configured to operate in http polling mode.

Web basics - front end

To view or use your Genesis application, you need to create one or more web pages. On each of these pages, you need to have components that display information or enable the user to interact with the application. For example:

Web basics - inserting a grid

In this example, we shall add a grid to our new page. This grid will display data from a Data Server resource on the server. In this case, the resource is called ALL_TRADES. The logic would be the same for any other.

Web Components - Accordion

An accordion is a vertically stacked set of interactive headings representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Web Components - Anchored region

An anchored region is a container component that enables you to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element. Additionally, the anchored region can react to the available space between the anchor and a parent "viewport" element such that the region is placed on the side of the anchor with the most available space, or even resize itself based on that space.

Web Components - Button

Button component enables users to trigger actions, such as submitting a form or opening a dialog.

Web Components - Card

The card component is a visual container without semantics, which takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

Web Components - Combobox

A combobox is an input with an associated pop-up that enables users to select a value from a collection of possible values (auto-complete).

Web Components - Dialog

A dialog component presents content to the user. Unlike modal it doesn't prevent the user from interacting with other content on the page.

Web Components - Disclosure

A disclosure component is the implementation of native details and summary controls, which toggles the visibility of the extra content. Visually, it would look like a button or hyperlink beneath extra content. As defined by the W3C:

Web Components - Flipper

The flipper component is most often used to page through blocks of content or collections of UI elements. As flippers are often a supplemental form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of aria-hidden="false" will expose the flippers to assistive technology.

Web Components - Listbox

An implementation of a listbox. While any DOM content is permissible as a child of the listbox, only alpha-option elements, option elements, and slotted items with role="option" will be treated as options and receive keyboard support.

Web Components - Modal

A modal component will prevent the user from interacting with other content on the page. An alternative is the dialog component.

Web components - overview

Web Components are at the very heart of our strategy - which is based on native browsers and a standards-based component model.

Web Components - Skeleton

The skeleton component is used as a visual placeholder for an element while it is in a loading state. It usually presents itself as a simplified wireframe-like version of the UI it is representing.

Web Components - Tab

Tabs are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element that, when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

Web Components - Text area

An implementation of an HTML textarea element as a form-connected Web Component. The alpha-text-area supports two visual appearances: outline and filled, with the control defaulting to the outline appearance.

Web Components - Text field

An implementation of a text field as a form-connected Web Component. The alpha-text-field supports two visual appearances: outline and filled, with the control defaulting to the outline appearance.

Web Components - Tooltip

The alpha-tooltip component is used to provide extra information about another element when the user hovers over it.

Web Deployment - Automated

Ideally, an automated pipeline such as a github workflow should be put in place to build, test and deploy the front end every time the master or develop branches are updated.


Genesis Foundation works great with TypeScript and Webpack, using a fairly standard set-up. Let's take a look at how you can set up such a project, starting from scratch.