REFERENCE LIBRARY
LEARNING CENTER
Custom Controls
To continue with this content, please log in with your
Data Access ID
or create a new account.
Cancel
Data Access ID
You may not be authorized to see this content. Please contact
Data Access Europe
for more information.
Cancel
Data Access Europe
You are not authorized to see this content.
Cancel
Data Access Europe
DataFlex courses
The Basics
Whats New in DataFlex 2024
Getting to know the Web Controls
Whats New in DataFlex 2023
Whats New in DataFlex 2022
Getting the most out of the WebList
Migrating to DataFlex 2021
Try for free: DataFlex Personal
Debugging DataFlex Apps
Learn the language
Security the Basics
DataFlex in 5 minutes
Studio Tour
DataFlex Extensions
Using the troubleshooting tool DataFlex Diagnostics
DataFlex QR and Barcode Scanner
DataFlex Library for LibXL
Quill Editor Library
PdfViewer
Custom Control: WebImageZoom
Printer Driver Analyzer
Dynamic Objects Library
Web Scheduler Library
Custodian 19.1
Deployment
DataFlex and Continuous Integration
How to deploy your WebApp
Configuring your system for DataFlex Web Development
Web
The CSS and HTML Secrets of DataFlex WebApps
Quickstart building a web application (Mobile touch)
Working with the WebContextMenu in DataFlex
The Drag and Drop Framework in DataFlex
How to work with the WebTagsForm
Build HTTP Services in DataFlex
5 Common WebApp Mistakes
History Management
Process Pooling
Advanced Dynamic Objects
Working with Web Properties
Working with Databases
Custom Controls
SOAP Web Services
Multi Tenancy
Quickstart building a web application (Desktop)
SQL
Using Managed Connections in DataFlex
Migrating to MySQL Environment
SQL Search
DataFlex Reports
Runtime Data Source (RDS)
Page Layers
DataFlex Reports Quickstart
SQL Statements
Charts
Label Reports
Maintenance Program
Other
Efficient version control with Git in DataFlex
Using WebView2 in DataFlex
Tips on using the build automation tool Jenkins within DataFlex
How to use the DataFlex Styler
How to setup a livestream event
UX UI tips for application controls
Secure your web applications with HTTPS
UX UI Design principles for application development
Working with JSON
Build your own Search Engine
Information
Events
DataFlex Feature Demo FlexTron DANA
DataFlex 2023 Feature Demo DANA
EDUC 2022
Data Access Anniversary Event
EDUC 2020
EDUC 2018
Synergy 2019
Custom Controls
Introduction
(0m 30s)
What is a Custom Control
(2m 49s)
Setting up the workspace
(6m 39s)
Web Properties
(6m 39s)
Rendering the Control
(13m 07s)
DOM manipulation
(9m 10s)
Sending and Receiving Data
(6m 05s)
Client Actions
(4m 55s)
Server Actions
(9m 16s)
Events
(6m 50s)
JavaScript Libraries
(3m 29s)
Next lesson:
Client Actions
Cancel
Custom Controls
Lesson 6: Sending and Receiving Data
Things to keep in mind:
The server and client communicate with each other using a uniform data structure
Complex data is serialized to a WebValueTree
A WebValueTree is a recursive array of keys and values
Upon being received, the data can be deserialized back to a struct
Any simple parameters sent along with the data can be sent as strings
On the server side – (de)serializing
First, define the structs
Then use the value tree struct tWebValueTree
ValueTreeSerializeParameter: serialize any struct
ValueTreeDeserializeParameter: deserializes any WebValueTree back to a struct
To send data, add an extra optional parameter to the DataFlex code
To receive the data from the client on the server, use the ptActionData property to get the data in DataFlex
Server - code example of sending data…
Server – code example for receiving data…
On the client side – (de)serializing
Use the df.sys.vt library
Define the structure using JavaScript objects
To deserialize a value tree use
df.sys.vt.deserialize(tVT, tDef);
To serialize an object to a value tree use
df.sys.vt.serialize(tDataObj);
Alternatively, generate a reusable (de)serializer
serializeMyDataVT:
df.sys.vt.generateSerializer(tDataObj),
deSerializeMyDataVT:
df.sys.vt.generateDeserializer(tDataObj),
This method is more efficient whenever calls need to be repeated
Client side – sending data
To send data from the client to the server an extra optional parameter needs to be added to the JavaScript call
To receive the data back in JavaScript use
this._tActionData
Client – code example of sending data
Client – code example of receiving data