Command Palette - App Wide Search

Demo to preview the plugin:

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.
Image without caption

How to setup

  1. Put element Command Palette on the page.
  1. 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" }] } ] } ] }
      Image without caption
  1. Style the Command Palette
    1. Image without caption
  1. Run preview, when page is loaded Launch Command Palette by pressing ⌘ + K or Alt + K.
  1. To make your own JSON structure you can use Builder on the demo page.

Plugin Element Properties

Image without caption
**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

  1. Open - Trigger to open command palette.
  1. 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

Update: 26.05.23 - Version 0.8.5

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