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. Vertical Alignment
    8. Horizontal Alignment
    9. Align Self
    10. Border Radius
    11. 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
    12. Padding
      1. Padding Left
      2. Padding Top
      3. Padding Right
      4. Padding Bottom
    13. Width
    14. Mobile Height
    15. Header Background Color
    16. Header Text Color
    17. Panel Border Color
    18. Panel Border Width
    19. Styles
    20. Font Size
    21. Button Color
    22. Text Color
    23. Icon Color
    24. Icon Size
    25. Icon Background Color
    26. Icon Width

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