UI Step(s) macros

The UI Steps macro shows content as numbered blocks.

Example

In this example, we created one UI Steps macro that contains three UI Step macros.

Add the UI Steps macro to a page

This solution consists of an outer macro which is a container for inner macros (the expendable items). First, add a UI Steps (with an -s) macro. Inside the UI Steps macro, place as many UI Step (without an -s) macros as you want.

There are two ways to add a macro to a page:

  • Type { plus the macro’s name. Select the macro from the dropdown list.

  • In the Confluence editor’s top menu, click + > Other macros and search for the macro.

Settings

To change the macro’s settings, click the macro > Edit.

Setting

Description

Available since Toolkit version

Setting

Description

Available since Toolkit version

Size

The size of the number in front of each step: small, medium, or large.

2.0

Events

You can programatically listen for events on this macro.

They're triggered with AJS.trigger() and can be subscribed to using AJS.bind.

AJS.bind('event/name', function(){....});

Event

Description

Available since Toolkit version

Event

Description

Available since Toolkit version

'refined/toolkit/steps/rendered'

Triggered after the outer steps-macro has rendered with its containing individual step-macros.

2.3.10