Ansible UI Framework

A framework for building applications using PatternFly.

While PatternFly provides the building blocks and guidance on building applications, PatternFly does not tie together those building blocks and manage the needed state for the developer. This framework adds state management and abstractions for common patterns of application development.

This framework:

• does not use any state libraries other than the built in react context state management.
• does not assume any specific translation libraries, but does provide a hook for internal translations.
• does not assume any specific navigation libraries, but does provide a hook for internal navigation.

There is an Ansible UI Framework Demo repo showing an example of using the framework.

Guides

• PageForm Guide
• PageTable Guide

Getting Started

Install the NPM package

NPM Package: @ansible/ansible-ui-framework

npm install @ansible/ansible-ui-framework

Add the PageFramework to your application

Near the top of your application add the PageFramework component.

This component adds the state management needed by the framework.

Use the framework in your application pages

Use PageLayout to control the layout in your pages

The PageLayout is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.

<Page>
  <PageLayout>
    <PageHeader ... />
    ...
  </PageLayout>
</Page>

Use PageHeader for the heading of your pages

The PageHeader is used at the top of each page. It provides a consistent layout of header elements.

<Page>
  <PageLayout>
    <PageHeader ... />
    ...
  </PageLayout>
</Page>

Add content to the page

Table Pages

For pages containing a table, use the PageTable component. The PageTable support table, list, and card views of the data.

<Page>
  <PageLayout>
    <PageHeader ... />
    <PageTable ... />
  </PageLayout>
</Page>

Other Useful Components

• BulkActionDialog