Menu Focus Elements
Last updated
Was this helpful?
Last updated
Was this helpful?
Element name: menufocus_template Purpose: Provide the user with a concise list of actions they can take in a convenient dropdown menu.
The dropdown menu is used consistently throughout the Canvas template to provide the user with actions they can take such as Edit/delete a thing, View more details, Send a message, etc.
The dropdown is triggered by clicking on the icon, can be dismissed by clicking anywhere outside the dropdown, and is most often used in repeating groups to provide action items for each thing in the list.
Open the menufocus_template and from the top bar of the Bubble editor click Edit > Clone this Page.
With your cloned menufocus_template open, double-click in the gray area of the editor to open up the settings for the reusable. Change the 'Type of content' to the datatype you will be using this menu to edit. You will need to change the type of content for the GroupFocus Dummy as well.
In the elements tree click the '+' to open the GroupFocus Dummy. This group contains all the dropdown buttons in the menu. Group Option 2 and Group Option 3 are already set up as the Edit and Delete actions.
There are three more Group Options (1, 4, & 5) that are unused and can be customized to add more buttons to your menu. Each of these groups has a corresponding event in the workflow tab that will be run when the group is clicked.
The menufocus_template reusable element also contains two popups that correlate to the Edit and Delete actions:
Popup Edit Clicking on Option 2 (Edit) in the dropdown will open a standard edit form popup to create or edit a thing.
Popup Remove Clicking on Option 3 (Delete) in the dropdown will open a popup to remove a thing.
Customize/duplicate these popups to your purposes.
Each popups can be triggered by the corresponding custom events 'Create/edit thing' and 'Remove thing'.
Setting up custom events within a reusable gives you the option of using that workflow from the page it is on with the 'Trigger a custom event from a reusable element' action.
For example, you can add the menufocus_template element to the hidden variables popup on a page and trigger a custom event to create/edit or remove a thing.
Element name: admin_users_menu
This focus group reusable element contains a menu of dropdown buttons for the user object. The menu popover is triggered by clicking on the icon and can be dismissed by clicking anywhere outside of the focus group. This reusable element is used in the Users tab in the Owner's Portal.
Clicking on Option 1 (Password reset) will schedule an API workflow to send a password reset email to the user.
Clicking on Option 3 (Deactivate) will open Popup Remove user. Deactivating the user will only mark the user as inactive and would not delete the user from the app.
Element name: admin_email_menu
This focus group reusable element contains a menu of dropdown buttons for the Email template object. The menu popover is triggered by clicking on the icon and can be dismissed by clicking anywhere outside of the focus group. This reusable element is used in the Emails tab in the Admin Portal.
This reusable element contains two popups:
Popup Edit Email Popup - Clicking on Option 2 (Edit) in the dropdown will open a standard add/edit form popup to create or edit an Email template. To learn more about email templates and how to use them, please click here.
Popup Remove - This dummy popup is included and can be used to delete a thing.
