Teams App Developer

import { App } from '@microsoft/teams.apps';
import { ConsoleLogger } from '@microsoft/teams.common';
import { DevtoolsPlugin } from '@microsoft/teams.dev';

const app = new App({
  logger: new ConsoleLogger('dialog-bot'),
  plugins: [new DevtoolsPlugin()],
});

// Open a dialog when task/fetch is invoked
app.on('dialog.open', async () => {
  return {
    status: 200,
    body: {
      task: {
        type: 'continue',
        value: {
          title: 'Submit Feedback',
          width: 'medium',
          height: 'medium',
          card: {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: {
              type: 'AdaptiveCard',
              version: '1.5',
              body: [
                {
                  type: 'TextBlock',
                  text: 'Submit your feedback',
                  weight: 'Bolder',
                  size: 'Large',
                },
                {
                  type: 'Input.Text',
                  id: 'userName',
                  label: 'Your name',
                  isRequired: true,
                  errorMessage: 'Name is required',
                },
                {
                  type: 'Input.ChoiceSet',
                  id: 'rating',
                  label: 'Rating',
                  style: 'compact',
                  value: '3',
                  choices: [
                    { title: '1 - Poor', value: '1' },
                    { title: '2 - Fair', value: '2' },
                    { title: '3 - Good', value: '3' },
                    { title: '4 - Great', value: '4' },
                    { title: '5 - Excellent', value: '5' },
                  ],
                },
                {
                  type: 'Input.Text',
                  id: 'comments',
                  label: 'Comments',
                  isMultiline: true,
                  placeholder: 'Tell us more...',
                },
              ],
              actions: [
                {
                  type: 'Action.Submit',
                  title: 'Submit',
                },
              ],
            },
          },
        },
      },
    },
  };
});

// Handle the dialog form submission
app.on('dialog.submit', async ({ activity }) => {
  const formData = activity.value.data;
  const { userName, rating, comments } = formData;

  // Validate and process
  console.log(`Feedback from ${userName}: ${rating}/5 - ${comments}`);

  // Close dialog with a message
  return {
    status: 200,
    body: {
      task: {
        type: 'message',
        value: `Thanks ${userName}! Your feedback (${rating}/5) has been recorded.`,
      },
    },
  };
});

app.start(3978);

import { App } from '@microsoft/teams.apps';

const app = new App();

// Step 1: Open initial dialog
app.on('dialog.open', async () => {
  return {
    status: 200,
    body: {
      task: {
        type: 'continue',
        value: {
          title: 'Step 1: Basic Info',
          width: 'medium',
          height: 'small',
          card: {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: {
              type: 'AdaptiveCard',
              version: '1.5',
              body: [
                { type: 'TextBlock', text: 'Step 1 of 2', weight: 'Bolder' },
                {
                  type: 'Input.Text',
                  id: 'projectName',
                  label: 'Project name',
                  isRequired: true,
                },
                {
                  type: 'Input.ChoiceSet',
                  id: 'projectType',
                  label: 'Type',
                  choices: [
                    { title: 'Feature', value: 'feature' },
                    { title: 'Bug Fix', value: 'bugfix' },
                    { title: 'Research', value: 'research' },
                  ],
                },
              ],
              actions: [
                {
                  type: 'Action.Submit',
                  title: 'Next',
                  data: { step: 'step1' },
                },
              ],
            },
          },
        },
      },
    },
  };
});

// Handle submissions -- route by step
app.on('dialog.submit', async ({ activity, send }) => {
  const data = activity.value.data;

  if (data.step === 'step1') {
    // Chain to step 2: return a continue response with a new card
    return {
      status: 200,
      body: {
        task: {
          type: 'continue',
          value: {
            title: 'Step 2: Details',
            width: 'medium',
            height: 'medium',
            card: {
              contentType: 'application/vnd.microsoft.card.adaptive',
              content: {
                type: 'AdaptiveCard',
                version: '1.5',
                body: [
                  { type: 'TextBlock', text: `Project: ${data.projectName}`, weight: 'Bolder' },
                  { type: 'TextBlock', text: 'Step 2 of 2' },
                  {
                    type: 'Input.Text',
                    id: 'description',
                    label: 'Description',
                    isMultiline: true,
                    isRequired: true,
                  },
                  {
                    type: 'Input.Date',
                    id: 'dueDate',
                    label: 'Due date',
                  },
                ],
                actions: [
                  {
                    type: 'Action.Submit',
                    title: 'Create',
                    data: {
                      step: 'step2',
                      projectName: data.projectName,
                      projectType: data.projectType,
                    },
                  },
                ],
              },
            },
          },
        },
      },
    };
  }

  if (data.step === 'step2') {
    // Final step: process all data and close
    await send(`Project "${data.projectName}" (${data.projectType}) created! Due: ${data.dueDate || 'No date set'}`);

    return {
      status: 200,
      body: {
        task: {
          type: 'message',
          value: 'Project created successfully!',
        },
      },
    };
  }

  return { status: 200, body: { task: { type: 'message', value: 'Unknown step.' } } };
});

app.start(3978);

import { App } from '@microsoft/teams.apps';

const app = new App();

// Send a card with a button that triggers dialog.open
app.on('message', async ({ send }) => {
  await send({
    type: 'message',
    attachments: [{
      contentType: 'application/vnd.microsoft.card.adaptive',
      content: {
        type: 'AdaptiveCard',
        version: '1.5',
        body: [
          {
            type: 'TextBlock',
            text: 'Click the button below to open a form dialog.',
            wrap: true,
          },
        ],
        actions: [
          {
            type: 'Action.Submit',
            title: 'Open Form',
            data: {
              msteams: { type: 'task/fetch' },
            },
          },
        ],
      },
    }],
  });
});

// The dialog.open handler fires when the button is clicked
app.on('dialog.open', async () => {
  return {
    status: 200,
    body: {
      task: {
        type: 'continue',
        value: {
          title: 'My Form',
          card: {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: {
              type: 'AdaptiveCard',
              version: '1.5',
              body: [
                { type: 'Input.Text', id: 'name', label: 'Enter your name' },
              ],
              actions: [
                { type: 'Action.Submit', title: 'Submit' },
              ],
            },
          },
        },
      },
    },
  };
});

app.on('dialog.submit', async ({ activity }) => {
  return {
    status: 200,
    body: {
      task: { type: 'message', value: `Hello, ${activity.value.data.name}!` },
    },
  };
});

app.start(3978);