inlineAction on text boxes

Release	Renderer status	Tasks status
1.2	✔️ .NET (#1359) ✔️ Android (#1285) ✔️ iOS (#1284) ✔️ TS (#1360) ✔️ UWP (#1283)	✔️ Shared (#1282) ✔️ Designer (#2674)

Solves requests

• Ability to display image button to right of input for quick-reply toast (#1992)

Example Comps

Notice how Android notifications choose to display the button as part of the text input. The payload should allow this flexibility for the host to display the button however makes sense.

Spec

Schema Changes

On only Input.Text (since that seems to be the only place a quick action would be desired on an input), the following property would be added…

Property	Type	Required	Description
type	Input.Text	true
inlineAction	Action	false	The inline action for the input. Typically displayed to the right of the input. Strongly recommended you provide an icon on the action (which will be displayed instead of the title of the action).

Schema example

{
  "type": "Input.Text",
  "id": "comment",
  "placeholder": "enter comment",
  "inlineAction": {
    "type": "Action.Submit",
    "iconUrl": "ms-appx:///Assets/reply.png",
    "title": "Reply"
  }
}

Host Config

Renderer Requirements

• A renderer must display the inlineAction however the native platform typically displays actions related to a text input. For example, on UWP, should be displayed like the following

Android might display like the following…

• If there is an icon on the action, simply use the icon (don’t display the text). The title text should be used as a tooltip on the action.
  • The icon should use the same fitting behavior as normal icon actions (if the icon is 100px tall and only 50px wide, it should behave the same here as it does when it’s a normal icon action)
• If there’s no icon, display the title instead.

• Inline expansion of Action.ShowCard is NOT supported (since we don’t support inline showcards within the body right now). If a show card is present and the host is configured for inline show cards the action will be dropped and a warning will be returned.

• A renderer must invoke the inlineAction when the user performs the native platform action for submitting a text field…

  • For example…
    • On UWP…
      • For a single line text input, enter will trigger the action (shift-enter and ctrl-enter will be ignored).
      • For a multiline text input, enter will add a newline.
    • On iOS
      • If isMultiline is NOT enabled
        • The virtual keyboard should display the “submit” button and pressing that should submit the button.
      • If isMultiline IS enabled
        • The virtual keyboard should be left as-is (leaving the normal enter button that adds a newline, since otherwise there’s no way to add newlines).

• Renderers must assign a style of InlineAction (or whatever the renderer standard for style names is) to the button so that hosts can natively style the button as they wish

Downlevel Impact

High

This will not be able to render properly, and the card will be unfunctional.

Host impact: Medium. Hosts need to update their native styling to include this new InlineAction button.

Related features

• Associating a text box enter press with an action: #333

Auto-generated task status

• Shared
• Designer
• .NET
• Android
• iOS
• TS
• UWP

[matthidinger]

What if we add something semantic like quickReplyAction on Input.Text (since that seems to be the only real-world scenario where a quick-reply would be used).

We would also need to get in #389 Action/Image support

 {
      "type": "Input.Text",
      "id": "comment",
      "placeholder": "enter comment",
      "maxLength": 500,
      "isMultiline": false,
      "speak": "What comments do you have?",
      "value": "This is a pre-filled value",
      "defaultAction": {
           "showButton": false,
           "action": { 
               "type": "Action.Submit" 
           }
      }
}

[khouzam]

I think that we’ll need an iconSize property as we have in the Icons in Actions fir the renderers that cannot easily calculate the height of the text box (HTML and Typescript).