Skip to main content

90 docs tagged with "web"

View All Tags

Angular - Getting started

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

Angular - Handle events

This section looks at how to handle events emitted by web components in an Angular application. It is worth noting that this is not significantly different from handling events from Angular components themselves.

Angular - Position app

This simple tutorial guides you through creating a responsive Angular application with a layout that uses the grid-layout component.

Angular - sharing data

This section of the documentation explores how to pass data from an Angular application to web components. It is critical to get this correct to ensure seamless integration and functionality.

Angular - Showcase client app

We have provided an extensive collection of advanced integration examples showcasing the capabilities of integrating Angular with the Genesis Foundation-UI.

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.

Data Server resources

The Data Server is your source of streaming data. It provides a set of queries, each of which serves some or all fields from a specific table or view. These are your resources (along with the resources in the Request Server and the Event Handler). You need to know which queries are available to you, and more importantly, exactly what is available in each query.

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 Login

You can find detailed information on this micro front-end in the API documentation.

Foundation Reporting

The Reporting micro front-end enables your users to create report specifications, run them, or save them for later use.

Foundation UI - integration

Our FoundationUI libraries can be used on their own to build 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 FoundationUI 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 to defining columns. Each ` takes a ColDef typed object. To check all the available fields for the variable type coldef`, look here.

Grid Pro - Connected data

The connected data use case is when you have a Data Server or Request Server available and ready to use, and don't want to worry about handling data transformations, updates, deletes and cell renderers in the grid. For cell renders, it's flexible; you can the components provided by default, or you can use any component you want.

Grid Pro - Renderers

The grid-pro-renderers enable you to render data in a way that is meaningful to the user. You can render each column differently and individually.

Grid Pro - Simple data

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

Integrations - Vue

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

React - Getting started

This guide walks you through setting up a React project from scratch and integrating the Genesis Foundation packages.

React - Handle events

This section looks at how to handle events that are emitted by web components in a React application. It's important to note that handling events from web components in React is similar to handling native React events.

React - Sharing data

This section of the documentation looks at how to pass data from a React application to web components. Understanding the details of sharing data is essential for ensuring seamless integration and interactivity. We will focus on two main categories: passing primitive values and passing non-primitive values.

React - Showcase client app

We have provided an extensive collection of advanced integration examples showcasing the capabilities of integrating React with Genesis Foundation-UI.


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 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 - Charts

A chart component is a graphical representation of a set of data. A range of different chart types can be used. Genesis charts are based on g2plot.

Web Components - Combobox

A combo-box is an input with an associated pop-up that enables users to select one value from a collection of possible values.

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 - File Upload

The file-upload component can be used to select single or multiple files from the local file system. Selected files can be uploaded to a server using the Upload button.

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 is a type of dialog that prevents the user from interacting with other content on the page. Usually, when an active modal is displayed, all other content on the screen is dimmed. The user is unable to move focus to other windows or dialogs. This forces the user to deal with the modal before moving to other work on the application.

Web Components - Number field

A text field for numeric entry. By default, this includes steps - up and down arrows where the user can click to increase or decrease the number in the field.

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 - Segmented Control

A segmented control is a set of checkable buttons. No more than one button can be checked at a time. When a user checks an unchecked button, the previously checked button is automatically unchecked.

Web Components - Select

An implementation of an HTML select element as a form-connected Web Component. It is very similar to the combo-box, but with some differences such as:

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 - Slider

An implementation of a range slider as a form-connected Web Component. This component is used together with the alpha-slide-label. It displays a slider that the user can move in either direction to reset the value.

Web Components - Stepper

The `` enables you to provide a multi-step process or dynamic form that the user can follow. Configurable attributes such as orientation and validation conditions provide flexibility, allowing you to tailor the stepper's behaviour to specific use cases.

Web Components - Tab

Tabs are displayed as a set of layered sections of content, where one selected panel of content is displayed above all the other sections. 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

A text-area is a graphic user-interface element that provides a region where users can input, edit or display text that extends over multiple lines.

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.


FoundationUI works well 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.