Create custom forms
Note
The Display custom form action is based on the Adaptive Cards technology. Refer to this page to find more information regarding Adaptive Cards.
Message boxes enable you to prompt users to enter various inputs, such as text, dates, and files, or display information and results on the screen.
Although most actions of this group can handle scenarios where a single input is required, some automations may require a combination of inputs or/and outputs. The best approach to address these scenarios is the Display custom form action.
To create a custom form, deploy the Display custom form action and select the Custom form designer button to open the form designer.
On the left side of the designer, there's a list with all the available input elements you can add to the form, such as text, date, and file inputs, and some non-interactive elements, such as texts and images.
To add an element to the custom form, double-click it or drag and drop it in the designer's workspace area. Use the preview pane on the bottom part of the form designer to see how the configured form will look during runtime.
After adding an element, you can handle all the available properties on the right side of the form designer. The available properties may differ depending on the nature of the selected element.
Note
Apart from the form elements, the form designer provides some properties to configure the appearance of the parent dialog of the custom form. To configure them, select an empty space on the workspace and see the available properties on the respective pane.
When a user populates a custom form, the provided data are stored into the CustomFormData custom object variable. To access the value of a specific input element stored in the custom object, use the following notation: %CustomFormData['ElementID']%.
Important
The ID of each element must be unique and can't be empty. Also, it must start with a letter and can contain Latin letters, numbers and spaces. You can't use variables in ID fields. If an invalid ID is provided, the last used valid ID will be automatically restored after closing and saving the form designer.
Note
You can find more information regarding custom objects and how to handle them in Advanced data types.
Apart from input and non-interactive elements, the form designer provides some actions to implement additional functionality in your forms.
Consider actions as buttons that allow you to run different functions based on which button was pressed. For example, use a Submit action as a save button to gather and store the provided user data for later use in your flow.
Note
Actions can be added only at the end of the form structure, after any other type of form element.
Like the other elements, each action has an ID that describes it uniquely. When an action is selected, its ID is stored into the ButtonPressed variable.
When a form contains multiple actions, use this variable and conditionals to check which one is pressed and implement different functionality for each scenario. To find more information on implementing this behavior, refer to Handle custom forms.
The following screenshot shows how the previously configured custom form looks when the flow runs.
Custom form elements
| Element name | Type | Specifications | Layout properties | Validaiton properties | Style properties | Background image |
|---|---|---|---|---|---|---|
| Custom form | Parent dialog | Title | Minimum height in pixels, Vertical content alignment | URL, Fill mode, Horizontal alignment, Vertical alignment | ||
| Text input | Input | ID, Label, Default value, Multiline, Style, Maximum length | Spacing, Separator, Height | Validation required, Error message, Pattern | ||
| Number input | Input | ID, Label, Default value, Minimum value, Maximum value | Spacing, Separator, Height | Validation required, Error message | ||
| Date input | Input | ID, Label, Default value, Minimum value, Maximum value | Spacing, Separator, Height | Validation required, Error message | ||
| Time input | Input | ID, Label, Default value, Minimum value, Maximum value | Spacing, Separator, Height | Validation required, Error message | ||
| Toggle input | Input | ID, Label, Title, Default value, Value when on, Value when off | Spacing, Separator, Height Wrap | Validation required, Error message | ||
| Choice set input | Input | ID, Label, Default value, Allow multiple selection, Style, Choices | Spacing, Separator, Height, Wrap | Validation required, Error message | ||
| File input | Input | ID, Label, Default value | Spacing, Separator, Height | Validation required, Error message | ||
| Text block | Element | ID, Text | Spacing, Separator, Horizontal alignment, Height, Wrap, Maximum lines, Maximum width | Font type, Size, Weight, Color, Subtle, Italic, Strikethrough | ||
| Image | Element | ID, URL, Alternative text | Spacing, Separator, Horizontal alignment, Height, Height in pixels, Width in pixels, Size | Style, Background color | ||
| Submit | Action | ID, Title, Ignore provided inputs | ||||
| Open URL | Action | ID, Title, URL |
Custom form element properties
| Property name | Optional | Accepts | Default | Description |
|---|---|---|---|---|
| Allow multiple selection | N/A | Boolean value | False | Allows multiple choices to be selected |
| Alternative text | Yes | Text value | Alternative text describing the image | |
| Background color | Yes | Text value | Applies a background to a transparent image. This property will respect the image style. Only hex values are acceptable in this property | |
| Choices | Yes | Title and Value | Describes choices for use in the choice set. Consists of a title (text to display) and a value (raw value for the choice) | |
| Color | N/A | Default, Dark, Light, Accent, Good, Warning, Attention | Default | Controls the color of text |
| Default value | Yes | Text value, Numeric value | The default value of the input element | |
| Error message | Yes | Text value | Error message to display when entered input is invalid | |
| Fill mode | N/A | Cover, Repeat horizontally, Repeat vertically, Repeat | Describes how the image should fill the area | |
| Font type | N/A | Default, Monospace | Default | Type of font to use for rendering |
| Height | N/A | Auto, Stretch, Pixels | Auto | Specifies the height of the element. The 'Pixels' option is available only for image elements |
| Height in pixels | No | Numeric value | 0 | Specifies the desired height of the image. The image will distort to fit that exact height. This overrides the 'Size' property. The default value of 0 determines that no particular height is specified |
| Horizontal alignment | N/A | Left, Center, Right | Text block: Left Image: Left |
Controls how this element is horizontally positioned. For custom forms, it describes how the background image should be aligned if it must be cropped or if using repeat fill mode |
| ID | No | Text value | Depends on the element | Unique identifier for the value. Used to identify collected input when the Submit action is performed. If an invalid ID is temporarily used and the form designer is closed, the last valid ID used will apply |
| Ignore provided inputs | N/A | Boolean value | False | If enabled, this action closes the form without storing the selected inputs, operating as a Cancel button |
| Italic | N/A | Boolean value | False | If enabled, italicizes the text |
| Label | Yes | Text value | Label for this input | |
| Maximum length | No | Numeric value | 0 | Specifies the maximum number of characters to collect. The default value of 0 determines that no maximum length is specified |
| Maximum lines | No | Numeric value | 0 | Specifies the maximum number of lines to display. The default value of 0 determines that no maximum lines are specified |
| Maximum value | Yes | Text value | Hint of maximum value. For date and time inputs, the value must be expressed in your machine's regional format | |
| Maximum width | No | Numeric value | 0 | Specifies the maximum width of the text block in pixels. The default value of 0 determines that no maximum width is specified |
| Minimum height in pixels | No | Numeric value | 0 | Specifies the minimum height of the form. The default value of 0 determines that no minimum height is specified |
| Minimum value | Yes | Text value | Hint of minimum value. For date and time inputs, the value must be expressed in your machine's regional format | |
| Multiline | N/A | Boolean value | False | If enabled, allows multiple lines of input |
| Pattern | Yes | Text value | Regular expression indicating the required format of this text input | |
| Separator | N/A | Boolean value | False | When enabled, draws a separating line at the top of the element |
| Size | N/A | Text block: Default, Small, Medium, Large, Extra large Image: Auto, Stretch, Small, Medium, Large |
Text block: Default Image: Auto |
Controls the size of the text or image |
| Spacing | N/A | Default, None, Small, Medium, Large, Extra large, Padding | Default | Controls the amount of spacing between this element and the preceding element |
| Strikethrough | N/A | Boolean value | False | If enabled, crosses out the text |
| Style | N/A | Text input: Text, Tel, URL, Email Choice set input: Compact, Expanded Image: Default, Person |
Text input: Text Choice set input: Compact Image: Default |
The style of the text hint, choice set or image |
| Subtle | N/A | Boolean value | False | If enabled, displays text slightly toned down to appear less prominent |
| Text | Yes | Text value | New text block | Text to display |
| Title | Yes | Text value | Toggle input: New toggle input Submit: OK |
Title for the custom form or toggle or label for the button that represents this action |
| URL | Yes | Text value | The URL of the image (for image element and custom form) or the URL to open (for Open URL action) | |
| Validation required | Yes | Boolean value | False | Determines whether this input is required or not |
| Value when off | Yes | Text value | False | The value when the toggle is off |
| Value when on | Yes | Text value | True | The value when the toggle is on |
| Vertical alignment | N/A | Top, Center, Botton | Describes how the image should be aligned if it must be cropped or if using repeat fill mode | |
| Vertical content alignment | N/A | Top, Center Bottom | Top | Defines how the content should be aligned verically within the container. Only relevant for fixed-height forms, or forms with a minimum height specified |
| Weight | N/A | Default, Lighter, Bolder | Default | Controls the weight of text |
| Width in pixels | No | Numeric value | 0 | The desired on-screen width of the image. This overrides the 'Size' property. The default value of 0 determines that no particular width is specified |
| Wrap | N/A | Boolean value | False | If enabled, allows text to wrap. Otherwise, text is clipped |
Known issues and limitations
Issue: The preview pane seems to work as expected when the URL property contains percentage characters, but an Invalid value validation error occurs.
Workaround: This issue happens because Power Automate attempts to resolve the percentage characters as variables or expressions. To resolve this case, store the URL in a variable earlier in the flow, escape the percentage characters, and then use that variable in the URL property. The preview won't show the image, but it will be shown during runtime.