Panel

You may use collapsible or noncollapsible panels to the group and categorize fields in a form.

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Panel” layout form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Height: Specifies the vertical size of the component, allowing customization of its display area in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Enable Header?: “Yes” means the header of the panel will be visible on the UI, and “No” means the header is hidden on the UI.
    1. Header: Text or content displayed in the header of the panel.
    2. Sub Header: Text or content displayed as a secondary header below the main header.
  5. Remove Panel Border: Set to "Yes" to remove the border around the panel.
  6. Remove Panel Padding: Set to "Yes" to remove the padding inside the panel.

2nd Step – Validation

  1. Validation Field Comma separated: A list of fields separated by commas that need validation before proceeding.

3rd Step – Advance

The following fields in this step can be used to define the UI of the Panel.

  1. Design
    1. Header: The top section of the panel, where key details or titles are displayed.
      1. Header Class: A class that defines the styling of the header.
      2. Header Background Color: The background color for the header section of the panel.
      3. Header Text Color: The color of the text displayed in the header.
      4. Header Text Color Class: A class that defines the text color of the header.
      5. Is not collapsible: Specifies whether the header should be collapsible or not.
      6. Default Collapse: Set whether the panel is collapsed by default.
      7. Web Icon: The icon that represents the panel on the web version.
      8. Mobile Icon: The icon that represents the panel on the mobile version.
      9. Header Text Align: Select the alignment of the text in the header (Left, Center, or Right).
    2. Background Color: Set the background color using a color code based on the design.
    3. Background Image: Add an image URL to set an image as the background for the panel.
    4. Panel Class: The class that defines the overall styling of the panel.
    5. Panel Body Class: The class that defines the styling for the body of the panel.
    6. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    7. Is Border Radius: Indicates whether the panel has rounded corners.
      1. Border Radius: Specifies the radius of the corners if enabled.
  2. Others
    1. Load external Form: Enables loading an external form within the current form or page.
      1. Form Id (required if external form load enabled): The identifier for the external form to be loaded.
      2. Form Action Type: Defines the type of action to be performed with the external form (e.g., submit, update).
      3. Bind With Api: Links the external form with a specific API for data retrieval or submission.
    2. Is more Button: Configures the "More" button, typically used to expand or show additional content.
      1. Label: The text label displayed on the "More" button.
      2. Icon: The icon that represents the "More" button (e.g., a down arrow).
      3. Custom Class: A custom CSS class used to style the "More" button.
      4. Bind Label with Data Model: Links the button label with a data model to dynamically change the label.
      5. Popup Position: Specifies where the popup (if any) associated with the "More" button will appear (e.g., top, bottom, left, right).
  3. Mobile
    1. Deck Swiper: Converts the panel into a deck swiper when viewed on mobile, making navigation through items smoother.
    2. Panel Background Color: The background color of the panel. Defines the appearance of the panel's background.
    3. Background Image: Adds an image as the background of the panel.
    4. Enable Shadow: Applies a shadow effect to the panel, making it stand out.
    5. Is Not Scroll View: When enabled, prevents the panel from becoming scrollable.
    6. Flex Direction: Defines the direction of items within a flex container. Options: Column, Column Reverse, Row, Row Reverse.
    7. Flex: Defines the flex property to determine how the items should grow or shrink within the container.
    8. Flex Wrap: Specifies whether the flex container should allow items to wrap onto multiple lines.
    9. Gap: Defines the spacing between items in the flex container.
    10. Vertical Alignment: Specifies how items are aligned vertically within the container.
    11. Horizontal Alignment: Specifies how items are aligned horizontally within the container.
    12. Align Self: Allows individual items to align themselves differently from the container's alignment settings.
    13. Border Radius: Sets the rounded corners for the panel or elements within it.
    14. Margin: Defines the space around the panel.
      1. Margin Left: Space on the left side of the panel.
      2. Margin Top: Space on the top side of the panel.
      3. Margin Right: Space on the right side of the panel.
      4. Margin Bottom: Space on the bottom side of the panel.
      5. Margin Left Auto: Automatically adjusts the left margin.
      6. Margin Top Auto: Automatically adjusts the top margin.
      7. Margin Right Auto: Automatically adjusts the right margin.
      8. Margin Bottom Auto: Automatically adjusts the bottom margin.
    15. Padding: Defines the inner space within the panel.
      1. Padding Left: Inner space on the left side of the panel.
      2. Padding Top: Inner space on the top side of the panel.
      3. Padding Right: Inner space on the right side of the panel.
      4. Padding Bottom: Inner space on the bottom side of the panel.
    16. Width: Specifies the width of the panel.
    17. Mobile Height: Defines the height of the panel on mobile devices.
    18. Header Background Color: The background color of the panel's header section.
    19. Header Text Color: The text color of the panel's header.
    20. Panel Border Color: Specifies the color of the border around the panel.
    21. Panel Border Width: Defines the width of the border around the panel.
    22. Styles: Custom styles applied to the panel for further customization.
    23. Font Size: Defines the size of the text within the panel.
    24. Button Color: The color of buttons within the panel.
    25. Text Color: The color of the text within the panel.
    26. Icon Color: The color of the icons within the panel.
    27. Icon Size: Specifies the size of the icons within the panel.
    28. Icon Background Color: The background color behind icons within the panel.
    29. Icon Width: Defines the width of the icons within the panel.
    30. Position: Defines the position of the panel. Select either Relative or Absolute to determine how the panel is placed within its container.

Click “Confirm” and “Panel” control is configured.