Table of Contents

Buttons

Overview

Button is the name used to describe an element that stores no data, but performs an action when clicked.

To add a Button element, go to Base Types > Button and add it to the canvas.

Button elements may be included as part of many custom types, such as Notifications and File / Link Banks.

Type of Data Stored

A Button stores no data and has no state (unchecked / checked, populated, etc).

A common way of providing a button that will record information would be to use Javascript to update another element that will act as a proxy for the button. Elements such as Dropdowns and Checkboxes make good proxy elements.

Attributes

Attribute Description
content

This attribute applies the visible text that will appear in the Button element. This text can be different from the href URL.

For more information on styling a content tab, please read the lesson about the Text / Label Base Type.
onclick This attribute will execute the Javscript code included in the attribute value when the button is clicked.
style

Styling an Button element can be done using CSS in the style attribute.

Common styles used on Buttons include:

  1. border / border-(top/bottom/right/left) : A series of 3 properties that define a border that will appear around a container. A very common use of this style is border: 1px solid black.
  2. color : A hex code or colour name used to define the color of text in the Button element.
  3. background-color : A hex code or colour name used to define the background color used to define the colour that will fill the area of the container, which appears behind any elements in the container.
  4. padding / padding-(top/bottom/right/left) : A numeric value that represents the amount of spacing applied between the text inside the button and the outer border of the button. The number should be followed by the letters “px”, which denotes that the unit of pixels.

Import Data

Buttons can not be used for Import Data, as they do not store data.

For more information about setting up elements for Import Data, please read the lesson called “SIS and GDI Import” in Level 2.