fiori-molecules

Fiori Molecules for React

:construction: This package is in early POC and evaluation phase :construction:

Description

This package contains a set of React components and hooks that can be used to build modern Fiori compliant applications.

UI5 Web Components for React are the foundation of this package.

By fetching and parsing the metadata and annotations of a OData V4 service, the components are able to render the UI5 Web Components with the correct properties and types.

Installation

npm i fiori-molecules

Usage

1. Wrap your application with the MetadataProvider component providing the URL to the OData V4 service incl. annotations.

import { ThemeProvider } from '@ui5/webcomponents-react'
import MetadataProvider from 'fiori-molecules/components/MetadataProvider'

function App () {
  return (
    <MetadataProvider
      url={'http://localhost:4004/odata/v4/bookshop'}
    >
      <ThemeProvider>
         // ... your application / routing / components ...
      </ThemeProvider>
    </MetadataProvider >
  )
}

export default App

1. Use the provided hooks and components to build your application.

import { Page } from '@ui5/webcomponents-react'
import Table from 'fiori-molecules/components/Table'

function ListReport () {
  return (
    <Page
      header={'My List Report'}
      style={{
        height: '100vh'
      }}
    >
      // will render a table for Books based on UI.LineItem annotations and fetch the data from the service
      <Table
        entity={'Books'}
      />
    </Page>
  )
}

export default ListReport

Components

MetadataProvider

The MetadataProvider component is used to fetch the metadata and annotations of a OData V4 service and make it available to the other components.

Table

The Table component is used to render a table based on e.g. the UI.LineItem annotations of a OData V4 service.

import Table from 'fiori-molecules/components/Table'

export default function MyComponent () {
  return (
    <Table
      entity={'Books'}
    />
  )
}

Hooks

useMetadataContext

The useMetadataContext hook can be used to access metadata context from the nearest MetadataProvider component.

import useMetadataContext from 'fiori-molecules/hooks/useMetadataContext'

export default function MyComponent () {
  const { metadata } = useMetadataContext()
  return (
    <div>
      {JSON.stringify(metadata)}
    </div>
  )
}

useMetadata

The useMetadata hook can be used to access the parsed metadata of a OData V4 service.

import useMetadata from 'fiori-molecules/hooks/useMetadata'

export default function MyComponent () {
  const path = 'edmx:Edmx.edmx:DataServices.Schema.Namespace'
  const namespace = useMetadata<string>(path)
  return (
    <div>
      {namespace}
    </div>
  )
}

useAnnotations

The useAnnotations hook can be used to access the parsed annotations of a OData V4 service.

import useAnnotations from 'fiori-molecules/hooks/useAnnotations'

export default function MyComponent () {
  const headerInfo = useAnnotations<UIHeaderInfo>(entity, 'UI.HeaderInfo')
  return (
    <div>
      {JSON.stringify(headerInfo)}
    </div>
  )
}

useEntities

The useEntities hook can be used to access the entity set of a OData V4 service.

import useEntities from 'fiori-molecules/hooks/useEntities'

export default function MyComponent () {
  const entity = 'Books'
  const { error, isLoading, entities } = useEntities<Book>(entity)
  return (
    <>
      {isLoading && <div>Loading...</div>}
      {error && <div>{error.message}</div>}
      {entities?.map((entity, index) => (
        <div key={index}>
          {JSON.stringify(entity)}
        </div>
      ))}
    </>
  )
}