Docs
ServoyCloudSupportSamplesOpen SourceCommunity
  • Home
  • GUIDES
    • Platform Overview
    • Get Servoy
    • Get Started
      • Chapter 0
      • Chapter 1
      • Chapter 2
      • Chapter 3
      • Chapter 4
      • Chapter 5
    • Get Help
      • SuLA Instructions
      • SuLA Terms
    • Develop
      • Application Design
        • Forms
          • Layout Management
            • Simple Layout
            • Fully Responsive
              • Bootstrap 12-Grid
              • Flexbox
              • Custom Div
              • Collapsible Container
              • Simple Collapsible
              • Center Container
              • Inline Group Container
            • Abstract Form
          • Form Containers
            • Form Container
            • Tab Panel
            • Split Pane
            • Collapse
            • Accordion Panel
            • Form Component
            • List Form Component
          • Form Inheritance
          • Form Components
        • UI Components
          • Buttons and Text
            • Badge
            • Button
            • Data Label
            • Dropdown
            • Image
            • Label
          • Grids
            • Data Grid
            • Power Grid
            • Table
          • Input Controls
            • Calendar
            • Calendar Inline
            • Checkbox
            • Choice Group
            • Combobox
            • Group Buttons
            • Html Area
            • Input Group
            • Rating
            • Slider
            • Switch
            • Spinner
            • TextArea
            • Textbox
            • TextBoxGroup
            • Type Ahead
            • select2tokenizer
          • Media
            • Carousel
            • Embedded YouTube
            • File upload
            • Image label
            • Lightbox Gallery
            • MultiFile Upload
            • PDF JS Viewer
            • PDF Viewer
          • Mobile
            • Native Data List
            • Native Select
          • Navigation
            • Breadcrumbs
            • Navbar
            • sidenav
          • Visualization
            • DBTreeview
            • Progress Bar
            • Treeview
            • ChartJS
              • Data Labels Plugin
              • Funnel Chart
              • OutLabels Plugin
              • TreeMap
          • Specialized Components
            • Smart Document Editor
            • Servoy PDF Viewer
            • Fullcalendar Component
              • Fullcalendar
              • Fullcalendar Events
              • Migrating calendar from Smart and Web client to NG client
            • Fullcalendar Component 2
            • Canvas
            • Google Charts
            • Google Maps
            • svySignature
            • svywebcam
        • Styling and Themes
          • Default Theme Properties
          • CSS / LESS
          • Component Variants
          • Font Icons
        • Data Modeling
          • Databases
            • Tables
              • Columns
              • Calculations
              • Aggregations
              • Methods
              • Events / Triggers
              • Table security
            • Views
            • Procedures
          • Relations
          • Value Lists
          • Menus
          • In-Memory Databases
          • View Datasource
        • Modular Design
      • Programming Guide
        • Scripting the UI
          • Scripting Forms
          • Interacting with Components
          • Navigation
          • Windows, Dialogs and Popups
          • Events Manager
        • Working with Data
          • Concepts
          • Loading
          • Sorting
          • Iterating
          • Searching
            • Find mode
            • Query Builder
            • SQL String
          • Filtering
          • Editing
          • Validation
        • Automation and Scheduling
          • Batch Processor
          • Headless API
          • Scheduler API
        • Creating REST APIs
        • Consuming Webservices
        • Working with Files
          • File Plugin Basics
          • Images
          • Excel
          • PDF
          • JSON
        • Browser Utilities
          • Notifications
            • Web Notifications (Toastr)
            • Web Notifications (Native)
            • Block UI
          • Session Management
          • Keyboard Utilities
          • NG Utils
        • Sending and Receiving Email
        • Servoy Jasper Reports
          • Input Type
          • Display Mode
          • Output format
          • Jaspe Reports Viewer
        • Extensions
          • Modules
            • svyPhonegap
              • First Use Guide
              • Barcode Scanner
              • Browser
              • Camera
              • File
              • Fingerprint
              • Location
              • Network Interface
              • Phonegap
              • Printer
              • Push Notifications
            • svyAPI
              • Getting Started
            • svyLookup
              • Custom Templates
              • API Documentation
              • svyLookup v1
                • API Documentation v1.0.0
                • Base Form svyLookupTable v1.0.0
                • Base Form AbstractLookup v1.0.0
            • svyNavigation
              • API Documentation
                • API svyNavigation
                • API svyNavigationHistory
                • API svyNavigationUX
            • svyPopupFilter
              • Simple Filter Pickers
              • Custom Templates
              • API Documentation
                • API svyToolbarFilter
                • API svyPopupFilter
              • API Documentation v1
                • API svyToolbarFilter v1
                • API svyPopupFilter v1
            • svySearch
            • svySecurity
              • Overview
              • Token-based Auth and SSO (NEW!)
              • API Documentation
              • Getting Started
              • Tenant replication
              • Security Management Console
                • Classic Security Management Console
              • svySecurityUX
              • svyProperties
              • API Doc svyProperties
            • svyUtils
              • Log Manager
              • Log Manager Appenders
              • Smart Doc Editor Utils
              • Custom Dialogs
              • Excel Utils
                • Full API Reference
              • Crypto Utils
      • Security
        • Authentication
        • Permissions
          • UI Permissions
          • Data Permissions
          • Runtime Permissions
        • Audit Logging
        • OAuth
        • JWT
      • Multi-Language Support
      • Mobile Development
        • Getting Started
        • Mobile Design
        • Native Mobile Integrations
        • Building a Native Binary for the App Store
      • Native Desktop Development
        • NGDesktop UI plugin
        • NGDesktop Utils
        • NGDesktop File Plugin
    • Deploy
      • WAR Deployment
      • Docker Deployment
      • Server Configuration
        • Server Settings
        • Server Plugins
        • Database Servers
          • Locks
          • Transactions
          • Oracle
          • SQLServer
        • Client Sessions
        • Batch Processors
        • License Management
        • Monitoring
          • Server Log
          • Browser Console Log
          • Websocket Log
          • Query Performance
          • Client Performance
          • Client Event Tracing
          • Monitoring Servoy with JMX
      • NGClient deployment
      • Troubleshooting
      • Other Topics
        • Security: Cross-site Scripting
        • Running in an iFrame
    • Extend
    • Contribute
  • Reference
    • Servoy Core
      • Object Model
        • Database Server
          • Table
            • Column
            • Calculation
            • Method
            • Aggregation
          • View
          • Procedure
        • Solution
          • Form
          • Form Component
          • Relation
          • Relation Item
          • Table Node
          • Value List
          • Menu
          • Menu item
          • In-Memory Data Source
          • View Foundset Data Source
          • Variable
          • Column Info
          • Media
          • Layout Container
          • Method
        • i18n Message Key
      • Developer API
        • Globals
        • Forms
          • RuntimeForm
            • controller
            • containers
              • RuntimeContainer
            • elements
              • Component
              • RuntimeAccordionPanel
              • RuntimeBean
              • RuntimeButton
              • RuntimeCalendar
              • RuntimeCheck
              • RuntimeCombobox
              • RuntimeComponent
              • RuntimeDataButton
              • RuntimeDataLabel
              • RuntimeGroup
              • RuntimeHtmlArea
              • RuntimeImageMedia
              • RuntimeInsetList
              • RuntimeLabel
              • RuntimeListBox
              • RuntimePassword
              • RuntimePortal
              • RuntimeRadio
              • RuntimeChecks
              • RuntimeRadios
              • RuntimeRectangle
              • RuntimeRtfArea
              • RuntimeSpinner
              • RuntimeSplitPane
              • RuntimeTabPanel
              • RuntimeTextArea
              • RuntimeTextField
              • RuntimeWebComponent
        • JS Lib
          • Array
          • BigInt
          • Boolean
          • Date
          • Function
          • IterableValue
          • Iterator
          • JSON
          • Map
          • Set
          • Math
          • Namespace
          • Number
          • Object
          • Promise
          • QName
          • RegExp
          • Special Operators
          • Statements
          • String
          • XML
          • XMLList
        • Application
          • APPLICATION_TYPES
          • CLIENTDESIGN
          • DRAGNDROP
          • ELEMENT_TYPES
          • LOGGINGLEVEL
          • NGCONSTANTS
          • UICONSTANTS
          • CSSPosition
          • JSDimension
          • JSDNDEvent
          • JSEvent
          • JSLogger
          • JSLogBuilder
          • JSPoint
          • JSUpload
          • JSWindow
          • JSBounds
          • Renderable
          • UUID
        • SolutionModel
          • ALIGNMENT
          • ANCHOR
          • BEVELTYPE
          • CURSOR
          • DEFAULTS
          • FONTSTYLE
          • MEDIAOPTION
          • PAGEORIENTATION
          • PRINTSLIDING
          • SCROLLBAR
          • TITLEJUSTIFICATION
          • TITLEPOSITION
          • UNITS
          • JSBean
          • JSButton
          • JSCalculation
          • JSComponent
          • JSDataSourceNode
          • JSField
          • JSForm
          • JSLabel
          • JSMedia
          • JSMethod
          • JSPart
          • JSPortal
          • JSRelation
          • JSRelationItem
          • JSStyle
          • JSTab
          • JSTabPanel
          • JSValueList
          • JSVariable
          • JSTitle
          • JSChecks
          • JSCombobox
          • JSHeader
          • JSInsetList
          • JSList
          • JSPassword
          • JSRadios
          • JSText
          • JSTextArea
          • JSWebComponent
          • JSLayoutContainer
        • Database Manager
          • QUERY_COLUMN_TYPES
          • SQL_ACTION_TYPES
          • JSColumn
          • JSDataSet
          • JSBaseRecord
          • JSBaseSqlRecord
          • JSBaseFoundset
          • JSBaseSQLFoundset
          • JSFoundSet
          • JSFoundSetUpdater
          • JSRecord
          • JSRecordMarker
          • JSRecordMarkers
          • JSTable
          • JSTableFilter
          • MenuFoundSet
          • MenuItemRecord
          • QBAggregate
          • QBAggregates
          • QBCase
          • QBCaseWhen
          • QBColumn
          • QBColumns
          • QBCondition
          • QBFunction
          • QBFunctions
          • QBGroupBy
          • QBJoin
          • QBJoins
          • QBLogicalCondition
          • QBParameter
          • QBParameters
          • QBPart
          • QBResult
          • QBSearchedCaseExpression
          • QBSelect
          • QBSort
          • QBSorts
          • QBTableClause
          • QBWhereCondition
          • ViewFoundSet
          • ViewRecord
        • Events Manager
          • EVENTS_AGGREGATION_TYPES
          • EventType
        • Menus
          • JSMenu
          • JSMenuItem
        • JSMenuDatasource
        • Utils
        • Client Utils
          • JSBlobLoaderBuilder
        • History
        • Security
        • i18n
        • ServoyException
          • DataException
        • JSUnit
        • Datasources
          • DBDataSource
          • DBDataSourceServer
          • JSConnectionDefinition
          • JSDataSource
          • MemDataSource
          • MenuDataSource
          • SPDataSource
          • SPDataSourceServer
          • ViewDataSource
        • JSViewDatasource
        • servoyDeveloper
        • enum
    • Server plugins
    • Extensions
      • UI Components
        • Buttons and Text
          • Badge
          • Button
          • Data Label
          • Drop Down
          • Image
          • Label
        • Form Containers
          • Accordion Panel
          • Collapse
          • Form Container
          • Form Component Container
          • List Form Component
          • Default Loading Indicator
          • Error Bean
          • Portal
          • Responsive Container
          • Servoy Default Navigator
          • Slider
          • Split Pane
          • TabPanel
        • Grids
          • Data Grid
          • Power Grid
          • Table
        • Input Controls
          • Calendar
          • Calendar Inline
          • Checkbox
          • Choice Group
          • Combobox
          • Floatinglabel Calendar
          • Floatinglabel Combobox
          • Floatinglabel Textarea
          • Floatinglabel Textbox
          • Floatinglabel Type Ahead
          • Group Buttons
          • Html Area
          • Input Group
          • Rating
          • Select2tokenizer
          • Slider
          • Spinner
          • Switch
          • TextArea
          • TextBox
          • TextBox Group
          • Type Ahead
        • Media
          • Carousel
          • Embedded YouTube
          • File upload
          • Image label
          • Lightbox Gallery
          • MultiFile Upload
          • PDF JS Viewer
          • PDF Viewer
        • Mobile
          • Native Data List
          • Native Select
        • Navigation
          • Breadcrumbs
          • Navbar
          • sidenav
        • SmartDocEditor
          • Smart Document Editor
        • Visualization
          • Canvas
          • Chart
          • Custom List
          • DBTreeview
          • Foundset List
          • Fullcalendar
          • Gauge
          • Google Maps
          • Kanban
          • Progress Bar
          • Treeview
      • Server Plugins
        • amortization
          • AmortizationCalculation
          • Polynomial
        • clientmanager
          • Broadcaster
          • JSClientInformation (cm)
        • excelxport
        • file
          • JSFile
          • JSProgressMonitor
        • headlessclient
          • JSClient
        • http
          • HTTP_STATUS
          • Cookie
          • DeleteRequest
          • GetRequest
          • HeadRequest
          • HttpClient
          • HttpClientConfig
          • OptionsRequest
          • PostRequest
          • PutRequest
          • Response
          • TraceRequest
          • PatchRequest
          • JSFileUpload
        • images
          • JSImage
        • jwt
          • Algorithm
          • Builder
          • JWTClaims
        • mail
          • Attachment
          • MailMessage
        • maintenance
          • JSClientInformation
          • JSColumnObject
          • JSServer
          • JSTableObject
        • mobileservice
          • OfflineDataDescription
        • oauth
          • ClientAuthentication
          • CustomApiBuilder
          • OAuthProviders
          • OAuthRequest
          • OAuthResponse
          • OAuthResponseBinary
          • OAuthResponseJSON
          • OAuthResponseText
          • OAuthService
          • OAuthServiceBuilder
          • OAuthTokenExtractors
          • RequestType
        • pdf_output
        • rawSQL
        • RestWs plugin
        • rest_ws
          • WsContents
          • WsCookie
          • WsRequest
          • WsResponse
        • scheduler
        • serialize
        • textxport
          • DataProviderExport
          • TabExporter
        • udp
          • JSPacket
        • XmlReader
          • XmlNode
      • Browser Plugins
        • Block UI
        • Block UI (ref)
        • Dialogs Plugin
        • Idle
        • Idle (ref)
        • Key Listener
        • Key Listener (ref)
        • NGDesktop File
        • NGDesktop File (ref)
        • NGDesktop UI (ref)
        • NGDesktop Utils (ref)
        • NG Utils (ref)
        • Office Javascript API for Servoy
        • Phonegap
        • Web Notifications (Native)
        • Web Notifications (Toastr)
        • Window Plugin
        • Font Awesome
      • Modules
        • Smart Doc Editor Utils
        • svyAPI
          • Getting Started
        • svyLookup
          • Custom Templates
          • API Documentation
          • svyLookup v1
            • API Documentation v1.0.0
            • Base Form svyLookupTable v1.0.0
            • Base Form AbstractLookup v1.0.0
        • svyLookupExample
        • svyNavigation
          • API Documentation
            • API svyNavigation
            • API svyNavigationHistory
            • API svyNavigationUX
        • svyNavigationUX
        • svyNavigationUXSample
        • svyPopupFilter
          • Simple Filter Pickers
          • Custom Templates
          • API Documentation
            • API svyToolbarFilter
            • API svyPopupFilter
          • API Documentation v1
            • API svyToolbarFilter v1
            • API svyPopupFilter v1
        • svyProperties
        • svySearch
        • svySecurity
          • Overview
          • Token-based Auth and SSO (NEW!)
          • API Documentation
          • Getting Started
          • Tenant replication
          • Security Management Console
            • Classic Security Management Console
          • svySecurityUX
          • svyProperties
          • API Doc svyProperties
        • svySecurityConsole
        • svySecurityUX
        • svyUtils
          • Log Manager
          • Log Manager Appenders
          • Smart Doc Editor Utils
          • Custom Dialogs
          • Excel Utils
          • Full API Reference
          • Crypto Utils
        • svyUtils$Excel
        • svyUtils$NGClient
        • svyUtils$customDialogs
        • svyUtils$logManagerAppenders
        • svyUtils$tableGrid
      • Layout
        • Boostrap 12grid layout
          • Collapsible Container
          • Simple Collapsible
          • Center Container
          • Inline Group Container
          • Flexbox Layout
      • Solutions
        • Sample Application
          • Tutorial Part 1
          • Tutorial Part 2
      • Packages
        • UI Component Packages
          • Advanced Renderers
          • Bootstrap Components
          • Bootstrap Extra Components
          • Canvas
          • Chart JS
          • Fullcalendar Component
          • googlemaps
          • kanban
          • Servoy Core
          • Servoy Extra Components
          • Servoy NG-Grids
          • Servoy PDF Viewer
          • smartDocumentEditor
        • Browser Plugin Packages
          • Block UI
          • Core NG only Services
          • Key Listener
          • NGDesktop File
          • NGDesktop UI
          • NGDesktop Utils
          • Web Notifications
          • Idle Web Service
    • Servoy Developer
      • Menu
        • File
        • Edit
        • Source
        • Refactor
        • Navigate
        • Search
        • Project
        • Actions
        • Run
        • Window
        • Help
      • Toolbar
      • Solution Explorer
        • Resources
          • Database Servers
            • Database Server
              • Procedures
              • Tables
              • Views
          • Security
          • i18n
        • All Solutions
          • Solution
          • Active Solution
            • Scopes
              • Scope
                • Variables
            • Forms
              • Working Set
              • Form
                • Controller
                • Variables
                • Elements
                • Relations
            • Form Components
              • Form Component
            • Relations
              • Relation
            • ValueLists
              • ValueList
            • Menus
              • Menu
                • MenuItem
            • Media
              • Folder
              • File
            • DataSources
              • In Memory DataSources
                • In Memory DataSource
              • View Foundsets DataSources
                • View Foundset DataSources
            • Servoy Packages
              • Package
            • Modules
              • Module
        • Solution Explorer Contextual List
      • Views
        • Command Console
        • Console
        • Problems
        • Tasks
        • Bookmarks
        • Search
        • Form Hierarchy
        • Help
        • JUnit
        • Outline
        • Profiler
        • Properties
        • Project Explorer
        • Call Hierarchy
      • Editors and Wizards
        • Property configurator for columns
        • Relation Editor
        • Text Format Editor
        • Date Format Editor
        • Number Format Editor
        • Database Synchronization Wizard
        • Security Editor
        • SQL Editor
        • i18n Editor
        • File Import Wizard
        • File Export Wizard
        • WAR Export Wizard
        • NGDesktop Export Wizard
        • Table Editor
        • Metadata Synchronization Wizard
        • Database Server Connection Editor
        • Text Property Editor
        • Valuelist Editor
        • Form Editor
          • Parts of the Form Editor
          • Designing a Form
          • Layout Tools
          • Using Containers
          • Creating and Using Forms
          • Using Servoy Beans
          • Using Shapes
          • Form Editor Subtabs
          • [Tips and Shortcuts][reference/servoy-developer/object-editors/form-editor-tips_and_shortcuts.md]
          • Editong a Responsive LayoutForm
          • CSS Positioning
        • Form Hierarchy
        • Component Properties Editor
        • Variable Editor
        • Method Selection Wizard
        • New Solution Wizard
        • Application Event Types Editor
        • New Form Wizard
        • Form Dataproviders Configurator
        • Servoy Resource Locator
        • Datasource Selection Wizard
        • Sorting Fields Wizard
        • Scripting Editor
          • Getting Started-Overview of Script Editor
          • Code Writing Features
          • Code Navigation
          • Code Rewriting Tools
          • Refactoring
          • Code Formatting
          • Script Editor Tips and Shortcuts
          • Unit Tests
        • Theme Editor
          • General Properties
          • Sidenav Properties
          • Navbar Properties
          • Tabs Properties
          • Windows Properties
          • Dialogs Properties
          • Tables Properties
          • Breadcrumb specific style Properties
          • Brand colors Properties
          • Validations Properties
          • Margins and Padding Properties
        • Editor Selection
        • Run Configurations
        • Debug Configurations
        • Externalize Strings Wizard
        • Font Chooser Wizard
        • Color Chooser Wizard
        • Project Properties Configurator
        • Move Wizard
        • External Tools Configurations
        • About Servoy Developer
        • Servoy Developer Installation Details
        • Eclipse Marketplace Wizard
        • Install Available Software Wizard
        • Cheat Sheet Selection Wizard
        • Servoy Developer Help Wizard
        • Switch to Editor Wizard
        • Find Actions Wizard
        • Customize Perspective Configurator
        • Quick Search Wizard
        • Search Wizard
        • Encoding Wizard
        • Task Wizard
        • Find - Replace Wizard
        • Properties Editor
        • New Project Wizard
        • New Method Wizard
        • New Menu Wizard
          • New MenuItem Wizard
        • Menu Editor
        • ServoyMenu Selection Wizard
        • JSMenu compatible component selector
        • Permissions Configuration Dialog
      • Project File Structure
        • Servoy Installation Directory
          • servoy.properties
        • Workspace Folder
          • Resources Directory
            • Database Information (.dbi) Files
          • Solution Folder
      • Package Manager
      • Preferences
      • Property Types for components / services
      • Debugger
        • Debug Explorer
        • Breakpoints
          • Breakpoint Properties
        • Variables
        • Expressions
        • Interactive Console
    • Application Server
    • Servoy Cloud
      • Cloud Control Center
        • Home
          • Setup Namespace
          • User profile
            • My Profile
            • Support
        • Download IDE
        • Application Overview
          • Applications
            • Pipelines
              • Jobs
                • Packages
                  • Commits
                  • Artifacts
                  • Configuration
                  • Quality reports
                  • Build markers
                • Job Configuration
                  • Build and Deploy or Build
                  • Mobile
                  • Desktop
            • Environments
              • Metrics
                • Users
                • Databases
                  • Metrics
                • System Health
                • Log Activity
                • App performance
                • Query performance
              • Cloud reporting
            • Security
              • Permissions
              • Tenants
            • Reports
            • Security Login Designer
              • Single Sign-On
                • Sign in with Google
                • Sign in with Microsoft
          • Code Repositories
        • Project Management
          • Tickets
          • Backlog
          • Active Sprints
        • User Management
          • Users
          • Roles
        • Administration
          • Security
            • ServoyCloud Roles
          • Credentials
          • Settings
        • Add-Ons
      • Database Backup
      • E2E Cypress Testing
        • Using Cypress
      • On-Premise Deployment
      • Privacy policy (ServoyAI)
      • FAQ
      • Migrate to Servoy Cloud
    • Extensions Developement
      • Component and Services
        • Component Development
        • Service Development
        • Tools and Dev Tips to use for Component/Service developement
        • Manifest (.mf file)
        • Specification (.spec file)
          • Property Types
            • Array property types
            • Custom object property types
            • Findmode property type
            • Foundset property type
            • Tags
        • Directives And Filters
          • Sablotabsequence
        • Console (serverside)
        • ServoyApi (serverside)
      • Serverside Plugins
        • Data Convertors and Validators
        • UI Convertors
  • Release notes
    • Release notes
      • 2025.03
      • 2024.03 (LTS)
      • 2023.03 (LTS)
      • 2025.03 (Servoy Cloud)
      • 2024.12
      • 2024.12 (Servoy Cloud)
      • 2024.09
      • 2024.09 (Servoy Cloud)
      • 2024.06
      • 2024.06 (Servoy Cloud)
      • 2024.03 (Servoy Cloud)
      • 2023.12
      • 2023.12 (Servoy Cloud)
      • 2023.09
      • 2023.09 (Servoy Cloud)
      • 2023.06
      • 2022.03 (LTS)
      • 2022.12 What's new
      • 2022.12
      • 2022.09 What's new
      • 2022.09
      • 2022.06 What's new
      • 2022.06
      • 2021.03.3 (LTS)
Powered by GitBook
On this page
  • Properties
  • animate
  • containedForm
  • enabled
  • footerForm
  • headerForm
  • iconCloseStyleClass
  • iconCollapseStyleClass
  • iconExpandStyleClass
  • iconOpenStyleClass
  • location
  • menu
  • open
  • relationName
  • responsiveHeight
  • scrollbarPosition
  • servoyMenu
  • sidenavWidth
  • slideAnimation
  • slidePosition
  • styleClass
  • tabSeq
  • togglePosition
  • visible
  • Events
  • onMenuItemCollapsed(menuItemId,event)
  • onMenuItemExpanded(menuItemId,event)
  • onMenuItemSelected(menuItemId,event)
  • onOpenToggled(event)
  • API
  • addMenuItem(menuItem,menuItemId,index)
  • clearMenuItems(depth)
  • getLocation(menuItemId)
  • getMenuItem(menuItemId)
  • getParentMenuItem(menuItemId)
  • getRootMenuItems()
  • getSelectedMenuItem(level)
  • getSize(menuItemId)
  • getSubMenuItems(menuItemId)
  • isMenuItemEnabled(menuItemId)
  • isMenuItemExpanded(menuItemId)
  • removeMenuItem(menuItemId)
  • removeSubMenuItems(menuItemId)
  • setMenuItemEnabled(menuItemId,enabled)
  • setMenuItemExpanded(menuItemId,expanded,mustExecuteOnMenuItemExpand)
  • setRootMenuItems(menuItems)
  • setSelectedMenuItem(menuItemId,mustExecuteOnMenuItemSelected,mustExecuteOnMenuItemExpand,level)
  • setSelectedMenuItemAsync(menuItemId)
  • setSubMenuItems(menuItemId,menuItems)
  • Types
  • MenuItem

Was this helpful?

  1. Reference
  2. Extensions
  3. UI Components
  4. Navigation

sidenav

PreviousNavbarNextSmartDocEditor

Last updated 2 months ago

Was this helpful?

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A component that provides a side navigation menu.

This is a reference page; many components have detailed usage guides here.

Properties

animate

Flag indicating whether animations are enabled. Type: Boolean Default Value: true


containedForm

The form displayed within the sidenav. Type:


enabled

Flag indicating whether the sidenav is enabled for user interaction. Type: Default Value: true


footerForm

The footer form of the sidenav. Type:


headerForm


iconCloseStyleClass


iconCollapseStyleClass


iconExpandStyleClass


iconOpenStyleClass


location

The position of the sidenav on the form. Type: Point


menu

The root menu items for the sidenav. Type: Array<CustomType<servoyextra-sidenav.MenuItem>> Default Value: []


open

Flag indicating whether the sidenav is open. Type: Boolean Default Value: true


relationName


responsiveHeight

Height of the container, set only in responsive forms. Type: Number Default Value: 0


scrollbarPosition

Position of the scrollbar within the sidenav (for example, "left" or "right"). Type: String Default Value: "left"


servoyMenu

A JSMenu object representing the Servoy menu with extra properties (badgeText, badgeStyleClass, formName, relationName, etc.). Type: JSMenu


sidenavWidth

Width of the container Type: Number Default Value: "300"


slideAnimation

Animation type for the slide effect (for example, "slide-menu" or "collapse-menu"). Type: String Default Value: "slide-menu"


slidePosition

Position of the sidenav slide (for example, "left", "right", or "static"). Type: String Default Value: "left"


styleClass


tabSeq


togglePosition

Position of the toggle button (for example, "fixed-toggle", "side-toggle", or "hide-toggle"). Type: String Default Value: "fixed-toggle"


visible


Events

onMenuItemCollapsed(menuItemId,event)

Called when a menu item is collapsed.

Parameters:

  • {Object} menuItemId The unique identifier of the collapsed menu item.

  • {JSEvent} event The event object associated with the collapse.


onMenuItemExpanded(menuItemId,event)

Called when a menu item is expanded.

Parameters:

  • {Object} menuItemId The unique identifier of the expanded menu item.

  • {JSEvent} event The event object associated with the expansion.


onMenuItemSelected(menuItemId,event)

Called when a menu item is selected.

Parameters:

  • {Object} menuItemId The unique identifier of the selected menu item.

  • {JSEvent} event The event object associated with the selection.

Returns: {Boolean}


onOpenToggled(event)

Called when the open state of the sidenav is toggled.

Parameters:

  • {JSEvent} event The event object associated with the toggle action.


API

addMenuItem(menuItem,menuItemId,index)

Add a menu item. The menu is added as sub Menu Item if a menuItemId is provided, otherwise is added in root. If index is provided the menu is added at the specified index position, otherwise is added as last element. Return false if menuItemId cannot be found.

@public Example:

 var menuItem = {
  id: 100,
  text: "Sample Item #1",
  styleClass : "nav-large nav-primary",
  iconStyleClass:  "glyphicon glyphicon-search",
  data: { description: "This is sample information that can be added to a menuItem" },
  menuItems: [{
        id: 101,
        text: "Sub Item #1"
        }, {
        id: 102,
        text: "Sub Item #2"}]
  };
  elements.sideNavigation.addMenuItem(menuItem, 1, 0);

Parameters:

  • {CustomType<servoyextra-sidenav.MenuItem>} menuItem An array containing the menu item(s) to be added. Each menu item should include properties such as `id`, `text`, `styleClass`, `iconStyleClass`, `data`, and optionally `menuItems` for nested sub-menu items.

  • {Object} [menuItemId] Add the item as subMenuItem of the menuItemId. Default add the menuItem as root.

  • {Number} [index] 0-based. The index at which to insert the item. Index value should not be greater then number of sibelings. Default is at the end.

Returns: Boolean Returns `false` if the `menuItemId` cannot be found, otherwise `true` indicating the menu item was successfully added.


clearMenuItems(depth)

Remove all the menu items. If depth is specified removes all the menu items at depth. If depth is equal to 1 all roots will be removed. Default depth is 1.

@public Example:

// clear the whole menu removing all nodes. 
elements.sidenav.clearMenuItems();

// clear menu at depth 2 removes the sub menu items of each root menu.
elements.sidenav.clearMenuItems(2);

Parameters:

  • {Number} [depth] 1-based. Default 1.


getLocation(menuItemId)

Retrieves the screen location of a specific menu item. Returns the location as point (object with x and y properties).

Parameters:

  • {Object} menuItemId The node to retrieve location for.

Returns: Point The location of the menu item.


getMenuItem(menuItemId)

Returns the menuItem object

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to retrieve.

Returns: CustomType<servoyextra-sidenav.MenuItem> The menu item object corresponding to the specified `menuItemId`.


getParentMenuItem(menuItemId)

Returns the parent menuItem object of the menu item with id menuItemId

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item whose parent menu item is to be retrieved.

Returns: CustomType<servoyextra-sidenav.MenuItem> The parent menu item object of the specified `menuItemId`.


getRootMenuItems()

Returns the root menu object

@public

Returns: Array<CustomType<servoyextra-sidenav.MenuItem>> An array of root menu item objects representing the top-level menu structure of the sidenav.


getSelectedMenuItem(level)

Returns the selected menuItem.

@public

Parameters:

  • {Number} [level] If level is provided search for the selected menu item at level.

Returns: CustomType<servoyextra-sidenav.MenuItem> The selected menu item object.


getSize(menuItemId)

Retrieves the size of a specific menu item. Returns the size as dimension (object with width and height properties).

Parameters:

  • {Object} menuItemId The id to retrieve size for.

Returns: Dimension The size of the menu item.


getSubMenuItems(menuItemId)

Returns the sub menu items of the menu item with id 'menuItemId'

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item whose sub-menu items are to be retrieved.

Returns: Array<CustomType<servoyextra-sidenav.MenuItem>> An array of sub-menu items for the specified menu item.


isMenuItemEnabled(menuItemId)

Returns true if the menuItem and all it's ancestors are enabled. Return false if menuItemId cannot be found. *NOTE: The method returns false if any ancestor of the menuItem is not enabled; if the property enabled of the menuItem is set to true, but has a parent with the enabled property set to false, then isMenuItemEnabled returns false. *

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to check.

Returns: Boolean Returns `true` if the specified menu item and all its ancestors are enabled. Returns `false` if the `menuItemId` cannot be found or if any ancestor of the menu item is not enabled.


isMenuItemExpanded(menuItemId)

Returns true if the menuItem is expanded.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to check.

Returns: Boolean Returns `true` if the specified menu item is currently expanded, otherwise `false`.


removeMenuItem(menuItemId)

Remove the menu item and all it's subMenuItems from the tree. Return false if menuItemId cannot be found.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to be removed, including all its sub-menu items.

Returns: Boolean True if the menu item was successfully removed; false if the specified menuItemId could not be found.


removeSubMenuItems(menuItemId)

Remove all the sub menu items of the menu item with id 'menuItemId' Return false if menuItemId cannot be found.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item whose sub-menu items are to be removed.

Returns: Boolean True if the sub-menu items were successfully set; false if the specified menuItemId could not be found.


setMenuItemEnabled(menuItemId,enabled)

Enable or disable the menuItem Return false if menuItemId cannot be found.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to enable or disable.

  • {Boolean} enabled A boolean value where `true` enables the menu item and `false` disables it.

Returns: Boolean Returns `false` if the `menuItemId` cannot be found, otherwise `true` indicating the operation was successful.


setMenuItemExpanded(menuItemId,expanded,mustExecuteOnMenuItemExpand)

Force the menuItem to be expanded or collapsed. Return false if menuItemId cannot be found or is disabled.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to expand or collapse.

  • {Boolean} expanded Force the menuItem to expand if true, is collapsed otherwise

  • {Boolean} [mustExecuteOnMenuItemExpand] Force the onMenuItemExpand to be executed. Default false.

Returns: Boolean Returns `false` if the `menuItemId` cannot be found or is disabled, otherwise `true` indicating the operation was successful.


setRootMenuItems(menuItems)

Init the menu setting the root menuItems.

@public Example:

var menu = [{
 id: 1,
 text: "Sample Item #1",
 styleClass : "sn-large",
 iconStyleClass:  "glyphicon glyphicon-search",
 data: { description: "This is sample information that can be added to a menuItem" },
 menuItems: [{
   id: 5,
   text: "Sub Item #1"
   }, {
   id: 6,
   text: "Sub Item #2"
 }]
 }, {
 id: 2,
 text: "Sample Item #2"
 },{
 isDivider: true
 },{
 id: 3,
 text: "Sample Item #3",
 enabled: false
 }];
 elements.sideNavigation.setRootMenuItems(menu);

Parameters:

  • {Array<CustomType<servoyextra-sidenav.MenuItem>>} menuItems Is an array of MenuItem objects. A MenuItem type is like this {{id: String|Number, text: String=, styleClass: String=, iconStyleClass: String=, enabled: Boolean=, data: Object=, menuItems: Array=, isDivider : Boolean=}} Each MenuItem object should set the required properties 'id', which uniquely identifies the menuItem object in menu, and 'text' property. The MenuItem may contain the optional properties 'styleClass', 'iconStyleClass', 'data', 'enabled', 'menuItems', 'isDivider'


setSelectedMenuItem(menuItemId,mustExecuteOnMenuItemSelected,mustExecuteOnMenuItemExpand,level)

Select the menu item with the given id. If level is provided search is optimized since it will search only within the descendant of the selected menuItem at level. For example if a root menuItem is selected and level is equal 2 search only in the subMenuItems of the selected root. Return false if menuItemId cannot be found or is disabled.

@public

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to select.

  • {Boolean} [mustExecuteOnMenuItemSelected] Force the onMenuItemSelect to be executed. Default false.

  • {Boolean} [mustExecuteOnMenuItemExpand] Force the onMenuItemExpand to be executed. Default false.

  • {Number} [level] Reduce the search to the selected menuItem at level, if any menuItem is selected at level.

Returns: Boolean Returns `true` if the menu item is successfully selected, otherwise `false` if the `id` cannot be found or the menu item is disabled.


setSelectedMenuItemAsync(menuItemId)

@deprecated use setSelectedMenuItem(id, false, false) instead.

Select the menu item with the given id.

This function doesn't wait for a return value; use setSelectedMenuItem if you want to know if the menu item can be select successfully @public

Parameters:

  • {Object} menuItemId


setSubMenuItems(menuItemId,menuItems)

Set the menuItems as sub menu items of the menu item with id 'menuItemId' Return false if menuItemId cannot be found.

@public Example:

var menuItems = [{
 id: 10,
 text: "Sample Item #1",
 styleClass : "sn-large",
 iconStyleClass:  "glyphicon glyphicon-search",
 data: { description: "This is sample information that can be added to a menuItem" },
 menuItems: [{
   id: 12,
   text: "Sub Item #1"
   }
 }]
 }, {
 id: 11,
 text: "Sample Item #2"
 },{
 isDivider: true
 }];
 elements.sideNavigation.setSubMenuItems(menuItems);

Parameters:

  • {Object} menuItemId The unique identifier of the menu item to which the provided sub-menu items should be added.

  • {Array<CustomType<servoyextra-sidenav.MenuItem>>} menuItems String|Number, text: String=, styleClass: String=, iconStyleClass: String=, enabled: Boolean=, data: Object=, menuItems: Array=, isDivider : Boolean=}>} menuItems is an array of MenuItem objects. Each MenuItem object should set the required properties 'id', which uniquely identifies the menuItem object in menu, and 'text' property. The MenuItem may contain the optional properties 'styleClass', 'iconStyleClass', 'data', 'enabled', 'menuItems', 'isDivider'.

Returns: Boolean Returns `false` if the `menuItemId` cannot be found, otherwise `true` indicating the sub-menu items were successfully set.


Types

MenuItem

Represents a menu item in the sidenav. scripting type: CustomType<servoyextra-sidenav.MenuItem>

  • badgeStyleClass

    • CSS style classes applied to the badge.

    • Default Value: "badge text-bg-secondary"

  • badgeText

    • Badge text displayed with the menu item.

  • data

    • Custom data associated with the menu item.

    • Type: object

  • enabled

    • Flag indicating whether the menu item is enabled.

    • Type: boolean

    • Default Value: true

  • formName

    • The name of the form to be opened when the menu item is selected.

  • iconStyleClass

    • CSS style classes applied to the menu item's icon.

  • id

    • Unique identifier of the menu item.

    • Type: object

  • isDivider

    • Flag indicating whether the menu item is a divider.

    • Type: boolean

    • Default Value: false

  • menuItems

    • An array of child menu items (sub-menu items).

    • Type: MenuItem[]

  • relationName

    • The relation name used to link to the form.

  • styleClass

    • CSS style classes applied to the menu item.

  • text

    • The text label of the menu item.

  • tooltip

    • Tooltip text for the menu item.


The header form of the sidenav. Type:

CSS style classes for the icon when the sidenav is closed. Type: Default Value: "fa fa-bars"

CSS style classes for the icon used to collapse a menu item. Type: Default Value: "fa fa-caret-down"

CSS style classes for the icon used to expand a menu item. Type: Default Value: "fa fa-caret-right"

CSS style classes for the icon when the sidenav is open. Type: Default Value: "fa fa-bars"

The relation name used to link the contained form to data. Type:

CSS style classes applied to the sidenav container. Type:

Tab sequence order for keyboard navigation. Type:

Flag indicating whether the sidenav is visible. Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Form
Enabled
Form
Form
Styleclass
Styleclass
Styleclass
Styleclass
Relation
Styleclass
Tabseq
Visible
styleclass
tagstring
form
styleclass
relation
styleclass
tagstring
tagstring