Components

Standard Components

All Code Genie projects come with a core set of standard components required for setup, layout, and more.

• Directorycomponents

  • Directorylayouts

    • AuthenticatedPage.tsx
    • SideMenu.tsx
    • UnauthenticatedPage.tsx
  • AvatarNameLink.tsx
  • BuiltWithCodeGenie.tsx
  • ErrorBoundary.tsx
  • RelativeDateWithAbsoluteHover.tsx

<AuthenticatedLayout>

The <AuthenticatedLayout> component is a layout wrapper component that includes styles for pages that require users to be logged in.

<SideMenu>

The <SideMenu> component renders navigation links for the top-level pages of the application.

<UnauthenticatedLayout>

The <UnauthenticatedLayout> component is a layout wrapper component that includes styles for unauthenticated pages such as login, register, forgot password, etc.

<AvatarNameLink>

The <AvatarNameLink> component renders an image + name pair. If no image exists, it renders the first characters of the first and last words of the name.

Entity Components

Components are generated for each Entity defined in your App Definition, along with standard entities such as Me and User that provide functionality for the currently signed-in user and other users in the system.

• Directorycomponents

  • DirectoryWidget

    • WidgetsCardList.tsx
    • WidgetData.tsx
    • WidgetDeleteModal.tsx
    • WidgetDetails.tsx
    • WidgetsTable.tsx
    • WidgetUpsertModal.tsx

<*Data>

The <*Data> component renders a readonly view of a record in a column layout. The number of columns depends on the screen size, starting at 1 column for small devices (phones) and increasing to 3 columns on large devices (landscape tablets, laptops+). This component is used by the <*Details> and <*CardList> components.

Each property value renders differently based on its type:

• nameProperty properties are rendered as an <AvatarNameLink> (only when an imageProperty is also defined on the Entity).
• foreignKey properties are rendered as links to the foreigh record. If the Foreign Entity also defines an imageProperty, it’s rendered as an <AvatarNameLink>.
• date, datetime, etc. properties are rendered using dayjs in D MMM YY format (e.g. 1 Jan 24).
• color properties are rendered with a small square color swatch next to their color value.
• array properties are rendered as <Tag>s.
• boolean properties are rendered as either “Yes” or “No”.
• number properties that have a money or compactNumber format are rendered as compact numbers. A ’$’ symbol is also added for properties that have the money format.
• Everything else is rendered as plain text.

<*Details>

The <*Details> component is primarily responsible for laying out the components on a details page.

It first presents a Card with a title that shows the record’s name (rendered as an AvatarNameLink if an imageProperty is defined on the Entity), followed by an edit button that opens an <*UpsertModal>. The card’s body renders a <*Data> to present all direct data for the record.

If the Entity defines any Child Entities, a list of Tabs are presented below the main details card for each related Entity. Related records are presented as either a <*Table> or <*CardList>.

<*CardList>

The <*CardList> component fetches a list of records and presents them in a responsive grid (between 1 and 3 columns depending on screen size).

The Card Title renders the record’s name (rendered as an AvatarNameLink if an imageProperty is defined on the Entity) and links to the Details Page for the record (unless the Entity is marked with buildDetailsPage: false). The title also includes an Edit button (that open an <*UpsertModal>) and a Delete button (that opens a <*DeleteModal>).

The Card’s body renders a <*Data> for the record and forces it to render as a single column layout, since the cards are already in a responsive column layout.

A loading indicator is shown while the data is initially being loaded, and an empty state is shown if there are no records.

See Ant Card for more details.

<*Table>

The <*Table> component fetches a list of records and renders an Ant Table with columns for each of the properties defined on the Entity.

The property marked as nameProperty is positioned as the first column and is rendered as an AvatarNameLink if an imageProperty is defined on the Entity. It links to the Details Page for the record unless the Entity is marked with buildDetailsPage: false.

Other columns render values based on their property type and other metadata. See <*Data> for more details.

The final column in each row renders Edit and Delete buttons that open an <*UpsertModal> and <*DeleteModal>.

A loading indicator is shown while the data is initially being loaded, and an empty state is shown if there are no records.

Tables also support pagination with page caching, and nested tables for referencing child records.

.codegenie/app.ts

{
  entities: {
    Widget: {
      ui: {
        nestedTableEntity: 'ChildWidget'
      }
    }
  }
}

<*UpsertModal>

The <*UpsertModal> component functions as both a Create and Edit modal for a record. The modal renders an Ant Form that includes fields for all properties defined on the Entity (except for those marked as isReadOnly).

Each property renders its form field differently based on its type:

• foreignKey properties are rendered as a searchable Select with a list of records of the defined Entity (foreignKey.referencedEntity). If the Foreign Entity defines an imageProperty, the select options are rendered as an <AvatarNameLink>. As you type, queries are made to the List API via the useSearch*Query hook and are debounced and cached.
• contentMediaType properties are rendered as an Upload component and are stored as base64 encoded images. A 64kb limit is imposed due to being stored in DynamoDB. Improved image support is coming soon.
• enum properties are rendered as a Select component.
• date-time and utc-millisec properties are renderd as a DatePicker component with the showTime property.
• date properties are renderd as a DatePicker component.
• time properties are renderd as a TimePicker component.
• color properties are renderd as a ColorPicker component.
• number and integer properties are renderd as an InputNumber component. The stepper on integer properties is set to increase/decrease by 1 only and doesn’t allow decimals. You can optionally specify min and max values.
• boolean properties are renderd as a Switch component.
• array properties are renderd as a Select component with mode='tags' to allow multiple values.
• email properties are renderd as an <Input type='email' /> component.
• password properties are renderd as an <Input.Password /> component.
• textarea properties are renderd as an <Input.TextArea /> component.
• Everything else is rendered as an Input component.

You can also define other properties such as disabled, pattern, maxLength and more. See the App Definition Spec for more details.

Did you know?

”Upsert” originates from database terminology and means to “update or insert”. That is, if the record already exists it will perform an update/edit, otherwise it will perform an insert/create.

<*DeleteModal>

The <*DeleteModal> component is used to get user confirmation when they try to perform a delete operation on a record.

When the user clicks the delete button to confirm the deletion, a DELETE request to the Delete API is made via the useDelete*Mutation hook.