Panels
This section covers panel controls that allows layouts to be graphically designed in various and flexible ways to provide for a great user experience when using an application.
Last updated
Was this helpful?
This section covers panel controls that allows layouts to be graphically designed in various and flexible ways to provide for a great user experience when using an application.
Last updated
Was this helpful?
Panels allows the similar or related control elements to be regrouped in your layout. Each panel control can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties.
The platform supports different types of panels.
The collapse panel allows other layout elements to be regrouped in a collapsible pane that can be expanded to reveal its contents or collapsed to hide its contents and show only the panel title.
General properties define the basic format of the panel.
Defines the panel title that is always visible (whether expanded or collapsed).
Defines an optional icon that can be set to appear alongside the panel title.
Icon Display Options (Available only when a panel icon has been set) Allows you to manipulate the panel icon.
Options: Rotate 45°, Rotate 90°, Rotate 135°, Rotate 180°, Rotate 225°, Rotate 270°, Rotate 315°, Flip Horizontal, Flip Vertical, Spin, Pulse-Spin
Enabling this option allows the panel to be collapsed by default.
Enabling this option draws a line between the panel header (title section) and the panel content.
Enabling this option displays the app color alongside the panel title.
Renders the panel with a minimalistic look without any borders or shadows
Style properties allows you to further customize the look of your panel using CSS notations.
Select a background shade from the list for your panel.
Set the CSS code to define the panel header background.
Set the panel margin using CSS notation for margins.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The conditional panel is one that is displayed only when a specific condition is met.
General properties define the basic properties of the panel.
Define the statement that needs to be compared to determine whether the condition is met.
The conditional statement can include expressions from the Expression List provided to also make use of application properties (such as application name) and other configuration values.
Expressions:
{{!app.id}}: Application Id
{{!app.name}}: Application name
{{!page.name}}: Application page
{{!team.id}}: Team Id
{{!team.name}}: Team name
{{controller}}: Selected controller
classId: Id of current class
className: Name of current class
instanceId: Id of current instance
name: Name of current instance
nmTargetInstance: Id of the NM target instance
options.autoSave: Is Auto-Save enabled in the class designer
options.hasActions: Element has defined actions
Defines the comparison method that will be used to determine whether the condition is met.
Supported operations:
Equals (=)
Not equals (!=)
Less than (<)
Less than or equals (<=)
Greater than (>)
Greater than or equals (>=)
Contains (used for text comparisons)
Empty
Determines what the conditional statement should be compared to using the above compare operation.
Supported values:
True
False
Null
Value (allows use of custom values)
The conditional panel2 is displayed only when a specific condition is met.
In the collapse panel General it is possible to choose the condition type for which the condition parameters can be set.
Following condition types can be chosen:
Expression
Feature
Selection
Source
Section for setting expression, compare operation and compare to value as condition parameters.
The conditional statement can include expressions from the Expression List.
Possible expressions:
{{!app.id}}: Application Id
{{!app.name}}: Application name
{{!page.name}}: Application page
{{!team.id}}: Team Id
{{!team.name}}: Team name
{{controller}}: Selected controller
Defines the comparison method that will be used to determine whether the condition is met.
Supported operations:
Contains (used for text comparisons)
Not contains
Equals (=)
Not equals (!=)
Greater than or equals (>=)
Greater than (>)
Less than or equals (<=)
Less than (<)
Empty
Determines what the conditional statement should be compared to using the compare operation.
Supported values:
Value (allows use of custom values)
Null
False
True
Section for choosing feature, feature value, compare operation and compare to value.
Choose a feature that can be used in the context of the layout (the app or all parent apps).
Choose a feature value to compare with. Possible Feature Values are:
User has access (saved as 'UserHasAccess'): Returns a Boolean value on whether the user has access to the chosen feature.
Defines the comparison method that will be used to determine whether the condition is met.
Supported operations:
Contains (used for text comparisons)
Not contains
Equals (=)
Not equals (!=)
Greater than or equals (>=)
Greater than (>)
Less than or equals (<=)
Less than (<)
Empty
Determines what the conditional statement should be compared to using the compare operation.
Supported values:
Value (allows use of custom values)
Null
False
True
Section for choosing selection, operator and, in the cases where operator allows it, the value to compare to.
The selection for which the number of result items is taken as a condition parameter.
Defines the comparison method that will be used to determine whether the condition is met.
Supported operations:
No Entries
Has Entries
Count = (Equals)
Count != (Not equals)
Count < (Less than)
Count <= (Less than or equals)
Count > (Greater than)
Count >= (Greater than or equals)
Is a custom value to which the selection output is compared to with the chosen operator. Not available for operators No Entries and Has Entries.
Section for setting source, source value, compare operation and compare to value as condition parameters.
Source that can be used in the context of the layout (the app or all parent apps).
Source value to compare with:
Is configured (saved as 'IsConfigured'): Returns a Boolean value on whether the chosen source is configured.
Defines the comparison method that will be used to determine whether the condition is met.
Supported operations:
Contains (used for text comparisons)
Not contains
Equals (=)
Not equals (!=)
Greater than or equals (>=)
Greater than (>)
Less than or equals (<=)
Less than (<)
Empty
Determines what the conditional statement should be compared to using the above compare operation.
Supported values:
Value (allows use of custom values)
Null
False
True
A dashboard panel is a special panel that can be used alone on a page without the need for a layout container or other panel prerequisites. Once added to your main designer canvas, a series of options are available to tweak the look and functionality of your dashboard panel.
It is currently not possible to integrate the dashboard panel into other layouts.
The dashboard panel consists of a tabbed view that can regroup different types of widgets.
On the top bar of the dashboard panel (design mode), a few options are available to provide general design options to customize your panel.
Discards all changes made in the dashboard panel.
Provides designer options to further customize the dashboard panel
Saves the changes made to the design of the dashboard panel and exits the design mode.
Opens the widget configuration window to assist in creating a widget in the current dashboard tab.
Deletes the tab permanently (available only for 2nd tab and upwards).
Creates a new tab for your dashboard panel.
The main content of your dashboard panel consists of widgets.
The widget creation wizard consists of multiple steps.
The first step is to select the kind of widget that you wish to add to the dashboard.
Supported options:
Option 1: Display a List This widget shows a list of items or chart derived from a data source set in the next step.
Option 2: Display a Count This widget shows a simple count determined from a list of item set in the next step.
Option 3: Pre-defined Widget Widgets composed externally and specially prepared for dashboards. Choosing this option leads you to select a widget template (predefined in your application) to complete the widget creation process.
Available only when Options 1 or 2 have been selected in the first step. The next step is to select the type of list which should be used in your widget.
Options available:
Option 1: List of All Items This list will select all items of the kind you choose in the next step.
Option 2: Pre-defined Query Select from a list of pre-defined selection queries in the next step.
Based on the previous step, you will be able to select an item from a list of classes or selection queries (categorized by application) in this step. This will determine exactly what items will be fed to the widget.
The last step allows you to customize some optional appearance settings.
Options Additional options to determine how the widget content must be displayed.
Don't group the items: Enabling this prevents items to be categorized as subentries.
Header Content Defines what is displayed in the widget header.
Footer Content Defines what is displayed in the widget footer.
Once your widget is created, a preview is loaded on the designer to help visualize your final layout.
Selecting a widget in your dashboard design reveals the widget customization options at the top of the widget in design mode.
Allows the widget to expand and take the maximum space available in the dashboard panel both horizontally and vertically.
Controls how much space (from 1 to 4) should the widget take horizontally.
Controls how much space (from 1 to 4) should the widget take vertically.
Deletes the widget from your dashboard panel.
Similar to other panels, the dashboard panel has classic properties that can be accessed via the configuration ribbon (appears when the panel is selected).
General properties define the basic format of the panel.
Dashboard Not Editable Prevents users from editing their dashboard design on their own.
Disable Close Button Prevents the user from being able to close the dashboard panel.
Need more information
Need more information
General properties define the basic layout of your panel.
Enabling this options allows your panel content to be underlined on hover.
Defines the margin around your panel, offsetting it from the edges of its parent element.
Defines a padding inside your panel, offsetting your elements from the panel edges.
Defines the background shade of the panel from a predefined list of colors.
Flex panels are special panels that provide flex properties to control how the panel content is positioned horizontally and vertically.
Container configuration properties allows you to set the basic flex properties for your panel.
Determines whether items should follow wrap-around ordering or overflow beyond the panel width. Available options: No Wrap (default), Wrap, Wrap - Reverse
Content Justify
Determines how the content should be positioned in the flex direction (see below). Available options: Stretch (default), Start, End, Center, Space Between, Space Around, Space Evenly
Determines the flex direction for your panel Available options: Horizontal (default), Vertical
Enabling this option allows your panel to take the maximum space it requires for its contents.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The For Each Class panel is designed specially to work with classes. The content of this panel consists of all the actions in a specific class from your application.
Appearance properties allows you to customize how your panel is rendered on the user interface.
Enabling this option provides a link to a particular action.
Defines the icon displayed alongside each class shown in the panel.
Icon Display Options (Available only when a panel icon has been set) Allows you to manipulate the panel icon.
Options: Rotate 45°, Rotate 90°, Rotate 135°, Rotate 180°, Rotate 225°, Rotate 270°, Rotate 315°, Flip Horizontal, Flip Vertical, Spin, Pulse-Spin
Specifies the class for which all actions are displayed.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
By default, panels are designed to position elements vertically (stacked on top of each other). The horizontal panel allows you to group layout elements horizontally - next to each other.
General properties define the basic format of the panel. Each element added to your panel adds a new row to allow for configuration of the width allocated to the element.
The size configuration is provided for Small and Normal sized displays to cater for responsive resizing on both mobile phones and standard monitors.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
HTML Panels allow you to design your panel using HTML5 expressions. It provides more design flexibility than the other panels but requires manual coding in order to be used.
General properties allows you to customize the basic format of your panel.
Defines the HTML5 code that is rendered when your panel is used.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
General properties define the basic configurations of your panel.
Defines the text that is displayed as the expander.
Defines the number of class links that should be shown in your panel.
Enabling this causes the expander to be in the expanded state, hence allowing the class links to be visible by default.
Enabling this ensures that the parent element is shown on your panel.
Enabling this ensures that all class links are displayed.
Enabling this causes your panel elements to be offset in all directions from the edge of the panel.
Enabling this displays the link tree belonging to the element for all connected links.
The Layout Container is used to open layouts as separate application windows rather than in the same parent window. It makes use of panels for the header, the main content area and the footer.
It is recommended to use this Layout Template for every object and application page.
The Layout Container has few configuration requirements as the content is loaded as separate panels.
General properties define the basic format of your container.
Enabling this adds a panel on the left side of your container along with the default header, main and footer panels. This requires additional configurations to define how the west panel should be used.
Mobile Has West Panel Enabling this ensures that the west panel is shown on mobile devices and small displays as well.
Enabling this adds a panel on the right side of your container along with the default header, main and footer panels. This requires additional configurations to define how the east panel should be used.
Mobile Has East Panel Enabling this ensures that the east panel is shown on mobile devices and small displays as well.
The west configuration section is available only when Has West Panel is enabled.
Defines the width of the west panel by pixels.
Allows the user to close the west panel manually.
The east configuration section is available only when Has East Panel is enabled.
Defines the width of the east panel by pixels.
Allows the user to close the east panel manually.
Need more information
The Panel is the simplest form of panels that serves to regroup any number of element.
General properties define the basic format of the panel element.
Defines the margin around the panel, offsetting the panel from its parent element.
Defines the padding inside the panel, offsetting the panel elements from the panel edges.
Defines the background shade of the panel from a predefined list of colors.
Defines the background image from images in your application.
Style properties allow for further customization of the panel interface.
Defines additional style commands written in CSS notation.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
Popout panels allows your content to be presented in a popout window that can be triggered manually. Once added to your layout, additional layout elements can be added to the popout panel similar to regular panels.
General properties define the basic design of the panel.
Defines the title for your popout window.
Defines the name for your layout control.
Enabling this option causes the popout panel to be closed by default.
Style properties allow further customization of your panel design.
Defines additional style commands written in CSS notation.
Defines the margin around your panel, offsetting it from the edges of its parent element.
Defines a padding inside your panel, offsetting your elements from the panel edges.
Defines the background shade of the panel from a predefined list of colors.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
Quota Display is a special panel that spans across the width of its parent element displaying some statistical information about your application, such as amount of space used and remaining.
General properties define the basic format of the scroll panel.
Enables the scroll panel to take up the maximum screen space available to it.
Enabling this ensures that a vertical scroll bar is made available to the user.
Enabling this ensures that a horizontal scroll bar is made available to the user.
Defines the background shade of the panel from a predefined list of colors.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The slide down panel is a basic collapsible panel. It allows its layout elements to be shown or hidden as the panel is expanded or collapsed. This is particularly useful to provide some control over the amount of space used by your content.
The slide down panel provides an expander that is always visible and controls the visibility of its contents when clicked.
General properties define the basic design of your slide down panel.
Defines the panel title that is always visible on the panel slider.
Enabling this causes your panel to be in the expanded state by default - allowing the content to visible.
Enabling this allows the panel slider to remain on top of your content, which is then loaded underneath it.
This option is available only when Slide From Top is enabled. Enabling this allows your panel slider to be slightly enlarged to be more visible.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The Tab List Panel allows different tabs to be displayed as sub-windows in your application. Each tab can be configured to use one of your application layouts.
Once your tabs have been defined using the Tab List Panel configurations, the layout designer will automatically display your created tabs in the designer. The Tab List Panel is typically used along with the object section control.
General properties define the basic design of your tab list panel.
Enabling this allows your panel to fill the application page.
Specified where the tabs should be displayed on the page. Options: Top, Left
Enabling this allows your tab titles to use a smaller font size.
Name of the section in your layout targeted by the Tab List Panel.
Tabs properties allows you to configure the tabs in your Tab Panel.
Selects the name of the tab that should be opened by default.
Your tabs can be managed in the configuration itself
Create Tab (todo: add fa-plus icon) Selecting this button creates a new tab for your tab panel. Each tab consist of a name (supports multiple languages) that is used to identify the tab. Once created, the tab also requires you to specify which layout should be used for as its content.
Delete Tab (todo: add fa-remove icon) A tab can be deleted by selecting this option.
Reordering (todo: add arrow up and down icons) Reorder arrow buttons can be used to reorganize the ordering of your tab, moving it further down or higher up the list. This ordering indicates the order in which the tabs will be displayed on your final layout as well.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The Tab Panel allows different tabs to be displayed as sub-windows in your application window. Each tab can be individually designed with layout elements.
General properties define the basic design of your tab panel.
Enabling this allows your panel to fill the application page.
Specified where the tabs should be displayed on the page. Options: Top, Left
Enabling this allows your tab titles to use a smaller font size.
Tabs properties allows you to configure the tabs in your Tab Panel.
Selects the name of the tab that should be opened by default.
Your tabs can be managed in the configuration itself
Create Tab (todo: add fa-plus icon) Selecting this button creates a new tab for your tab panel. Each tab consist of a name (supports multiple languages) that is used to identify the tab. Once created, the tab will be accessible from the main layout designer canvas for further customization.
Delete Tab (todo: add fa-remove icon) A tab can be deleted by selecting this option.
Reordering (todo: add arrow up and down icons) Reorder arrow buttons can be used to reorganize the ordering of your tab, moving it further down or higher up the list. This ordering indicates the order in which the tabs will be displayed on your final layout as well.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
Tag Panel enables the user to manage tags of an instance. With Tag Panel end user can create new tag of the type user or team, list applied tags, assign or change existing tags.
Tag panel configurations offers three options:
Enable assigning: enables the end user to assign tags to the instance
Enable creating: enables the end user to create new tags
Enable removing: end user has the possibility to delete assigned tags
Default value for all three options is true.
The toolbar serves as a special design element that consists of a collection of layout elements such as actions. Unlike other panels, it is colored to give more structure to the page.
The toolbar does not require extensive configurations, and is used primarily as a container for the actual toolbar content.
General properties define the basic design of your toolbar.
Determines the shade of your toolbar. Options: Normal (default), Light, Transparent, Custom
Style properties are available only when the View Mode is set to Custom.
Defines the toolbar background using CSS notation.
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Allows you to write Html code that is rendered as help text for your panel.
Allows you to define where the help text should be displayed relative to your panel.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Allows you to define the order within the intro tour.
The view dependent panel allows custom views to be designed for different devices. For instance, the layout of a page can be adapted differently for smaller screens or devices with touch capability.
Screen Size properties determine the visibility of your view dependent panel based on screen size.
Enabling this ensures your panel is displayed on devices with small screens.
Enabling this ensures your panel is displayed on devices with medium-sized screens.
Enabling this ensures your panel is displayed on devices with larger screens.
Input Type properties define whether your panel can be accessed and used based on the input capabilities of devices.
Enabling this ensures your panel is displayed on touch-enabled devices.
Enabling this ensures your panel is displayed on devices that support using a mouse.
Dashboard panels can consist of several tabs which can be customized individually. The options available can be found on the tab bar itself when in design mode (see above).
Press Edit Tab to change the tab title and choose for which users or groups the dashboard tab will be visible. Setting the dashboard tab to be visible only for certain users or groups avoid overloading of information for users/groups for whom these information are not useful or required. If no users or groups have been selected then the dashboard tab is shown for everyone.
See above.
Allows you to modify the widget appearance settings previously .
The Field List Panel is a special panel that is only available for class-bound pages such as . The panel is used to display all fields in the object as a list.
The instance details panel can only be used in pages bound to a class, such as . It allows you to display all details of the object currently loaded on the page in one concise panel.
The instance links panel can only be used in pages bound to a class, such as . It allows you to display all class links found in the object currently loaded on the application page. It consists of an expander which, when clicked, toggles the visibility of all class links.
Scroll panels regroup elements similar to a basic , with the added functionality of allowing users to scroll through the panel. This is especially useful in content-intensive applications and when using lists.
Contrary to the ,
Once your tabs have been defined using the Tab Panel configurations, the layout designer will automatically display your created tabs in design mode. Each tab will consist of a to which you can add more layout elements and build your tab interface.
For more details about Tag Panel features from the end user perspective visit .
