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): These are the attributes of the form
  2. Height: Put a numeric value to fix the size of the panel
  3. Column Width
  4. Enable Header?: “Yes” means header of the panel will be visible on UI, and “No” means header is hidden on UI
    1. Header
    2. Sub Header
  5. Remove Panel Border
  6. Remove Panel Padding

2nd Step – Validation

  1. Validation Field Comma separated

3rd Step – Advance

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

  1. Design
    1. Header
      1. Header Class
      2. Header Background Color
      3. Header Text Color
      4. Header Text Color Class
      5. Is not collapsible
      6. Default Collapse
      7. Web Icon
      8. Mobile Icon
      9. Header Text Align: Select text position from the following Left, Center or Right
    2. Background Color: Based on the design, set the color code to set the background color
    3. Background Image: Add Image URL to set any image as a background image in the panel
    4. Panel Class
    5. Panel Body Class
    6. Bootstrap Column Class
    7. Is Border Radius
      1. Border Radius
  2. Others
    1. Load external Form
      1. Form Id (required if external form load enabled)
      2. Form Action Type
      3. Bind With Api
    2. Is more Button
      1. Label
      2. Icon
      3. Custom Class
      4. Bind Label with Data Model
      5. Popup Position
  3. Mobile
    1. Deck Swiper: Panel will convert into deck swiper in mobile view
    2. Panel Background Color
    3. Background Image
    4. Enable Shadow
    5. Is Not Scroll View
    6. Flex Direction: Select flex direction from the following Column, Column Reverse, Row or Row Reverse
    7. Flex
    8. Flex Wrap
    9. Gap
    10. Vertical Alignment
    11. Horizontal Alignment
    12. Align Self
    13. Border Radius
    14. Margin
      1. Margin Left
      2. Margin Top
      3. Margin Right
      4. Margin Bottom
      5. Margin Left Auto
      6. Margin Top Auto
      7. Margin Right Auto
      8. Margin Bottom Auto
    15. Padding
      1. Padding Left
      2. Padding Top
      3. Padding Right
      4. Padding Bottom
    16. Width
    17. Mobile Height
    18. Header Background Color
    19. Header Text Color
    20. Panel Border Color
    21. Panel Border Width
    22. Styles
    23. Font Size
    24. Button Color
    25. Text Color
    26. Icon Color
    27. Icon Size
    28. Icon Background Color
    29. Icon Width
    30. Position: Select either Relative or Absolute

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