Sub-command pattern

In this article, we will create a slashcommand that has two sub-commands. We will use the App.RocketChat.Tester as the base project for it. All the code for this recipe is in the branch recipes/sub-command-pattern.
You can see the complete documentation on Slashcommands in Rocket.Chat Apps at ISlashCommand​
Moving parts
You'll need to have handy:
A Rocket.Chat server to deploy the app to
Our Tester App or a newly created app (your choice)
Create the slashcommand
Our "main command" (the slashcommand) will be called phone, and we will give it two sub commands, text and call, so when we use them, they will be as follows:
/phone text
/phone call
First, create a slashcommands directory at the root of the project and add a file named PhoneCommand.ts. Then add the following code:
1
import {
2
    IHttp,
3
    IModify,
4
    IRead,
5
} from '@rocket.chat/apps-engine/definition/accessors';
6
import {
7
    ISlashCommand,
8
    SlashCommandContext,
9
} from '@rocket.chat/apps-engine/definition/slashcommands';
10
​
11
export class PhoneCommand implements ISlashCommand {
12
    public command = 'phone'; // [1]
13
    public i18nParamsExample = '';
14
    public i18nDescription = '';
15
    public providesPreview = false;
16
​
17
    public async executor(context: SlashCommandContext, read: IRead, modify: IModify, http: IHttp): Promise<void> {
18
        const [subcommand] = context.getArguments(); // [2]
19
​
20
        if (!subcommand) { // [3]
21
            throw new Error('Error!');
22
        }
23
​
24
        switch (subcommand) { // [4]
25
            case 'text': // [5]
26
                console.log('Texting!');
27
                break;
28
​
29
            case 'call': // [6]
30
                console.log('Calling!');
31
                break;
32
​
33
            default: // [7]
34
                throw new Error('Error!');
35
        }
36
    }
37
}
Copied!
What this code tells us:
[1] I want my command to be called phone.
When it gets executed, [2] I want to get the argument the user passed after the command and to use it as the subcommand.
[3] The argument is mandatory
[4] Try to match the argument in the list of allowed subcommands 
[5] If text is match, log "Texting!"
[6] If call is match, log "Calling!"
[7] If anything else will throw an error
Learn more about Slashcommands in Rocket.Chat Apps at ISlashCommand​
Register the slashcommand
After getting the slashcommand's code done, we have to register it at the app's main class, at the project's root.
1
import { IAppAccessors, IConfigurationExtend, ILogger } from '@rocket.chat/apps-engine/definition/accessors';
2
import { App } from '@rocket.chat/apps-engine/definition/App';
3
import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata';
4
import { PhoneCommand } from './slashcommands/PhoneCommand'; // [1]
5
​
6
export class RocketChatTester extends App {
7
    constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
8
        super(info, logger, accessors);
9
    }
10
​
11
    public async extendConfiguration(configuration: IConfigurationExtend) {
12
        configuration.slashCommands.provideSlashCommand(new PhoneCommand()); // [2]
13
    }
14
}
Copied!
Here we [1] import our new slashcommand class and then [2] register it in the app's configuration. Now it is available for us.
Deploy to the server
To deploy the app, run: 
1
rc-apps deploy --url <server_url>><server_port> -u <user> -p <pwd>
Copied!
Finally: calling the slashcommand
After deploying the app, you can type in any channel /phone text and the app will print "Texting!" to the console, or you can type /phone call and the app will print "Calling!" to the console.
If you don't see the result, enable info logs in your instance at Administration > Logs > Log Level by selecting "1 - Errors and Information".
Bonus: print the texts in the chat
Now, instead of console logging data to the instance's log, let's display the output in the chat.
In the PhoneCommand.ts, add the following private method:
1
    private async sendMessage(context: SlashCommandContext, modify: IModify, message: string): Promise<void> {
2
        const messageStructure = modify.getCreator().startMessage();
3
        const sender = context.getSender(); // [1]
4
        const room = context.getRoom(); // [2]
5
​
6
        messageStructure
7
        .setSender(sender)
8
        .setRoom(room)
9
        .setText(message); // [3]
10
​
11
        await modify.getCreator().finish(messageStructure); // [4]
12
    }
Copied!
This function [1] gets the user who called the command (in this case, yours), [2] selects the room in which the command was run, sets the received string as the message and then [4] sends the message in the room.
After that, change the console.logs from the switch block of the executor method and call the sendMessage method instead:
1
    case 'text':
2
        await this.sendMessage(context, modify, 'Texting!');
3
        break;
4
​
5
    case 'call':
6
        await this.sendMessage(context, modify, 'Calling!');
7
        break;
Copied!
Important to note: context and modify are the arguments passed to the executor method and they will be passed over to the sendMessage method.
Now, instead of just printing text to the console, we print it in the channel we called the command from.
Save the file and redeploy the app by running:
1
rc-apps deploy --url <server_url>><server_port> -u <user> -p <pwd> --update
Copied!
Now, when you run the slashcommand /phone text or /phone call, you'll receive the response in the chat, as your user.

Apps Engine - Previous

Sample App Snippets

Extending Messages

Last modified 1mo ago

Export as PDF

Copy link

Edit on GitHub

Contents

Moving parts

Create the slashcommand

Deploy to the server

Finally: calling the slashcommand

Bonus: print the texts in the chat