Link to plugin page: https://bubble.io/plugin/command-palette---app-wide-search-1681221578932x795372240288874500
Demo to preview the plugin:
Live Demo: https://command-pallet-demo.bubbleapps.io
Bubble Editor: https://bubble.io/page?id=tagify-demo
Introduction
This plugin turns a JSON structure into a command palette. Trigger workflows directly from the command palette and enable custom shortcuts for your users.
How to setup
- Put element Command Palette on the page.
- Setup the Command Palette:
- Provide JSON structure:
json{ "pages": [ { "name": "Page 1", "prefix": "", "lists": [ { "name": "Pages", "items": [ { "name": "Home", "icon": "Home", "closeOnSelect": true, "type": "Link" }, { "name": "Projects", "icon": "rectangle-stack", "closeOnSelect": false, "pageOnSelect": "projects", "type": "Page" }, { "name": "Inbox", "icon": "inbox", "closeOnSelect": true, "type": "Link" }, { "name": "Settings", "icon": "cog", "closeOnSelect": true, "type": "Link" } ] }, { "name": "Help", "items": [ { "name": "Support", "icon": "lifebuoy", "closeOnSelect": true, "type": "Action" }, { "name": "Send feedback", "icon": "flag", "closeOnSelect": true, "type": "Action" }, { "name": "Documents", "icon": "map", "closeOnSelect": true, "type": "Action" } ] } ] }, { "name": "Projects", "prefix": "Projects", "lists": [ { "name": "Projects", "items": [ { "name": "Hobby Project", "icon": "cube", "closeOnSelect": true, "type": "Action" }, { "name": "My first project", "icon": "cube", "closeOnSelect": true, "type": "Action" }] } ] } ] }
- Style the Command Palette
- Run preview, when page is loaded Launch Command Palette by pressing ⌘ + K or Alt + K.
- To make your own JSON structure you can use Builder on the demo page.
Plugin Element Properties
**Title ** | Description | Type |
JSON Data | Palette JSON structure | String |
Styles | ||
Secondary Text Color | Text color. | Color |
Background Color | Background color of the Command Palette. | Color |
Highlighted Item Color | Background color on hover item. | Color |
Separator Color | Color of the line between search field and menu. | Color |
Overlay Color | Color of the overlay. | Color |
Overlay Transparency | Transparency for the overlay. | Number |
Free Search Label | Text appears on the left of the suggestion list, when user started typing in the search field. | String |
Search Placeholder | Text for place holder for the search field. | String |
Element Actions
- Open - Trigger to open command palette.
- Close - Trigger to close command palette.
Exposed states
Name | Type |
Last Executed Command Name | Text |
Is Open | Boolean (yes/no) |
Executed Command Type | Text |
Executed Command Argument | Text |
Current JSON Config | Text |
Element Events
Name | Description |
Command is Executed | Triggered when user executed command. |
Is Opened | Triggered when the Command Palette is opened. |
Is Closed | Triggered when the Command Palette is closed. |
Changelogs
Update: 12.04.23 - Version 0.0.1
- init
Update: 26.04.23 - Version 0.0.2
- Pages functionality
Update: 27.04.23 - Version 0.1.0
- Initial release
Update: 27.04.23 - Version 0.1.1
- Fix verbose messages
Update: 11.05.23 - Version 0.2.0
- MVP working - custom fonts
Update: 12.05.23 - Version 0.3.0
- Styling colors and fonts
Update: 13.05.23 - Version 0.3.1
- Fix styling bug
Update: 17.05.23 - Version 0.3.2
- use dynamic json
Update: 17.05.23 - Version 0.3.3
- fix closing in dynamic json version
Update: 17.05.23 - Version 0.3.4
- fix code bugs when closing
Update: 18.05.23 - Version 0.3.5
- fix closing when json changes
Update: 18.05.23 - Version 0.3.6
- handle errors in json parsing
Update: 18.05.23 - Version 0.3.7
- Fix closing!
Update: 18.05.23 - Version 0.4.0
- Add Overlay color and opacity settings
Update: 18.05.23 - Version 0.5.0
- Add open and close actions
Update: 18.05.23 - Version 0.6.0
- Add placeholder fields for Search bars
Update: 18.05.23 - Version 0.7.0
- Add exposed states when executing commands
Update: 23.05.23 - Version 0.8.0
- Add JSON as exposed state
Update: 24.05.23 - Version 0.8.1
- Unminified
Update: 26.05.23 - Version 0.8.2
- Re Render when json changes
Update: 26.05.23 - Version 0.8.3
- Perform safety checks on icons
Update: 26.05.23 - Version 0.8.4
- Accept icons from heroicons.com
Update: 26.05.23 - Version 0.8.5
- Accept heroicons.com icons with numbers
Update: 08.06.23 - Version 1.0.0
- Official launch
Update: 08.06.23 - Version 1.0.1
- Updated description
Update: 20.06.23 - Version 1.0.2
- Updated service URL
Update: 11.07.23 - Version 1.0.3
- Reset search when page changes
Update: 11.08.23 - Version 1.0.4
- Name change
Update: 25.10.23 - Version 1.0.5
- Update to v4
Update: 03.02.24 - Version 1.1.0
- updated description
Update: 03.02.24 - Version 1.2.0
- updated description
Update: 08.02.24 - Version 1.3.0
- minor updates