Home | Printable Version
4: Design Palette
Table detailing a wide variety of controls that can be used to create web front-ends. You will also find additional tables below that provide details on more text controls, grids, layout containers and features that enable you to create and package your own controls for reuse.
Control Description and Notes
Text Box This is the editable single line text box.
Display Only Output This is a display-only text box.
Font Icon Selectable font icon control. You can select icons from the Font Awesome range using the right hand panel. You can configure a target to navigate to on click of the icon using the Common Options section, or use the Events tab for more advanced event configuration. The size and color of the icon can be configured using the font styling options. Each standard theme provides a number of default classes that can be used to set the icon size: small-icon, medium-icon, xlarge-icon, jumbo-icon.
Button A standard button that can trigger events.
Hyperlink Standard HTML Hyperlink. You can configure the link target using the Common Options section of the General properties panel on the right hand side. As with other controls, more complex events can be configured using the Events tab. To style a hyperlink control so that it matches the look of standard Button controls, simply replace the hyperlink CSS Class in the Control Styling section with button.
Radio Allows users to select one option from a series of choices. These options can be a fixed set of values (static) defined in the Properties Data Constraints section, or dynamically defined based on underlying data. If the option is dynamic, then a data binding needs to be set-up to identify where the values will come from within the underlying data. Please refer to the Bindings section for more details.
Select Box Allows users to select a single value from a drop-down list of values. The list of values can be static or dynamic, similar to that described against the Radio control above.
Multi-Select Box Similar to the Select Box, but allows users to select more than one value from the drop-down list.
Filtering Select Box Select box that filters a list of values by matching characters as they are typed.
Autocomplete List Allows multiple values to be selected from a filtered list of values. The selected items are displayed as tagged entries, similar to a list of recipients in an e-mail program. The items can be filtered and selected by typing or clicking within the control. Selected items can be removed by clicking the x within each selected value.
List Builder Provides two lists with the ability to move items between them. The left hand side contains the list of all selectable items. The right hand side contains the selected items and can be ordered as required. Field fullList should be bound to list all selectable items and hidden field currentOptions contains the selected items.
Checkbox Allows users to select a single value using a checkbox. It is possible to state the default value, checked value and unchecked value.
Toggle This is similar to the Checkbox, but provides a sliding switch that can be used to indicate whether the value is checked or not.
Multi-Checkbox Allows users to select more than one checkbox.
Date Time Captures input in a date/time format. By default, this provides a calendar picker. Various parameters can be altered in the Data Constraints and Value Conversions sections. For example, the display options can be changed for the calendar to be more appropriate for birth dates, e.g. Calendar Type - Year and Month selection drop-downs.
Currency A control designed for input and formatting of currency values. When users click on the field it displays the numeric part of the currency. When they click off the field it will format the data based on the locale of the Browser and apply a currency code if defined in the Custom Attributes section.
Number A text box configured for number values. When users click on the field it displays the number value. When they click off the field it will format based on the locale of the Browser.
Number Spinner A text box for number values with up and down arrows to change the values. Note: This will not render completely on the Page View because it relies on JavaScript.
Number Slider The number slider provides a graphical scale for the selection of a number within a range. Use the Validation Constraints to define the range of available numbers, and a 'step' Custom Attribute can be added if required to indicate the incremental steps. In addition, you can show a string after the current value (eg to indicate the units), by adding a 'data-wm-display-suffix' Custom Attribute.
Text Area Allows a user to enter several lines of text in a multi-line text box.
Rich Text Editor This allows users to enter multiple lines of text, and provides WYSIWYG editing capabilities for setting fonts, colours etc.
Paragraph Displays an output only rich text field, allowing for formatting of a series of sentences or bullet points.
Password Allows entry of masked passwords. Entered values are captured as dots.
Image Embeds an image file (bmp, jpg, gif, etc.), frequently used for logos or graphics. Images can be selected from the local repository, or uploaded from another location. The image displayed can also be dynamically defined via bindings. Please refer to the WebMaker Forum entry How to dynamically change an image/icon displayed for a value e.g. a Status for more detailed configuration options.
Color Filter This is a simple Colour Filter that lets you select a colour and its transparency. You can use it to create some cool effects for great-looking translucent and deep backgrounds, or simply to mask backgrounds for superimposing foreground text.
Menu Responsive menu, including the classic hamburger feature for mobile devices. Includes data-binding and multi-level features. Please see the Menu Control section for more details.
Navbar Creates an animated top-level strip, incorporating a logo, menus, search bar, etc. You can tailor it to your specific requirements.
File Upload Can be used to upload files to Servers. See the File Upload Control section for more details.
HTML Hidden Field Commonly used for holding and exchanging non-display values with Servers. These fields are only shown on the Page View when Design Mode is switched on.
Data Bound Structure A hidden control that is used to pass complete data structures from the server to the page for later script processing. See the Javascript APIs section for details on how to access the data from your script.
Custom HTML Allows users to enter XML-compliant HTML.
Text Controls
Table of Text Controls, that can be used to create Titles, Headings, Body Text, etc.
Control Description and Notes
Various The Text Controls section of the palette contains a range of text controls that are focused on the creation of static and responsive client-side text elements such as Titles, Headings, Body Text, Rich Text, etc.
Table of Layout Containers that can be used to group and layout your page structures rapidly. This group also contains more complex controls that act as display containers for complex data.
Control Description and Notes
Layout Grids and Layout Groups Layout Grids and Layout Groups are the two main containers in WebMaker that are primarily used to design the layout and structure of your web pages. At runtime, these containers are generally invisible. A Layout grid is a container of cells, each of which can be used to contain other controls, including layout groups and other grids. The grid can be expanded, including the ability to merge and split cells. Each grid cell behaves like a layout group and allows you to align, size and position collections of controls. Layout groups can be nested and used to organise and orchestrate the attributes of contained controls, including hiding, showing, disabling, positioning, etc.
Bordered Group with Label Layout groups are invisible and mainly used to layout, hide, show data, etc. As a result, they contain little or no internal structure to minimise any interference with internal contents. If you want to create a group of controls with a label then this is the most appropriate control to use, which will enable you to have better control over responsive positioning of such labels. You also have access to a variety of text controls if you want to create your own custom labels.
Tabs By default, the tab control contains two tabs. The + symbol to the right of the existing tabs can be used to add additional tabs. Tabs can be dragged and reordered or deleted by using the right-click context menu. Tabs are controlled by a Tab Control Field. The properties for this field can be accessed by clicking on the background, to the right of the + symbol.
Collapsible Content Can be used to hide or reveal a group of controls. The Control Styling - Class Name of the show_hide_details field should be set to toggleHidden or toggleVisible, depending on the visibility required when the page is loaded. The default is toggleHidden, which hides the collapsible_content group, and shows the collapsed_content group. The collapsible_content group should contain the controls that need to be hidden or revealed. The collapsed_content group enables some summary data to be shown if the group is hidden. If the summary is not required when collapsed, the collapsed_content group can be removed. The Custom Attributes can be used to change the label prefixes that are appended to the Anchors Caption. The default is Show and Hide.
Accordion Accordions provide multiple panes, each of which can act as containers for other controls. Only one pane is visible at any one time. The titles for the Panes can be changed within the Custom Attributes section of the Properties tab. The rendering of this control requires a full preview. The Page view will only display the group boundaries for the panes in design mode.
Popup Dialog Popup Dialogues are initially hidden after load. To enable them (popup), an event such as onclick needs to be defined against a suitable trigger control such as a Button or Hyperlink. The Toggle Group Visibility action needs to be used as a result of the event and the group to be made visible should be the popup dialogue container group.
Editable Table A table control that allows insertion, modification and deletion of rows. Please see the Editable Table Control section for more details.
Paging Table Provides a navigation control to enable the information in the table to be browsed a page at a time, with the ability to move backwards and forwards. Also allows sorting of information. Please see the Paging Table Control section for more details.
Data Cards Provides a 'card' of information for each record in a repeating data set. Please see the Data Cards Control section for more details.
Ordered List Creates the HTML <ol> and <li> tags as the containers for the elements which are dropped into this type of layout group.
Unordered List Creates the HTML <ul> and <li> tags as the containers for the elements which are dropped into this type of layout group.
Info Panel Provides three layers, which you can use to allocate a background image and colour filter above the image. In the third layer in the foreground you have a font icon, heading and description field. This can be useful for creating a range of summary app features.
Animated Groups Various controls with animated groups of content that reveal upon scroll, using native CSS3 techniques.
Partial Page Container (Requires Server Controllers) Acts as a container for content returned by AJAX submissions.
Repeat Only Acts as a general-purpose container for managing the display of repeating information, including other layout groups. For example, a Repeat Only container can contain a group that contains an address. The Repeat Only container can then reference the repeating data that contains all addresses to display a list of repeating addresses, with each address contained in its own group.
HTML Container Simple container element with minimal layout options.
Miscellaneous Controls
Table of Miscellaneous Controls
Control Description and Notes
Print this Web Page Link This adds a Printer icon on the page which will only be shown on the screen. When the icon is clicked, it will display a print window or print preview window depending on your Browser settings.
Page Break Group Inserts a page break to force content onto the next physical sheet of paper during printing.
Separator Renders a horizontal line across the container within which it is placed.
Spacer Allows space to be inserted vertically or horizontally, to enable fine-tuning of control layouts. The size of the spacers can be adjusted by dragging the edges in the required direction.
Sharing and Collaboration Editable Table Control