Skip to content

Latest commit

 

History

History
executable file
·
66 lines (43 loc) · 3.16 KB

README.md

File metadata and controls

executable file
·
66 lines (43 loc) · 3.16 KB
Raw

Healthcare App

The Healthcare app demonstrates a customization of the Layer7 API Hub Library. This app uses the Layer7 API Hub mock server as the backend server.

The Healthcare app is built on top of Create React App (CRA).

Available User Roles

The following user roles are available in this app:

  • Portal Admin

    • login: portalAdmin
    • password: Password@1

  • API Owner

    • login: apiOwner

    • password: Password@1

    • Org Publisher

    • login: orgPublisher

    • password: Password@1

  • Org Admin

    • login: Publisher
    • password: Password@1

  • Developer

    • login: user
    • password: Password@1

Customize the Healthcare App

The Healthcare App leverages the customization mechanisms provided by its underlying libraries:

Each library builds on top of the previous.

Theming

The theming process is comprised of customizing the design tokens (colors, fonts, spacing, etc.) and customizing the components styles.

The custom theme file applies the changes. For the design tokens, you customize the color palette and the typography. For the components styles, you leverage the global theme override mechanism.

The global theme references specific components by its style name (such as MuiButton for MaterialUI buttons) and override parts of its styles. You can override most of the components provided by the underlying libraries. The libraries use a convention for their style names:

  • Mui[ComponentName] for MaterialUI components
  • Ra[ComponentName] for react-admin components
  • Layer7[ComponentName] for Layer7 API Hub components

Default Components Replacements

The Healthcare app includes redesigned default API Hub pages. Customizing the theme has limited options. To implement a completely different layout, provide your own components. In the Healthcare app, a custom Application Details View is provided as an example.

The following authentication-related pages also differ in the Healthcare app from the default API Hub pages:

Custom Pages

The Healthcare app implements a landing page and a dashboard by leveraging react-admin's custom routes mechanism. React-admin shows the dashboard by handling the root path. The landing page is displayed, which redirects authenticated users to the dashboard. This dashboard is added back as another custom route on the /dashboard path.