To use an input field on an Adaptive Card Extension (ACE), you could only do it on a quick view of the card. Since SPFx v1.18, it is possible to use a text input component directly on an Adaptive Card Extension’s card views.
For instance, if your adaptive card main purpose is to get a simple input from users, you could really benefit from this new feature.
This blog post demonstrates how to implement this feature.
Please note that text input component is fully supported in the browser and in Teams desktop. Full support for Viva Connections mobile will be enabled later.
Content
- Requirements
- Use the new default class for card views
- From the card footer
- From the card body
- References
Requirements
New adaptive card
If you want to implement the feature on a new adaptive card extension, perform the following steps:
- Make sur you have the latest version of the SharePoint Framework installed :
npm install @microsoft/generator-sharepoint@latest --global - Run
yo @microsoft/sharepoint - Select
Generic Card Templatein the generator
Existing adaptive card
You can also implement this feature on an already existing ACE created with an on older SPFx version. To do so, you need to migrate your Adaptive Card Extension to SharePoint Framework v1.18.
Since SPFx v1.18 new classes and other architectural changes, migration to this version requires additional steps. You can find more details here: Migrate Adaptive Card Extensions to SharePoint Framework v1.18
Use the new default class for card views
SPFx v1.18 introduce BaseComponentsCardView as the new default class for Adaptive Card Extensions card views. You can use this new class to specify components that you want to display in a card view:
From the card footer
The first option that you have, is to use a text input component in the footer of your card view.
In the BaseComponentsCardView class, define the BasicCardView as follows:
As you can see, the componentName property of the footer is defined as textInput. You also have the following properties:
| Property | Description |
|---|---|
| id | Id of the component |
| placeholder | Placeholder of the text input component |
| button/icon | Define the icon of the button |
| button/action | Action to perform when the button is clicked |
From the card body
The second option is to use an text input component in the body of your card view.
In the BaseComponentsCardView class, define the TextInputCardView as follows:
Here the textInput component is defined in the body. You can set the following properties:
| Property | Description |
|---|---|
| id | Id of the component |
| placeholder | Placeholder of the text input component |
| iconBefore | Define the icon on the left-hand side of the input component. |
Note that in this case the button is still defined on the footer part of the Adaptive Card Extension.
