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
Width	Number	-
BackgroundColor	String (Color)	-
BackgroundImage	String	-
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.

Width

Type: Number
Availability: 3.1.0+
Explanation: A fixed width for the button, in points, instead of a width fitting its text. A title too long for that width is truncated at the end. Must be greater than 0.

BackgroundColor

Type: String (Color)
Availability: 3.1.0+
Explanation: The fill of the button's surface. Can be the name of a color defined in ColorStyles, or an inline color.

BackgroundImage

Type: String
Availability: 3.1.0+
Explanation: The local path or URL of an image drawn on the button's surface. The image keeps its ratio and fills the button, cropping what does not fit. It is drawn over BackgroundColor when both are set.

info

Width, BackgroundColor and BackgroundImage only apply to a button with Style set to Simple. An Info button ignores them, although the values are still checked when the configuration is loaded.

Setting any one of the three replaces the standard system button chrome with a custom drawn rounded surface, keeping a system like corner radius and a pressed state. A button that sets none of them looks exactly as it did before.

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>