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:

• A grid is the most common way of displaying information in financial information. The platform provides several different types. Typically, a display component needs to be connected to a specific resource in the application (these are the queries you have defined within a Request Server, Data Server or Event Handler).
• A text field, a button, a radio button or a slider are all ways that the user can interact with and control the application.

Starting materials

When you ran the genx process to create your project, it automatically created three very important files (among others) for your front end:

• home.template.ts
• home.ts
• home.styles.ts

You can amend these files to create an initial front end for the application. Changing these files enables you to change the Home page of your application to suit your requirements.

By way of a reminder, when you run genx, you go through a simple sequence where you supply the npm token and set up:

• your choice of seed application
• parent directory
• name and scope of the package
• the host (server) address (unless you are running locally)

There are many web components that you can add to your page, as well as some micro front-ends, which are useful collections of components that provide common requirements.

You simply need to import the relevant component, declare it in your template and configure it using the relevant attributes.

Registering web components

If you use genx or Genesis Create to create your new project, your web components are registered automatically.

However, if you don't create a project using either genx or Genesis Create, you need to register your web components and micro front-ends before you can implement any of them in your pages. To do this, import and register the components in your client/src/components/components.ts file. The example below covers a range of components:

import { EntityManagement } from '@genesislcap/foundation-entity-management';
import { Form } from '@genesislcap/foundation-forms';
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { getApp } from '@genesislcap/foundation-shell/app';
import { FoundationRouter } from '@genesislcap/foundation-ui';
import * as zeroDesignSystem from '@genesislcap/foundation-zero';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';

/**
 * Ensure tree shaking doesn't remove these.
 */
FoundationRouter;
EntityManagement;
Form;

/**
 * registerComponents.
 * @public
 */
export async function registerComponents() {
  const { configure: configureHeader } = await import('@genesislcap/foundation-header/config');
  /**
   * Register any PBC components with the design system
   */
  getApp().registerComponents({
    designSystem: rapidDesignSystem,
  });

  rapidDesignSystem
    .provideDesignSystem()
    .register(
      rapidDesignSystem.baseComponents,
      rapidGridComponents,
      g2plotChartsComponents,
      foundationLayoutComponents,
    );

  configureHeader({
    templateOptions: {
      icon: 'rapid-icon',
      button: 'rapid-button',
      connectionIndicator: 'rapid-connection-indicator',
      select: 'rapid-select',
      option: 'rapid-option',
      flyout: 'rapid-flyout',
    },
  });

  /**
   * Still required while we transition all PBCs to rapid. Remove when complete.
   */
  zeroDesignSystem
    .provideDesignSystem()
    .register(zeroDesignSystem.baseComponents, g2plotChartsComponents, foundationLayoutComponents);
}

In the page where you are adding the Genesis component, you can then use the registerComponent function in your connectedCallback to load the component, for example:

 async loadRemotes() {
    const { registerComponents } = Components;
    await registerComponents();
    this.ready = true;
  }

Check the Quick Start

The best way of seeing how you change your .ts files to create a front end is to follow our Quick Start Guide. This has examples of the amendments and additional code you need to set up a simple page with a grid and a form.