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:
Rendering the Control
Cancel
Custom Controls
Lesson 3: Web Properties
Basic information regarding Web Properties:
They can be used to store things like status information, data and settings for custom controls
A web property is different from a normal property because its value is shared and maintained between the client and the server.
The engine will generate default Get and Set functions if no custom functions are defined.
The functions are called upon whenever a WebGet or WebSet is executed.
A custom getter or setter can be implemented by using…
set_psPropertyName
get_psPropertyName
Several property types exist:
Client: value is stored at the client, and sent to the server with each call
Server: value is retrieved on the server when needed, but page scoped. When the page is reloaded the value of the web property is lost.
ServerSession: same as server, but is session scoped. The value is not lost with the page is reloaded.
Some examples:
An example of a property being annotated to make it a web property:
To create enumerations in a property, create a, Enum_List, and then reuse the EnumList, with the same previously defined values, in the web property.
To create a web property in JavaScript, call on this.prop from within the constructor function.
Web property types in DataFlex:
Boolean: df.tBool
String: df.tString
Integer: df.tInt
Number: df.tNumber
Struct: df.tAdv
An example of creating a custom setter in JavaScript…
Demonstration:
Open the DataFlex Studio and make sure cWebMsgBuilder.pkg is open.
Create a property integer that will define the maximum length of the message. Set the default to 0 (no limit).
Make it a web property by applying the proper annotation.
{WebProperty = Client}
Property Integer piMaxLength 0
Open WebMsgBuilder.js from within the text editor
Create the same property integer for the JavaScript side of the process.
this.prop(df.tInt, “piMaxLength”, 0);
Add a custom getter that will return a message…
get_psValue : function () {
var sMsg = this.aMsgParts.join(“ “);
return sMsg;
}
Add the message as a private client-side property that is only visible by the client
//Private property
this._aMsgParts=[];