Button

Element type: Dictionary

This component allows you to display a button to trigger actions you specify.

info

While the Button component can be displayed in the FREE version, you will need an Octory PRO license to trigger actions with the OnClick key.

Keys

Name	Type	Possible values	Required
Type	String	Button	Required
Style	String	Simple, Info	Required
Text	String	-
Color	Dictionary (Color)	-
Alignment	String	Left, Center, Right
OnClick PRO	Array (Actions)	-
Trigger PRO	String	-
Popover PRO	Dictionary (Popover)	-
Margins	Dictionary (Margins)	-
Border	Dictionary (Border)	-
Condition PRO	Dictionary (Condition)	-

Detail

Type Required

Type: String
Explanation: The type of the component which has to be Button.

Style Required

Type: String
Possible values: Simple, Info
Explanation: Choose the way the button appears. Simple will display the text you provide. Info will display an info icon with no background.

Text

Type: String
Explanation: Text displayed on the button with the Simple style key.

Color

Type: Dictionary (Color)
Explanation: The text color of the button, or the color of the info icon.

Alignment

Type: String
Possible values: Left, Center, Right
Default: Left
Explanation: Align the button in its container.

OnClick PRO

Type: Array (Actions)
Explanation: Actions to trigger when the button is clicked.

Trigger PRO

Type: String
Availability: 2.1.0+
Explanation: Send a trigger event to execute an ActionSet that registered a custom trigger with this name. See Triggers.

Popover PRO

Type: Dictionary (Popover)
Explanation: A popover markdown text will be displayed when the user clicks the button.

Margins

Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.

Border

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO

Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.

Example

Button displaying “Send” with a SaveInputs action triggered when the end user clicks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Button</string>
							<key>Text</key>
							<string>Log</string>
							<key>OnClick</key>
							<dict>
								<key>Actions</key>
								<array>
									<dict>
										<key>Type</key>
										<string>SaveInputs</string>
									</dict>
								</array>
							</dict>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Button with an Info style (ℹ️) which displays a popover when clicked. The markdown popover has a header and a simple text line. It uses the Avenir font. The color of the info image is set as the Secondary color defined in the ColorStyles section.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							   <string>Button</string>
								<key>Style</key>
								<string>Info</string>
								<key>Color</key>
								<dict>
									<key>Style</key>
									<string>Secondary</string>
								</dict>
								<key>Alignment</key>
								<string>Right</string>
								<key>Popover</key>
								<dict>
									<key>Text</key>
									<string># Informative text
									This is informative text</string>
									<key>Edge</key>
									<string>Bottom</string>
									<key>Font</key>
									<dict>
										<key>Name</key>
										<string>Avenir</string>
									</dict>
								</dict>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>