Skip to main content
Skip table of contents

Creating the portal application user interface

To create an application user interface, you must create forms to connect the application with your data sources and screens to display the information.

Developing new portlet screens

Your application must contain at least one screen. Screens collect and lay out forms, controls, and sub-layouts.

Create a new screen for your portlet application in the NexJ Studio Presentation layer.

To create a new screen:

  1. In the File menu, select New > Screen .
    The New Screen dialog appears.
  2. Confirm which model will use the screen, specify a screen name, and click Next.
    The Select Layout Type page of the dialog appears.
  3. Specify the layout you want to use.
    • Select Splitter Layout to display one or more splitter zones separated by a slider, allowing users to resize the zone.
    • Select Table Layout to partition the screen into columns and rows.
  4. Specify additional details for the layout.
    • For table layouts, specify the number of rows and the number of columns. If you want to expand the size of the screen, select Fill space .
    • For splitter layouts, specify whether the screen should be split vertically or horizontally.
  5. Click Finish .
    The New Screen dialog closes and the NexJ Studio screen editor opens, with the Layout tab selected.

The new screen has been created.

You can now add controls (including tile controls), layouts, form references, and portlet references to the new screen.

For more information see Screens.

User interface elements for portlet screens

Use controls (including tile controls), layouts, form references, and portlet references to develop a portlet screen in NexJ Studio.

You can add the following types of user interface elements to a screen.

Controls

Button

Triggers a UI event when clicked.

Label

Displays text, text and icons, icons only, or collections.

Menu

Displays a collection of MenuItem controls and separators as items in a pull-down menu. Compare with Toolbox, which displays the items as buttons in a horizontal bar.

You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to a form or a screen.

MenuItem

Displays one of the items that will be displayed in a menu or toolbox. Menu items can have other menu items as children, which creates a cascading menu. Menu items without children will trigger a UI event when selected.

MenuLink

Displays a non-clickable menu item which has a required submenu.

Toolbox

A specialized case of menu. Toolboxes display a collection of MenuItem controls as buttons in a horizontal bar. Compare with Menu, which displays items in a pull-down menu.

Tile controls

ActionTile

Add an ActionTile to your application to display summary information about an individual with buttons to perform related actions.

CaptionValueTile

Add a CaptionValueTile to your application to display basic information. CaptionValueTile controls can also collect information using controls, including menus and fields.

DetailEditTableTile

Add a DetailEditTableTile to your application to create a simple one or two column table with one or two items per row.

ExpandableTextTile

Add an ExpandableTextTile to your application to display summary information when collapsed and detailed information when expanded. It can only contain text.

ExpandableTile

Add an ExpandableTile to your application to display summary information when collapsed and detailed information when expanded. It can contain plain text, formatted text, and images.

MultilineRepeaterTile

Add a MultilineRepeaterTile to your application to display images with one, two, or three lines of related text.

PopupTile

Use a PopupTile in your application to display information in a popup dialog with a specific style that can have scrolling enabled.

SectionHeaderTile

Add a SectionHeaderTile to your application to display a title at the beginning of a section.

TwoColumnTableTile

A TwoColumnTableTile can display information in an ExpandableTile. These tiles contain basic information in a two column table.

TwoLineCaptionTile

A TwoLineCaptionTile can display information in an ExpandableTile. These tiles contain two lines of text using four containers with predefined alignments.

Layouts

GroupLayout

Displays a collection of zero or more sub-layouts (group, splitter, or table) where only one sub-layout is visible at a time.

CaptionLayout

Appears at the top of its parent layout. Typically used to display a summary of the information from other parts of the parent layout. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to another layout.

SplitterLayout

Displays a collection of one or more splitter zones separated by a slider (horizontal or vertical), allowing users to resize the zone.

TableLayout

Partitions an area into columns and rows.

References

FormRef

Use when you want to include a form. The form reference should be associated with the form specified in the second part of the reference.

PortletRef

Use when you want to include a portlet. The portlet reference should be associated with the portlet-enabled screen specified in the second part of the reference.

Developing a new portlet form

Forms contain user interface controls to display data for querying, viewing, creating, or editing.

Forms are bound to classes. They contain a root layout of controls such as buttons, labels, or grids, and additional optional sub-layouts.

Create a new form in the NexJ Studio Presentation layer.

To create a new form:

  1. In the File menu, select New > Form .
    The New Form dialog appears.
  2. Specify the form properties.
    1. In the Model field, confirm the model which with use this form.
    2. In the Name field, specify the form name.
    3. Next to the Class field, click Select Class and select the class you want to associate with this form.
    4. Select the type of form you want to create.
      List
      Displays a collection of objects, typically the results of a query.
      Detail
      Displays the details of a single object for viewing or editing.
      Query
      Provides the parameters used for a search.
    5. Click Next .
    The Select Attributes dialog page appears.
  3. In the Select Attributes dialog, select at least one attribute from the class you associated with the form and click Add .
  4. Click Next .
    The Select Labels and Types for Attributes dialog page appears.
  5. Customize how the data will be displayed in the form.
    • For list forms, you can optionally update how the column headings will appear. By default, a new string with a new string ID is generated to be used as the column heading, based on the attribute name.
      • To change the content of the string, click in the Heading column to activate the field and enter the text to be used as the column heading.
      • To use a different string ID, click in String Id column to activate the field and click the Browse button 
        . From the Select String dialog, select the existing string ID to be used as the column heading.
    • For detail and query forms, you can optionally update how each the field label will appear, which field type will be used, and how much space will be included below the field. By default, a new string with a new string ID is generated to be used as the field label, based on the attribute name.
      • To change the content of the string, click in the Label column to activate the field and enter the text to be used as the field label.
      • To use a different string ID, click in String Id column to activate the field and click the Browse button 
        . From the Select String dialog, select the existing string ID to be used as the field label.
      • To change the field type from the default, which is based on the attribute data type, click in the Type column to activate the field and select one of the available field types.
      • To insert one or more empty rows below the field, click in the Filler column to activate the field and enter the number of rows.

      In addition, you can specify the following information for detail and query forms.
      • By default, all the controls are displayed in one column on the form. To change the default appearance, enter a different number in the Number of columns field.
      • By default, a checkbox label appears to the right of the checkbox. All other labels appear to the left of the field. To display labels to the left of each checkbox, clear the Apply labels to the right of checkboxes field.
  6. Click Next .
    The Preview dialog page appears.
  7. Confirm that the appearance of the form is what you expected.
    To go to one of the previous pages in the dialog, click Back.
  8. Once you are satisfied with the appearance of the form, click Finish .
    The New Form dialog closes and the NexJ Studio form editor opens, with the Layout tab selected.

The new form has been created.

You can now add controls (including tile controls), layouts, and portlet references to the new form. You can also edit a screen to add a reference to this new form.

For more information, see Forms.

User interface elements for portlet forms

Use controls (including tile controls and chart controls), layouts, and portlet references to develop a form in NexJ Studio.

You can add the following types of user interface elements to a form.

Controls

Browser

Embeds a web browser.

Button

Triggers a UI event when clicked.

Calendar

Displays a small calendar.

Checkbox

Creates a selection box that takes on a value of #t when selected and #f when cleared. If tristate checkboxes are enabled, it is also possible to return a third state, with the value of null.

Combo

Creates an entry field in which a user can type or select one of a list of possible values.

CustomControl

The use of CustomControl varies for each instance.

Grid

Presents a set of records as clickable rows of data. Used along with GridColumn controls, it can create tabular data displays.

Each row of a grid can be selected individually. In addition, you can add a multiselect tristate parent checkbox to enable the user to select multiple rows in a grid. The parent checkbox takes on a value of #t when selected, #f when cleared, and null when any child checkboxes have been selected individually. For example, when a user selects the parent checkbox and then clears one or more child checkboxes or when a user clears the parent checkbox and then selects one or more child checkboxes.

GridColumn

Contained within a grid. Allows a grid row to display additional attributes for each record.

HTMLLabel

Displays a label in an HTML format.

Image

Displays an image. Input Creates a single or multi-line text entry field.

Label

Displays text, text and icons, icons only, or collections.

Menu

Displays a collection of MenuItem controls and separators as items in a pull-down menu. Compare with Toolbox, which displays the items as buttons in a horizontal bar. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to a form or a screen.

MenuItem

Displays one of the items that will be displayed in a menu or toolbox. Menu items can have other menu items as children, which creates a cascading menu. Menu items without children will trigger a UI event when selected.

MenuLink

Displays a non-clickable menu item which has a required submenu.

Picker

Creates a button that launches a popup. Commonly used to launch more complex selection screens.

Previewer

Displays a preview of any attachments. Can also be used for uploading attachments.

Report

Displays a report viewer.

Schedule

Displays a schedule.

Toolbox

A specialized case of menu. Toolboxes display a collection of MenuItem controls as buttons in a horizontal bar. Compare with Menu, which displays items in a pull-down menu.

Tree

Displays a tree-based navigation view of hierarchical information.

Chart controls

Chart controls in NexJ Studio use the Highcharts JavaScript library. For more information about these controls, see https://www.highcharts.com/docs/index.

  • BarAndLineChart
  • BarChart
  • FunnelChart
  • LineChart
  • PieChart

Tile controls

ActionTile

Add an ActionTile to your application to display summary information about an individual with buttons to perform related actions.

CaptionValueTile

Add a CaptionValueTile to your application to display basic information. CaptionValueTile controls can also collect information using controls, including menus and fields.

DetailEditTableTile

Add a DetailEditTableTile to your application to create a simple one or two column table with one or two items per row.

ExpandableTextTile

Add an ExpandableTextTile to your application to display summary information when collapsed and detailed information when expanded. It can only contain text.

ExpandableTile

Add an ExpandableTile to your application to display summary information when collapsed and detailed information when expanded. It can contain plain text, formatted text, and images.

MultilineRepeaterTile

Add a MultilineRepeaterTile to your application to display images with one, two, or three lines of related text.

PopupTile

Use a PopupTile in your application to display information in a popup dialog with a specific style that can have scrolling enabled.

SectionHeaderTile

Add a SectionHeaderTile to your application to display a title at the beginning of a section.

TwoColumnTableTile

A TwoColumnTableTile can display information in an ExpandableTile. These tiles contain basic information in a two column table.

TwoLineCaptionTile

A TwoLineCaptionTile can display information in an ExpandableTile. These tiles contain two lines of text using four containers with predefined alignments.

Layouts

GroupLayout

Displays a collection of zero or more sub-layouts (group, splitter, or table) where only one sub-layout is visible at a time.

CaptionLayout

Appears at the top of its parent layout. Typically used to display a summary of the information from other parts of the parent layout. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to another layout.

SplitterLayout

Displays a collection of one or more splitter zones separated by a slider (horizontal or vertical), allowing users to resize the zone.

TableLayout

Partitions an area into columns and rows.

References

PortletRef

Use when you want to include a portlet. The portlet reference should be associated with the portlet-enabled screen specified in the second part of the reference.

Adding user interface elements in the Layout tab

You can add most user interface elements, including controls, layouts, and references, to screens and forms using the Layout tab in the screen or form editor.

Info

Some elements cannot be added to screens or forms using the Layout tab, because they are only supported in specific locations in a screen or form. These elements need to be inserted using the Outline view. These elements are the following:

  • Menu controls, including MenuItem controls and MenuLink controls
  • CaptionLayout elements

To add a user interface element to a screen or a form:

  1. In NexJ Studio, navigate to the Presentation layer.
  2. Open the screen or form.
  3. In the Layout tab of the screen or form editor, right-click in the area where you want to add the element.
  4. Select one of the Insert commands from the menu that appears.
    The element is added to the screen or form.
  5. Click the element to select it.
  6. In the Properties view, specify any additional properties for the user interface element.
    Properties control the appearance, behavior, events, and data associated with the element.
  7. Click the Save button 
      to save your changes.

The user interface element is added to the screen or form.

Adding user interface elements in the Outline view

You cannot add certain user interface elements to screens and forms using the Layout tab. You need to add these elements using the Outline view instead.

You may add any user interface element to a form or a screen using the Outline view. However, you must use the Outline view to add the following elements:

  • Menu controls, including MenuItem controls and MenuLink controls
  • CaptionLayout elements

To add a user interface element to a screen or a form:

  1. In NexJ Studio, navigate to the Presentation layer.
  2. Open the screen or form.
    The process of inserting a user interface element varies depending on which element you want to add to your interface.
  3. [Optional] To insert a menu:
    1. In the Outline view, right-click the Screen or Form node at the top.
    2. Select Insert Child > Menus beginning . The Menus node is added to the outline as the first child node.
    3. Right-click the Menus node and select Insert Menu .
    4. Right-click the Menu node and select one of the Insert commands. Continue adding one or more menu items, menu links, and separators to build the menu you want to include in your portal application.
  4. [Optional] To insert a caption:
    1. In the Outline view, right-click the layout node to which you want to add a caption.
    2. Select Insert Child > CaptionLayout beginning . The CaptionLayout node is added to the outline as the first child node of the layout node.
      After the element has been inserted, you need to configure it and save the screen or form.
  5. Click the element to select it.
  6. In the Properties view, specify any additional properties for the user interface element. Properties control the appearance, behavior, events, and data associated with the element.
  7. Click the Save button 
    to save your changes.

The user interface element is added to the screen or form.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close