Skip to main content

How to create a simple page

In this page, we shall look at how to create a simple page and add some components.

Pages and routes​

You get a home page automatically if you use GenX or Genesis Create with --framework React. You can add as many new pages as you like.

  1. In client/src/pages, add a new file such as NewPage.tsx (use your preferred name).
  2. Export a React component for the page:
export function NewPage() {
  return <div>This is the new page!</div>;
}
  1. Register the route in your routing configuration (see Framework integration - React). Add a nav item so the page appears in the application menu.
tip

Scaffold a React project with:

npx -y @genesislcap/genx@latest init myApp -s blank-app-seed --framework React -x

Adding a form​

Add a FoundatonForm to your page component. Define the UI schema and JSON schema in the component (or import them from separate files).

import { FoundationForm } from '@genesislcap/foundation-forms/react';

export function NewPage() {
  const formUiSchema = {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        scope: '#/properties/quantity',
        label: 'Enter Quantity:',
      },
      {
        type: 'Control',
        scope: '#/properties/side',
        options: {
          data: [
            { label: 'Buy', value: 'BUY' },
            { label: 'Sell', value: 'SELL' },
          ],
          valueField: 'value',
          labelField: 'label',
        },
      },
    ],
  };

  const formJsonSchema = {
    type: 'object',
    properties: {
      quantity: { type: 'number', description: 'kotlin.Double' },
      side: { type: 'string', description: 'kotlin.String' },
    },
  };

  const handleFormSubmit = (e: CustomEvent) => {
    // handle form submit
  };

  return (
    <FoundationForm
      prefix="rapid"
      jsonSchema={formJsonSchema}
      uischema={formUiSchema}
      onSubmit={handleFormSubmit}
    />
  );
}

Adding a modal​

Use a ref to control the modal from your component:

import { useRef } from 'react';
import { Button, Modal } from '@genesislcap/rapid-design-system/react';

export function NewPage() {
  const modalRef = useRef<HTMLElement & { show(): void }>(null);

  return (
    <>
      <Button onClick={() => modalRef.current?.show()}>Open modal</Button>
      <Modal ref={modalRef}>
        <p>This paragraph will appear in the modal</p>
      </Modal>
    </>
  );
}

Adding a flyout​

Control the flyout with React state:

import { useState } from 'react';
import { Button, F } from '@genesislcap/rapid-design-system/react';

export function NewPage() {
  const [rightFlyoutOpen, setRightFlyoutOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setRightFlyoutOpen(true)}>Open flyout</Button>
      <Flyout
        closed={!rightFlyoutOpen}
        onClosed={() => setRightFlyoutOpen(false)}
      >
        <p>This paragraph will appear in the flyout</p>
      </Flyout>
    </>
  );
}
tip

Ready to go deeper?

Go to our page on How to create a simple front end.

This introduces you an example app where you can see the code. You can build and run to see it in action and try out your own changes in configuration.

Technical details​

Find more details in our in our reference documentation: