Version: Current

How to create a simple front end

In this page, we shall look at how to create a simple front end for your application using the components in the Genesis Foundation UI library.

First, we shall look creating a page and adding some simple components. Then we shall look at the example application we have created for you, so that you can see something more substantial.

Pages and routes

You get a home page automatically if you use genx or Genesis Create. But you can add as many new pages as you like.

If you want to create a new page:

In the folder client/src/routes, add a new folder called new-page (use your preferred name for this new folder).
In the new folder, create three files:
- new-page.ts (this is where the component class is defined, incuding methods, properties and the custom element definition)

    import { customElement, FoundationElement, ... } from '@genesislcap/web-core';
    import { newPageTemplate as template } from './new-page.template';
    import { newPageStyles as styles } from './new-page.styles';
    
    @customElement({
      name: 'new-page',
      template,
      styles
    })
    export class NewPage extends FoundationElement {
    }

new-page.styles.ts (this where your styles are defined)

    import { css } from '@genesislcap/web-core';
    
    export const newPageStyles = css`
      // add your styles here

new-page.template.ts (this is where your HTML template is defined)

    import { Charts } from './charts';
    
    export const newPageTemplate = html`
       <div>This is the new page template!</div>
    `

In the file src/routes/config.ts, create a route for your new page, for example:

{
  path: 'new-page',
  element: NewPage,
  title: 'New Page',
  name: 'new-page',
  navItems: [
    {
      title: 'New Page',
      icon: {
        name: 'cog', // // use any free icon from https://fontawesome.com/icons
        variant: 'solid',
      },
      permission: '',
    },
  ],
},

Adding a form

You have created a component called NewPage. Now you can add a form to that component. For example, you would use a form to add a record to a table in the database.

The example below adds a simple form element to the new page.

The content of the form is defined by the UISchema and the JsonSchema in the new-page.ts file.
The form is itself is then added to the new-page.template.ts file.

new-page.ts

import { customElement, FoundationElement, observable } from '@genesislcap/web-core';
...
export class NewPage extends FoundationElement {
  ...
  formUiSchema = {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        scope: '#/properties/QUANTITY',
        label: 'Enter Quantity:'
      },
      {
        type: 'Control',
        scope: '#/properties/SIDE',
        options: <ConnectedRenderersOptions>{
          data: [
            { label: 'Buy', value: 'BUY' },
            { label: 'Sell', value: 'SELL' }
          ],
          valueField: 'value',
          labelField: 'label',
        }
      }
    ]
  }
  
  formJsonSchema = {
    type: 'object',
    properties: {
      quantity: {
        type: 'number',
        description: 'kotlin.Double',
      },
      side: {
        type: 'number',
        description: 'kotlin.String',
      },
    },
  };

  handleFormSubmit(e: CustomEvent) {
    // handle form submit
  }
  ...
}

new-page.template.ts

...
<foundation-form 
  @submit=${(x, ctx) => x.handleFormSubmit(ctx.event)} 
  :jsonSchema=${x => x.formJsonSchema} 
  :uischema=${x => x.formUiSchema}
>
</foundation-form>
...

To create a modal component, add the element to your new-page.template.ts file. The component, and any content, will be invisible until the modal is opened.

In the new-page.ts class, add the property to get a handle on the modal instance.

export class NewPage extends FoundationElement {
  myModal: Modal;
}

In the new-page.template.ts add the element and a ref value so that the class can open it.

In the click handler on the button, call the show method on the modal.

...
<rapid-button @click=${x => x.myModal.show()}></rapid-button>
<rapid-modal ${ref('myModal')}>
  <p>This paragraph will appear in the modal</p>
</rapid-modal>
...

When open, the modal is displayed over the top of any existing content in your page. It also creates an invisible overlay that prevents you user from interacting with any content outside the modal while it is active.

To add a flyout to your application, add the <rapid-flyout> element to your template.

This element accepts a closed property value, a boolean for true or false. When the value is true, the flyout will be closed, and when the value is false the flyout will be open.

By default, the flyout is positioned on the right side of the screen. To configure it to appear on the left, set position="left" on the element.

You can insert any content you want within the flyout.

info

When the user clicks outside the flyout, it closes. Also, you can add code to close the programmatically; set the value bound to the closed attribute.

When a flyout is closed, the component emits a closed event, which you can listen to.

Here is an example declaration of a flyout:

<rapid-button @click=${x => x.leftFlyoutActive = true}>Open left positioned flyout</rapid-button>
<rapid-button @click=${x => x.rightFlyoutActive = true}>Open right positioned flyout</rapid-button>
<rapid-flyout :closed="${x => !x.rightFlyoutActive}" @closed=${() => console.log('right flyout closed')}>
  <p>This paragraph will appear in the flyout</p>
</rapid-flyout>
<rapid-flyout :closed="${x => !x.leftFlyoutActive}" position="left" @closed=${() => console.log('left flyout closed')}>
  <p>This paragraph will appear in the flyout</p>
</rapid-flyout>

Example application

We have created an example application to demonstrate the things you can set up on the front end of a Genesis application.

There are multiple UIs, with links to the corresponding code.

The back end

Even if you are a front-end specialist, it is important to have some familiarity with the back end. You need to know what resources you can connect to in order to retrieve data and interact, and in many cases you will need to know exactly what fields are available on a specific resource.

In our case, the back end is purposely kept simple. It contains:

static data tables for Entity and Client
a Trade table with 10 pre-loaded trades
time-series data of inflation rates for use in charting

Take a look at the code

The back-end code has its own directory structure. You can drill down through the uiexamples-app to see the data files and the script files that define the back-end processes.

Take a look at the app

Check the readme file before you try to run the application.

The login is admin / genesis

The front end

The principal aim of this example is to show you the code for the front end and enable you to run it and see the results.

We recommend VSCode as your IDE for looking at the code if you are new to working with web code. This gives you full access to the Genesis plugin, which makes it easy to build and start the back end, and to start the front end.

Alternatively, you can use a JetBrains IDE, such as IntelliJ.

Take a look at the code

The front-end code of the example application has its own directory structure.

From this point, you can drill down into different parts of the application, such as:

home, which has the three .ts files for the Home Page
foundation-layout, which defines containers that can be resized, dragged and dropped within the UI
charts, which has the three .ts files for the Charts page
modal, which has the three .ts files for the Modal page

Take a look at the app

Before you take a look at the code, make sure you follow the relevant instructions in the readme file for the front end.

This has details of how to install the dependencies, build the back end, and run it to view the application.

There is also instruction on how to install the Genesis Custom Elements LSP Plugin, which gives you IntelliSense help while writing TypeScript code in the repo.

Technical details

Find more details in our in our reference documentation:

Pages and routes​

Adding a form​

Adding a modal​

Adding a flyout​

Example application​

The back end​

The front end​

Technical details​

Pages and routes

Adding a form

Adding a modal

Adding a flyout

Example application

The back end

The front end

Technical details