CODEWITHSUNDEEP
microsoft-teams
cbrandsdev12
cbrandsdev12

Reputation: 17

Sending POST request in iframe of task Microsoft Teams

Currently, I have Microsoft Teams bot which has an extension button that opens up an HTML page in an iframe. On the HTML page, there's a form with a submit button that submits the info the user entered. The problem I'm running into is that when the user hits the submit button it doesn't make the HTTP POST request. I've tested the iframe outside of teams and it works fine. I was wondering if this is a problem with how I have the iframe or actual HTML page setup or something else. Thanks!

Upvotes: 0

Views: 350

Answers (2)

Bill Bliss - MSFT
Bill Bliss - MSFT

Reputation: 3581

Are you using the microsoftTeams.tasks.submitTask() function, or just trying to do the POST directly? I suspect you are doing the latter. Teams has to be in charge of the actual submit because otherwise it has no idea that the POST ever happened since it happens in an <iframe>.

If that's your problem, here's an example of how to do it. This is an excerpt of the JS/Pug code from the sample running on Azure; I just tested it and it works fine:

  [...]

  function validateForm() {
    let customerInfo = {
      name: document.forms["customerForm"]["name"].value,
      email: document.forms["customerForm"]["email"].value,
      favoriteBook: document.forms["customerForm"]["favoriteBook"].value
    }
    guidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
    let password = document.getElementById("pw").value;
    if (guidRegex.test(password)) {
      microsoftTeams.tasks.submitTask(customerInfo, password); // hidden feature to test bogus completion appId
    }
    else {
      microsoftTeams.tasks.submitTask(customerInfo, "#{appId}"); //- appId is passed at render time in tabs.ts
    }
    return true;
  }

[...]

div(class='surface')
  div(class='panel')
    div(class='font-semibold font-title') Enter new customer information:
    form(method='POST' id="customerForm" action='/register' onSubmit="return validateForm()")
      div
        div.form-group(class="form-field-input" style="margin-bottom: 10px; margin-top: 10px")
        label(for='name') Name: 
        input#name.form-control.input-field(type='text', placeholder='first and last' name='name' tabindex=1 autofocus)
        div.form-group(class="form-field-input" style="margin-bottom: 10px;")
        label(for='email') Email: 
        input#email.form-control.input-field(type='email', placeholder='[email protected]' name='email' tabindex=2)
        div.form-group(class="form-field-input" style="margin-bottom: 10px;")
        label(for='favoriteBook') Favorite book: 
        input#favoriteBook.form-control.input-field(type='text', placeholder='title of book' name='favoriteBook' tabindex=3)
        div.form-group(class="form-field-input" style="margin-bottom: 10px;")
        label(for='pw') Password: 
        input#pw.form-control.input-field(type='password' name='password' tabindex=4)
        div.form-group(class="form-field-input" style="margin-bottom: 10px;")
        label(for='pw2') Confirm password: 
        input#pw2.form-control.input-field(type='password' name='confirmPassword' style="margin-bottom: 10px;" tabindex=4)
        button.btn.button-primary(type='submit' tabindex=5) Sign up

Upvotes: 1

Hilton Giesenow
Hilton Giesenow

Reputation: 10844

This most likely relates to the list of Valid Domains in your app manifest file. Are you using App Studio? If so, on the "Domains and Permissions" section you need to have the POST endpoint listed as a valid domain (just the domain part, not the full url).

If you're not using App Studio, or just want more reference, see here

Upvotes: 0

Related Questions