March 2023 Platform TypeScript

Day 1: UI Event Handlers -

Maint

Created by Dmytro Petin

About mentor
Dmytro Petin

• Joined SoftServe in March 2012

• Has experience as:
mentor, lead, webui and fullstack developer
• Joined QAD in September 2017
• Has experience in AUX development
• Working From Dnipro, Ukraine
• Has two children
• Has two cats
 QAD Enterprise Platform March 2023

Training Agenda
Maint Handler ViewForm Handler Grid Handler

• common workflow • common workflow

• onFieldChange() and
• fields, panels, onButtonClick() events • custom grid buttons

toolbars • cells: get/set data,

• lookup data
• actions enable/disable
• http calls
• a) embedded grids
• messages, warnings,
• launching of hybrid views b) non-embedded grids
errors
• executeSaveAction() and • context manager
• confirmation dialogs
requery() methods • current domain and
• static html and
user information
summary panel icons
 QAD Enterprise Platform March 2023

Training Agenda
Server-side TypeScript

• common workflow

• validations and
errors

• using of another BCs

• browse API

• DO

• disallowed messages
and actions

• current domain and

user information
QAD Enterprise Platform March 2023

What we will do
• We will check each TS handler and review
which needs it could cover
• We will implement part of “real”
requirements according to current topic
• We will review API which was used during
implementation
QAD Enterprise Platform March 2023

Almost real requirements

• A Conference application is an application
for registration and storing of information
about conference speakers. It also incudes a
verification process and conference topics.
• It will contain a lot of typical WebUi tasks,
which are represented as separate
requirements and could be reuse in real
development.
QAD Enterprise Platform March 2023

Preparation for work

• Verify that com-extensions-conferenceapp-
1.0.0.2 was installed on your training
environment
(This app contains already prepared
business components Speakers,
SpeakerContacts, Topics and Verifications)
• Set it as a default development app
• If it wasn’t installed, download zip with
conference-app package from the support
materials
• Put it to the main directory of your QAD
application (/dr01/qadapps/systest)
• Run
yab install com-extensions-conferenceapp-
1.0.0.2
(Pay attention that yab install
automatically run yab update)
Event Handlers in Platform Components
 QAD Enterprise Platform
What is Event Handler?

Event Handler is
TypeScript code which
is compiled into
JavaScript and is saved
to the database so
that it can be executed
on the front-end side
for the corresponding
UI of the business
component.

9
 QAD Enterprise Platform
What is Server-side TS?

Server-side TS is
TypeScript code which
is deployed to the
environment and
extends or overrides
CRUD methods for the
corresponding business
component. It will be
executed on the back-
end side.

10
 QAD Enterprise Platform
There are three types of Event Handlers
• Primary – primary event handler for corresponding
business component. Can be created only for
platform BC and has the same purpose as a TS
handler for coded BC.
• Pre – runs before Primary or coded event handler.
• Post – runs after Primary or coded event handler.

11
QAD Enterprise Platform
Maint handler:
Event handler class structure This is the main
event handler
which is reacting on
page lifecycle
events. This type is
always needed as a
starting point for
event handlers.

12
QAD Enterprise Platform
ViewForm handler:
Event handler class structure This is an event
handler that can
act on all UI events
related to form
elements (such as
labels, input fields,
group panels,
buttons)

13
QAD Enterprise Platform
Event handler class structure
ViewGrid handler:
This type of event
handler handles
events coming from
grids.

14
 QAD Enterprise Platform
Base Classes
• QraViewTSHandlerWithViewFormTSHandler: This is
a class that can be used to easily develop a view event
handlers and easily connect to a view form event
handler. This class is auto-generated for event handlers.
• QraViewFormTSHandlerV2: Class that can be used to
develop a view form event handlers. This class is also
auto-generated for event handlers.
• ViewGridTSHandler: Class that can be used to
develop a view grid event handler. Each grid on the form
needs to have its own event handler.

15
Maint Event Handler
QAD Enterprise Platform March 2023

Topics
Maint Handler

• common workflow

• fields, panels, toolbars

• actions

• messages, warnings, errors

• confirmation dialogs

• static html and summary panel

icons
QAD Enterprise Platform March 2023

Before we start …
Navigate to the My
Development Settings
screen.

Set conference-app as
a default development
App.
QAD Enterprise Platform March 2023

Before we start …
Navigate to the
Business Components
screen.

Find Speakers.

Do next:
1 Scroll to Form panel
2 Click New in Event
Handlers grid
QAD Enterprise Platform March 2023

Before we start …
In the opened modal
dialog, check Active
checkbox.
QAD Enterprise Platform March 2023

Before we start …
Pay attention on the code
which generated by
default.
Here you can find:

Imports

Implementation of the
QraViewTSHandlerWithVi
ewFormTSHandler class

Implementation of the
QraViewFormTSHandlerV
2 class
Common Workflow
QAD Enterprise Platform March 2023

Common workflow
We will explore:

• How to react on main page lifecycle events

• How to know is it Create or Update action

• How to calculate and set some WenUI side values

when record is selected or before saving
QAD Enterprise Platform March 2023

How to react on main page lifecycle⚠ events

Please, pay attention
that from the next
slide only section with
code editor will be
displayed on the
screenshots!

From the “1 Create

and Update.txt” file
copy onBindData
event handler code
and put it to the
default structure.
QAD Enterprise Platform March 2023

Page lifecycle and appropriate events

Event Description

init() Called right after the TS handler was instantiated.

onBindData (eventData) Called when the view screen binds new data to its model/fields. Fired
after the new data is bound.

onBeforeUpdate (eventData) Called before an update submit is attempted (for either a create or
update operation).

onAfterUpdate (eventData) Called after an update submit has finished, whether the update
succeeded or not. Fired after data binding in the view.

onCancelChange (eventData) Called when the user cancels the view.

onBeforeDelete (eventData, processEvent) Called before a delete submit is attempted.

onAfterDelete (eventData) Called after a delete submit has finished, whether the delete succeeded
or not. Fired after data binding in the view.

onActionChange (eventData) Called when the view switches from "CREATE" to "UPDATE" or
"UPDATE" to "CREATE" or when the first view comes up. For example,
when the "New" button is clicked the action switches to "CREATE" or
after "Save" is clicked on a "New" record the action switches to
"UPDATE".
QAD Enterprise Platform March 2023

Page lifecycle and appropriate events

Event Description

onBeforeInit (eventData) Called before the initialize url is called when "New" is clicked.

onAfterInit (eventData) Called after the initialize url call has been made when "New" is clicked.

onBeforeToolbarInitialized (eventData) Called prior to the view toolbar being initialized.

Allows the data in eventData.toolbarData to be customized.

onToolbarInitialized (eventData) Called when the toolbar is initialized.

onBeforeViewInit (eventData) Called before the view starts initializing.

onAfterViewInit (eventData) Called after the view initialized.

onAutoGridBeforeInit (eventData) Called prior to the initialization of the auto grid.

You can find more information in the Event handlers API reference documentation
QAD Enterprise Platform March 2023

Common workflow
We will explore:

• How to react on main page lifecycle events

• How to know is it Create or Update action

• How to calculate and set some WenUI side values

when record is selected or before saving
QAD Enterprise Platform March 2023

Which requirement we can cover?

SummaryPanel
All new records should have
Draft status by default
QAD Enterprise Platform March 2023

How to know is it Create or Update

Copy code which

check screen state
and identify
appropriate variables.
QAD Enterprise Platform March 2023

How to know is it Create or Update

Pay attention on errors.

You should define appropriate
constants.
QAD Enterprise Platform March 2023

How to know is it Create or Update

Put them between Imports

and Maint class
declaration.
QAD Enterprise Platform March 2023
⚠
How to know is it Create or Update Please, pay attention
that normally this
initialization should be
done on the back-end
side

Verify that errors are gone.

Then add code which will

initialize verificationStatus for
each new record.

Do not forget about new

constant.
QAD Enterprise Platform March 2023

Testing
Compile the code and
Save changes.
QAD Enterprise Platform March 2023

Testing
Navigate to the
Speakers screen

Click New and check

that a Verification
Status is assigned as
Draft for all new
records
QAD Enterprise Platform
What’s happening there
onBindData
Event which called when the view screen binds new data to its
fields. Fired after click on New button or when another record
was selected in the browse.

enum SpeakerConstants
Useful and correct way to define literal variables.

NgData
The property for referencing a JSON object which is bound to the
view (a model part of the MVC).

35
QAD Enterprise Platform
What’s happening there
this.$scope.screenState
Property which store saving status of the current record:
0 for unsaved records, 1 – for saved.

eventData.action
Property of evenData object (input parameter of onBindData
event) which contain information about status of selected
record: “CREATE” if records is new and “UPDATE” if existing
record
⚠
was selected.
Pay attention that action will not be changed immediately after saving.
Value will be set to “UPDATE” only after next selection of record.

36
QAD Enterprise Platform March 2023

Common workflow
We will explore:

• How to react on main page lifecycle events

• How to know is it Create or Update action

• How to calculate and set some WenUI side values

when record is selected or before saving
QAD Enterprise Platform March 2023

Which requirement we can cover?

Main Panel
For all existing records, an
accumulated Person information
(Name, Country, Email, Company)
should be displayed under the ID
field
QAD Enterprise Platform March 2023

Calculate and set values

From the “2 Calculate

and set value.txt” file
copy:
1 else statement
which is responsible
for setting of personal
information into
temporary variable.
2 getPersonInfo()
method definition.
QAD Enterprise Platform March 2023

Calculate and set values

PersonInfo it’s a read-
only temporary
information, so you
shouldn't send it to
the server for saving.

That’s why you need

to implement cleanup
logic.
QAD Enterprise Platform March 2023

Testing
Compile the code and
Save changes.
QAD Enterprise Platform March 2023

Testing

Navigate to the
Speakers screen.

Click New and create

new record.

Save it and verify the

area under ID.
QAD Enterprise Platform
What’s happening there
onBeforeUpdate
Event which called before an update submit is attempted (for
either a create or update operation).

getPersonInfo()
Own private method for separate peace of logic.

DTO.Speakers
Type definition for model part of the MVC and, as a result, is a
type of a JSON object which is stored in the NgData property.

43
Fields, Panels, Toolbars
QAD Enterprise Platform March 2023

Fields, Panels, Toolbars

We will explore:

• How to find field or button, enable/disable it and get/set value

• How to show/hide or disable/enable panel

• How to add button into toolbar or hide new, edit, delete buttons
QAD Enterprise Platform March 2023

Which requirement we can cover?

Main Panel
Get ID button should be QAD Employee Panel
enabled only during record
creation QAD User ID field and Load
Details button should be
disabled after the record
Main Panel saving
Registration fields (Name,
Country, Email, Employment
Type) should be hidden after
the record saving

46
QAD Enterprise Platform March 2023
⚠
How to enable/disable field or buttonBy default, Platform
generates similar enum
with control names:
Constants
It contains two
subcollections
ButtonNames and
FieldNames Current
training ignores it
intentionally, but do not
reject it without special
needs.

Let’s start from the

new constants for
buttons.

You can use “1 Fields

and Buttons.txt” file
QAD Enterprise Platform March 2023

How to enable/disable field or button

Add code which enable GetID

button only if record is new and
disable it otherwise.
QAD Enterprise Platform March 2023

How to enable/disable field or button

Create a set of
constants specially
for Registration fields

It will be helpful for

their showing/hiding
QAD Enterprise Platform March 2023
⚠
How to show/hide field or button We separated collecting
of Registration fields to
another method for
further using during this
course

Let’s create separate method

for this logic
QAD Enterprise Platform March 2023

How to show/hide field or button

Time to use
toggleRegistrationFieldsVisibility
method
QAD Enterprise Platform
⚠
Notes: Please pay attention, that form
control could be hidden by
security configurations or via
There are two ways to enable/disable or hide/show controls on the form.
design layout. In this case call of
- First way is to call global functions: setControlDisabled() and setControlVisible().
this.ViewController.getViewField
- Second way is to call appropriate properties of ViewField
or or ViewButton objects.
this.ViewController.getViewButto
n
As a result, next two pieces of code will have the same effect:
will return undefined and
setControlDisabled(buttonName, this.$element, attempt isDisabled);
to access IsVisible or
and IsDisabled will lead to error.
this.ViewController.getViewButton(buttonName).IsDisabled = isDisabled;
On the other hand, IsVisible and
IsDisable allow not only set
Same for two next pieces: value, but also read it.
setControlVisible(fieldName, this.$element, isVisible);
and
this.ViewController.getViewField(fieldName).IsVisible = isVisible;

52
QAD Enterprise Platform March 2023

How to enable/disable field or button

Now, let’s create a method
for disabling of QADUserID
field and LoadData button.

Define appropriate
constant for QADUserID
field
QAD Enterprise Platform March 2023

How to enable/disable field or button

Use toggleQADEmployeeFieldsDisabling
method
QAD Enterprise Platform March 2023

Testing
Compile code and
save it.

Navigate to the
Speakers screen and
click New

You can see that all

registration fields are
visible and controls in
QAD Employee panel
are enabled
QAD Enterprise Platform March 2023

Testing
Then select any
existing record.

Now you can see that

all registration fields
are hidden and
controls in QAD
Employee panel are
disabled
QAD Enterprise Platform
What’s happening there
setControlDisabled()
Method which could enable/disable view form control (field, button,
link).

setControlVisible()
Method which could hide/show view form control (field, button,
link).

Constants
Enum which is automatically generated by the system and contains
two sub collections with names of fields and buttons on the form.

57
QAD Enterprise Platform
What’s happening there
this.ViewController
That ViewController property is an interface with a lot of methods to
manipulate the view and to call other systems via http calls. Also contains
such methods as getViewGrid(), getViewButton(), getViewField(), etc.
ViewController API reference

getViewButton and getViewField

Methods which return a reference to an object that represents a button,
or a field on the screen. The returned object has its own interface for
manipulating, including such properties as IsDisabled, IsVisible, Value,
etc.
ViewButton API reference and ViewField API reference.

58
QAD Enterprise Platform March 2023

Fields, Panels, Toolbars

We will explore:

• How to find field or button, enable/disable it and get/set value

• How to show/hide or disable/enable panel

• How to add button into toolbar or hide new, edit, delete buttons
QAD Enterprise Platform March 2023

Which requirement we can cover?

Company Panel
SummaryPanel
This panel should be hidden
if Employment Type is QAD Company field should be
Employee hidden if Employment Type
is Self-Employed
This panel should be
disabled if Employment Type QAD Employee Panel
is Self-Employed This panel should be hidden
if Employment Type is not
QAD Employee

60
QAD Enterprise Platform March 2023

How to show/hide panel

As previously, the first step is

updating of constants.

You need one more enum for

Panels.

Statuses should be added to the

SpeakerConstants.

Code available in “2 Panels.txt”

QAD Enterprise Platform March 2023

How to show/hide panel

As usual it’s much recommended

do not overload events: keep it
simple and move standalone logic
to own methods
QAD Enterprise Platform March 2023 ⚠
This code will work
How to disable/enable panel only in M23 and higher
versions

If you are using S22 or

lower version, you
should use alternative
solution

Extend toggleEmployeePanels
method with logic for Company
panel disabling
QAD Enterprise Platform March 2023

How to show/hide and enable/disable panels

Add call of toggleEmployeePanels()

method into the last line of
onBindData event
QAD Enterprise Platform March 2023

How to show/hide fields in SummaryPanel

Create constants for

SummaryPanel fields and add
additional code to the
toggleEmployeePanels()
method.
QAD Enterprise Platform March 2023

Testing
Compile code and
save it.

Navigate to the
Speakers screen and
create test records
with different
Employment Types.

Check record with

QAD Employee type
and verify that:
Company panel is
hidden
QAD Employee panel
is displayed.

Also pay attention that

Company field in the
QAD Enterprise Platform March 2023

Testing
Next select a record
with Subcontractor
Employment type and
verify that Company
panel now is displayed,
but this time a QAD
Employee panel is
hidden.

Pay attention:
Company field in
SummaryPanel is still
present.
QAD Enterprise Platform March 2023

Testing
Finally, select a record
with Employment type
Self-employed and
verify that Company
panel is still present,
but disabled, and QAD
Employee panel is still
hidden.

Company field in the

SummaryPanel is
hidden now
QAD Enterprise Platform
What’s happening there
GroupPanelNavigator
Implementation of IGroupPanelNavigator interface which allow manipulate with
GroupPanels (find them, show, hide, enable or disable, etc.)
API reference

showGroupPanel and hideGroupPanel

Methods which allow to show hidden or hide displayed group panel:
showGroupPanel(panelName: string, showSubPanels: boolean, showInConfig:
boolean,
repositionNav: boolean, doNotUpdateUserConfig: boolean)
hideGroupPanel(panelName: string, showInConfig: boolean, doNotUpdateUserConfig:
boolean)
Parameter details

69
QAD Enterprise Platform March 2023

Fields, Panels, Toolbars

We will explore:

• How to find field or button, enable/disable it and get/set value

• How to show/hide or disable/enable panel

• How to add button into toolbar or hide new, edit, delete buttons
QAD Enterprise Platform March 2023

Which requirement we can cover?

Top Toolbar
New and Delete buttons
should be hidden if record
was opened from Verification Bottom Toolbar
screen
Confirm Verification and
Delete button should be Reject Verification buttons
hidden if Verification status is should be displayed instead of
“Under Verification” Save and Cancel if record
was opened from Verification
screen
Verify Person button should
be added into bottom toolbar
Verify Person button should
be disabled for new records
and if record in status “Under
Verification” or “Verified”
QAD Enterprise Platform March 2023

How to hide new, edit or delete

Use “3 Toolbar.txt” file.

Copy implementation of the

onBeforeToolbarInitialized
event

It contains toolbar items in

the eventData, so in this way
you can hide buttons from the
top toolbar during page
loading.
QAD Enterprise Platform March 2023

How to hide new, edit or delete

Add missing constants.

QAD Enterprise Platform March 2023

How to hide new, edit or delete

Create a temporary body for

isOpenedForVerification()
method

This method will be normally

implemented further during
this course.
QAD Enterprise Platform March 2023

Testing
Compile code and
save it.

Navigate to the
Speakers

Pay attention that

New and Delete
buttons are not
displayed int the
toolbar
QAD Enterprise Platform March 2023

How to add button to the Toolbar

Extend Buttons constants

And add into if statement in

the onBeforeToolbarInitialized
event a code for adding of
two new buttons into bottom
toolbar.
QAD Enterprise Platform March 2023

How to add button to the Toolbar

As you no need four buttons in

the bottom toolbar at the
same time, you should
implement a method which
will toggle what pair is
displayed:
Confirm and Reject
or
Save and Cancel
QAD Enterprise Platform March 2023

How to add button to the Toolbar

Put call of
replaceSaveAndCloseButto
ns() into the
onAfterBindData event.
QAD Enterprise Platform March 2023

Testing
Compile code and
save it.

Navigate to the
Speakers

Select any record.

Pay attention that

Save and Cancel
buttons are replaced
by custom Confirm
Verification and Reject
Verification buttons
QAD Enterprise Platform March 2023

How to hide new, edit or delete

This implementation allow to

control toolbar buttons visibility not
only during page loading.
QAD Enterprise Platform March 2023

How to hide new, edit or delete

You can call setDeleteButtonVisible

from the onAfterBindData event
and react on verficationStatus
value.

Don’t forget to add status constants

QAD Enterprise Platform March 2023

How to add button to the Toolbar

Use constants and update

implementation of next
method:
replaceSaveAndCloseButtons
()

And update temporary body

QAD Enterprise Platform March 2023

How to add button to the Toolbar

Add one more button to the

bottom toolbar: Verify Person.
QAD Enterprise Platform March 2023 ⚠
The alternative way,
How to add button to the Toolbar which is looking the
same as way for top
toolbar is also
applicable for the
bottom toolbar. But it
doesn’t have much
sense because it still
sensitive to toolbar
item availability.
The way to make additional
buttons visible/hidden or
enabled/displayed is next.
QAD Enterprise Platform March 2023
As verificationStatus is
How to add button to the Toolbar already stored into variable,
condition could be simplified
to:
verificationStatus === SpeakerConstants.
UNDER_VERIFICATION_STATUS

Implement code of disabling of

VerffyPerson button depending
on verification status
according to requirements.
QAD Enterprise Platform March 2023

Testing
Compile code and
save it.

Navigate to the
Speakers

Now you can see that

new Verify Person
button appears.

And if record is not in

Under Verification
status, Delete button
is displayed.
QAD Enterprise Platform March 2023

Testing
Modify Verification
Status of any record
(set it to Under
Verification)

Select modified
record.

Pay attention that now

additional button still
present but is
disabled.

Also pay attention,

that Delete button is
hidden.
QAD Enterprise Platform
What’s happening there
onBeforeToolbarInitialized
Event which called prior to the view toolbar being initialized. This allows
the toolbar items data in eventData.toolbarData to be customized.

TopToolbar and BottomToolbar

Objects which allow to interact with items in the appropriate toolbars.
Items could be added or removed, enabled/disabled, hidden or displayed.

BottomToolbar.addButton
Method which add button to the bottom toolbar.
If isSubmitButton option is set to true, button will submit form.

88