Framework integration

Foundation UI is web components based library. This means it can work alongside front end Frameworks such as React and Angular.

This section of our documentation will guide you in how to get Foundation UI working with your existing or preferred stack.

We recommend using our Genesis Create tool to create an Angular or React starter web application to see how the framework is integrated. If you have an existing application you can use the generated create application as a guide to integrating Foundation UI.

Registering components

As Foundation UI is based on web components, the first step is registering the components in the dom. To do this you to import the required modules and components and register the design system (which applies the styles).

First thing you need to add the Foundation UI npm packages you require. Update your package.json to include the following (note this is not an exhaustive list of all the Foundation UI packages).

package.json

{
  ...
  "depependencies": {
    "@genesislcap/foundation-comms": "latest",
    "@genesislcap/foundation-login": "latest",
    "@genesislcap/foundation-entity-management": "latest",
    "@genesislcap/foundation-header": "latest",
    "@genesislcap/foundation-ui": "latest",
    "@genesislcap/rapid-design-system": "latest",
    "@genesislcap/foundation-fdc3": "latest",
    "@genesislcap/rapid-grid-pro": "latest",
    "@genesislcap/foundation-layout": "latest",
    "@genesislcap/g2plot-chart": "latest"
  },
  ...
}

Next, you need to create a file that imports and registers the Foundation UI framework, and the Foundation UI header if you want to use it.

genesis-components.ts

import { configure as configureHeader }from '@genesislcap/foundation-header/config';
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { EntityManagement } from '@genesislcap/foundation-entity-management';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
import { configureFoundationLogin } from './foundation-login';

EntityManagement;

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

configureFoundationLogin();

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

To use the auth login component create a file to configure the auth micro frontend.

import {configure, define} from '@genesislcap/foundation-login';
import { AUTH_PATH } from '../config';
import { DI } from '@microsoft/fast-foundation';
import { history } from '../utils/history';

/**
 * Configure the micro frontend
 */
export const configureFoundationLogin = () => {
  configure(DI.getOrCreateDOMContainer(), {
    showConnectionIndicator: true,
    hostPath: AUTH_PATH,
    redirectHandler: () => {
      history.push('/home');
    },
  });

  return define({
    name: `client-app-login`,
  });
};