Build structured Adaptive Cards

• Menus
• Forms
• Clarification questions
• Order or case summaries
• Choice lists
• Confirmations
• Final results

Card Render

The Flow step that displays an Adaptive Card.

Card intent

A natural-language description of the card Designer should generate.

Content block

A visual element such as text, a heading, an image or an input.

Input

A field through which the user supplies a value.

Action

A button that submits data, opens a URL or routes to another Flow step.

Answer name

The stable identifier used for a captured input value.

Live preview

A rendered preview of the current card configuration.

Terminal card

A final card that ends the Flow after it is rendered.

Validation mode

How card-schema issues are treated at render time.

One card may combine more than one purpose. For example, an order-summary card may display information and include buttons for the next approved actions.

• Confirm that the correct workspace and Flow project are active.
• Define the card’s single primary purpose.
• Identify the information the user should see.
• Identify the values the user must provide.
• Define stable names for every captured answer.
• Decide where each button should route.
• Decide whether the card is terminal.
• Prepare fictional test data.
• Define the Flow validation that should occur after submission.
• Keep card text short enough to read comfortably.

Enlarge

Open the Add Step dialog in the Flow Editor and select Card Render from the built-in steps. The step becomes part of the explicit Flow canvas.

1. 1Open the intended Flow project.
2. 2Select the point where the user interface is required.
3. 3Open Add Step.
4. 4Select Card Render.
5. 5Give the step a meaningful business name.
6. 6Connect the incoming Flow path.
7. 7Configure or generate the card.
8. 8Connect its button actions to the correct next steps.
9. 9Run the affected route in Demo.

For step connections, branches and canvas controls, see the Flows guide.

Enlarge

Step name

The name used for the Card Render step on the Flow canvas.

Instruction

A natural-language description of the card to generate: its purpose, the information to display, the inputs required, the labels to use, the buttons required and the intended user outcome.

Data

Optional name-and-value pairs that provide design-time context to the card generator.

Host

Optional host context for card generation where supported.

Ask the customer for the missing information needed to route their
support request. Include a clear heading, a short explanation, one
multiline response field and a Submit button.

Show a Track Your Order card with the current order number, a
Track this order button and a Return to menu button.

1. 1Select the Card Render step.
2. 2Enter a meaningful step name.
3. 3Describe the card in the Instruction field.
4. 4Add design-time Data entries only when they help generation.
5. 5Add Host context only when it is required and supported.
6. 6Generate or refresh the card.
7. 7Open Preview.
8. 8Refine the generated card in the visual editor.

• Data supplied to the card generator is a design-time hint.
• A direct node reference copied into generated card content may render empty.
• A {{vars.<name>}} reference can resolve when the card is rendered.
• The relevant Flow variable must already have been captured or set.

Previous Flow step
        ↓
Value captured into a Flow variable
        ↓
Card contains {{vars.variable_name}}
        ↓
Card Render resolves the variable

{{vars.order_number}}

The specific variable must exist before the Card Render step runs.

For Flow variables and process data, see the Flows guide.

Enlarge

Preview

Shows the current card before running the complete Flow.

Edit card

Opens the full Adaptive Card Designer.

Card count

The interface summarises the number of content blocks and buttons. Treat the displayed count as an example only.

Validation: Off

Do not apply the card-schema validation behaviour at render time.

Validation: Warn

Report card-schema issues as warnings.

Validation: Error

Treat card-schema issues as errors.

Terminal

When enabled, the Flow ends after the card is rendered: there is no further routing and button navigation does not continue.

Use Terminal for a final result or confirmation card. Leave Terminal disabled when the user must select an action or supply information before the Flow continues.

1. 1Open the Preview tab.
2. 2Review content hierarchy and labels.
3. 3Confirm that every input has a clear purpose.
4. 4Confirm that all required actions are visible.
5. 5Select an appropriate validation mode.
6. 6Enable Terminal only for a final card.
7. 7Select Edit card when visual or structural changes are required.

Enlarge

1. 1Open the Card Designer.
2. 2Stay in Build mode.
3. 3Add the required content elements.
4. 4Arrange them in a logical reading order.
5. 5Add the required inputs.
6. 6Add one clear primary action.
7. 7Add secondary actions only when they are useful.
8. 8Review the Live preview after each significant change.
9. 9Confirm that the card remains marked Valid.
10. 10Select Save card.

Clear heading
Short explanation
Essential information or input
Primary button
Optional secondary button

Enlarge

Answer name

The stable identifier used to capture the submitted answer, for example clarification_response.

Label

The user-facing description of the information required. It should remain understandable when read without the surrounding paragraph.

Default value

An optional prefilled value. Use defaults only when the value is known, safe to show, reviewable and not misleading.

Required

Controls whether the interface expects the field to be completed before submission.

Use lowercase stable names, use underscores where helpful, describe the business value and do not reuse the same answer name for unrelated inputs.

1. 1Add a Text input.
2. 2Expand the input properties.
3. 3Enter a stable Answer name.
4. 4Add a concise Label.
5. 5Add a Default value only where justified.
6. 6Enable Required when the process cannot continue without the value.
7. 7Review the Live preview.
8. 8Save the card.
9. 9Validate the captured answer in the next Flow step.

Enlarge

Button title

The text displayed on the button. Use action-oriented labels such as Submit, Continue, Track this order, Confirm cancellation or Return to menu.

Routes to

The Flow destination associated with the button. The interface explains that this is set automatically based on where the button goes.

Avoid unclear labels such as OK, Yes or Next unless the surrounding context makes the meaning unambiguous. The supplied example shows End of flow (no target), which is appropriate only when the action should complete the Flow. A card intended to continue must have its action connected to the relevant next step. Routes to is not an ordinary free-text field.

Submit button
      ↓
Connected card action
      ↓
Next Flow step

1. 1Add or select a Submit button.
2. 2Enter a clear Button title.
3. 3Return to the Flow canvas where necessary.
4. 4Connect the button outcome to the intended next step.
5. 5Reopen the card and confirm the displayed route.
6. 6Test the action in Run Demo.
7. 7Confirm that captured input is available to the receiving step.
8. 8Confirm that no action produces an unintended dead end.

Enlarge

• Build is the visual editing mode.
• Code exposes the underlying Adaptive Card JSON.
• Format reformats the current JSON.
• Copy copies the JSON.
• Live preview remains available.
• Valid indicates whether the card passes the editor’s schema check.

1. 1Save the visual structure before making advanced changes.
2. 2Select Code.
3. 3Review the generated JSON.
4. 4Make only the intended change.
5. 5Use Format to improve readability.
6. 6Review the Live preview.
7. 7Confirm that the card remains Valid.
8. 8Return to Build mode and confirm that the card is still editable.
9. 9Save the card.
10. 10Run the complete Flow again.

The schema version visible in one example card is not necessarily the only version supported by Greentic.

Enlarge

Clean up

Improve or simplify the current card structure or content.

Rewrite

Rewrite selected card wording.

Analyze

Review the card and identify potential improvements.

Accessibility check

Review the card for potential accessibility concerns.

1. 1Build the first card.
2. 2Review it manually.
3. 3Open AI assist.
4. 4Choose the relevant action.
5. 5Review the proposed change.
6. 6Confirm that important labels and answer names remain correct.
7. 7Confirm that routing has not changed unexpectedly.
8. 8Review the Live preview.
9. 9Save the card.
10. 10Run the card in the complete Flow.

Enlarge

• The customer sees a structured service menu.
• The user selects the Track order action.
• The Flow follows the connected route.
• A Track Your Order card is displayed.
• The order-number input contains a fictional prefilled value.
• The card provides Track this order and Return to menu actions.
• Run Demo waits for the expected button action.

1. 1Save the card.
2. 2Return to the Flow Editor.
3. 3Open Run Demo.
4. 4Navigate to the card through the same route a user will follow.
5. 5Confirm that the correct card appears.
6. 6Confirm all runtime variables resolve.
7. 7Confirm prefilled values are correct.
8. 8Enter or change a value.
9. 9Select the primary button.
10. 10Confirm that the intended next step opens.
11. 11Restart the interaction.
12. 12Test every secondary action.
13. 13Test an empty required field.
14. 14Test invalid input.
15. 15Test the card at the end of the full business journey.

For execution inspection and diagnosis, see Testing and troubleshooting.

• Run the Accessibility check.
• Review its suggestions.
• Complete a manual check.
• Test with realistic text lengths.

Define purpose
      ↓
Define captured values
      ↓
Define button routes
      ↓
Write card intent
      ↓
Generate first card
      ↓
Refine in Build mode
      ↓
Review Preview
      ↓
Check validation and accessibility
      ↓
Test in Run Demo
      ↓
Validate submitted values in the Flow

1. 1Define the card’s single primary purpose.
2. 2Define every answer name.
3. 3Define the next Flow route for every action.
4. 4Write the natural-language card intent.
5. 5Generate the first card.
6. 6Review the content and actions.
7. 7Refine inputs and labels in Build mode.
8. 8Use Code only where required.
9. 9Run AI analysis and accessibility checks.
10. 10Save the card.
11. 11Test it through the previous Flow step.
12. 12Test every action.
13. 13Validate all submitted values.
14. 14Save a meaningful Flow version.

• The card has one clear primary purpose.
• The card appears at the correct point in the Flow.
• The heading explains the task.
• Supporting text is concise.
• Every input has a stable Answer name.
• Every input has a visible Label.
• Required is enabled only where necessary.
• Default values are safe and accurate.
• Every button has a clear action label.
• Every non-terminal button has a valid next route.
• End of flow is used only where intended.
• Terminal is enabled only for a final card.
• Runtime variables are set before the card renders.
• Unsupported node references are not used in card content.
• Card data contains no credentials or secrets.
• The card is schema-valid.
• Validation behaviour is intentional.
• The card has been manually reviewed for accessibility.
• The card has been tested in Run Demo.
• All submitted values are validated by the Flow.
• All primary and secondary actions have been tested.
• The accepted Flow state has been saved as a version.