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
  • Getting Started
  • Custom Tag Libraries
  • Document Merge
  • PDF Export
  • API Reference
  • DocumentEditor

Was this helpful?

  1. GUIDES
  2. Develop
  3. Programming Guide
  4. Extensions
  5. Modules
  6. svyUtils

Smart Doc Editor Utils

PreviousLog Manager AppendersNextCustom Dialogs

Last updated 8 months ago

Was this helpful?

Contents


Getting Started

Servoy ships a component for rich in-app document editing. To compliment this component, we introduced this svyUtils$documentEditor module as part of the SvyUtils offering. This module provides additional utilities to manage custom tag libraries, document merge and PDF export.

Install the component via the Servoy Package Manager (SPM), if you have not already. Help > Download Install with SPM This is a required dependency.

Then install the svyUtils$documentEditor module, also via the SPM. (Choose the "Modules" tab.) The module should be added as a dependency to your project, and the API will be available to you. You're ready to begin coding.


Custom Tag Libraries

This module provides methods to embed custom data-bound tag libraries in the component with a simple API. The tags allow end users do design custom documents which can easily be . This gives the best experience for end-users, who won't need to understand anything about your database or your code.

For more info on tag libs and how to set tags at design-time, please see the wiki topic on mention feeds.

Basic Example

function createTags() { 
	
	// create editor object (stored as form variable)
	editor = scopes.svyDocEditor.getInstance(elements.editor);
	
	// setup tag library
	editor.tagBuilder(datasources.db.example_data.orders)
		.addField('orderid')
		.addField('shipcity')
		.addField('orders_to_order_details.quantity')
		.build()
}

The list of available field tags is shown in a type-ahead selector whenever the # key is pressed. The result could look something like this:

Customize Tag Display Value

Each tag has a displayValue, which is what the user will see.

editor.tagBuilder(datasources.db.example_data.orders)
		.addField('shipcity', 'Destination City')
		.build()

The result could look something like this:

Showing Related Data

editor.tagBuilder(datasources.db.example_data.orders)
		.addField('orders_to_customers.companyname', 'Customer.Name')

The result could look something like this:

Formatting Data

editor.tagBuilder(datasources.db.example_data.orders)
		.addField('orders_to_customers.registration_date', 'Customer.RegistrationDate', 'dd-MM-yyyy')

Ignore dataprovider validation

editor.tagBuilder(datasources.db.example_data.orders)
		.addField('CURRENT_DATE', 'currentDate', 'dd-MM-yyyy', true)

In the given sample there will be no validation done for the field CURRENT_DATE on the selected datasource.

Repeater Tags

The list of available repeater tags is shown in a type-ahead selector whenever the $ key is pressed. For example:

tagBuilder
    .addField('orders_to_order_details.quantity','Order Details: Quantity')
    .addField('orders_to_order_details.order_details_to_products.productname',
              'Order Details - Product',false)

The result could look something like this:

You can see that a $startRepeater tag was automatically generated for the quantity field. This is ideal, because we know that each order can have many order detail lines. But also notice that no repeater tags were created for the productname field. This is because the (3rd) repeats parameter was explicitly set to false, as we know that order_details_to_products is a 1:1 relation.


Document Merge

When the document is merged, the tags will be replaced with record data. For example:

function mergeTags(){

	// get merged content for the selected record in the form
	content = editor.mergeTags(foundset.getSelectedRecord());
}

The result could look something like this:

Document with tags
Merged content

Overwrites

THe merge function supports also overwrites That means that each tag or repeat or if tag can be validated.

function mergeTags(){

	// get merged content for the selected record in the form
	content = editor.mergeTags(foundset.getSelectedRecord(),true, null, ifParser, mentionOverwrite, repeatOverwrite);
}

As you can see we have 3 extra functions defined in the mergeTags call. Each function will be called for each tag or item that it finds.

ifParser function

In this case the function is called when it is given to the mergeTags function.

function ifParser(realValue, record) {
	application.output('Document Ifparser - realValue: `' + realValue + '` record: `' + record + '`');
	if (realValue == 'canShowDateOfBirth') {
		return false;
	}
	return true;
}

The sample code is checking if the realValue of the ifTag matches the value. When it is doing that it is returning false, in the merge this will result in a complete remove of the block. While true will only remove the if tags.

mentionOverwrite function

In this case the function is called when it is given to the mergeTags function.

function mentionOverwrite(dataprovider, relation, record, value, mentionRealvalue, mentionDisplayValue) {
	application.output('Document mentionCallback -  value: `' + value + "` dataprovider: `" + dataprovider + "` relationName: `" + relation + "` record: `" + record + "` mentionRealValue: `" + mentionRealvalue + "`");
	if (mentionRealvalue === 'CURRENT_DATE') {
		return new Date();
	}
	return value;
}

The sample code is checking if the realValue of the mention matches the value. This can overwrite every value.. and when there is a format set it will also format that value. When you return null it will hide the tag value

repeatOverwrite function

In this case the function is called when it is given to the mergeTags function.

function repeatOverwrite(relationName, mentionRealValue, record) {
	application.output('Document repeatCallback - realValue: `' + mentionRealValue + '` relationName: `' + relationName + '` record: `' + record + '`');
	if (mentionRealValue === 'this_relation_should_not_be_displayed') {
		return false;
	}
	return true;
}

The sample code is checking if the realValue of the mention matches the value. This is almost the same as an ifTag so you can really use it to filter data.

PDF Export

Here's a quick example:

function print(){

    // get exported PDF file as bytes
	var bytes = scopes.svyDocEditor.getExporter()
		.setContent(content)
		.exportToPDF();
	
	// Save file locally and open
	var pdf = plugins.file.createFile('export.pdf')
	plugins.file.writeFile(pdf,bytes);
	plugins.file.openFile(pdf);
}

Export Options

var bytes = scopes.svyDocEditor.getExporter()
		.setMargin(.25, .25, .25, .25)
		.setOrientation(scopes.svyDocEditor.ORIENTATION.LANDSCAPE)
		.setContent(content)
		.exportToPDF();

API Key

Converting rich HTML documents to PDF is no small task and Servoy delivers this functionality as a commercial-strength cloud service, greatly reducing the distribution footprint and developer requirements needed. All you need is an API key and a few lines of code to turn documents into PDFs.

Obtain an API Key

Register your key

There are two ways to register your key:

  1. By Configuration: Open your properties configuration file <SERVOY_HOME>/application_server/servoy.properties and set the following property: svyDocumentEditorAPIKey=<your-secret-key>. This is the preferred approach for deployments. Note: that should only edit the properties file when the Servoy Developer or App Server instance is stopped.

Unlimited Printing


API Reference

A top-level scope svyDocEditor which contains a simple object-oriented API to extend the Smart Docs Editor component.

Class Summary

Class
Summary

An simple object to wrap a document editor component instance, exposing basic methods

Used to build tag libraries to a bound editor instance

Used to generate document exports (PDF)

Field Summary

Type
Name
Summary

ORIENTATION

PAGE_SZE

Method Summary

Return Type
Method
Summary

Gets a new doc editor instance.

Gets an exporter to configure and export documents

Merges a document template with data, returning the merged content.

None

Registers/overrides API key for document export service

Method Details


getInstance

Gets an instance of document editor for the specified component.

Params:

Type
Name
Summary
Required

editor

The real doc editor component

required

Example:

var editor = scopes.svyDocEditor.getInstance(elements.editor);

getExporter

Gets an exporter to configure and export documents

Params: None

Example:

var exporter = scopes.svyDocEditor.getExporter();

mergeTags

Merges a document template with data, executing repeater tags, replacing field tags and returning the merged content.

Params:

Type
Name
Summary
Required

content

The document template to be merged

required

data

The data which will be merged

required

Example:

var displayContent = scopes.svyDocEditor.mergeTags(content, record);

registerAPIKey

Params:

Type
Name
Summary
Required

apiKey

Your private API key

required

Returns: None

Example:

function onOpen(){
    scopes.svyDocEditor.registerAPIKey('AOzDghg+j6786SDlkjSSDT/K76KJghLbsH=');
}

DocumentEditor

An simple class to wrap a document editor component instance, exposing basic methods.

Method Summary

Return Type
Method
Summary

Gets a tag builder instance bound to this editor

Gets the HTML content from this editor object, with options to inline CSS and filter style sheet.

Merges this editor's content with data, includes options to inline CSS and filter style sheet.

Method Details


tagBuilder

Gets a tag builder instance bound to this editor.

Params:

Type
Name
Summary
Required

dataSource

The data source to use for building tags. Can be the name or the actual data source object.

required

Example:

var tagBuilder = editor.tagBuilder(datasources.db.example_data.orders);

getContent

Gets this editor's content, optionally with inline CSS and filtered stylesheet. Ideal to save or export the content.

Params:

Type
Name
Summary
Required

Boolean

withInlineCSS

Option to also inline the CSS when merging. This is recommend if the result will be exported. Note: There is a performance impact, so this parameter should be ignored if the result will be rendered in the component anyway.

optional: default is false

filterStyleSheetName

The style sheet name to filter. Only this style sheet will be inline. This is ideal for a custom style to be used, say in an email template. Note: The path and .css extension should be skipped.

optional

Example:

// FETCH THE CONTENT, IGNORE DOC CSS. IDEAL FOR SAVING THE DOC OR SHOWING IN AN EDITOR COMPONENT
var plainContent = editor.getContent();

// FETCH THE CONTENT, INLINE CSS. IDEAL FOR EXPORTING
var reneredContent = editor.getContent(true);

// FETCH THE CONTENT, INLINE CSS. IDEAL FOR EXPORTING
var filteredContent = editor.getContent(true, 'myCustomStyle');

mergeTags

Params:

Type
Name
Summary
Required

data

The data which will be merged

required

Boolean

withInlineCSS

Option to also inline the CSS when merging. This is recommend if the result will be exported. Note: There is a performance impact, so this parameter should be ignored if the result will be rendered in the component anyway.

optional: default is false

filterStyleSheetName

The style sheet name to filter. Only this style sheet will be inline. This is ideal for a custom style to be used, say in an email template. Note: The path and .css extension should be skipped.

optional

Example:

// MERGE TAGS ON PLAIN CONTENT
var mergedContent = editor.mergeTags(record, true);

// INLINE THE CSS AND MERGE TAGS
var mergedRenderedContent = editor.mergeTags(record, true);

// FILTER FOR STYLE SHEET AND MERGE TAGS
var mergedRenderedContent = editor.mergeTags(record, true, 'myCustomStyle');

TagBuilder

Method Summary

Return Type
Method
Summary

Add a specified data provider as a field tag

none

Applies the tag lib to the document editor component

Returns the field tags as data set, ideally used in a value list in a custom toolbar item.

Method Details


addField

Params:

Type
Name
Summary
Required

dataProviderID

The data provider, relative the builder's data source. Can be a column, calculation, aggregate or related data provider.

Required

displayTag

Optional

Boolean

repeats

An optional flag to specify if a related data provider should generate repeater tags. Ideally, this is used to omit 1:1 relations.

Optional, default is true

Example:

// ADD COLUMN FROM PRIMARY TABLE, DEFAULT DISPLAY
builder.addField('orderid')

// ADD COLUMN FROM PRIMARY TABLE, OVERRIDE DISPLAY VALUE
.addField('shipcity', 'Destination City')

// ADD COLUMN FROM FOREIGN TABLE, OVERRIDE DISPLAY VALUE, SPECIFY NO-REPEAT
.addField('orders_to_customers.companyname', 'Customer.Name',false);

build

Applies the tag lib to the bound document editor component.

Params: None

Returns: None

Example:

// ADD TAGS AND APPLY
builder
    .addField('orderid')
    .addField('shipcity', 'Destination City')
    .addField('orders_to_customers.companyname', 'Customer.Name',false)
    .build();

getFields

Returns this builder's field tags as data set, ideally used in a value list

Params: None

Example:

// GET FIELD TAGS AS A DATA SET
var fieldTags = builder.getFields();

Exporter

An object to configure and generate document exports (PDF)

Method Summary

Return Type
Method
Summary

Adds additional head tags to the exported content

Array<byte>

Exports the content to PDF.

Sets the content to be exported

Set/Override the css in the exporter

Sets the image URL

Sets the page margins

Sets the page orientation

Sets the page size

Method Details


addHeadTag

Adds additional head tags to the exported content. Head tags can carry additional metadata and style info to the exported PDF.

Params:

Type
Name
Summary
Required

headTag

The head tag to be added

Required

Example:

// GET EXPORTER AND ADD CUSTOM HEAD TAGS
scopes.svyDocEditor.getExporter()
    .addHeadTag('<head><!-- my custom head tag --></head>')
    .addHeadTag('<head><!-- another head tag --></head>')

exportToPDF

Exports to PDF with

Params: None

Returns: Array<byte> The PDF file bytes

Example:

// GET EXPORTER AND EXPORT CONTENT
var bytes = scopes.svyDocEditor.getExporter()
    .setContent(content)
    .exportToPDF();

// DOWNLOAD AND OPEN FILE IN BROWSER
var pdf = plugins.file.createFile('export.pdf')
plugins.file.writeFile(pdf,bytes);
plugins.file.openFile(pdf);

setContent

Sets the content to be exported.

Params:

Type
Name
Summary
Required

content

The content to exported

Required

Example:

// GET EXPORTER AND SET CONTENT
var content = editor.getContent()
scopes.svyDocEditor.getExporter()
    .setContent(content);

setCSS

Sets the CSS to be use in the export. In this way, CSS can be inlined and the PDF is self-contained.

Params:

Type
Name
Summary
Required

css

The CSS to be used

Required

Example:

// GET EXPORTER AND SET CSS
scopes.svyDocEditor.getExporter()
    .setCSS(css);

setMargin

Sets the page margins

Params:

Type
Name
Summary
Required

top

The top margin

Required

right

The right margin

Required

bottom

The bottom margin

Required

left

The left margin

Required

Example:

// GET EXPORTER AND SET PAGE MARGIN
scopes.svyDocEditor.getExporter()
    .setMargin(0.5, 0.5, 0.5, 0.5);

setOrientation

Sets the page orientation

Params:

Type
Name
Summary
Required

orientation

Required

Example:

// GET EXPORTER AND SET ORIENTATION
scopes.svyDocEditor.getExporter()
    .setOrientation(scopes.svyDocEditor.ORIENTATION.LANDSCAPE);

setPageSize

Sets the page size

Params:

Type
Name
Summary
Required

pageSize

Required

Example:

// GET EXPORTER AND SET PAGE SIZE
scopes.svyDocEditor.getExporter()
    .setPageSize(scopes.svyDocEditor.PAGE_SIZE.A4);

As you can see, a object was created and bound to the runtime component. Then a object was then requested and bound to a specific data source datasources.db.example_data.orders. The tag builder can then generate field tags, using the method. Each field can be a primary or related DataProvider in the context of the tag builder's data source.

By default, the will generate a default value based on the data provider. If it's a real column in the tag builder's data source, the property is used. If the title property is empty, or the data provider is derived (i.e. calculated or aggregated), then the builder will prettify the name, with capital casing and spaces. For example, product_description would become Product Description. When this property starts with i18n: it will translate the value. Custom display values can be specified with the method as an optional parameter displayValue. For example:

The can generate data-bound tags for any path in your data model, as long as it is traversable from the data source. Simply add the full path of the related data provider as a String. For example:

The supports also formats, in that case when replacing the tags the format will be applied to the given data.

In the given sample the format dd-MM-yyyy will be applied when the document is done

The also supports fields that are not real fields. This can be used in combination with

Because tag libraries are data-bound, they can be used to generate repeating content. This happens automatically when is specified in the method. The TagBuilder assumed a related could have many records. Therefore any related data provider will also generate a repeat tag, unless the boolean repeats argument is set to false.

When the document is , all the content between the $startRepeater tag and the $endRepeater will be repeated for each record in the repeater tag's related .

A document editor component can be initialized to have embedded in it. Each tag contains a display value (what the user will see) and a real value (what the application will see). There are also , that specify where content will be repeated.

Here, the instance method . was called and the selected record a form's foundset was used for the data source. The merged document is returned as a string, and in this case, it is set back into the content data provider to which the editor component is bound. The editor will render the merged document (like a print preview!).

As you can see the # field tags were replaced with the actual record data from the orders table. And the from the order_details and products tables were also merged. The $ repeater tags were applied to the 3 records in the related orders_to_order_details foundset. (You may also notice that the table header was intuitively skipped.)

If you have made it this far, then you probably want to print, email or archive a merged document. Fortunately this module provides support for PDF export. Content from the Smart Docs Editor maybe converted to PDF format using a simple .

Here the method was used to return an object, which has methods to set content, among other options.

The supports various options, such as page size, orientation and margins to name a few. Here is an example of exporting with additional options:

You can obtain a FREE key from the . From the navigation choose "Add-Ons", and under "Document Printing", click "Generate Key". Your secret key will be displayed. Copy it to your clipboard.

At Runtime: Use the method to set the key dynamically. This is ideal for testing in development. It will override any configuration.

The PDF export service is FREE and subject to daily quotas and limitations. It is ideal for testing purposes and low-volume production scenarios. to unlimited printing for high-volume production scenarios and a dedicated document server.

Enum<>

An enum which describes export options for the property, including PORTRAIT and LANDSCAPE.

Enum<>

An enum which describes export options for the property. Currently, only A4 is supported.

<SmartDocumentEditor>

Returns:

Returns:

Returns: The content which

Registers/overrides for document export service, ideally for development/testing. It should be called before using the . The key can also be set in the servoy.properties file using the property name svyDocumentEditorAPIKey, ideally for production/deployment.

|

Returns: which can generate tags for this editor

Returns: The content from this editor, with optional inline CSS and filtered stylesheet.

Merges this editor's current content with data, executing repeater tags, replacing field tags and returning the merged content. (This is a convenience method to combine scope-level method with this editor's .)

Returns: The merged content

A class used to build for a bound component.

Add a specified data provider as a field tag. If the data provider is a , then this tag builder may also generate for the relation.

An optional display value for the tag. If none specified, then property is used for a real column. If the title property is empty, or the data provider is derived (calculated or aggregated), then the builder will prettify the name, with capital casing and spaces.

Returns: for call chaining.

Returns: The field tags, which can be used in a value list.

Returns: for call chaining.

Returns: for call chaining.

See Also: .

Returns: for call chaining.

Returns: for call chaining.

The page orientation, must be one of enum

Returns: for call chaining.

See Also:

Page size, must be one of enum

Returns: for call chaining.

See Also:

DocumentEditor
mergeTags(record)
Servoy Cloud Control Center
registerAPIKey
Upgrade
String
API key
Exporter
String
String
JSDataSet
Smart Doc Editor
Smart Doc Editor
Smart Doc Editor
Getting Started
Custom Tag Libraries
Document Merge
PDF Export
API Reference
merged with data
DocumentEditor
TagBuilder
addField
TagBuilder
TagBuilder
merge
TagBuilder
Overwrites
FoundSet
related data
addField
FoundSet
merged
repeater tags
custom tag libraries
related data
Export API
getExporter
Exporter
Exporter
DocumentEditor
Exporter
TagBuilder
mergeTags
getContent
custom tag libraries
document editor
repeater tags
related value
TagBuilder
Exporter
Exporter
DocumentEditor
getContent
Exporter
Exporter
Exporter
ORIENTATION
Exporter
PAGE_SIZE
TagBuilder
String
String
String
RuntimeWebComponent
String
JSRecord
String
String
String
String
JSDataSource
String
JSRecord
String
JSDataSet
String
String
String
String
String
Number
Number
Number
Number
String
String
DocumentEditor
Exporter
page orientation
page size
DocumentEditor
getInstance
Exporter
getExporter
mergeTags
registerAPIKey
TagBuilder
tagBuilder
getContent
mergeTags
TagBuilder
addField
build
getFields
Exporter
addHeadTag
exportToPDF
Exporter
setContent
Exporter
setCSS
Exporter
setImageURL
Exporter
setMargin
Exporter
setOrientation
Exporter
setPageSize
ORIENTATION
PAGE_SIZE
TagBuilder
addField
Basic Example
Tag Display Value
Related Data
Repeat Tags
Repeat Tags
JSColumn.title
JSColumn.title