New Component Proposal - Floating Action Button - Areteans

[s-thutupalli]

Overview

Title: Floating Action Button

Description:
The Float Action Button (FAB) is a versatile, page-level component designed for use in any template. It serves as a floating button that provides immediate access to actions from a constant, easily accessible location. This component can be configured with multiple items, making it ideal for quick access to info links, branding guidelines, and other day-to-day actions.
A FAB can display three to six actions in the form of a Speed Dial, ensuring that essential functions are always at your fingertips.
FAB collapsed

• The FAB is displayed in its collapsed state.

Dependencies:
Used Material UI(MUI) library for FAB development.

Configurations:

1. Icons Customizations(Boolean)
2. Purpose of the Component(Dropdown)
3. Data Page(string)

1. Icons Customizations

   Default icons : "+" & "x".

   Checkbox checked: When the "Custom Icons Required?" checkbox is checked, two input fields become visible -->

      Initial Icon: Enter the URL or Binary file name for the initial icon.
   
      Second Icon: Enter the URL or Binary file name for the second icon.
   

2. Purpose of the Component : This a dropdown with 2 options :

     Create Case Type: When the purpose is set to "Create Case Type" pls check point 3.i
   
     General Purpose: When the purpose is set to "General Purpose", a new checkbox is visible below data page pls check point 4.
   

3. Data Page: Depending on the selected purpose, a "Data Page Name" field must be provided:

     i. Create Case Type: "D_pyQuickCreate" it is a generic data page for case creation.
     ii. General Purpose: Provide the Data Page name created for this component
   
   The component fetches records, parameters, and required data from the specified Data Page.
   

4. Display Options:
   o For the "General Purpose" flow, a "Display as List" checkbox is available to configure the view of records inside the FAB.
   o The default view of records is "image". When the checkbox is checked, the records will be shown as a list.

Benefits of Using this Component in Constellation UI Applications

A Floating Action Button (FAB) performs the primary or most common action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. This design ensures that the FAB is prominently visible and easily accessible for users to perform key actions quickly.

Enhanced User Experience:

Accessibility: A FAB makes it easy for users to access the primary action without having to navigate through menus or other UI elements.

Visibility: Its floating nature and prominent placement ensure that the primary action is always visible and easily accessible.

Consistent Design:

Uniformity: Using a reusable FAB component ensures that the design and behaviour are consistent across different parts of the application.

Styling: Centralized styling makes it easier to maintain and update the look and feel of the FAB.

Improved Code Maintainability:

Reusability: A single FAB component can be reused in multiple places, reducing code duplication.

Modularity: Encapsulating the FAB logic and styling in a component makes the codebase more modular and easier to manage.

Props and Configurations: The component can be designed to accept various props, allowing customization of the icon, colour, size, and actions.

Extensions: The FAB component can be extended with additional features like tooltips, animations, and different action states.

Attached the component code and detailed description with images below.

Floating Action Button.zip

Floating_Action_Button_Component.docx

[ricmars]

This component is not following best practices by using material UI and a custom set of icons - while the UI is slick, it will not scale if you have a lot of case types to create and it is doing double duty with the +Create action in the workportal or the quickcreate widget.

Having said that this widget could be valuable in the context of a self-service portal - I will discuss with the rest of the team if there is a value in adding this component to this repo.

[jhelmbrecht-pega]

Really cool component, has this component been tested against any of the accessibility compliances, and can it function with keyboard navigation right now?

[s-thutupalli]

Hi Joshua - We validated the basic keyboard navigation, and it works fine. But we haven't tested accessibility explicitly.

Hi Richard - The Create was an additional item added based on our internal UX review and we can revise the code by removing it. Also, we've provided custom icons to match the design requirements and is configurable. We will work on the scaling part and upload the updated code by next two days in order to accommodate n no.of case types by introducing a scroll.

If required, we can re-write the component without using the material UI, but requires some more time.