Sidebar
A Sidebar in a user interface (UI) typically refers to a vertical or horizontal panel, often positioned at the edge of the main content area, that provides navigation, additional information, or controls to the user.
The design, layout, and content of a sidebar depend on the specific goals of the UI and the needs of the users. Effective use of sidebars can significantly improve user navigation and interaction, making it an important element in UI design.
Features
- Fixed or Collapsible: Can be static or toggleable.
- Customizable Width & Position: Allows Left, right, top, or bottom positions.
- Responsive Design: Adjusts visibility based on screen size.
- Supports Icons & Menus: Can contain links, icons, or custom widgets.
- Overlay or Push Mode: Can overlay content or push the main page.
Create Sidebar
Follow the below steps to create a sidebar:
- From the explorer menu, right-click Sidebar in a master layout and select Add.
- In the properties panel, configure the properties as required and then click save icon. The "Sidebar created successfully" message displays upon successful creation.
- In the sidebar canvas, design the sidebar using the widgets as required and click save.
| Property | Description | Comments |
|---|---|---|
| Basic Configuration | ||
| Name* | Provide the name of the sidebar. | Name must start with a character followed by alphanumeric or ''. No spaces are allowed. Except underscore (), no other special characters are allowed. Name cannot start with a number. |
| Container Type* | Choose the container type as required. Either Overlay or Push. | Overlay- The sidebar appears over the main content without affecting its layout. Push- The sidebar pushes the main content to make space for itself. Note: This field is visible when add sidebar in Master layout only. |
| Overlay Open Type* | Select the overlay open type as required. Allowed positions: Left (Default), Right, Top, Bottom | Open type allows control of side bar position. Note: This field is visible when if Container type is Overlay. |
| Show Open or Collapse Icon | The "Show Open/Collapse Icon" option controls whether an icon (such as a hamburger menu or arrow) is displayed for toggling the sidebar. | If enabled ("Yes"), a visible icon appears, allowing users to expand or collapse the sidebar. If disabled ("No"), the sidebar must be controlled through other means (e.g., clicking outside, a separate button, or programmatically). Note: This filed is visible only if Container type is Push |
| Basic Bindings | ||
| Visibility | Specify a visibility condition for the Sidebar. It will be visible only if the expression evaluates to true. | This sidebar will be visible only if the expression validated to true. |
| On Close | Select the event for on close. | On Close event allow developers to execute custom logic when the sidebar closes. It can be used for animations, logging or triggering API calls. |
| On Open | Select the event for on open. | On Open event allow developers to execute custom logic when the sidebar opens. It can be used for animations, logging, updating UI elements or triggering API calls. |
| Attributes Configuration | ||
| Name | Provide the name of the attribute. | e.g: title, tabindex, hidden, pTooltip, attr.aria-label, etc. |
| Value Type | Select an option from the available value types. Following are the list of options: Text, One-way Binding, Two-way Binding, Expression, Boolean Attribute, Directive, Template Reference Variable | Text: allows user to assign static values. One-way Binding: Dynamically assigns a value from the component model properties. Two-way Binding: Synchronizes value between UI and component, allowing automatic updates. Expression: Allows user to assign dynamic expressions or component model properties using expression builder. Boolean Attribute, Directive, Template Reference Variable: Use this option when no explicit value is required for attribute, typically for enabling features or referencing elements. |
| Value | Text → Enter a static value directly. One-way / Two-way Binding → Select a dynamic value from the available options in the autocomplete control. Two-way binding ensures automatic updates. Expression → Assign expression using the Expression Builder for dynamic evaluations. Boolean Attributes, Directives, Template Reference Variables → No explicit value input is required. These are typically standalone attributes used for enabling functionalities or referencing elements. | Note: Value field will be disabled when select below options. Boolean Attribute, Directive, Template Reference Variable |
| Style & Layout | ||
| Height | The height for widget defines its vertical size in units. | |
| Width | The width for widget defines its horizontal size in units. | |
| Unit Type | Specify the type of unit used to define height and width. Options: px, rem, %. | |
| CSS Class | Provide the CSS class name that exists in the application. | |
| Style | Inline styles are a way to apply CSS directly for the widget. It allows quick styling without needing an external or internal CSS file. | |
| Additional Configuration | ||
| Standalone | Specify whether the widget is standalone (Yes or No). | By default, 'No' is selected. Note: Standalone widget will not be part of Form model. |
| Help Text | The Help Text feature in the Widget provides users with additional guidance on how to fill out a field. Select "Yes" If help text is required. | By default, 'No' is selected. When select 'Yes', a small help icon (typically a question mark) appears next to the input field. Users can hover over or click the icon to view a tooltip containing helpful instructions. |
| Icon Alignment | Select the icon alignment from the drop-down. | Visible only when Help Text is set to Yes. |
| Text | Provide the help text. | |
| Hint Text | Select "Yes" If hint text is required. The Hint feature in widget provides users with additional guidance or context about the expected input format or value. | By default, 'No' is selected. Hints appear below or alongside the input field to assist users in entering the correct information. |
| Text Alignment | Select the alignment of the hint text from the drop-down. Following are the list of options: Right side of the Label, Right side of the Control, Bottom of the Label, Bottom of the control | Visible only when Hint Text is set to Yes. |
| Text | Provide the hint text. | Visible only when Hint Text is set to Yes. |
| Title | Provide the widget title. | Title attribute provides additional information when a user hovers over an element. |
| Name | Provide a unique name for the widget. | Used to distinguish it. |
| Id* | Provide the unique ID for the widget. | A default ID is generated, but it can be changed as needed. |
| Transition Effect Duration | This field likely allows users to specify the duration of the sidebar transition effect in milliseconds. | Note: This filed is visible if Container type is Overlay |
Note: An asterisk (*) denotes that the property is mandatory for creating a sidebar.