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 2022 Pre release
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
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
How to deploy your WebApp
Configuring your system for DataFlex Web Development
Web
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
Quickstart building a web application (Mobile touch)
SOAP Web Services
Multi Tenancy
Quickstart building a web application (Desktop)
SQL
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
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
Data Access Anniversary Event
EDUC 2020
EDUC 2018
Synergy 2019
Data Access
TEST 2 september 2022
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