Tile control design patterns
Each type of tile has unique layout elements and design patterns.
The following section contains development best practices for assembling tile controls. Follow these design patterns to build effective tiles that maintain a consistent appearance throughout your NexJ application.
ActionTile design pattern
An ActionTile displays summary information and contains buttons to perform related actions.
Example
Add an ActionTile to your NexJ application to display basic information about a client: name, tier, and associated financial advisor. An ActionTile enables a user to view and edit a client's primary information from any workspace.
Technical considerations
An ActionTile control must be placed in a TableLayout element with one cell. Spacings and margins should be set to 0. The height property of the ActionTile can be short
or full
. It is recommended that you use short
if the Summary text is one line high.
Tile configuration
Add the following preconfigured controls to the ActionTile and insert regular controls within them:
Icon (Optional)
- Displays an image on the left side of the tile.
- Contains an Image.
- Set the scalable property on the Image to
false
.
Summary
- Displays text in the middle of the tile.
- Insert a Label if the Summary is one line long. Insert a TwoLineCaptionTile if two or more lines.
ActionIcon
- Displays one or two Image controls on the right side of the tile. These buttons allow users to interact with the information in the tile.
- Insert one or two Images.
CaptionValueTile design pattern
A CaptionValueTile displays information. It can also collect information using controls, including menus and fields.
Examples
- Add a CaptionValueTile to your NexJ application to display basic information about a client's financial status. A CaptionValueTile can display their total net worth. It can stand alone or be one of many tiles in a larger screen displaying client information.
- Add a CaptionValueTile to your NexJ application to display an upcoming meeting date between a client and a financial advisor. In addition to the text fields, the tile can contain a picker control enabling a user to change and save the date of the meeting.
Tile configuration
Caption
- Displays title text.
- Insert a Label.
- Set the light property on the Label to
true
if the text should be grey. Otherwise it will be black.
SubCaption (Optional)
- Displays text to the right of the caption.
- Insert a Label.
- Set the light property on the Label to
true
if the text should be grey. Otherwise it will be black.
Value
- Appears under the Caption and SubCaption.
- Insert any control.
- Set align, valign, width, and height on the control if required.
DetailEditTableTile design pattern
A DetailEditTableTile can contain a one or two column table with one or two items per row.
Example
Add a DetailEditTableTile to your NexJ application to create a form that client's use to enter and save personal and financial information.
Technical considerations
A DetailEditTableTile can have horizontal separators between TileRow elements. To insert a separator, add an HTMLLabel with the content property set to (@ template : "HorizontalSeparator")
.
Setting the width property of the DetailEditTableTile will control the horizontal sizing of the tile.
Tile configuration
TileRow
- Each TileRow is a new row in a DetailEditTableTile.
- Insert one or two controls per TileRow.
- Set the noFill property to
true
if a row contains one item that should not the span the width of two columns.
ExpandableTile design pattern
An ExpandableTile displays summary information when collapsed and detailed information when expanded.
Example
Add an ExpandableTile to your NexJ application to display a client's basic information when collapsed: name and net worth. When expanded, the tile contains detailed information about the client: name, address, financial segment, net worth, and tier. Users can download attachments from an ExpandableTile and access other relevant options from a toolbar.
Technical considerations
ExpandableTiles must be placed in a TableLayout element with one cell. Spacings and margins must be set to 0.
Tile configuration
Icon (Optional)
- Displays an image or text on the left side of the tile.
- Insert a Label or Image.
- Set the scalable property on the Image to
false
.
Summary
- Displays text in the center of the tile.
- Insert a TwoLineCaptionTile.
ActionIcon (Optional)
- Displays an image on the right side of the tile. Fires an event when clicked.
- Insert an Image.
- Set the event property on the Image to the event that will be fired when the icon is clicked.
Detail
- Displays information when the tile expands.
- Insert a TwoColumnTableTile or other control object to display detailed information.
Attachment (Optional)
- Displays attached files when the tile expands.
- Insert a Label.
- Set the style property on the Label to
hyperlink
.
Toolbar (Optional)
- Displays controls when the tile expands.
- Insert a Toolbox.
ExpandableTextTile design pattern
An ExpandableTextTile displays summary information when collapsed and detailed information when expanded.
Example
Add an ExpandableTextTile to your NexJ application to display a client's biography. When collapsed, the tile only displays a snippet of the text that fits within the tile's margins. When expanded, the entire contents of the tile are visible in an expanded area.
Technical considerations
An ExpandableTextTile must be placed in a TableLayout with one cell. Spacings and margins must be set to 0.
Additional steps are required to configure a ExpandableTextTile. For more information, see Configuring ExpandableTextTile data actions.
Tile configuration
Text
- Displays text. If the text is longer than the available tile area it will overflow vertically. Expanding the tile will show the text in its entirety.
- Insert an HTMLLabel.
Icon (Optional)
- Displays an image on the right side of the tile.
- Insert an Image.
Toolbar (Optional)
- Displays a set of controls at the bottom of the tile. Only visible when expanded.
- Insert a Toolbar.
Configuring ExpandableTextTile data actions
Additional configurations are required to assemble an ExpandableTextTile.
You need to create two new data actions:
- On the form containing the ExpandableTextTile control.
- On the parent form containing the tile control layout
Together these scripts enable the ExpandableTextTile to remember the expand or collapse state of the tile.
To configure the ExpandableTextTile data actions:
- Pass the model argument in the HTMLLabel to remember the view expand/collapse state:
- In the NexJ Studio Presentation layer, open a form with an ExpandableTextTile.
- In the Outline view, select the HTMLLabel.
- In the Properties view, set the code property as
(@ template : "ExpandableTextTileLabel" (@ model) value)
.
- Add a data action to initialize the annotations used for storing the view expand/collapse state:
- Add a UI Action handler to the tile control's parent form to handle the view expand/collapse state:
PopupTile design pattern
Example
Add a PopupTile to your NexJ application to provide users with a form in a new dialog window. This form can be used to input and submit their personal and financial information.
Tile configuration
- Open a form from the NexJ Studio Presentation layer.
- Create a TableLayout with the following properties:
- style:
default
- margin:
0
- spacing:
0
- column width:
null
- row height:
null
- style:
- Insert a PopupTile under the top level table.
Under the Content child element, insert a FormRef.
Info
To stack multiple forms, use a TableLayout with
0
margins,0
horizontalSpacing and5
verticalSpacing.- If you want the user to be able to expand the size of the form, complete the following:
- Confirm that that the form contains a grid with the scroll property set to
false
. - Set the scroll property for the Content element to
true
.
- Confirm that that the form contains a grid with the scroll property set to
- Click the Save button to save your changes.
A PopupTile has been added to your form.
TwoLineCaptionTile design pattern
Example
Technical considerations
Tile configuration
TopLeft
- Displays text in the first row on the left side of the tile.
- Insert a Label.
TopRight
- Displays text in the first row on the right side of the tile.
- Insert a Label.
BottomLeft
- Displays text in the second row on the left side of the tile.
- Insert a Label.
BottomRight
- Displays text in the second row on the right side of the tile.
- Insert a Label.
TwoColumnTableTile design pattern
Example
Technical considerations
Tile configuration
MultilineRepeaterTile design pattern
Example
Add a MultilineRepeaterTile to your NexJ application to display a list of clients. For each client, the tile will display their contact picture alongside the following information: name, tier, and net worth.
Tile configuration
Icon
- Displays an image.
- Insert an Image.
- Set the width and height properties of the Image using pixels. Set the border property to
true
if the image should have a border.
Contents
- Displays text to the right of the icon. Each Label will be on its own horizontal line.
- Insert one, two, or three Label controls.
SectionHeaderTile design pattern
Example
Add a SectionHeaderTile to your NexJ application to display a title. This helps organize and draw attention to information.