Filter Saver

The Filter Saver functionality helps the user save a filter condition.

Default Component Image

Properties of the Filter Saver

General

When configuring a Filter Saver component, the following general properties can be adjusted to suit user requirements:

• Component Name: A unique identifier for the Filter Saver, allowing for easy reference in the project.

• Left: Defines the horizontal positioning of the component within the interface.

• Top: Sets the vertical positioning, aligning the component with the desired section of the interface.

• Height: Specifies the vertical size of the component, allowing for customization based on interface needs.

• Width: Indicates the horizontal dimension, ensuring ample space for displaying content.

• Label: Text displayed on the component to guide user interaction and understanding of its purpose.

• Initial Visibility: Determines whether the component is visible during the initial interface preview; if disabled, it will not be displayed at the start.

• Tooltip: Provides additional information or guidance when users hover over the component.

• Click Value: The value sent to the backend system upon interacting with the component, enabling programmatic responses based on user actions.

​

Background

This section allows you to customize the shadow styling of the component's background to enhance depth and visual hierarchy.

• Shadow: Enables or disables the shadow effect. Check this box to apply a shadow to the component.

• Shadow Color: Select the color of the shadow. This defines the hue that will appear around the component when the shadow is enabled.

• Shadow Transparency: Adjusts the transparency level of the shadow. A lower value makes the shadow more transparent, while a higher value makes it more opaque.

  • Example: A value of 0.1 results in a very light and subtle shadow.

​

Style

Style properties are attributes used to define the visual appearance of elements in a document or interface. They control how content is displayed, including aspects such as color, size, spacing, font, and layout. In charts or web elements, style properties help enhance readability, clarity, and overall design without altering the actual data or content structure.

The user can set the background color and font color as well as font style-weight-family etc in this section.

1. Background Color: This property allows customization of an element's background using any color. It's useful for enhancing visual aesthetics and ensuring readability.

2. Border Radius: This property is used to round the corners of an element's border. It's a simple way to soften the appearance of UI elements such as buttons, containers, and panes, enhancing the overall aesthetic and feel.

3. Font Color: Sets the color of the text, such as black for primary labels and gray for hints or inactive states, enhancing clarity and visual contrast.

4. Font Size: Controls the size of the text for labels like “Save Filter” or filter names, improving readability and visual hierarchy.

5. Font Style: Applies styles like italic to text elements, such as placeholders or descriptions within the Filter Saver input fields.

6. Font Weight: Adjusts the thickness of the text, helping highlight important actions like the Save button. (e.g., Bold)

7. Font Family: Defines the typeface used in the Filter Saver text, ensuring consistency with the application's branding (e.g., Arial, Roboto)

Steps to use the Filter Saver

• Drag a filter component together with the Filter Saver component on the canvas and navigate to the preview screen.

  
• Click on the Filter Saver component from the preview page.

  
• The Add Criteria tab opens under the Filter Saver component. Also, a notification message appears to ensure the user that the saved criteria will be loaded.

  
• One year appears in the panel below.

• Give a name to that year and save it. E.g., Initial Year.

• Click the Save option to save the newly created Criteria.

  
• Open the Criteria List tab.

• The saved Criteria appear under this tab.

• Select any listed Criteria by using the checkmark icon.

  
• Select another year from the Filter.

​

• Navigate to the Add Criteria tab again.

• Give a name for a new criterion.

• Add value to it and save a new criterion. E.g., Second Year is another saved criterion.

  

​

• The user can open the Criteria List tab to check whether the newly created Criteria are listed there.