Outcomes component

Display outcomes as a group of buttons on the page.

The outcomes component is useful for more complex positioning and styling of outcomes on a page.

Outcomes must be linked to an outcomes component, otherwise they will not be displayed or included in the component.

To link an outcome to an outcomes component:

1. Add an outcomes component to a page layout.
2. On the Flow canvas, double-click on the outcome that you wish to include in the outcomes component.
3. In the outcome configuration panel, select the outcomes component on the page layout from the Place this Outcome with a Component on the Page drop-down menu.
4. Save the outcome.
5. Repeat this process for any other outcomes that you wish to include in the component.
6. When the Flow is run/published, the outcomes you have included in the component are displayed on the page in a group, and can then be further styled using attributes and custom CSS styling as required.

You can use an outcomes component to completely modify the appearance and positioning of outcome buttons on a page, using a combination of attributes and custom CSS styling. Refer to CSS reference.

For example:

General settings

The following options and settings can be configured.

Setting	Description
Name	Enter a name for the component.
Label	Enter a label for the component. The label is displayed above the outcomes by default. Do not enter a label if you do not require this text to be shown.
Help information about this component	Display help text directly below the component, for example to provide further information on how to use the component.

Styles

Apply additional CSS styling to the component.

1. Enter space-delimited CSS classes/selectors into the CSS Classes field.

When you run the Flow, these classes are appended to the main component class.

Default player runtime attributes

You can apply the following attributes when running flows with the default player.

Key	Value	Description
size Page builder: Button size	boolean	Specify the size of the outcome button; the values you can use map to the standard button size CSS class suffix. For example: • lg: Style the outcome button as a 'large' button. • sm: Style the outcome button as a 'small' button. • xs: Style the outcome button as an 'extra-small' button.
uri	string	Launch a URI from an outcome button, such as to an external web page. Instead of the connected step being displayed, the link specified on the outcome is launched in a new browser window/tab. For example, connect to a presentation step and add the uri attribute to the outcome with a value of "http://www.boomi.com" to launch the web site in a new browser tab when the outcome button is clicked. The connected presentation step does not need to contain anything other than dummy content as it simply a placeholder for the outcome to be connected to.