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.
Overview
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.
Collapse Panel
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
General properties define the basic format of the panel.
Text
Defines the panel title that is always visible (whether expanded or collapsed).
Icon
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
Collapsed
Enabling this option allows the panel to be collapsed by default.
Draw Bottom Border
Enabling this option draws a line between the panel header (title section) and the panel content.
Display App Color
Enabling this option displays the app color alongside the panel title.
Display Without Border
Renders the panel with a minimalistic look without any borders or shadows
Style
Style properties allows you to further customize the look of your panel using CSS notations.
Background Type
Select a background shade from the list for your panel.
CSS Header Background
Set the CSS code to define the panel header background.
CSS Margin
Set the panel margin using CSS notation for margins.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Conditional Panel
The conditional panel is one that is displayed only when a specific condition is met.
General
General properties define the basic properties of the panel.
Condition
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
Compare Operation
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
Compare To Value
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)
Conditional Panel2
The conditional panel2 is displayed only when a specific condition is met.
General
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
Expression
Section for setting expression, compare operation and compare to value as condition parameters.
Expression
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
Compare Operation
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
Compare To Value
Determines what the conditional statement should be compared to using the compare operation.
Supported values:
Value (allows use of custom values)
Null
False
True
Feature
Section for choosing feature, feature value, compare operation and compare to value.
Feature
Choose a feature that can be used in the context of the layout (the app or all parent apps).
Feature Value
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.
Compare Operation
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
Compare To Value
Determines what the conditional statement should be compared to using the compare operation.
Supported values:
Value (allows use of custom values)
Null
False
True
Selection
Section for choosing selection, operator and, in the cases where operator allows it, the value to compare to.
Selection
The selection for which the number of result items is taken as a condition parameter.
Operator
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)
Value
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.
Source
Section for setting source, source value, compare operation and compare to value as condition parameters.
Source
Source that can be used in the context of the layout (the app or all parent apps).
Source value
Source value to compare with:
Is configured (saved as 'IsConfigured'): Returns a Boolean value on whether the chosen source is configured.
Compare Operation
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
Compare To Value
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
Dashboard Panel
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.
Panel Design
On the top bar of the dashboard panel (design mode), a few options are available to provide general design options to customize your panel.
Reset (todo: add fa-close icon)
Discards all changes made in the dashboard panel.
Settings (todo: add gear icon)
Provides designer options to further customize the dashboard panel
Save and Close (todo: add fa-check icon)
Saves the changes made to the design of the dashboard panel and exits the design mode.
Add Widget (todo: add fa-plus icon)
Opens the widget configuration window to assist in creating a widget in the current dashboard tab.
Manage Tabs
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 Settings above).
Edit Tab
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.
Delete Tab (todo: add fa-delete icon)
Deletes the tab permanently (available only for 2nd tab and upwards).
Create New Tab (todo: add fa-square-plus icon)
Creates a new tab for your dashboard panel.
Create Widgets
The main content of your dashboard panel consists of widgets.
The widget creation wizard consists of multiple steps.
Select a Widget Type
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.
Select your List Type
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.
Select List
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.
Customization
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.
Customize Widgets
Selecting a widget in your dashboard design reveals the widget customization options at the top of the widget in design mode.
Expand To Fit
Allows the widget to expand and take the maximum space available in the dashboard panel both horizontally and vertically.
Horizontal Width
Controls how much space (from 1 to 4) should the widget take horizontally.
Vertical Height
Controls how much space (from 1 to 4) should the widget take vertically.
Settings
Allows you to modify the widget appearance settings previously defined at creation time.
Delete Widget
Deletes the widget from your dashboard panel.
Panel Properties
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
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.
Docking Container
Need more information
Docking Item
Need more information
Field List Panel
The Field List Panel is a special panel that is only available for class-bound pages such as Object Page. The panel is used to display all fields in the object as a list.
General
General properties define the basic layout of your panel.
Draw Lines on Hover
Enabling this options allows your panel content to be underlined on hover.
Margin
Defines the margin around your panel, offsetting it from the edges of its parent element.
Padding
Defines a padding inside your panel, offsetting your elements from the panel edges.
Background Type
Defines the background shade of the panel from a predefined list of colors.
Flex Panel
Flex panels are special panels that provide flex properties to control how the panel content is positioned horizontally and vertically.
Container Configuration
Container configuration properties allows you to set the basic flex properties for your panel.
Item Wrap
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
Direction
Determines the flex direction for your panel Available options: Horizontal (default), Vertical
Full Size
Enabling this option allows your panel to take the maximum space it requires for its contents.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
For Each Class
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
Appearance properties allows you to customize how your panel is rendered on the user interface.
Generate Action Link
Enabling this option provides a link to a particular action.
Action Icon
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
Base Class
Specifies the class for which all actions are displayed.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Horizontal Panel
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
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
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Html Panel
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
General properties allows you to customize the basic format of your panel.
Html
Defines the HTML5 code that is rendered when your panel is used.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Instance Details
The instance details panel can only be used in pages bound to a class, such as Object Page. It allows you to display all details of the object currently loaded on the page in one concise panel.
Instance Links Panel
The instance links panel can only be used in pages bound to a class, such as Object Page. 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.
General
General properties define the basic configurations of your panel.
Expander Text
Defines the text that is displayed as the expander.
Number of Links to Display
Defines the number of class links that should be shown in your panel.
Initially Expanded
Enabling this causes the expander to be in the expanded state, hence allowing the class links to be visible by default.
Display "Parent Item"
Enabling this ensures that the parent element is shown on your panel.
Display "All Links"
Enabling this ensures that all class links are displayed.
Display With Padding
Enabling this causes your panel elements to be offset in all directions from the edge of the panel.
Show Tree-Link
Enabling this displays the link tree belonging to the element for all connected links.
Layout Container
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
General properties define the basic format of your container.
Has West Panel
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.
Has East Panel
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.
West
The west configuration section is available only when Has West Panel is enabled.
West Width (In Pixel)
Defines the width of the west panel by pixels.
Is Closable
Allows the user to close the west panel manually.
East
The east configuration section is available only when Has East Panel is enabled.
East Width (In Pixel)
Defines the width of the east panel by pixels.
Is Closable
Allows the user to close the east panel manually.
Menu Context
Need more information
Panel
The Panel is the simplest form of panels that serves to regroup any number of element.
General
General properties define the basic format of the panel element.
Margin
Defines the margin around the panel, offsetting the panel from its parent element.
Padding
Defines the padding inside the panel, offsetting the panel elements from the panel edges.
Background Type
Defines the background shade of the panel from a predefined list of colors.
Background Image
Defines the background image from images in your application.
Style
Style properties allow for further customization of the panel interface.
Other Custom Styles
Defines additional style commands written in CSS notation.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Popout Panel
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
General properties define the basic design of the panel.
Docking Title
Defines the title for your popout window.
Control Name
Defines the name for your layout control.
Initially Closed
Enabling this option causes the popout panel to be closed by default.
Style
Style properties allow further customization of your panel design.
Other Custom Styles
Defines additional style commands written in CSS notation.
Margin
Defines the margin around your panel, offsetting it from the edges of its parent element.
Padding
Defines a padding inside your panel, offsetting your elements from the panel edges.
Background Type
Defines the background shade of the panel from a predefined list of colors.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Quota Display
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.
Scroll Panel
Scroll panels regroup elements similar to a basic Panel, with the added functionality of allowing users to scroll through the panel. This is especially useful in content-intensive applications and when using lists.
General
General properties define the basic format of the scroll panel.
Full Size
Enables the scroll panel to take up the maximum screen space available to it.
Vertical Scroll Bar
Enabling this ensures that a vertical scroll bar is made available to the user.
Horizontal Scroll Bar
Enabling this ensures that a horizontal scroll bar is made available to the user.
Background Type
Defines the background shade of the panel from a predefined list of colors.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Slide Down Panel
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
General properties define the basic design of your slide down panel.
Text
Defines the panel title that is always visible on the panel slider.
Expanded
Enabling this causes your panel to be in the expanded state by default - allowing the content to visible.
Slide From Top
Enabling this allows the panel slider to remain on top of your content, which is then loaded underneath it.
Large Display
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
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Tab List Panel
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
General properties define the basic design of your tab list panel.
Full Size
Enabling this allows your panel to fill the application page.
Tab List Position
Specified where the tabs should be displayed on the page. Options: Top, Left
Use Smaller Fonts for Tabs
Enabling this allows your tab titles to use a smaller font size.
Target Section Name
Name of the section in your layout targeted by the Tab List Panel.
Tabs
Tabs properties allows you to configure the tabs in your Tab Panel.
Startup Tab Index
Selects the name of the tab that should be opened by default.
Manage Tabs
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
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Tab Panel
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.
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 basic panel to which you can add more layout elements and build your tab interface.
General
General properties define the basic design of your tab panel.
Full Size
Enabling this allows your panel to fill the application page.
Tab List Position
Specified where the tabs should be displayed on the page. Options: Top, Left
Use Smaller Fonts for Tabs
Enabling this allows your tab titles to use a smaller font size.
Tabs
Tabs properties allows you to configure the tabs in your Tab Panel.
Startup Tab Index
Selects the name of the tab that should be opened by default.
Manage Tabs
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
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
Tag Panel
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.
For more details about Tag Panel features from the end user perspective visit Tag Panel page.
Toolbar
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
General properties define the basic design of your toolbar.
View Mode
Determines the shade of your toolbar. Options: Normal (default), Light, Transparent, Custom
Style
Style properties are available only when the View Mode is set to Custom.
CSS Background
Defines the toolbar background using CSS notation.
Help
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.
Help Html
Allows you to write Html code that is rendered as help text for your panel.
Position
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
Step Order Index (Number)
Allows you to define the order within the intro tour.
View Dependent Panel
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
Screen Size properties determine the visibility of your view dependent panel based on screen size.
Visible on Small Screen
Enabling this ensures your panel is displayed on devices with small screens.
Visible on Medium Screen
Enabling this ensures your panel is displayed on devices with medium-sized screens.
Visible on Large Screen
Enabling this ensures your panel is displayed on devices with larger screens.
Input Type
Input Type properties define whether your panel can be accessed and used based on the input capabilities of devices.
Visible on Touch Devices
Enabling this ensures your panel is displayed on touch-enabled devices.
Visible on Mouse Devices
Enabling this ensures your panel is displayed on devices that support using a mouse.
Last updated
Was this helpful?