UI

Methods for showing and handling UI stuff.

The SketchUpApi.ui class provides methods for interacting with SketchUp’s native UI. Right now you can handle menu and button events, or show simple input boxes.

Keep an eye on this space. More methods are coming soon!

Example

// Watch for when the user clicks something
SketchUpApi.ui.on('my_cool_command', event => {
  console.log('User clicked your command!', event.timestamp);
});

// Show a simple "yes/no" prompt
let prompt = await SketchUpApi.ui.getModalInput({
  message: 'Ready to rename your group?',
  actions: 'yesno', // or 'ok', 'okcancel', 'yesnocancel'
});

if (prompt.action === 'no') {
  return;
}

// Gather some text input
let input = await SketchUpApi.ui.getModalInput({
  title: 'Rename Group',
  message: 'Enter a new name for this group.',
  actions: 'okcancel',
  inputs: {
    name: {
      widgetType: 'text',  // other types coming soon, but
      valueType: 'string', // for now use 'text', 'string'
      label: 'New name',
      default: 'Group',
    },
  },
});

// After the await, do stuff
if (input.action === 'ok') {
  console.log('New group name:', input.inputStates.name);
}

Since

SDK 2.27.0 Protocol 1.24.0

Methods

getModalInput()

Call Signature

getModalInput<Settings>(settings): Promise<ModalInputResponseForSettings<Settings>>

Pops open a modal dialog until the user responds.

actions takes one of the four shorthand sets, or an array of ModalInputCustomAction where the buttons need their own labels.

Type Parameters

Type Parameter
`Settings` extends `ModalInputSettings`

Parameters

Parameter	Type
`settings`	`Settings`

Returns

Promise<ModalInputResponseForSettings<Settings>>

Since

SDK 2.31.0 Protocol 1.25.2

Call Signature

getModalInput(settings): Promise<ModalInputResponse>

Pops open a modal dialog until the user responds.

actions takes one of the four shorthand sets, or an array of ModalInputCustomAction where the buttons need their own labels.

Parameters

Parameter	Type
`settings`	`ModalInputSettings`

Returns

Promise<ModalInputResponse>

Since

SDK 2.31.0 Protocol 1.25.2

on()

on(commandId, handler): void

Registers a handler for the given command ID. Replaces any previously registered handler for the same ID.

Parameters

Parameter	Type	Description
`commandId`	`string`	the command ID as defined in the manifest
`handler`	(`event`) => `void`	called each time the command fires

Returns

void

Example

First, register a command in your extension manifest:

{
  "commands": {
    "show_my_panel": {
      "title": "Show Panel",
      "description": "Shows the extension panel."
    }
  },
  "menuItems": [
    { "type": "item", "commandId": "show_my_panel" }
  ]
}

Then listen for it (before connecting, so a click that fires before load isn’t missed):

SketchUpApi.ui.on('show_my_panel', event => {
  console.log('Command fired:', event.id);
});

// The moment you connect, any on() handlers already
// defined will fire. (SketchUp lazy-loads your extension
// webpage when any menu item or tool button is clicked,
// so doing connect() here will raise the event above.)
await SketchUpApi.connect();

Since

SDK 2.27.0 Protocol 1.24.0

toString()

toString(): string

Returns

string