Sending data from an input form to a third-party API

Rocket.Chat Apps
1

Hello everyone! There is a code below, how can I make it so that when clicking on new_button_1, the data from input is sent by the post method to the server https://api.example.com

import {
  IAppAccessors,
  IConfigurationExtend,
  ILogger,
  IRead,
  IModify,
  IHttp,
  IPersistence,
} from '@rocket.chat/apps-engine/definition/accessors';
import { App } from '@rocket.chat/apps-engine/definition/App';
import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata';
import { ISlashCommand, SlashCommandContext } from '@rocket.chat/apps-engine/definition/slashcommands';
import {
  IUIKitInteractionHandler,
  UIKitBlockInteractionContext,
  UIKitSurfaceType,
} from '@rocket.chat/apps-engine/definition/uikit';


export class CyApp extends App implements IUIKitInteractionHandler {
  constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
    super(info, logger, accessors);
  }

  protected async extendConfiguration(configuration: IConfigurationExtend): Promise<void> {
    await configuration.slashCommands.provideSlashCommand(new OpenModalCommand(this));
  }

  public async executeBlockActionHandler(
    context: UIKitBlockInteractionContext,
    read: IRead,
    http: IHttp,
    persistence: IPersistence,
    modify: IModify,
  ) {
    const data = context.getInteractionData();

    if (data.actionId === 'button_1') {
      const bb = modify.getCreator().getBlockBuilder();

      bb.addSectionBlock({
          blockId: 'new_section',
          text: bb.newPlainTextObject('New buttons after button_1 clicked'),
      });

      bb.addInputBlock({
          blockId: 'subject_input',
          element: bb.newPlainTextInputElement({
              actionId: 'subject_action',
              placeholder: bb.newPlainTextObject('Enter subject'),
          }),
          label: bb.newPlainTextObject('Subject'),
      });

      bb.addInputBlock({
          blockId: 'description_input',
          element: bb.newPlainTextInputElement({
              actionId: 'description_action',
              placeholder: bb.newPlainTextObject('Enter description'),
              multiline: true,
          }),
          label: bb.newPlainTextObject('Description'),
      });

      bb.addActionsBlock({
          blockId: 'new_buttons_row',
          elements: [
              bb.newButtonElement({
                  actionId: 'new_button_1',
                  text: bb.newPlainTextObject('New Button 1'),
                  value: 'new_btn1',
              }),
              bb.newButtonElement({
                  actionId: 'new_button_2',
                  text: bb.newPlainTextObject('New Button 2'),
                  value: 'new_btn2',
              }),
          ],
      });

      await modify.getUiController().updateSurfaceView(
          {
              id: 'modal-id',
              type: UIKitSurfaceType.MODAL,
              title: { type: 'plain_text', text: 'Updated SCORE' },
              blocks: bb.getBlocks(),
          },
          { triggerId: data.triggerId! },
          data.user,
      );

      return context.getInteractionResponder().successResponse();
    }

    // return context.getInteractionResponder().successResponse();
  }
}

class OpenModalCommand implements ISlashCommand {
  public command = 'score';
  public i18nParamsExample = 'slashcommand_params';
  public i18nDescription = 'slashcommand_description';
  public providesPreview = false;

  constructor(private readonly app: App) {}

  public async executor(context: SlashCommandContext, _read: IRead, modify: IModify): Promise<void> {
    const bb = modify.getCreator().getBlockBuilder();

    bb.addSectionBlock({
      blockId: 'section_1',
      text: bb.newPlainTextObject('Нажми на интересующий вопрос', true),
    });

    bb.addActionsBlock({
      blockId: 'buttons_row_1',
      elements: [
        bb.newButtonElement({ actionId: 'button_1', text: bb.newPlainTextObject('Text 1'), value: 'btn1' }),
        bb.newButtonElement({ actionId: 'button_2', text: bb.newPlainTextObject('Text 2'), value: 'btn2' }),
        bb.newButtonElement({ actionId: 'button_3', text: bb.newPlainTextObject('Text 3'), value: 'btn3' }),
      ],
    });

    bb.addActionsBlock({
      blockId: 'buttons_row_2',
      elements: [
        bb.newButtonElement({ actionId: 'button_4', text: bb.newPlainTextObject('Text 4'), value: 'btn4' }),
        bb.newButtonElement({ actionId: 'button_5', text: bb.newPlainTextObject('Text 5'), value: 'btn5' }),
        bb.newButtonElement({ actionId: 'button_6', text: bb.newPlainTextObject('Text 6'), value: 'btn6' }),
      ],
    });

    await modify.getUiController().openSurfaceView(
      {
        id: 'modal-id',
        type: UIKitSurfaceType.MODAL,
        title: { text: 'SCORE', type: 'plain_text' },
        blocks: bb.getBlocks(),
      },
      { triggerId: context.getTriggerId()! },
      context.getSender(),
    );
  }
}
2

Hi! I can help you with that. It’s actually quite straightforward - you just need to add one more condition to handle the new button click. Here’s what to do:

Step 1: Find the part where you handle button_1 clicks

Step 2: Add this simple code right after it:

// Add this new part for new_button_1
if (data.actionId === ‘new_button_1’) {
// Get the form data
const subject = data.view?.state?.[‘subject_input’]?.[‘subject_action’]?.value || ‘’;
const description = data.view?.state?.[‘description_input’]?.[‘description_action’]?.value || ‘’;

// Send to your API
const response = await http.post(‘https://api.example.com’, {
headers: { ‘Content-Type’: ‘application/json’ },
data: { subject: subject, description: description }
});

return context.getInteractionResponder().successResponse();
}

It will show you the results when someone clicks “New Button 1”, and then it grabs whatever they typed in the Subject and Description fields Sends that data to your server using POST method

Don’t forget to replace https://api.example.com with your actual server address.