Comment on page

Advanced Form Popup

Overview
A popup that includes custom inputs such as multi-select checkboxes, multi-file and multi-image uploaders.
Structure
The block includes the following:
Various bubble input elements (input, multi-line input, dropdown, date/time input, radio buttons, search box, and multi-dropdown)
Four custom inputs:
Group Inner multi-select options
RepeatingGroup Options displays a list of options (set to dummy data for now)
Group Inner single checkbox_yes / no
Multi-file_uploader (reusable)
Multi-image_uploader (reusable)
How to set up
Update the data source for all standard Bubble inputs
Update the data source for RepeatingGroup Options and its associated workflows
Clicking on Group Main select option will add the current option to a list of selected options on RepeatingGroup Options
RepeatingGroup Options has a custom state selected options of type Dummy. Modify the custom state's type.
Update Text Click to check this
​
Group Inner single checkbox_yes / no has a yes/no data type. Clicking on the group will display "yes" in the group (check the box) or "no" in the group (uncheck the box)
Add workflows to Button Cancel and Button Save changes
How to set up the custom multi-file uploader
Multi-file_uploader reusable element contains the following:
Multi-file_fileuploader has a custom state of list of files (type: file)
HTML multiuploader style includes a code snippet that changes 
Multi-File_uploader files's color. You can modify the color by updating the HEX codes.
Upload files (videos, images, and documents) with multi-file_uploader files
RepeatingGroup uploaded files displays multi-file_uploader's list of files 
Clicking on Group Main delete file deletes a file
Group Inner image_file contains an image with link preview, a document icon, and a video icon
If needed, modify the conditional statement on Image file preview and add any additional file extension you might want to include. The default file extensions include:
.jpg
.jpeg
.png
.svg
.gif
If needed, modify the conditional statement on Feathericon doc and add any additional final extension you might want to include. The default file extensions include:
.doc
.docx
.pdf
.xls
.xlsx
.csv
.ppt
.pptx
If needed, modify the conditional statement on Feathericon video and add any additional final extension you might want to include. The default file extensions include:
.mp4
.m4a
.wmv
.mov
How to set up the custom multi-image_uploader
Multi-image_uploader reusable element contains the following:
multi-image_uploader has a custom state of list of files images (type: file) and selected file image (type: file)
HTML multi-uploader style includes a code snippet that changes 
multi-file_uploader images upload's color. You can modify the color by updating the HEX codes.
Upload images with multi-file_uploader images upload
RepeatingGroup uploaded images's displays new_imageuploader's list of files images
Clicking on Group Inner delete image deletes a file image
Add workflows to Group Inner move left and Group Inner move right. These groups should be used when you want to edit the order of a list of file images.
Clicking on Group Inner select image_file will update RepeatingGroup uploaded images's selected file image. This should be used when you want to select a main image from a list of images (e.g., cover photo, profile picture, or main listing image).

Last modified 2yr ago