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

1. 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.
2. 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:

1. Pass the model argument in the HTMLLabel to remember the view expand/collapse state:
   1. In the NexJ Studio Presentation layer, open a form with an ExpandableTextTile.
   2. In the Outline view, select the HTMLLabel.
   3. In the Properties view, set the code property as (@ template : "ExpandableTextTileLabel" (@ model) value).
2. Add a data action to initialize the annotations used for storing the view expand/collapse state:
   1. Insert an annotation field a_viewExpanded in the same form.

   2. Insert the following data action:
      

      <DataAction condition="(= locator 'collection)">
               <Script><![CDATA[(for-each
         (lambda (im)
            (im'a_viewExpanded #f)
         )
         (this'model)
      )]]></Script>
      </DataAction>

      
      

3. Add a UI Action handler to the tile control's parent form to handle the view expand/collapse state:
   1. In the NexJ Studio Presentation layer, open the parent form containing the repeater grid.
   2. In the UI Actions tab, click the Add button to create a new UI Action Script.
   3. Set the script's event property to sysCollapseView and source to *.

   4. Insert the following script:
      
      

      (tile-handle-expandable-text-event
          this
          '(yourGrid repeaterFormName htmlLabelName)
      ) 

4. Save all of your changes.

Your ExpandableTextTile control now has the necessary data actions to remember its view expand/collapse state.

PopupTile design pattern

A PopupTile displays information in a popup dialog. They display existing information using predefined formatting with the ability to enable scrolling.

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

To assemble a PopupTile control:

1. Open a form from the NexJ Studio Presentation layer.
2. Create a TableLayout with the following properties:
   • style: default
   • margin: 0
   • spacing: 0
   • column width: null
   • row height: null
3. Insert a PopupTile under the top level table.

4. Under the Content child element, insert a FormRef.

   Info

   To stack multiple forms, use a TableLayout with 0 margins, 0 horizontalSpacing and 5 verticalSpacing.

5. 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.
6. Click the Save button  to save your changes.

A PopupTile has been added to your form.

TwoLineCaptionTile design pattern

A TwoLineCaptionTile displays two lines of text using four containers with predefined alignments.

Example

Add a TwoLineCaptionTile to your NexJ application to display detailed client financial information. When a financial advisor expands an ExpandableTile, a TwoLineCaptionTile is revealed containing the name, address, financial segment, net worth, and tier of the client.

Technical considerations

A TwoLineCaptionTile should only be inserted in the Summary control of an ExpandableTile. A TwoLineCaptionTile should not be used outside of an ExpandableTile.

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

A TwoColumnTableTile displays information in a two column table.

Example

Add a TwoColumnTableTile to your NexJ application to display a client's personal and financial information in a table. Category labels will be on the left side of the table and client information in the corresponding cells on the right.

Technical considerations

A TwoColumnTableTile should only be inserted in the Detail control of an ExpandableTile. A TwoColumnTableTile should not be used outside of a ExpandableTile.

Labels in the left column of the table will have the style LabelLight applied by default. The textAlign property of all labels will be automatically set to reflect the column they are in.

Tile configuration

TileRow

• Each TileRow is a new row in the table.
• Insert two Labels. One for the left column and one for the right.
• Set the align property of the Label to either left or right.

MultilineRepeaterTile design pattern

A MultilineRepeaterTile displays an image alongside one, two, or three lines of text.

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

A SectionHeaderTile displays a header caption for the beginning of a section.

Example

Add a SectionHeaderTile to your NexJ application to display a title. This helps organize and draw attention to information.

Tile configuration

Caption

• Text contained in the tile.
• Insert a Label.

SubCaption (Optional)

• Text that appears below the Caption.
• Insert a Label.

Toolbar (Optional)

• Adds controls to the top right area of the tile.
• Insert a Toolbox.