90 docs tagged with "web"

It is easy to set up a new project where your front end uses the Angular framework.

We have provided an extensive example application that showcases how to integrate Angular with Genesis Foundation-UI.

Before diving into the core concepts, let's start with how to set up the Genesis HTTP Client in your project.

This page looks at how you can apply criteria matching when you connect to Data Server and Request Server resources.

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

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

Genesis design systems implement an adaptive colour system that provides some unique advantages:

You can adjust any of the defaults in the src/_config/values folder of your design system. This covers a number of tokens and options.

You can adjust any of the defaults in the src/_config/values file of your design system.

You can adjust any of the defaults in the src/_config/values folder of your design system.

When performing design system customisations, you can control the scope as follows:

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

Introduction

The Genesis HTTP Client offers many approaches to making HTTP requests, catering for different use cases and preferences. This section covers the three main approaches:

The entity-management micro front-end gives you a grid and a form that you can add to your pages and configure.

lerna

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

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.

The Genesis HTTP Client is designed to simplify integration with external REST services in the Genesis Platform. It provides an intuitive DSL for making HTTP requests, so that you can integrate Request Servers and Event Handlers with external applications.

The Genesis UI Generator is a Visual Studio Code extension designed to enhance the development experience on the Genesis Platform.

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

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.

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 use the components provided by default, or you can use any component you want.

Use cases

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.

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

API

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

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

A micro front-end is a collection of components that meet common requirements.

This section demonstrates practical examples of using the Genesis HTTP Client in various Genesis components and common use cases.

Profile Management

It is easy to set up a new project where your front end uses the React framework.

We have provided an extensive example application showing how you can integrate 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.

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

Broadly speaking, the process can be summarised as follows:

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:

Previously, we showed you how to create a new page. Now we shall add a data grid.

The package.json file is auto-generated for you by the CLI, based on your answers to the prompts.

What you need to know to start

This page looks at the npm commands for building a project.

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.

An anchor is a piece of text that marks the beginning and/or the end of a hypertext link.

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.

The avatar component is used to graphically represent a user or an object.

The badge component is used to highlight an item or flag its status.

foundation-banner extends foundation-element.

As defined by the W3C:

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

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.

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.

An implementation of a checkbox as a form-connected Web Component.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

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

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:

A Web Component implementation of a horizontal rule.

Dropdownmenu extends foundationElement.

For information about creating forms and using our web components, see our pages on Forms.

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.

An implementation of a content scroller as a Web Component.

foundation-icon extends foundation-element.

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.

As defined by the W3C:

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.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

Our easy-to-use Genesis components (also known as custom elements) are web-component-based, so they work with or without your favourite framework.

For information about creating forms and using our web components, see our pages on Forms.

The Progress and Progress Ring components are used to display

The Progress and Progress Ring components are used to display one of the following:

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

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.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

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.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

For information about creating forms and using our web components, see our pages on Forms.

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

As defined by the W3C:

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.

Default web-server set-up

To perform a manual deployment, you will have to:

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.