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;
  }

Starting from scratch

If you did not use Genesis Create or genx to create your project, you need to create the three files for your home or landing page for your application:

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

You can choose the basis of the filenames - it doesn't have to be home.

You can add extra pages by creating subfolders and adding the three filetypes for each page that you want to create. Take care to create your subfolders in a logical way, because these become the route to each page - the url for access to the page.

For example:

client/src/routes/
├─ home/
   ├─ home.ts
   ├─ home.template.ts
   ├─ home.styles.ts
      ├─ portfolio-one/
      |  ├─ portfolio-one.ts
      |  ├─ portfolio-one.template.ts
      |  ├─ portfolio-one.styles.ts
      ├─ portfolio-two/
      |  ├─ portfolio-two.ts
      |  ├─ portfolio-two.template.ts
      |  ├─ portfolio-two.styles.ts
      ├─ analytics/
         ├─ analytics.ts
         ├─ analytics.template.ts
         ├─ analytics.styles.ts

Adding components

You can then add components to your pages so that your users can view data and interact:

• individual components, such as a grid or a chart, or smaller components, such as buttons or sliders; see the How To to see some examples
• micro front-ends, which are pre-built groups of components; the entity management micro front-end gives you a grid and a submit form, for example

Connecting to the back end

To stream data from the relevant tables and views in the database, you need to connect to specific queries in the Data Server. So, for example, a grid displaying orders could connect to a query that streams ALL_ORDERS.

To retrieve snapshot data from a table or view in the database, you need to connect to the relevant requestReply in the Request Server. For example, a combobox that presents a list of counterparties could connect to a requestReply called ALL_COUNTERPARTIES.

To interact with the database, you need to connect to events in the Event Handler. For example, a form for entering countparty details could have a Submit button that connects to an eventHandler called INSERT_COUNTERPARTY.

Try it out

Take a look at our How To... page on creating a simple front end, where you will find examples of adding components to a page. This also gives you access to an example application, where you can examine the code and run it to see the results.

Or, you can 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.