Platform: Filter Bar Component V1.0 Technical Design - SAP/fundamental-ngx GitHub Wiki

Filter Bar Component

Summary

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Design


<fdp-filter-bar
    [id]="bar Id"
    [title]="bar title"
    [show/hide advanced]="true|false"
    [showSearch]="true|false"
    [showClear]="true|false"
    [showGo]="true|false"
    [showRestore]="true|false">
                        <ng-content></ng-content>
</fdp-filter-bar>

Property Bindings

id: string

id of the bar it is optional.

[title]="bar title"

Title of the filter bar

[show/hide advanced]="true|false"

shows(expand) and hides(collapse) the advanced filter options

[showSearch]="true|false"

show or hide the search option.

[showClear]="true|false"

show or hide the clear button.

[showGo]="true|false"

show or hide the GO button.

[showGo]="true|false"

show or hide the Restore button.

Event Bindings

Template:

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Are used along with this component.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • fdp-filter-bar's title attribute can be supported with string binding:
<fdp-filter-bar
    [id]="bar Id"
    i18n-title="@@titleBar"
    title="bar title"
    [show/hide advanced]="true|false"
    [showSearch]="true|false"
    [showClear]="true|false"
    [showGo]="true|false"
    [showRestore]="true|false">
      <ng-content></ng-content>
</fdp-filter-bar>

Redesign Required: No

The filter items in the ng-content will support i18n as per the components specified in it.

Information:

Sushma: in ng-content is place holder for filter items.

Questions:

⚠️ **GitHub.com Fallback** ⚠️