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
    • 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
  • Overview
  • Properties Summarized
  • Commands Summarized
  • Events Summarized
  • Properties Detailed
  • comment
  • dataSource
  • deprecated
  • designTimeProperties
  • encapsulation
  • extendsForm
  • formComponent
  • height
  • initialSort
  • name
  • namedFoundSet
  • navigator
  • scrollbars
  • selectionMode
  • styleClass
  • titleText
  • transparent
  • useMinHeight
  • useMinWidth
  • width
  • Events Detailed
  • onBeforeHide(event)
  • onBeforeRecordSelection(old, new, event)
  • onElementDataChange(oldValue, newValue, event)
  • onElementFocusGained(event)
  • onElementFocusLost(event)
  • onHide(event)
  • onLoad(event)
  • onRecordEditStart(event)
  • onRecordEditStop(record, event)
  • onRecordSelection(event)
  • onResize(event)
  • onShow(firstShow, event)
  • onUnLoad(event)

Was this helpful?

  1. Reference
  2. Servoy Core
  3. Object Model
  4. Solution

Form

Overview

A form is an object that provides an UI and/or contains business logic; it's the basic user interface object in Servoy. The UI of a Form is built up of Form Parts, which in turn contain Elements (and layout containers in case of advanced layout).

Forms are also a unit of scope in Servoy, meaning that forms can have variables and methods attributed to them.

Properties Summarized

Type
Name
Summary

Additional information, such as programmer notes about this form's purpose.

The names of the database server and table that this form is linked to.

Gets the deprecation info for this element.

Property to get and add design-time properties for a component.

The encapsulation mode of this persist.

The selected parent (extended element) for the element (form).

The height of the form in pixels.

The default sort order only when the form loads.

The name of the form.

Property that tells the form to use a named foundset instead of the default foundset.

The navigator (previously named "controller") that is used to control/navigate to the form.

Scrollbar options for the vertical and horizontal scrollbars.

Returns the value of the selectionMode property.

The Cascading Style Sheet (CSS) class name applied to the form.

The text that displays in the title bar of the form window.

When set, the form is transparent.

If true then the min-height css property will be set for this form so it has a default minimum height.

If true then the min-with css property will be set for this form so it has a default minimum width Can return null so that the default system value should be used.

The width of the form in pixels.

Commands Summarized

Type
Name
Summary

void

The method that overrides the Servoy menu item Select > Sort.

Events Summarized

Type
Name
Summary

This method is triggered when the form wants to hide; this will be called before onHide, and should be used to return if this form can be hidden or not.

void

The method that is triggered each time before a record is selected.

Method that is executed when the data in one of the form's component is successfully changed and the onDataChange callback from the component does not exist or exists and returned true.

The method that is triggered when focus is gained by a component inside the form.

The method that gets triggered when focus is lost by a component inside the form.

void

This method is triggered when the form gets hidden.

void

The method that is triggered when a form is loaded/reloaded from the repository; used to alter elements, set globals, hide toolbars, etc; onShow method can also be assigned.

The method that is triggered when a user starts editing a record (for example by clicking into a cell of a table, or editing a field who's data-provider is from that record).

The method that is triggered when a record is being saved.

void

The method that is triggered each time a record is selected.

void

The method that gets triggered when resize occurs.

void

The method that is triggered EVERY TIME the form is displayed; an true argument will be passed to the method if this is the first time the form is displayed.

void

The method that is triggered when a form is unloaded from the repository.

Properties Detailed

comment

Additional information, such as programmer notes about this form's purpose.

Sample

"shows table with order details"

dataSource

The names of the database server and table that this form is linked to.

Sample

example_data.order_details

deprecated

Gets the deprecation info for this element.

Sample

"not used anymore, replaced with ..."

designTimeProperties

Property to get and add design-time properties for a component.

encapsulation

The encapsulation mode of this persist. The following can be used/checked:

  • Public (not a separate option - if none of the below options are selected)

  • Hide in scripting; Module Scope - it will not be available in scripting from any other context except the form itself. Available in designer for the same module

  • Module Scope - it will be available in both scripting and designer, but only in the same module

  • Hide Dataproviders (checked by default) - the form's dataproviders will not be available from any other context except from the form itself

  • Hide Foundset (checked by default) - the form's foundset will not be available from any other context except from the form itself

  • Hide Controller - the form's controller will not be available from any other context except from the form itself

  • Hide Elements (checked by default) - the form's elements will not be available from any other context except from the form itself

  • Hide Containers (checked by default) - the form's containers will not be available from any other context except from the form itself.

Sample

"Hide Dataproviders, Hide Foundset, Hide Elements, Hide Containers"

extendsForm

The selected parent (extended element) for the element (form).

Sample

"ordersForm"

formComponent

height

The height of the form in pixels.

initialSort

The default sort order only when the form loads. This is applied each time an internal SQL query is being executed (find, find-all, open form); and is only executed when no other manual sort has been performed on the foundset.

Sample

"shipname asc,orderid desc"

name

The name of the form.

Sample

"orderDetails"

namedFoundSet

Property that tells the form to use a named foundset instead of the default foundset. When "separate" as special value is specified the form will always create a copy of assigned foundset and therefor become separated from other foundsets. When "empty" it will initially load an empty foundset. When a global relation name it will load the a related foundset.

Sample

"", or "separate" or "empty"

navigator

The navigator (previously named "controller") that is used to control/navigate to the form. The navigator is shown at the left or at the right side of the form, depending on the page orientation.

The following options are available:

-none- - no navigator is assigned. DEFAULT - the Servoy default navigator is assigned. IGNORE - the navigator last assigned to a previous form. Custom - a custom navigator based on a selected form.

scrollbars

Scrollbar options for the vertical and horizontal scrollbars. Each of the vertical and horizontal scrollbars can be configured to display all the time, to display only when needed or to never display.

Sample

horizontal : "when needed"
vertical : "always"

selectionMode

Returns the value of the selectionMode property.

Sample

"" or "SINGLE" or "MULTI"

styleClass

The Cascading Style Sheet (CSS) class name applied to the form.

Sample

"content-panel"

titleText

The text that displays in the title bar of the form window. NOTE: Data tags and Servoy tags can be used as part of the title text.

Sample

"Order Details"

transparent

When set, the form is transparent.

useMinHeight

If true then the min-height css property will be set for this form so it has a default minimum height.

Can return null so that the default system value should be used.

useMinWidth

If true then the min-with css property will be set for this form so it has a default minimum width

Can return null so that the default system value should be used.

width

The width of the form in pixels.

Events Detailed

onBeforeHide(event)

This method is triggered when the form wants to hide; this will be called before onHide, and should be used to return if this form can be hidden or not. Before the form is really going to hide, this form and all the forms that this form is also showing in its ui hierarchy must allow the hide (return true in onBeforeHide - if present).

For example, when using onBeforeHide with showFormInDialog, the form will not close by clicking the dialog close box (X) if the main form in the dialog or any of the other visible forms in tabpanels/containers are nested in the main are returning false.

If the hide operation is allowed for all the forms that are in the affected visible hierarchy, then the onHide handler/method will get called on them as well afterwards.

So this handler (on each form) can be used to validate input in the main form and/or any nested visible forms - that are getting ready to hide.

Parameters

Sample

/*
 * Check if this form can be hidden, return false if this is not allowed.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"E37CE276-2B94-47EC-96DA-D631BC344D52"}
 */
function onBeforeHide(event) {
    //reset form variables:
    dialogTitle = '';
    dialogMessage = '';
    dialogDate = '';
    return true;
}

onBeforeRecordSelection(old, new, event)

The method that is triggered each time before a record is selected. Should return true or false to validate the selection change.

Parameters

Returns: void

Sample

/*
 * Handle record selected.
 *
 * @param {Array<JSRecord<db:/example_data/orders>>} old selected records
 * @param {Array<JSRecord<db:/example_data/orders>>} new selected records
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"5D614C43-89B3-41D5-941B-0C83CA4D3039"}
 */
function onBeforeRecordSelection(event) {
    return true;
}

onElementDataChange(oldValue, newValue, event)

Method that is executed when the data in one of the form's component is successfully changed and the onDataChange callback from the component does not exist or exists and returned true.

Parameters

Sample

/*
 * Handle changed data, return false if the value should not be accepted. In NGClient you can return also a (i18n) string, instead of false, which will be shown as a tooltip.
 *
 * @param oldValue old value
 * @param newValue new value
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"06284668-8CBA-4F90-8C31-D304D486DB5C"}
 */
function onElementDataChange(oldValue, newValue, event) {
    var errors = [];
    var validName = new RegExp(/^[A-Za-z0-9-]*$/gm).test(newName);
    if(!validName) {
        errors.push('invalid');
    }
    if(!newName.length) {
        errors.push('empty');
    }

    return errors.length == 0;
}

onElementFocusGained(event)

The method that is triggered when focus is gained by a component inside the form.

Parameters

Sample

/*
 * Handle focus gained event of an element on the form. Return false when the focus gained event of the element itself shouldn't be triggered.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"7E89E3D4-EF0F-4111-8107-D491884E4114"}
 */
function onElementFocusGained(event) {
    var elementName = event.getElementName();
    elements[elementName].addStyleClass('backgroundGreen');
    return true;
}

onElementFocusLost(event)

The method that gets triggered when focus is lost by a component inside the form.

Parameters

Sample

/*
 * Handle focus lost event of an element on the form. Return false when the focus lost event of the element itself shouldn't be triggered.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"9E5C79CE-4A3A-4DD9-AD48-E9EB0A71BD97"}
 */
function onElementFocusLost(event) {
    var elementName = event.getElementName();
    elements[elementName].removeStyleClass('backgroundGreen');
    return true;
}

onHide(event)

This method is triggered when the form gets hidden.

Return value is DEPRECATED: false return value should no longer be used. In the past, if the onHide method returned false, the form hide could be prevented from happening in some cases (for example, when using onHide with showFormInDialog, the form will not close by clicking the dialog close box (X)). But that lead to unexpected situations when the form being hidden had visible nested children it it (tab panels, splits etc.) because only the current form would decide if hide could be denied, and all other forms, even if they returned false in their on-hide, would not be able to block the hide if this form allowed it. So those nested forms might think that they are still visible even though they are not.

Please use the new onBeforeHide method/handler instead if you want to prevent forms from hiding.

Parameters

Returns: void

Sample

/*
 * Handle form's hide.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"2D7F156A-E2D8-4DE8-82C9-A9419AA9EB88"}
 */
function onHide(event) {
    databaseManager.revertEditedRecords();
}

onLoad(event)

The method that is triggered when a form is loaded/reloaded from the repository; used to alter elements, set globals, hide toolbars, etc; onShow method can also be assigned.

NOTE 1: onShow should be used to access current foundset dataproviders; onLoad cannot be used because the foundset data is not loaded until after the form is loaded. Also calls to loadRecords() should be done in the onShow method and not in the onLoad method. If you call loadRecords() in the onShow method, you may want to set the namedFoundSet property of the form to 'empty' to prevent the first default form query.

NOTE 2: the onLoad event bubbles down, meaning that the onLoad is first fired on the parent then on a tab in a tabpanel (and in tab of that tab panels if you are 3 deep)

Parameters

Returns: void

Sample

/*
 * Callback method when form is (re)loaded.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"106353C5-73F9-4FEB-8391-6F3B46EB7521"}
 */
function onLoad(event) {
    // TODO Auto-generated method stub
    elements.fc_orderslist.putClientProperty(APP_UI_PROPERTY.LISTFORMCOMPONENT_PAGING_MODE, true);
}

onRecordEditStart(event)

The method that is triggered when a user starts editing a record (for example by clicking into a cell of a table, or editing a field who's data-provider is from that record).

Parameters

Sample

/*
 * Callback method form when editing is started.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"061C702A-CE14-4B9A-9393-7BA3D24988A1"}
 */
function onRecordEditStart(event) {
    // TODO Auto-generated method stub
    var elementName = event.getElementName();
    elements[elementName].addStyleClass(‘grayBorder’);
    return true;
}

onRecordEditStop(record, event)

The method that is triggered when a record is being saved. A record is saved when a user clicks out of it (for example on an empty part of the layout or to another form).

When this event handler returns false (for example as part of a validation), the user cannot leave the record (change selected record).

Parameters

Sample

/*
 * Callback method form when editing is stopped, return false if the record fails to validate then the user cannot leave the record.
 *
 * @param {JSRecord<db:/example_data/orders>} record record being saved
 * @param {JSEvent} event the event that triggered the action
 *
 * @return {Boolean}
 *
 * @properties={typeid:24,uuid:"A63A8831-0D38-4526-ADB5-31B519BE97A9"}
 */
function onRecordEditStop(record, event) {
    var elementName = event.getElementName();
    elements[elementName].removeStyleClass('grayBorder');
    return true;
}

onRecordSelection(event)

The method that is triggered each time a record is selected.

NOTE 1: Data and Servoy tag values are returned when the onRecordSelection method is executed. NOTE 2: this will also fire if the selection goes to -1 because the foundset is cleared. So foundset.getSelectedRecord() can return null.

Parameters

Returns: void

Sample

/*
 * Handle record selected.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"5D614C43-89B3-41D5-941B-0C83CA4D3039"}
 */
function onRecordSelection(event) {
    scopes.globals.selected_user_name = foundset.getSelectedRecord().user_name;
}

onResize(event)

The method that gets triggered when resize occurs.

Parameters

Returns: void

Sample

/*
 * Callback method when form is resized.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"57CF650F-0481-42DA-A0C4-13AA2001D877"}
 */
function onResize(event) {
    //setting the dividerLocation of a splitpane at the onResize of the form
    var w = controller.getFormWidth();
    elements.split.dividerLocation = w / 2;
}

onShow(firstShow, event)

The method that is triggered EVERY TIME the form is displayed; an true argument will be passed to the method if this is the first time the form is displayed.

NOTE 1: onShow can be used to access current foundset dataproviders; onLoad cannot be used because the foundset data is not loaded until after the form is loaded. NOTE 2: the onShow event bubbles down, meaning that the onShow event of a form displayed in a tabPanel is fired after the onShow event of the parent.

Parameters

Returns: void

Sample

/*
 * Callback method for when form is shown.
 *
 * @param {Boolean} firstShow form is shown first time after load
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"A8C02494-8CA0-4D89-A332-F308E117D259"}
 */
function onShow(firstShow, event) {
    elements.error.visible = false;
}

onUnLoad(event)

The method that is triggered when a form is unloaded from the repository.

NOTE: Forms can be prevented from being removed from memory by referencing the form object in a global variable or inside an array inside a global variable. But do take care when using this technique. Forms take up memory and if too many forms are in memory and cannot be unloaded, there is a possibility of running out of memory.

Parameters

Returns: void

Sample

/*
 * Callback method when form is destroyed.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"11CEDAE7-ED62-4444-9C02-5E5D7FAC0EA4"}
 */
function onUnload(event) {
    // Unloads the datasource (only do this when no form is using it anymore)
    databaseManager.removeDataSource(uri);
}

PreviousSolutionNextForm Component

Last updated 3 months ago

Was this helpful?

Type

Type

Type the deprecation info for this object or null if it is not deprecated

Type map of the design-time properties

Type the encapsulation mode/level of the persist.

Type the parent

Type

Type

Type

Type

Type

Type

Type

Type one of IForm#SELECTION_MODE_DEFAULT, IForm#SELECTION_MODE_SINGLE and IForm#SELECTION_MODE_MULTI.

Type

Type

Type

Type true if it should use the min-height in the browser

Type true if it should use the min-width in the browser

Type

event the event that triggered the action

Returns:

old selection

new selection

event the event that triggered the action

oldValue old value

newValue new value

event the event that triggered the action

Returns:

event the event that triggered the action

Returns:

event the event that triggered the action

Returns:

event the event that triggered the action

event the event that triggered the action

event the event that triggered the action

Returns:

record record being saved

event the event that triggered the action

Returns:

event the event that triggered the action

event the event that triggered the action

firstShow form is shown first time after load

event the event that triggered the action

event the event that triggered the action

String
String
String
Object
Number
Number
Boolean
Number
String
String
String
Number
Number
Number
String
String
Boolean
Boolean
Boolean
Number
JSEvent
Boolean
Array<JSRecord<${dataSource}>>
Array<JSRecord<${dataSource}>>
JSEvent
${dataproviderType}
${dataproviderType}
JSEvent
Boolean
JSEvent
Boolean
JSEvent
Boolean
JSEvent
JSEvent
JSEvent
Boolean
JSRecord
JSEvent
Boolean
JSEvent
JSEvent
Boolean
JSEvent
JSEvent
String
String
String
Object
Number
Number
Boolean
Number
String
String
String
Number
Number
Number
String
String
Boolean
Boolean
Boolean
Number
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
comment
dataSource
deprecated
designTimeProperties
encapsulation
extendsForm
formComponent
height
initialSort
name
namedFoundSet
navigator
scrollbars
selectionMode
styleClass
titleText
transparent
useMinHeight
useMinWidth
width
onSort
onBeforeHide(event)
onBeforeRecordSelection(old, new, event)
onElementDataChange(oldValue, newValue, event)
onElementFocusGained(event)
onElementFocusLost(event)
onHide(event)
onLoad(event)
onRecordEditStart(event)
onRecordEditStop(record, event)
onRecordSelection(event)
onResize(event)
onShow(firstShow, event)
onUnLoad(event)