onCommand handler

Responsible for handling commands sent from the dialog script.

To accompany user’s utterances with activities in the app UI, you can send commands from the dialog scripts to the client app. For example, once the user gives a voice command, another view or page can be opened in the app, a UI element can be selected on the screen and so on.

To send a command, use the play() function in the dialog script and pass a JSON object to it. The JSON object contains the command name and, optionally, arbitrary data to be provided to the app. To handle the command on the client side, set up the logic in the onCommand handler in the app.

For details, see Sending commands to the app.

Examples

Dialog script
intent(`Go to the home page`, p => {
  p.play({command: 'navigation', route: 'home'});
  p.play(`Opening the home page...`);
});
Client app
alanBtn({
  key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
  host: 'v1.alan.app',
  onCommand: (commandData) => {
    if (commandData.command === 'go:back') {
      // Call client code that will react to the received command
    }
  },
});
Client app
self.button.onCommand = ^(NSDictionary *command) {
  NSString* commandName = [command objectForKey:@"command"];
  NSLog(@"%@", commandName);
};
Client app
self.button.onCommand = { command in
  guard let commandName = command?["command"] as? String else {
    return
  }
  print(commandName)
}
Client app
val alanCallback: AlanCallback = object : AlanCallback() {
  /// Handle commands from Alan AI Studio
  override fun onCommand(eventCommand: EventCommand) {
    try {
      val command = eventCommand.data
      val commandName = command.getJSONObject("data").getString("command")
      Log.d("AlanButton", "onCommand: commandName: $commandName")
    } catch (e: JSONException) {
      e.message?.let { Log.e("AlanButton", it) }
    }
  }
};

/// Register callbacks
alanButton?.registerCallback(alanCallback);
Client app
AlanCallback alanCallback = new AlanCallback() {
  /// Handle commands from Alan AI Studio
  @Override
  public void onCommand(final EventCommand eventCommand) {
    try {
      JSONObject command = eventCommand.getData();
      String commandName = command.getJSONObject("data").getString("command");
      Log.d("AlanButton", "onCommand: commandName: " + commandName);
    } catch (JSONException e) {
      Log.e("AlanButton", e.getMessage());
    }
  }
};

/// Register callbacks
alanButton.registerCallback(alanCallback);
Client app
_MyHomePageState() {
  /// Handle commands from Alan AI Studio
  AlanVoice.onCommand.add((command) {
    debugPrint("got new command ${command.toString()}");
  });
}

Ionic Angular

Client app
this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
  const commandData = (<CustomEvent>data).detail;
  if (commandData.command === 'navigation') {
     // call client code that will react to the received command
   }
 });

Ionic React

Client app
alanBtnComponent.current.addEventListener('command', (data: CustomEvent) => {
  const commandData = data.detail;
  if (commandData.command === 'navigation') {
     // call client code that will react to the received command
  }
});

Ionic Vue

Client app
<ion-content :fullscreen="true">
  <alan-button v-on:command="command" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

export default defineComponent({
  methods: {
    command: function(data:any) {
      console.info('Received command: ', data.detail);
    }
  },
});

Note

To define the onCommand handler in Ionic Vue, use lowercase: v-on:command. Otherwise the handler will not be working.

Client app
import { NativeEventEmitter, NativeModules } from 'react-native';
const { AlanEventEmitter } = NativeModules;
const alanEventEmitter = new NativeEventEmitter(AlanEventEmitter);

componentDidMount() {
  // Handle commands from Alan AI Studio
  alanEventEmitter.addListener('onCommand', (data) => {
    console.log(`onCommand: ${JSON.stringify(data)}`);
  });
}

componentWillUnmount() {
  alanEventEmitter.removeAllListeners('onCommand');
}