Forum Discussion

RichardRose's avatar
RichardRose
Copper Contributor
Nov 20, 2023

Adaptive Card Dynamic Table Row with Input

Is there a way off returning a unique id for data input within a data bound table row; e.g.   { "id": "dac-adaptive-card_9a5e618395add", "type": "AdaptiveCard", "$schema": "http://adaptivec...
microsoft teams
Prasad_Das-MSFT's avatar
Prasad_Das-MSFT
Icon for Microsoft rankMicrosoft
Nov 21, 2023

RichardRose - Adaptive Cards does not support dynamic IDs that could be bound to the data. The ID of an input field must be a constant string and cannot be bound to data.

 

 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

  • RichardRose's avatar
    RichardRose
    Copper Contributor
    Nov 21, 2023

    This is why I asked about return an array of the constant string id, rather than the last found.
    This seems an oversight in the table implementation.
    Table Cells allow you to add input fields bound to a id string and table rows can be repeated, the two are not compatible unless the return data from the inputs reflects the row bound data.
    Allowing Input fileds in table cells is misleading otherwise as they are incomplete

    • Prasad_Das-MSFT's avatar
      Prasad_Das-MSFT
      Icon for Microsoft rankMicrosoft
      Nov 22, 2023

      RichardRose - In the Adaptive Card, you can have multiple input fields, each with a unique ID. When the user interacts with the card and submits it, the data from these fields is sent back to your bot in a JSON object. The keys in this object correspond to the IDs of the input fields in the card.

      {
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Input.Text",
            "id": "input1",
            "placeholder": "Input 1"
        },
        {
            "type": "Input.Text",
            "id": "input2",
            "placeholder": "Input 2"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

      In this example, data['input1'] and data['input2'] will give you the values of the corresponding input fields in the Adaptive Card. If you want to return an array of these values, you can simply put them in an array:

      app.adaptiveCards.actionSubmit('Action.Submit', async (context, _state, data) => {
    const input1 = data['input1'];
    const input2 = data['input2'];
    const result = [input1, input2];
    await context.sendActivity(`Result array is: ${result}`);
});

      This will send a message with the array of input field values.

      • RichardRose's avatar
        RichardRose
        Copper Contributor
        Nov 22, 2023

        you are missing the point, the rows of the table are generated by binding them to an array of data,
        repeating the row template that is defined including an input for the phoneNumber.
        These are not hardcode rows with an unique id set for each input.
        They are data driven so could be 2 rows or 50, it doesn't matter.
        This is the issue, there is no way of collecting the input for the x amount of rows unless either,
        1. each rows assigns a dynamic ID to the phoneNumber input - which is not going to happen;
        2. the data on submit returns an array of phoneNumer ID's each indexed to the row that they were entered on - a possibility for future enhancement

Resources