Last Update: Sep 15, 2022
Platform: Web
Designer: Chris Thomas, Rajesh Rathod
Intro
The Status & Filter Panel is a new pattern that uses a dynamic side content within a list report floor plan. The dynamic side panel allows us to house a list of faceted filters along with a list of status or stages.
In SF we have extended requirements regarding the flexibility and efficiency of the UI. The status and filter pattern was developed and extended to the needs of HXM use cases.
Usage
With the Status & Filter Panel a list view or a table can be filtered in two different ways.
- List items can be assigned to different status. The total number of items is thus distributed over different levels. These levels can be clicked on individually and the items displayed on the status. The statuses can have different subgroups that can be opened and closed with an arrow control. List items can also be distributed to the subgroups.
- The number of list items can be reduced using various filters.
- The filters consist of groups of checkboxes that can be checked
- Filters consist of groups of radio buttons that can be selected.
- Filters consist of groups with input fields that can be filled with keywords.
Structure & Components
The status and filter panel is made up of the Dynamic Side content which can be used within the list report floor plan.
The List report floor plan can contain a responsive table as the main container for the data set.
Dynamic Side Panel: https://ux.wdf.sap.corp/fiori-design-web/dynamic-side-content/
List Report Floorplan: https://ux.wdf.sap.corp/fiori-design-web/list-report-floorplan-sap-fiori-element/
Behavior & Interaction
- The Status & Filter panel opens to the left of the content by clicking the Status & Filter button.
- The panel can be closed by using the Hide button in the right upper corner of the side panel container.
At the top of the Status & Filter panel is a segmented button. The button provide two different modes for the panel to toggle between the two states: “Status” and “Filters”
In the particular use case of Recruiting Management the status represents the hiring stage and serves as a means to look at the candidates at the various hiring stage of the recruiting process.
Applicants can be placed on certain stages such as "new application", interview, ready to hire, hired. The classification gives the recruiter a good overview in the recruiting process and supports the user in the processing of applications.
The Filters represent filter criteria for operating on the dataset represented by the table on the right.
If the filters have grouping, for example Location can have Country, State and City then they are presented as a group with an expand-collapse arrow control.
Responsiveness and Adaptiveness
The dynamic side content control is built for different screen sizes and layouts.
There are adaptation options for compact and cozy mode for the status & filter side panel.
Application-specific Examples
The Status & Filter Panel has so far only been used in an SF module for recruiting management. This version corresponds to the version that was described here in the chapter.
Accessibility
This pattern is created using standard FIORI controls like segmented button, checkbox, text fields expand/collapse buttons etc. These UI5 elements follow the specifications of the A11Y standards.
Resources
Based on the test feedback captured during the session we continued with Variation 1.
The variations are here: