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
  • Properties
  • accordionMode
  • collapsibles
  • expandedIndices
  • styleClass
  • tabSeq
  • visible
  • Events
  • onCardClicked(event,card,collapsible,cardIndex,collapsibleIndex,dataTarget)
  • onCollapsibleHidden(event,collapsible,collapsibleIndex)
  • onCollapsibleShown(event,collapsible,collapsibleIndex)
  • onHeaderClicked(event,collapsible,collapsibleIndex,dataTarget)
  • onHeaderDoubleClicked(event,collapsible,collapsibleIndex,dataTarget)
  • API
  • addCollapsible(collapsible,index)
  • createCard(textOrHtml,cardId,styleClass)
  • createCollapsible(headerHtml,collapsibleId)
  • getCard(cardIndex,collapsibleIndex)
  • getCardById(cardId)
  • getCollapsible(index)
  • getCollapsibleById(collapsibleId)
  • hide(index)
  • isCollapsed(index)
  • removeAllCollapsibles()
  • removeCollapsibleAt(index)
  • removeCollapsibleById(collapsibleId)
  • setCollapsibles(collapsibles)
  • show(index)
  • toggle(index)
  • Types
  • card
  • collapsible

Was this helpful?

  1. Reference
  2. Extensions
  3. UI Components
  4. Form Containers

Collapse

PreviousAccordion PanelNextForm Container

Last updated 1 month ago

Was this helpful?

(part of package '') Extends designtime/SolutionModel: Extends runtime:

A Collapse Component that groups multiple collapsible panels.

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

Properties

accordionMode

Determines whether the collapse component behaves in accordion mode (only one panel open at a time). Type: Default Value: true


collapsibles

An array of collapsible objects contained in this component. Type:


expandedIndices

An array of indices representing which collapsibles are currently expanded. Type:


styleClass

CSS style classes applied to the collapse component container. Type:


tabSeq


visible


Events

onCardClicked(event,card,collapsible,cardIndex,collapsibleIndex,dataTarget)

Called when a card within a collapsible is clicked.

Parameters:


onCollapsibleHidden(event,collapsible,collapsibleIndex)

Called when a collapsible is hidden.

Parameters:


onCollapsibleShown(event,collapsible,collapsibleIndex)

Called when a collapsible is shown.

Parameters:


onHeaderClicked(event,collapsible,collapsibleIndex,dataTarget)

Called when a header of a collapsible is clicked.

Parameters:


onHeaderDoubleClicked(event,collapsible,collapsibleIndex,dataTarget)

Called when a header of a collapsible is double-clicked.

Parameters:


API

addCollapsible(collapsible,index)

Adds a new collapsible to the list of collapsibles of this Collapse component

Parameters:


createCard(textOrHtml,cardId,styleClass)

Creates a new card that can be added to any collapsible's cards array

Parameters:


createCollapsible(headerHtml,collapsibleId)

Creates a new collapsible that can be added to the Collapse component using addCollapsible / setCollapsibles

Parameters:


getCard(cardIndex,collapsibleIndex)

Returns the card with the given index

Parameters:


getCardById(cardId)

Returns the card with the given ID

Parameters:


getCollapsible(index)

Returns the collapsible with the given index (0 based)

Parameters:


getCollapsibleById(collapsibleId)

Returns the collapsible with the given ID

Parameters:


hide(index)

Hides the collapsible at the given index (or the first/only one, if no index is given)

Parameters:


isCollapsed(index)

Returns whether the collapsible at the given index (or the first one if no index is provided) is collapsed

Parameters:


removeAllCollapsibles()

Removes all collapsibles. It will also hide the forms that are showing on any of the collpsibles.

If one of the collapsibles has a form showing that denies hide, the removeAllCollapsibles operation will stop and return false. In this case, all collapsibles that had forms and were hidden so far will still be in the collapsible array but they will be 'collapsed'.


removeCollapsibleAt(index)

Remove the collapsible with the given index (the index is 0 based) or the first collapsible if no index is given. If the collapsible was showing a form, it will hide that form as well.

Parameters:


removeCollapsibleById(collapsibleId)

Removes the collapsible with the given ID. If the collapsible was showing a form, it will hide that form as well.

Parameters:


setCollapsibles(collapsibles)

Sets all collapsibles of this Collapse component

Parameters:


show(index)

Shows the collapsible at the given index (or the first/only one, if no index is given)

Parameters:


toggle(index)

Toggles the collapsible at the given index (or the first/only one, if no index is given)

Parameters:


Types

card

Represents a card within a collapsible. scripting type: CustomType<servoyextra-collapse.card>

  • cardId

    • Unique identifier for the card.

  • contentHtml

    • HTML content displayed inside the card.

  • form

    • Optional form associated with the card.

    • Default Value: ""

  • maxResponsiveHeight

    • Maximum responsive height for the card.

    • Default Value: null

  • minResponsiveHeight

    • Minimum responsive height for the card.

    • Default Value: null

  • styleClass

    • CSS style classes applied to the card.

collapsible

Represents a collapsible element within the Collapse component. scripting type: CustomType<servoyextra-collapse.collapsible>

  • bodyStyleClass

    • CSS style classes applied to the collapsible body.

  • cards

    • An array of card objects contained within the collapsible.

  • collapsedIconName

    • Icon name displayed when the collapsible is collapsed.

    • Default Value: "fa fa-2x fa-angle-down"

  • collapsibleHtml

    • HTML content for the collapsible body.

    • Default Value: ""

  • collapsibleId

    • Unique identifier for the collapsible.

  • expandedIconName

    • Icon name displayed when the collapsible is expanded.

    • Default Value: "fa fa-2x fa-angle-up"

  • form

    • Optional form to be displayed within the collapsible.

    • Default Value: ""

  • headerHtml

    • HTML content for the header of the collapsible.

    • Default Value: ""

  • headerStyleClass

    • CSS style classes applied to the collapsible header.

    • Default Value: ""

  • iconLocation

    • Location of the icon relative to the header (e.g. LEFT, RIGHT, HIDDEN).

    • Default Value: "RIGHT"

  • maxResponsiveHeight

    • Maximum responsive height for the collapsible.

    • Default Value: null

  • minResponsiveHeight

    • Minimum responsive height for the collapsible.

    • Default Value: null

  • relationName

    • Relation name used to associate the collapsible with data.

  • styleClass

    • CSS style classes applied to the collapsible container.

    • Default Value: ""


Tab sequence order for keyboard navigation. Type:

Flag indicating whether the collapse component is visible. Type:

{} event The event object associated with the card click.

{} card The card that was clicked.

{} collapsible The collapsible containing the card.

{} cardIndex The index of the clicked card.

{} collapsibleIndex The index of the collapsible.

{} dataTarget The data target identifier for the card.

{} event The event object associated with the hide event.

{} collapsible The collapsible that was hidden.

{} collapsibleIndex The index of the hidden collapsible.

{} event The event object associated with the show event.

{} collapsible The collapsible that was shown.

{} collapsibleIndex The index of the shown collapsible.

{} event The event object associated with the header click.

{} collapsible The collapsible whose header was clicked.

{} collapsibleIndex The index of the collapsible.

{} dataTarget The data target identifier for the header.

Returns: {}

{} event The event object associated with the header double-click.

{} collapsible The collapsible whose header was double-clicked.

{} collapsibleIndex The index of the collapsible.

{} dataTarget The data target identifier for the header.

Returns: {}

{} collapsible The collapsible object to be added to the Collapse component.

{} [index] The 0-based index at which to insert the new collapsible. If not provided, the collapsible is added at the end.

{} [textOrHtml] The text or HTML content to be displayed inside the card.

{} [cardId] The unique identifier for the card. If not provided, an ID may be generated automatically.

{} [styleClass] A custom style class to apply to the card for styling purposes.

Returns: Returns a newly created card object with the specified content, ID, and style class.

{} [headerHtml] The HTML content to be used as the header of the collapsible.

{} [collapsibleId] The unique identifier for the collapsible.

Returns: Returns a newly created collapsible object with the specified header and ID.

{} cardIndex The index of the card to get (0 based)

{} [collapsibleIndex] If not given, the first collapsible is used

Returns: The card or null when not found

{} cardId The unique identifier of the card to retrieve.

Returns: Returns the card object with the specified ID, or `null` if the card is not found.

{} index If not given, the first collapsible is used

Returns: The collapsible or null when not found

{} [collapsibleId] If not given, the first collapsible is used

Returns: The card or null when not found

{} [index] TTe index of the collapsible to hide

{} [index] The 0-based index of the collapsible to check. If omitted, the method checks the first collapsible.

Returns: Returns `true` if the specified collapsible (or the first one by default) is collapsed, otherwise `false`.

Returns: `true` if all collapsibles were removed successfully; `false` if one of the collapsibles had a form which denied hide.

{} [index] The index of the collapsible to remove; if not given, the first collapsible is used

Returns: True if the collapsible at the give index (or 0 if not given) was removed; false if index is out of bounds or if the form shown by this collapsible denied hide.

{} collapsibleId The id of the collapsible to remove.

Returns: True if the collapsible with the given id was removed; false if collapsibleId is not given, not found or if the form shown by this collapsible denied hide.

{} collapsibles An array of collapsible objects to set as the complete list of collapsibles for the Collapse component.

{} [index] The index of the collapsible to show

{} [index] The index of the collapsible to toggle

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

Type:

JSEvent
Number
Number
String
JSEvent
Number
JSEvent
Number
JSEvent
Number
String
Boolean
JSEvent
Number
String
Boolean
Number
String
String
String
String
String
Number
Number
String
Number
String
Number
Number
Boolean
Boolean
Number
Boolean
String
Boolean
Number
Number
string
int
int
string
string
string
string
int
int
CustomType<servoyextra-collapse.card>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.card>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.card>
CustomType<servoyextra-collapse.card>
CustomType<servoyextra-collapse.collapsible>
CustomType<servoyextra-collapse.collapsible>
Array<CustomType<servoyextra-collapse.collapsible>>
card[]
Servoy Extra Components
JSWebComponent
RuntimeWebComponent
here
Boolean
Array<Number>
Array<CustomType<servoyextra-collapse.collapsible>>
Styleclass
Tabseq
Visible
tagstring
form
styleclass
styleclass
tagstring
form
tagstring
styleclass
relation
styleclass