RiseApp KB

Appearance

App Layout ​

Command Palette ​

The command palette is a globally available dialog that can be used to trigger an action from anywhere in the app

Note:

Use in conjuction with the reactivity framework to ensure that relevant components remain up to date when changers occur within the Command Palette

Trigger the main command palette ​

You can trigger the command palette with it's start screen. This provides a unified UI where the user can search for available actions to perform

Display a global component in the command palette ​

To trigger a registered component to display within the command palette:

js
import { useAppStore } from '@/store/app'

..
const appstore = useAppStore()

..

const componentId = 'NewItem'
const componentProps = {foo: 'bar'}
const containerProps = {fullscreen: true} // optional: props for the v-dialog container
apptstore.setCommandPalette(componentId, componentProps, containerProps)

Adding a resource action ​

Adding an action that will run on a specific resource can be done by placing a resource picker in front of the action

To do this, we just need to inform the registry that this component requires a resource picker:

js
    ...
      "Project.Duplicate": {
        component: shallowRef(Duplicate),
        title: 'Duplicate project',
        resource: 'project',
        fetch: true,
        icon: 'mdi-content-copy',
      },
    ...

INFO

Here we define the resource, and we set fetch=true - this informs the command palette that this action requires a resource picker. The selected resource will be passed to the component as a modelValue prop.

Detail View ​