Kinetic AppStudioUserGuide 2023.1

Kinetic Application
Studio User Guide

Version 2023.1
Disclaimer
This document is for informational purposes only and is subject to change without notice. This
document and its contents, including the viewpoints, dates and functional content expressed herein
are believed to be accurate as of its date of publication. However, Epicor Software Corporation makes
no guarantee, representations or warranties with regard to the enclosed information and specifically
disclaims any applicable implied warranties, such as fitness for a particular purpose, merchantability,
satisfactory quality or reasonable skill and care. As each user of Epicor software is likely to be unique
in their requirements in the use of such software and their business processes, users of this document
are always advised to discuss the content of this document with their Epicor account manager. All
information contained herein is subject to change without notice and changes to this document since
printing and other important information about the software product are made or published in
release notes, and you are urged to obtain the current release notes for the software product. We
welcome user comments and reserve the right to revise this publication and/or make improvements
or changes to the products or programs described in this publication at any time, without notice.
The usage of any Epicor software shall be pursuant to an Epicor end user license agreement and the
performance of any consulting services by Epicor personnel shall be pursuant to Epicor's standard
services terms and conditions. Usage of the solution(s) described in this document with other Epicor
software or third party products may require the purchase of licenses for such other products. Where
any software is expressed to be compliant with local laws or requirements in this document, such
compliance is not a warranty and is based solely on Epicor's current understanding of such laws and
requirements. All laws and requirements are subject to varying interpretations as well as to change
and accordingly Epicor cannot guarantee that the software will be compliant and up to date with such
changes. All statements of platform and product compatibility in this document shall be considered
individually in relation to the products referred to in the relevant statement, i.e., where any Epicor
software is stated to be compatible with one product and also stated to be compatible with another
product, it should not be interpreted that such Epicor software is compatible with both of the
products running at the same time on the same platform or environment. Additionally platform or
product compatibility may require the application of Epicor or third-party updates, patches and/or
service packs and Epicor has no responsibility for compatibility issues which may be caused by
updates, patches and/or service packs released by third parties after the date of publication of this
document.
Epicor® is a registered trademark and/or trademark of Epicor Software Corporation in the United
States, certain other countries and/or the EU. All other trademarks mentioned are the property of
their respective owners.
Copyright © 2023 Epicor Software Corporation Epicor.
All rights reserved. No part of this publication may be reproduced in any form without the prior
written consent of Epicor Software Corporation.
Table of Contents
Welcome to Application Studio 13
Application Studio Quick Start 14
Modifying Application Structure 30

Application Map Tools 30
Reviewing an Application Map 30
Application Landing Page 30
Tab 33
Pages 35
Virtual Pages 37
Sliding Panels 40
Using Flex Layout 44
Reviewing the Page Level Property 44
Adjusting Widths on Panel Cards and Group Boxes 47
Creating a New Page 52
Creating a New Tab 54
Setting Up Shortcuts for Application Tools 59
Promoting Personalization to Customization 60
Debugging Applications 62
Using the Debug Tool 62
Using Browser Developer Tools 67
Application Studio Learning Resources 90
Application Studio Help 90
ToolTips 90
Epicor Learning Center 91
Overview of the Upgrade Conversion Process 93
Conversion program capabilities 94
Verifying Conversion Results in Configuration Upgrade Dashboard 96
Components Overview 98
Modifying Page Layout 99
Setting Up Component Properties 109

Basic 109
Behavior 110
Comments 111
3 March, 2023
Data 111
Layout 112
State 112
Advanced 113
Required Properties 113
Application Studio (Design) Mode 114
Setting up Data Bindings 115
Component Reference 118

1 Column 118
Key properties 118
2 Column 119
Key properties 119
Address Format 120
Key properties 120
Button 122
Key properties 122
Check Box 124
Key properties 124
Color Picker 126
Key properties 126
Combo Box 128
Key properties 128
Setting up a Static List Combo 130
Setting up a BAQ Combo 131
Setting up a BO Combo (Default GetList Method) 134
Setting up a BO Combo (Custom Method) 136
Setting up a Reusable Combo 138
Setting up a Data View Combo 141
Setting up a Combo in a Grid 141
Container 143
Key properties 143
Currency Box 144
Key properties 144
Currency Selector 147
Key properties 147
Date Picker 148
Key Properties 148
Optional properties for Date Picker 151
File Picker Client 152
4 March, 2023
Key properties 152
File Picker Server 154
Key properties 154
File Server Folder 157
Key properties 157
Fiscal Year Suffix 159
Key properties 159
Foreign Lang Desc 161
Key properties 162
GL Account Editor 164
Key properties 164
GL Control Panel 168
Key properties 168
GL Multibook Account Editor 170
Key properties 170
Grid / Panel Card Grid 172
Key properties 173
Guided Setup for Grid 176
Setting up data provider for a grid 180
Adding View Options to the grid 183
BAQ Results Dataset 183
Service Method Dataset 185
GroupBox 186
Key properties 186
Label 187
Key properties 187
Link Combo Box 188
Key properties 188
List Box 190
Key properties 190
Multilevel Menu 193
Key properties 193
Multiview Calender 196
Key properties 196
Nav link 199
Key properties 199
Numeric Box 201
Key properties 201
Output Print Format 203
Key properties 203
5 March, 2023
PDF Viewer 205
Key properties 205
PE Log Viewer 208
Key properties 208
Creating Node Actions 210
Panel Card 210
Here's how you can use it 210
Key properties 211
Panel Card Gantt 215
Key properties 215
Panel Card Grid 220
Key properties 220
Part Rev Description 223
Key properties 223
Picture Box 225
Key properties 225
Quantity UOM 227
Key properties 227
Radio Button 229
Key properties 229
Setup example 231
Relationship Map 232
Key properties 232
Rich Text Editor 233
Key properties 233
Row Navigator 235
Key properties 235
Scheduler 237
Key properties 237
Search Chip Selector 240
Key properties 240
Selection List 242
Key properties 242
Setup Example 245
Creating a data view 245
Configuring an event to populate the view 245
Setting up the Selection List 246
Shape 247
Key properties 247
Tab 249
6 March, 2023
Key properties 249
Tag 250
Key properties 250
Text Area 252
Key properties 252
Text Box 254
Key properties 254
Time Picker 258
Key Properties 258
Optional properties for Time Picker 259
Data Rules Overview 261
Events Overview 262
Creating and Modifying Events 263

Using the Events panel 263
Creating new events 265
Defining the trigger 265
Creating events without trigger 266
Designing the workflow 268
Editing child events 270
Copy-pasting workflow elements 271
Using the ERP-BAQ Event Action 273
Data Views Overview 280
Using System Data Views 281

TransView 281
KeyFields 281
actionResult 281
searchResult 281
Constant 281
CallContextBpmData / CallContextClientData 282
sysTools 282
matches 282
Defining a New Data View 284
Mapping view to a data source 284
Defining parent-child relationships 286
Defining Options 287
Adding columns 289
Setting up context menu for a column 290
7 March, 2023
Adding Tools 291
Loading Data into a View 294
Loading data from Grid Provider Model 294
Creating an event for populating a view 295
Configuring action to load data from service method dataset 296
Configuring action to load data from Business Activity Query (BAQ) Results dataset 297
Configuring action to load data from Function response parameter of tableset type 298
Hooking the loading event 299
Clearing data from the view 299
Widgets Overview 302
Adding a Data Discovery Card to a Kinetic App 306
Adding a Data Discovery Chart to a Kinetic App 310
Adding a Website Widget 313
Sliding Panels Overview 316
Creating In-App Sliding Panels 317

Creating a sliding panel layout 317
Adding an action button to a panel card 320
Configuring an event to display the sliding panel 321
Testing the layer 323
Creating Reusable Sliding Panels 325
Adding a Layer to the Menu 327

Creating a Layer 327
Adding the Layer to the Menu 329
Adding Two or More Layers to the Menu 330
Importing and Exporting Layers 332
Exporting a layer 332
Importing the solution 333
Using the Save As Option 334
Using Application Studio Homepage 337

Finding Base and Layer Applications 337
Upgrading Applications 339
Publishing Applications 342
Modifying an Existing Application 343
Launching the Basic Application Wizard 344
Creating an Application 347
8 March, 2023
Creating a Reusable Component 349
Testing the Reusable Component 350
Finding Active Customizations 352
Adding the BAQ 352
Designing the Query Phrase 352
Adding Display Fields 354
Testing the Query 355
Working with Dashboards 357
Modifying Kinetic UX Dashboards 358

Generating Dashboard as a Kinetic UX Application 358
Adding Kinetic Dashboards to the Main Menu 361
Launching the Dashboard in Application Studio 363
Customizing a Dashboard Layout 364
Adding a View Option to a Grid 371
BAQ Reports Overview 376
Modifying the BAQ Report Submission Form 377

Modifying the BAQ Report Application Layout in Application Studio 377
Updating Report Definition 378
Simple Landing Page Modification 379
Using Quick Filters 384

Add Job Status Check Boxes 384
Add View Options 388
Create Data Rules 393
Test the Results 396
Skip Landing Page 398
Working with the Basic Application Wizard in App Studio 404

Creating the Parent Data View 404
Adding the Parent Grid 409
Adding the Parent Form Card 412
Creating the Child Data View 415
Adding the Child Grid 418
Adding the Child Form Card 420
Reviewing the Application Summary 422
Reviewing the Validation Process 426
Examples of Validation Messages 426
Invalid Parent Child Relationship 426
9 March, 2023
Invalid Data View Filter Mappings 431
Invalid Grid View Option Filter 434
Making Changes in Application Studio 438
Introduction to User-Defined (UD) Forms 443
Scenario Overview 444
Adding Menu Item for the UD05 Entry 445
Modifying Service Agreement Maintenance 447
Deploying SA Maint XXX Layer 451
Adding UD Field to OrderHed Table 452
Regenerating Data Model 455
Defining Extended Properties for the UD Field 458
Adding Service Agreement Records to Database 460
Adding a Combo Box with Service Codes to Order Entry 462
Deploying Layer and Testing Configuration 467
Calling Functions from Kinetic Apps 470
Walkthrough: Making Counter Sales Easier 471

Introduction 471
Learning Objectives 471
Prerequisites 471
Creating Counter Sale Menu 472
Modifying the UI of a standard application 472
Deploying a layer to a new menu 474
Making New Orders Default to Counter Sale 477
Adding Function to Create New Customer 486

Creating an API Key for REST calls 486
Creating a Function library and defining its properties 487
Creating a Widget Function and setting up its parameters 490
Designing Function Workflow 492
Testing Function in the Kinetic REST API interactive help 506
Adding Event to Set CounterSale Context 511
Creating a row update event 511
Calling an event from another event 513
Testing the event 514
10 March, 2023
Adding Slider Panel to Enter New Customer Details 516
Adding a button to the layout 516
Adding an in-app sliding panel 517
Designing the sliding panel layout 519
Creating a button-click event to launch a sliding panel 523
Adding Event to Call Function/Create New Customer 526
Testing the Counter Sale Application 532
Working with Kinetic SDK 534
Using the UD Service Designer 536

Launching the UD Service Designer 536
Reviewing the UD Service Designer Interface 538
Interface tips: 539
Creating New Services 539
Adding Fields 544
Deploying UD Services 546
Scenario Overview 548
Defining UD Codes for Part Subtypes 550

Creating User-Defined (UD) Codes for Different Types of Soap 550
Adding a UD Field to the Part Table 552
Add the Part_UD Table to the Data Model 554
Adding a Combo Box to List UD Codes in Part Maintenance 557
Adding a New Component to the Application UI 557
Creating a Menu Item for the Modified Application 561
Defining Subtypes for Parts in the Demo Database 562
Creating an Event That Launches a Website 565
Adding a Button to Trigger an Event 565
Adding an Event to Launch a Website 566
Disabling the Button for Selected Soap Types 569
Previewing the event 569
Adding the Soap Type Field to Part Advisor 571
Adding a Rule to Highlight Fields for the Selected Part Subtype 575
Adding a Panel Card with Additional Part Info 578

Adding a Panel Card Grid Component to the UI 578
Binding the Grid to BAQ and Adding Grid Columns 579
Configuring View Options for the Grid 581
11 March, 2023
Deploying the Part Advisor Configuration 583
Creating a Menu for the Modified Part Advisor 583
Reviewing Part Maintenance and Part Advisor Configurations 584
12 March, 2023
Welcome to Application Studio
Application Studio is a design environment where Kinetic power users, business analysts, and others
can configure applications and processes to fit their business. Application Studio provides a low
code/no code environment giving you the ability to tailor your system with greater ease. Configurations
created in Application Studio are designed to be much more resilient to upgrades, but you may still
need to update/verify them after an upgrade. Well-designed application configurations can provide
extra business value to your company. Using Application Studio to create these configurations can save
you time and money.
Note that configurations are different from personalizations. A personalization is a modification to the
interface that you save with a specific user account. Each time this user logs in to the system, the
interface displays the personalizations linked to that user record. However, everyone within your
company can potentially use the configurations you create.
You can create configuration layers either for the current company or for all companies in
your organization.
The image below illustrates the core elements of the Application Studio user interface (UI). In the
Layout designer, you can drag and drop the components from the Toolbox panel: text boxes, numeric
boxes, grids, check boxes, etc. to create a page design that works best for you. The UIs of the other
designers (Data Rules, Events, and Data Views) are explained in respective sections of the Application
Studio help.
To use Application Studio, you need customization rights enabled for your account (the
Customize Privileges check box selected in User Account Security Maintenance).
13 March, 2023
Application Studio Quick Start
In this article, we cover how to navigate in Application Studio and get to know its main controls.
You can launch Application Studio in a couple ways:
1. Launch Application Studio from an application:

a. Open an application you want to modify.
b. From the Overflow menu , select Application Studio.
Alternatively, you can press Ctrl + Alt + D.
This opens the Application Studio.
14 March, 2023
If you have Dashboard Developer rights, Application Studio asks if you wish
to Use Base. If you have Customize Privileges rights, you can Use Base or
Use Layer. Select the type of customization you will create.
2. Use Application Studio Home Page:

a. From the main menu, go to System Management > Kinetic Application Management >
Application Studio.
b. In the grid on the Applications page, search for the application that you want to modify.
The grid has all existing applications. If you are looking for something specific, you can use
the Filter tool and start typing in the application name directly for immediate
filtering. You can also filter the applications by their type or date of their last update.
c. Select the Layer Name hyperlink for the layer. It launches Application Studio where you
can modify the application as usual. Once you exit Application Studio, you'll return to
Application Studio home page. For more information, see Using Application Studio
Homepage.
When you open Application Studio, you land on a new layer. You need to either create a new or select
an existing layer to be able to preview, save, or publish the modification. To create a new layer:
1. Select <New Layer>.

The Layer Selection panel opens.
2. Specify Layer Name and Description. Both fields are mandatory.

3. The CGCCode (Country/Group Code) is used for building Country Specific Functionality
localization solutions. You typically leave this value blank.
4. Go to the Company Name drop-down list and select the company where the layer will be
available. This field defaults to ALL companies, but you can select any company that you have
permission to access through your user account. This layer then only displays within the
company you select.
You can later use the Save As option to move this layer to a different company. You
may do this to move the layer from a test company to a production company.
Review Using the Save As Option to learn more.
15 March, 2023
5. Select Save Layer.
Each layer is saved in the Draft mode. Once you're done with your layout
modification, you need to Publish it.
Publishing a layer:
l Makes a layer available for selection in Menu Maintenance so you can share
modification with other users within a company.
l Creates a new record in Publish History log with a User and Date time-stamp,
allowing you to keep track of layer's history.
For more information, Adding a Layer to the Menu.
Here's how you load a previously created layer:
1. Select <New Layer>.

2. Select Change Layer.

3. From the list, search for the layer you need and select Edit. The Layer Selection panel closes and
the layer loads.
Use App Designers to create new experiences (Views) by building, extending and tailoring applications.
l
Application Map - This designer displays the hierarchy of an application in a map-like
structure. You can use it to view and change the navigation of the application and connections
within its levels - pages - and their details (for example, you can see which pages are the parent
and which are the child ones, change the name and the caption of a page, add new pages, etc).
l
Layout - The Layout designer allows you to design the layout of an app page. Here you can
drag and drop the components from the toolbar menu: text boxes, fields, columns, check boxes,
etc. to create a page design that works best for you.
Data Rules - You can use Data Rules to manage the existing or create new rules for a
component in an application. You need rules to define how the components function within the
application. Each rule can have various data conditions and one or more actions that activate
when the condition is met. Also, you can set up a rule to have no condition, but still perform a
required action.
16 March, 2023
l
Events - The Events designer allows you to create an action that is triggered when a
specific event occurs on a page. For example, you can create an event that in respond to an
action displays a message box, clears the details from the page, runs a calculation on some data
you enter, launches a URL, and so on. You can create as many events as you need. Also, the
events list has system events that are already in the application and you can use them as well.
Data Views - The Data View Designer provides a list of data views used by the
application. A data view is a representation of data in the underlying dataset table (data table).
Each data view is wired to a single data table. You can use Data View Designer to create user-
defined representations of data for your modifications. You can edit existing data views in the
application - add columns, edit static filters, tools, or parent-child relations - or add totally new
views.
The Sidebar Navigation provides quick access to hierarchical structure and navigation between entities.
As you work on your layer, use the Navigation Tree to locate the entities you need such as Data Rules
and Data Views and design them in parallel by displaying each entity on a separate tab.
The following is an overview of Sidebar controls:
l Application Map - the default view for Application Studio, presenting a structure of application
pages.
l Layout - displays sequence of pages as they appear in Application Map.
Note the following:
l The Tree View displays all non-virtual pages.
l To open a page for editing on a new tab, select a page node in the Layout Tree.
l To add a new child page, right-click the parent node and select Add. Similarly, you can
Delete a page from Application Map.
17 March, 2023
Edit, Add and Delete actions performed in the Layout Tree are identical to those performed
in Page tools menu in Application Map.
l Data Rules - displays the set of system and custom rules.

Note the following:
l Clicking on a rule node opens the rule for editing.
l Right-clicking a rule launches the context menu. You can create a Copy of each rule,
however, Delete is only allowed for non-system rules.
To add a new Rule, click Add New . You can change the default Rule Name as
needed.
l Copying a rule creates a new rule named 'Copy of ...'. This rule is Disabled by default, it
can be Enabled using the Overflow menu once the record is saved.
l Events - the list of Events is organized as follows:
l Components - Trigger based events grouped by Trigger Type (Control, Window, Grid,
Page, and Tree).
18 March, 2023
l Data - Trigger based events grouped by Trigger Type (DataView, DataTable, and
EpBinding).
l User Defined Actions - holds Non-Trigger based events.
l General - only displays if an event or multiple events whose Trigger is not of component or
data type. This group also contains events with the Event trigger type.
Note the following:
l Clicking on an event node opens the event for editing.
To add a new event, press Add New . You can change the default ID as needed.
l Right-clicking an event launches the context menu. You can create a Copy and Delete an
event record.
You can copy , but you cannot delete base events.
l Data Views - displays the list of application data views. Note the following:
l Clicking on a data view node opens the view for editing.
To add a new data view, press Add New . You can change the default data view ID
as needed.
l You can only delete custom data views.
l Publish History - When a layer is published, it becomes available for selection in Menu
Maintenance so users within a company can access it. A new entry is created in the log each time
19 March, 2023
a layer is published, allowing you to keep track of the layer's history.
l Help - provides access to Application Studio Help articles.

Application Studio allows you to work on multiple entities in parallel by using Tabs.
These are the Key concepts of using Tabs:
l The Application Map tab loads by default and cannot be closed.

l Each item opened from the Sidebar is displayed on a separate tab.
l For newly created items, Application Studio automatically assigns IDs with incremental suffix
such as NewRule-1, NewView-1, and so on.
l You have an option to save your work per individual tab. While closing a tab, a dialog pops up
offering to either Save your changes, or Cancel the closing action. When you press Yes, the tab
gets validated and saved.
l When you press Save, each tab open in the layer gets validated. If there are no errors, data is
committed. If an error occurs, the focus is set to first tab that failed.
20 March, 2023
l The error details display in the Problems panel.
l Use the Close All Tabs tool action in the Overflow menu to close all open tabs, but Application
Map.
The Problems panel appears at the bottom of the Application Studio screen and provides contextual
warning and error messages as you work on the layer:
The minimized Problems panel displays the summary of issues detected in the current layer or tab, if
any. To see the messages, expand the panel by dragging its top border up to the desired height:
21 March, 2023
You can sort messages by Severity, Type, Tab, and Message. By default, messages of all types are listed
in the panel grid. You can use the summary buttons at the top of the panel to remove/add back
messages of the selected type.
Use the Current Tab Only switch to set the panel to show messages for the current tab (if turned on) or
across all open tabs in the layer (if it is off - default state).
As of Kinetic 2023.1, the panel can display:
l error messages for events containing disconnected action widgets

l error messages for incomplete data rules
l warning messages for system events previously modified in the layer
l warning messages for locked system events in layers
The validation scope expands continuously.
You can display Kinetic applications on any mobile device including a phone without any tailoring in
Application Studio. By default, each application responds accordingly to a device used.
You can, however, create mobile device specific layers in Application Studio so that phone and tablet
specific modifications are automatically loaded for users accessing screens with a mobile device. For
example, you create a simplified version of an entry screen that only displays on a phone.
Note the following principles:
l All layers have a required property Device Type. The available options include Any Device
(default), Tablet or Phone.
l Phone and Tablet layers are always associated with a parent layer of Any Device type.
l Phone and Tablet layers are automatically loaded when launched on a matching device type.
22 March, 2023
To create a mobile device layer:
1. Start by creating a new parent layer. By default, a layer is assigned to Any Device type without
an option of changing it.
2. Now, create a child layer. First, click on the layer.
3. Press Change Layer.
23 March, 2023
4. Select Create Layer.
5. Specify the below:

l Enter a (child) Layer Name.
l From the drop down, select a Parent Layer.
l The Device Type options now become available; make your selection, such as Phone.
24 March, 2023
6. Save the layer.
You cannot create more than one Phone and Table layer for the same parent layer.
Application studio helps you design and test the application's layout for a target device. Use the Device
type switch to resize the design surface accordingly:
1. Go to the Layout designer.

2. From the list , select a device for which you want to design the layout.
Note how the canvas width and the layout change depending on your selection.
If you want to see how the layout and the components look like and function or after you are done with
your modifications, you can:
Preview - use this toolbar icon to preview your layer. In both, the desktop and browser
clients, preview opens in a new window. In the page that opens after you select this button, you
can test not only how the changes you added look, but how they also work.
You can place the two windows side by side, continue changing the application in Application
Studio and review your layer’s logic while you run and debug it.
The preview does not automatically reflect the changes you are making in the
Application Studio. After you change your layer, select Preview again to reload the
25 March, 2023
application running in the preview window.
Close the preview window to end the preview session.
Save - use this toolbar icon to save your layer, so next time you open the Application
Studio, you could select it and continue working on it. By hitting Save:
l Each opened Tab is validated.
l If there are multiple Tabs that failed validation, focus is set to the first Tab that failed.
l A layer is saved as a draft.
Publish - use this Overflow menu tool action to publish the layer. Only published layers
can be applied to a menu or launched from a parent application.
Note the following:
l When a you open a published layer from Kinetic, make any modifications and Save the
layer, your changes are saved as a draft. To apply the changes, you need to Publish the
layer again.
l Draft Layers are not available while Merging or selecting Parent Layers.
l Publishing a layer creates a new record in Publish History log with a User and Date time-
stamp allowing you to keep track of the layer modifications.
If you have several layers for the same application, you can merge them into one.
1. In the top-right corner of the Application Studio screen, press on the name of the current layer.
The Layer Selection panel slides on.
2. Go to Change Layer > Merge Layers.

3. In the list of available layers, select the check boxes for the layers you want to merge.
The order of the layers specifies the order in which the system will apply changes. It means that
you need to place layers in the way where the first layer you select gets applied first, and the last
layer you select gets applied last. The last layer has precedence over the lower layers, and, in
case of conflicts (for example, different changes for the same component), it will override the
changes of the lower layers.
For example, you have two layers: A and B. In A, you changed the name of the page to Test A and
added a new button to the layout. In B, you changed the name of the page to Test B, but left
26 March, 2023
everything else as it originally was (no new components, etc). This way, you will have two options
of the layers order:
l A, then B: B overrides the changes to the page name, so it is Test B. But as the new button
from A has no conflicts with B, it remains in the merged layer.
l B, then A: A overrides the changes to the page name, so it is Test A. The new button
remains in the merged layer.
You can rearrange the order of the layers after you select them. To do that, drag and drop a layer
by the Move button next to its name:
4. Once you're satisfied with the order of the layers, select Merge Layers.
The changes for the merged layer display in the canvas. This layer is a new one, so remember to
add its Layer Name and Description and save it before you preview/save/publish it.
When you are already working on a layer in Application Studio, you can launch any other application to
modify. To do this:
1. While in the Application Studio, from the Overflow menu , select Open Application.
2. In the Search field, start typing the name of the application you want to modify.
27 March, 2023
3. Select the application. It opens in the Application Studio and you can modify it as usual.
If you have the SDK license installed, you will also have the Add New option available for
you. This option lets you create new applications.
Here's how to create a new application:
1. While in the Application Studio, from the Overflow menu , select Open Application.
2. Select Add New.
3. From the Type list, choose the type of the application you want to create. This way you choose
what template the system will use to create the new application. The available types include:
l Apps
l Configurator
l Dashboard
l Process
l Report
l Shared
You can edit the existing templates or create your own ones as well and use them to create new
applications.
28 March, 2023
4. You can select a Prefix for the Apps, Process, and Report types - Erp.UI or Ice.UI - depending on
what area they will belong to - application or framework (system).
5. In the Id field, enter an ID for the application. The system displays the full name with the type
prefix added.
6. Press Ok. Application Studio opens the new application for editing.
29 March, 2023
Modifying Application Structure
The Application Map designer displays the hierarchy of an application in a map-like structure. You
can use it to view and change the navigation of the application and connections within its levels - pages
- and their details (for example, you can see which pages are the parent and which are the child ones,
change the name and the caption of a page, add new pages, etc). You can also control the widths
available for card and group box components.
Application Map Tools

In the Application Map Designer, you can add new pages to the application, edit them, or delete. To do
this, select an item in the application tree and use the menu in the top right corner of the designer
screen:
You can get the same options by right-clicking any item in the application map.
Use the Zoom field to change the scale of the application map.
Reviewing an Application Map

In this example, let's take a look at an existing Customer Entry Application Map and understand its
main components and properties.
Application Landing Page

The Landing Page defines what's presented to a user on application launch.
30 March, 2023
Click on the Landing Page icon to display the Customer Page properties in the
right pane.
Property Value Description
Name CustomerEntryForm Defines the name of the Page.

Caption Customer Defines the Page name that displays Application Map.
Page Type Apps Defines the Application type based on schema (prefix)
of the selected Application. The following is the list of
available types:
l Apps - Erp.UI. OR Ice.UI.
l Process - Erp.UiProc. OR Ice.UiProc.
l Report - ErpUIRpt. OR IceUIRpt.
l Dashboard - Ice.UIDbD.
l Shared - Erp.UIShared. (Reusable Sliding Panel Apps
available for creation with SDK license)
Use Full True/False This check box indicates whether the application
Width pages appear using the maximum width of the display
screen. It is a root property that affects the entire
application. This property is set to false by default.
31 March, 2023
Ep Binding LandingPage.CustID This property is used to link, or bind a component to a

specific application view.
The LandingPage view is a dynamic dataview that gets

populated using the GetRows method. Data from the
LandingPage dataview is used to populate records in the
first node on the crumb bar.
Dataset Customer Defines the main Dataset for the application. Notice
the sign indicator displays when a Patch is used for
a property, in this example %datasetid%.
You can learn more about the concept of using
patches in Setting up Data Bindings.
Click on the Customer Landing Page icon and select Edit to display the
Customer landing page layout.
The Landing Page contains the Panel Card Grid component with the following key Properties:
l Data > Grid Model defines the data source for the grid, in this case it's the LandingPage data
view.
l Data > Grid Model > Columns defines the grid columns and their binding to data view columns.
32 March, 2023
Tab
When a record is selected on the Landing page, the Tab Page defines what Tab(s) and their order
display for a user. Tab is a link to an Application Page presented to the user, it also creates a point of
navigation within the application. If the Application Page has child pages, these are displayed in the
Navigation Tree below the Tab.
Click the Customer Tab icon to display Page properties in the right pane.
Name Main Defines the name of the page.

Caption Customer Defines the Page name that displays Application Map.
Page Type Tab Defines the Tab Application type where one or more
Tabs are defined.
Ep Binding LandingPage.CustID This property is used to link, or bind a component to a
specific application view.
EpBinding is used for setting-up the framework injec-
ted tools on pages. These tool actions are setup in the
Dataview definition (e.g. Add New, Delete).
Parent CustomerEntryForm Indicates this page is a child of the Landing Page.
33 March, 2023
Dataset Customer Defines the main Dataset for the application. Notice
the sign indicator displays when a Patch is used
for a property, in this example %datasetid%.
You can learn more about the concept of using
patches in Setting up Data Bindings.
Click on the Customer Tab Page icon and select Edit to display the Page
layout.
The layout consists primarily of a Tab Strip component. Note the following principles:
l An Application Map can be configured to use one or more Tabs, these are defined in the
Advanced properties category.
l You can define order of Tabs and select which Tab displays by default using the Selected check
box.
l In this example, when a customer record is selected, the Details page and its child pages display
in the Navigation Tree. You can switch to the Activity tab and select its child pages.
34 March, 2023
Pages
Pages are the key Application blocks that consist of layout components such as panels, grids, fields,
buttons or text boxes that make up the page design. Pages represent distinct views and define
organization of data within applications.
In this example, we will look at the Billing Page shown above. Click on the Billing Page icon
to display Page properties in the right pane.
Name Customer Billing Defines the name of the page.

Caption Billing Defines the Page name that displays Application Map.
Page Type TabPage Defines the type of Page in focus. You typically use
TabPage to create custom Pages. Note that simple
Page type is not available for selection in a TabStrip
component. For more information see Creating a New
Tab.
35 March, 2023
Ep Binding Customer.CustID This property is used to link, or bind a page to a spe-

cific application view. In this example, the page is con-
figured to display records to a selected customer.
Note that Ep Binding property is used across Applic-
ation Studio on both the Page and individual layout
controls such as text box, combo box and so on.
Parent Details Indicates this page is a child of the Details Page.
Page Caption Customer {Cus- Defines the Page name that display on a form. Notice
tomer.CustID} - this value contains {Customer.CustID} variable that
Billing displays the currently selected customer on the Page,
such as 'Customer ADDISON - Billing'.
You can learn more about the concept of declaring

Variables in Setting up Data Bindings.
Tab ID Details Displays the name of Tab, under which the Page is loc-
ated. The Details page its child pages are all nested
under the Details Tab.
Page Peer 2 Defines the order of Page in the Application Map and
Order Crumb Bar navigation control.
Disable clear Controls the availability of the Memos panel on a
Memos page.
You can use memos to enter internal notes or other
text related to parts, quotes, customers, suppliers,
employees and so on.
Disable clear Controls the availability of the Call Log panel on a
CallLog page.
Use the Call Log functionality to record com-
munications between you and a customer/prospect
and to review any conversations that were previously
entered in the log.
36 March, 2023
Disable clear Controls the availability of the Change Log panel on a

Change Log page.
You can use the Change Log functionality to view
changes made to certain records in the database.
Disable clear Controls the availability of the Attachments panel on
Attachments a page.
For more information on how to customize Application Page Layout, see Modifying
Application Layout and Working with ... examples.
Virtual Pages
Virtual Pages are Panel Card or Panel Card Grid components used in a Page Layout with Full Screen
visualization enabled.
Click on the Details Page icon and select Edit to display the Page layout.
Click the Customer Detail Panel card to display its Properties. Notice in the Advanced section, the
Enable FullScreen option is enabled. The panel card is configured to automatically expand at runtime,
and users are first provided with primary components placed in the first container.
37 March, 2023
By clicking the Full Screen button at runtime, the panel card expands showing the data in both primary
and additional containers while all other page cards become hidden. You can use the Back button to
collapse the Full Screen mode.
38 March, 2023
See how it looks at runtime.
Note the following:
39 March, 2023
l Panel cards may be configured use a single container, or they can use a primary
and additional container that expands only the Full screen mode.
l Virtual Pages have a limited set of Properties that may be modified. These include
Ep Binding, DataSet and Page Caption.
l Virtual Pages can contain child pages.
l Deleting a Virtual Page from Application Map clears the Enable FullScreen property
from a respective panel card.
l Navigating to a Virtual Page from either Navigation tree or the Crumb Bar
automatically displays the Full Screen version of the panel card.
For more information on Enabling a Full Screen View, see Modifying Page Layout.
Sliding Panels
Sliding Panels are quick access panels that slide out from the right side of applications. They are used
to display additional context specific information or to show info, warning, success and error messages
to a user in a dialog format. They are triggered by an event, such as clicking a button.
40 March, 2023
If you click on the Panel icon, you are presented with Page properties in the right pane. In this example,
let's take a look at the Change Customer ID shown above.
Name Slider.ChangeCustomerID Defines the name of the page.

Caption Change Customer ID Defines the Panel name that displays Applic-
ation Map.
Page Type SlidingPanel Indicates the page can only be displayed as
a Sligthout Panel. When you create a new
page anywhere in Application Map, this
Page Type detaches the Page from the Map
and places it in the Sliding Panel section.
Ep Binding blank This property is used to link, or bind a panel
to a specific application view.
Note that Ep Binding property is used
across Application Studio on both the Page
and individual layout controls such as text
box, combo box and so on.
Dataset Customer Defines the Dataset for the Panel. Notice the
sign indicator displays when a Patch is
used for a property, in this example %data-
setid%.
You can learn more about the concept of
using patches in Setting up Data Bindings.
Page Caption blank Defines the Panel name that display on a
form. If blank, the Caption field is used for
the Page Caption. TBD verify if true
Entity Type This control is used exclusively for the
Method Tree (ERP Data Tree component) to
link a page with it’s child nodes.
Status When selected, Sliding Panel captions dis-
play based on pre-defined formats, includ-
ing Success, Info, Warning and Error.
41 March, 2023
Hide Close Icon clear Controls the availability of the Close icon on
the panel.
Show Title enabled Controls if Title displays on the Panel.
Show Buttons enabled Controls if custom buttons display on the
Panel.
Collapse OnOut- clear Controls the ability to close a panel by click-
sideClick ing anywhere on the screen outside the
panel.
Add Buttons You can new buttons to display on a Sliding
Panel. A Button is typically used as an Event
trigger point to perform a desired action.
Add Actions You can add new items to a Sliding Panel
Overflow menu. An Overflow item is typ-
ically used as an Event trigger point to per-
form a desired action.
Click the Change Customer ID icon to display Page Properties. Note the Page
Name: Slider.ChangeCustomerID.
Click on the Details page icon and click Edit to display the page layout. In
the Customer Detail panel card Properties, expand the Advanced category and click on Action Data.
42 March, 2023
View the Change ID button properties.
The Sliding Panel displays when a user clicks the Change ID button. This flow is defined in the below
event named OnClick_Control_Customer.ChgIDButton. You can step through this flow to view the
Button and Sliding Panel references.
See how it looks at runtime. Launch Customer Entry and select a Customer record. Click Change ID to
invoke the sliding panel.
43 March, 2023
For more information, see Working with Sliding Panels.
Using Flex Layout

When you use Flex Layout on the main application page, a panel card, or a panel grid card, you can
change the Minimum Width value for panel cards, panel grid cards, and group boxes directly on the
layout. You can then see how these components will display together on the page layout. This key
design feature helps you precisely place your components, making sure you efficiently use the available
screen area.
Reviewing the Page Level Property

The Flex Layout property is active by default on all applications. This property is set on the main page:
44 March, 2023
1. Go to the Application Map.
2. Select the Landing Page for the application, such as ABC Code Maintenance.
3. Select the Edit button.
4. The main page for the application displays in a new tab.
5. Select the application Name.
6. Go to the Properties tab.
45 March, 2023
7. The properties for the page display, including Caption and Page Type.
8. The Flex Layout check box is selected by default.
Typically you want this property active, as the Minimum Width drop-down lists then
display on all panel cards, panel card grids, and group boxes throughout the application.
46 March, 2023
If you wish to disable this property on the main page, clear this check box. You can then
manually set it on specific panel cards and panel grid cards.
Adjusting Widths on Panel Cards and Group Boxes

The following example shows how you can use Flex Layout on both panel cards and group boxes:
1. Select the panel card.
47 March, 2023
2. Go to the Properties panel.
3. Expand the Layout node and select the Flex Layout check box. If this property is selected on the
application Landing Page, this check box is also selected by default.
48 March, 2023
4. The Minimum Width drop-down list displays on each panel card.
5. You want these three panel cards to display side by side. Change each Minimum Width drop-
down list to 33%.
6. The layout updates, placing these panel cards in a row.
49 March, 2023
7. You can also use the Flex Layout property on group boxes within panel cards. Add a panel card to
the layout.
8. Go to its Properties, expand the Layout node, and select the Flex Layout check box.
50 March, 2023
9. Place two group boxes inside the panel card.
10. Change their Minimum Width values to 50%. The group boxes display side by side.
11. Your layout now looks like the following:
Through this Flex Layout feature, you can create relationships where the widths on
the first panel card affects the widths available for other panel cards, panel grid
cards, and group boxes you place later on the layout.
51 March, 2023
You can also move panel cards to different parts of your layout to make better use
of the screen area.
Creating a New Page

1. In Application Map, select the root element Navigation tree where you want to create a new page.
2. In this example, assume you want to create a new child Page under the Billings Page.
3. Click on the Billing Page and click Add.
4. An empty page is added to the Billing node in the Navigation tree.
52 March, 2023
5. Select the Page and specify the main Properties, for example:
l Name - NewPage
l Caption - My New Page
l PageType - accept the default TabPage.
For more information on the remaining Page Properties see the Review an existing
Application Map > Pages section above in this article.
6. Select your newly create Page and click Edit.
7. Add a few controls to your Page. For example, add a Panel Card and a Button control.
8. Save the Layer and assign a Layer Name.
9. Now you can Preview the modified Application Map.

The Customer Entry form displays at runtime.
53 March, 2023
10. Select a customer record. Your new Page is now part of the Application Map.
Creating a New Tab

1. We'll start by adding a new Page under the Customer Tab. We will reference this new Page in a
Tab Strip component later in the process. Click the Customer Tab and select Add.
2. An empty page is added to the Billing node in the Application Map. Click the Page and specify the
main Properties, for example:
l Name - NewTab.
l Caption - My New Tab Page.
54 March, 2023
l PageType - select TabPage.
l Parent - verify Main displays.
l Tab ID - NewTab.
In order to properly specify Make sure Name and Tab ID values match.
For more information on the remaining controls see the Review an existing
Application Map > Pages section above in this article.
3. Select your newly created Page and click Edit.

4. Add a few controls to your Page. For example, a Panel Card and a Time Picker control.
5. Now that we have created a New Page, we'll add a New Tab to the Customer TabStrip
component.
6. Navigate back to the Application Map , select the Customer Tab and click Edit.
7. Click the TabStrip component and select Properties.
8. Expand the Data category and then the Data node.
55 March, 2023
9. Click Add New and specify the below properties:
l Id - Enter new ID for the Tab - for example, NewTab.
l Title - Enter the title for the Tab, in this example, NewTab.
Make sure the Title matches the Name and Tab ID specified in Page
properties of the selected Page.
l Page - select the newly created Page, in this example, NewTab.
The New Tab is now part of the layout.
56 March, 2023
10. Save the layer and press Preview to test the modified Application Map Layout.
11. Select any customer record. The New Tab is now available for selection.
57 March, 2023
Besides using custom Tabs in an Application Map, you can use the TabStrip component
inside a Panel Card to break content down on a Page level.
58 March, 2023
Setting Up Shortcuts for Application Tools
In Application Studio, you can setup default shortcuts for local shortcuts. The system will use these
shortcuts as a part of the application you set them up for.
Local shortcuts are applicable to specific applications and their components. As they are component-
specific, when you open the hot keys panel, it displays all relevant actions for the page/panel
card/component that launches the panel. This way you can assign different shortcuts for different
components of the application.
To launch the hot keys panel, press Ctrl+ Alt + H (or Cmd+H for Mac).
You can launch Application Studio Homepage only if you have the customization rights
enabled for you (the Customize Privileges check box is selected in User Account
Security Maintenance).
In this article, we will cover setting up a default shortcut to open the Search panel in ABC Code
Maintenance.
1. From the main menu, go to Material Management > Inventory Management > General
Operations > ABC Code.
2. Launch the Application Studio by pressing Ctrl+Alt+D and go to the Layout designer.
3. Select the header of the page - ABC Code Maintenance - and go to Properties.
4. Scroll down to the epActions (tools) available for this page. They are all the actions that you can
create shortcuts for this application.
5. Locate and expand the ToolSearch epAction.
6. In the ShortCut field, enter Ctrl+Alt+S.
7. Save, publish and add the layer as usual.
8. Go back to ABC Code Maintenance.
9. To test the shortcut, press Ctrl+Alt+S. This opens the Search panel. Close the panel once done.
10. Open the Keyboard shortcuts panel by pressing Ctrl + Alt + H. Here you can see the new Search
shortcut in the Local section. This way, everyone that uses the modified application will have this
shortcut selected and defined by default. However, they can still override it and personalize it by
themselves using the Edit option.
59 March, 2023
Promoting Personalization to Customization
Personalization can be really helpful when you want to make simple changes to the application's UI.
And some personalizations can end up being so successful and convenient, that you might want to
make them available not only for the users that created them, but for the entire company. To do that,
you can promote those personalizations to customizations in the Application Studio.
1. Go to the application that has the personalization you want to promote.

You don't need to be the one who created the personalization. You will have access to all user
personalizations for this application within your company.
2. From the Overflow menu , select Application Studio:
60 March, 2023
3. Select <New Layer> .
4. Select Change Layer > Merge Layers.
5. Select the Load from Personalization check box.

6. From the list, select the ID of the user whose personalization you want to promote and select
Promote.
Now, if you go to the layout designer, you will see the page's layout the way it was personalized
by that user. To preview the changes, select . If the Application Studio hints you to create a
layer, enter its Layer Name and Description and select Save Layer.
7. Once done, Save or Publish the layer as usual.
61 March, 2023
Debugging Applications
Debug the applications you create and change in Application Studio through a couple tools. You can
debug them within Kinetic using the Debug Tool. You can also debug them within the browser using
Developer Tools.
Using the Debug Tool

The Debug Tool can display both while you run the application in the system and while you preview the
application within Application Studio. When you run the Debug Tool within Application Studio, you can
toggle the AutoLoad feature to immediately preview changes you make in Application Studio.
To use the Debug Tool:
1. Launch or preview the application you need to debug.
2. You can launch the tool in a couple ways. Select the Oveflow menu and the Debug Tool. You can
also press the Ctrl + Shift + D keyboard shortcut (D is for debug).
62 March, 2023
3. The Debug Tool displays. The Log option launches by default.
4. Do an action within the application, like select a record.
63 March, 2023
5. The Log populates with the calls the application made to the system to run the action.
6. Use the Search field to find a specific call.
64 March, 2023
7. Switch to the Data panel. Select the drop-down list and select the Data option.
8. The Data View drop-down list appears. Use this list to select the data type you want to display,
such as Constant, DebugLogData, KeyFields, and so on.
9. The selected data displays within the grid.
10. Click the Side Panel button to place the Debug Tool in the side format. You can then see
more rows in the grid.
65 March, 2023
11. Select the Bottom Panel button to place the Debug Tool below the application again.
66 March, 2023
12. When you display the Debug Tool on the Preview tab within Application Studio, this panel now
has the Autoload toggle.
13. Activate this toggle.
14. Go back to the Application Studio tab and make a change in the application, like adding a text
field, changing an event, and so on.
15. Save the application.
16. The Preview tab refreshes with your change. You can then test the change within the preview.
Using Browser Developer Tools

Developer Tools are included in most modern browsers. You can use these powerful instruments to test
and debug execution of applications.
You can use the below debugging modes in Kinetic:
67 March, 2023
l Global flag – on-premise customers can turn the below flag in the sysconfig.json, typically
found in C:\inetpub\wwwroot\Kinetic<version>\Server\Apps\ERP\Home\sysconfig.json.
"ep.metafx": {
"debug": true
},
Enabling of this flag affects system performance. Epicor highly recommends usage
of this feature in a PILOT or TEST environments only.
l Browser session debugging - you can activate debugging within the currently opened browser
session.
Steps in this article apply to Google Chrome™. If you are using another browser, please
refer to your browser's documentation on how to launch and use Developer Tools.
Hot keys provide actions applicable for all pages across Kinetic. To launch the informational hotkeys
panel:
1. Launch an application.
2. On your keyboard, press Ctrl + Alt + H (or Cmd+H for Mac).
3. The list of available shortcuts includes commands you can use to debug applications, such as
Ctrl + Alt + 8 to enable browser debugging.
68 March, 2023
In this article, learn how to use commonly used debugging options.
1. Launch an application you want to debug. For simplicity, we will use ABC Code Maintenance.
2. To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-
hand corner and select More Tools > Developer Tools. Alternatively, press Ctrl + Shift + I on
your keyboard.
When the Developer Tools dialog is open, you select the menu and choose the
docking position you want. For example, you can undock Developer Tools to a
separate window.
69 March, 2023
3. Select the Console tab.
4. Now, click anywhere inside Kinetic and press Ctrl + Alt + 8 on your keyboard. You should see the
following message.
You can enable a debugging mode to display internal events triggered inside dataviews.
Due to its affect on application performance, this logging mode should only be used in
specific cases, when dataview changes need to be closely examined.
1. Launch an application you want to debug and launch Developer Tools.

3. Now, click anywhere inside Kinetic and press Ctrl + Alt + 9 on your keyboard. You should see the
following message.
70 March, 2023
4. As you debug application execution, the log will also display internal events, as seen on the
example below.
1. Navigate to a page you want to examine. In this example, ABC Code Details page was selected.
To clear the console before running a command, press the Clear console icon or
use Ctrl + L keyboard shortcut.
3. To load component objects, press Ctrl + Alt + l on your keyboard.

4. You can now inspect properties for a selected component, such as Count Frequency field and
obtain the properties you need (epBinding value, format and so on).
71 March, 2023
You can search for a component, such as Stock Valuation Percent, using the
dynamic Filter box.
72 March, 2023
5. You can modify a component property and observe the changes. For example, personalize the
Stock Valuation Percent field to make it hidden.
6. Clear the console and press Ctrl + Alt + l on your keyboard to re-load components. Locate the
field and observe the hidden status is true.
73 March, 2023
1. Navigate to a page you want to examine. In this example, ABC Code Details page is selected.
2. You can display data rules using two formats:
l Tree view format - press Ctrl + Alt + 1
l Table format - press Ctrl + Alt + 2
3. You are presented with system and custom data rules grouped by data view.
74 March, 2023
4. In this example, a data rule was created to highlight the Percent Tolerance field, when the value
exceeds 4%. With this value set to 3%, the data rule evaluates to false.
5. When setting this value to 5%, the data rule activates.
You can use this approach to dynamically inspect data rules as you work on your
layer.
2. On your keyboard, pres Ctrl + Alt + v to display all data views. Notice that data views are
grouped by two categories and data views with changes are highlighted.
l System Dataviews - hold system information such as BPM callcontex data, constants,
search results and so on.
l Application Dataviews - hold application data stored in underlying dataset tables.
75 March, 2023
3. In this example, Stock Valuation Percent and Country Frequency field values were modified. By
pressing Ctrl + Alt + v again, notice the ABCCode data view has changes and becomes
highlighted. To inspect the changes, you can drill into the data view and view the original and
76 March, 2023
updated values.
77 March, 2023
4. You can also display dirty dataviews only (dataviews with unsaved changes) in the console. To do
so, press Ctrl + Alt + 3 on your keyboard.
An event is a single action or a sequence of actions that perform some function in your application. It
can be navigation to a page, updating a field value, or making a call against the REST API. Here's how
you can inspect the chain of events:
2. Modify the record, for example, update Count Frequency value.
78 March, 2023
3. Clear the console and Save the record. Observe this action triggers the OnClick_toolSave event
followed by the chain of events to perform the requested operation.
You typically examine this flow to understand how the application operates. For example,
you want to create an event that executes a service method call every time an application
initiates. You launch the application and observe it contains the AfterInitialize event.
79 March, 2023
To achieve the expected behavior, you can add your event as an additional action to the
AfterInitialize system event.
You can use Developer Tools to inspect application's network activity.
1. In this example, launch ABC Code Maintenance to display the landing page.
2. In Developer Tools, select the Network tab and clear the previous network activity.
3. On the landing page, select an ABC Code record.
4. Observe the GetByID method was called. You can inspect call headers and payload body of the
request.
80 March, 2023
5. You can use the Response tab to view the response body in a Tree format.
For more information on inspecting network activity, see your browser's Developer Tools
documentation.
You can further analyze application execution by using the epDebug MetaFx augmented debugging
service. You call this service and available methods using the Developer tools command line.
This section highlights some of the frequently used debugging methods. For a complete list of available
keyboard shortcuts and debugging methods, run epDebug.Help command.
81 March, 2023
l Show context - epDebug.context
Use this command to dump the current context object into the browser's debug console.
l Show dataviews - epDebug.views
82 March, 2023
Dumps all dataview objects in an alphabetical order into the browser's debug console. The result
of this command is similar to using CRLT+ALT+v keyboard combination.
l Show dirty dataviews - epDebug.viewsDirty
83 March, 2023
This command lists all dirty dataviews (Dirty=true) in an alphabetical order; it also dumps a copy
of the current dataview's data.
l Show changed dataviews - epDebug.viewsChanged

This command shows dataviews in changed status (Dirty=true or Has Changes=true). Has
Changes equals true when either of the following is true: Has Added, Has Deleted or Has
84 March, 2023
Modified.
l Show change states of all dataviews - epDebug.allChangeStates

Shows change states of all dataviews in a simple tabular form.
85 March, 2023
l Show change states of all changed dataviews - epDebug.activeChangeStates
Shows dataviews in dirty or changed state in a simple tabular form.
l Show change state of a specified dataview - epDebug.dumpChangeState(dvName:string)

This command shows the change state of a specific dataview; it accepts a single input string
parameter (dataview name). Has Changes equals true when either of the following is true: Has
Added, Has Deleted or Has Modified.
l Dump data copy of specified dataview - epDebug.dumpViewData(dvName:string)

This command creates a snapshot of a dataview (dataview's data) specified input string
parameter. You typically use this command in real-time debugging by making dataview
86 March, 2023
snapshots on the fly.
l Dump data copy of a specified data table - epDebug.dumpTableData(tabName:string)
87 March, 2023
This command creates a snapshot of a table (table data) specified input string parameter. You
typically use this command in real-time debugging by making table snapshots on the fly.
l Dump rules - epDebug.rules

Dumps rules per each dataview in a tabular format.
88 March, 2023
l Dump rule actions - epDebug.ruleActions
Dumps all data rule results in a tree-view format.
89 March, 2023
Application Studio Learning Resources
Application Studio Help
Use the built-in Help & Support panel to explore the available Application Studio content.
ToolTips
Use Tooltips to view information about each Component, Event and their properties so you can more
easily understand how to build customizations with Kinetic. To display a description, hover over a
property of your interest.
90 March, 2023
Epicor Learning Center
Interested in getting to know Application Studio better? Be sure to review our Epicor Learning Center
offerings!
How do you access Epicor Learning Center?
1. From the Kinetic Home Page, press Help.

2. Select the Help and support panel button and navigate to Epicor Learning Center.
3. Sign in using your EpicWeb credentials.
4. For product, select ERP.
5. Go to Course Catalog > Browse > Application Studio and review the below agendas that
include both Training-on-Demand tutorials and Hand-on Learning exercises:
l Core Concepts and Approaches - learn the core concepts of Application Studio. Topics
include an introduction to Application Studio, creating and managing layers, exploring the
Application Map, and using items such as data rules, events and data views to enhance
layers. You also explore the Application Studio Home Page management tool. This agenda
concludes with a Hands-On Exercise where you create your first application layer.
l Basic UI Modification - explore the tools and components that help you create layers
which match business and organizational needs. Learn how to add control components,
91 March, 2023
like text boxes, buttons and display data using grids. See how to configure widgets and
sliding panels that display data linked to specific records. Both data rules and events affect
how a layer flows and runs, and you will also explore how to create these key elements.
l Extending UI Modification - includes topics that further explore the functionality of
Application Studio. These courses walk you through scenarios with multiple components,
events, data rules, searches and data views, building on the knowledge you gained during
the previous agendas.
92 March, 2023
Overview of the Upgrade Conversion Process
As you upgrade to Kinetic 2023.1, the system automatically runs a program that converts every existing
classic customization layer into a Kinetic customization layer provided the application that this layer
modifies has a Kinetic UX equivalent.
The conversion program processes layers of Customization type only.
Using Conversion Workbench, you can also rerun this new conversion program (180) on demand,
multiple times. You may want to do this when:
l a classic program that you have a customization layer for gets converted into Kinetic by Epicor
and you want to apply your existing customization to it;
l the conversion program gains new capabilities that make the layer conversion more effective.
Conversion program 180 does not overwrite existing Kinetic customization layers. To
replace an existing Kinetic layer with a newly converted one, delete it prior to rerunning
the conversion.
Depending on the layer complexity and compatibility with Kinetic UX, the results of this conversion can
vary: a layer can convert fully, partially, or not convert at all due to some serious incompatibility with
Kinetic UX.
The conversion program does not generate a Kinetic layer if the original layer is empty or only contains
unsupported elements. The conversion considers a customization as empty if it does not contain new
elements. This can happen if you opened a Classic customization and saved a new version without
making changes to it.
The Classic customization is also considered empty when it only has elements that Kinetic does not use,
like font, color settings, control position, and so on. The conversion ignores these elements and does
not generate log entries for them. You can review elements the conversion does not convert later in this
article.
Even fully converted layers require verification. You should verify each newly generated Kinetic
customization layer and perform additional post-conversion modifications:
l Review and verify the conversion results using the Conversion Workbench logs and Configuration
Upgrade Dashboard.
93 March, 2023
l Verify each layer in Application Studio to make sure everything is functional and all user-defined
components are placed in correct layout locations. If necessary, edit the converted layers in
Application Studio.
Conversion program capabilities

The conversion program is constantly evolving. As of now, the program can easily convert the following
elements:
l Simple UI components - for example, text boxes, labels, numeric boxes
l Combo boxes. Note that some complex setups may still require revision and rework
l Foreign key data views (including multiple foreign key data views)
l Sub Table data views
l Wizard-generated data rules in C#
l Data rules that were manually written in C# following the system wizard principles and structure.
Some elements of the classic forms structure may have no direct equivalent in Kinetic. The program
attempts to perform "fuzzy matching" to correctly place the converted UI components on the layout. If
the program can't identify the parent component - for example, a panel card, the converted UI
components are placed on a separate custom panel card. Multiple components that have the same
parent on the classic form are grouped under the same parent in the Kinetic layer. If the program
cannot identify an appropriate target page for a custom component based on its EpBinding, it creates a
separate custom page and panel for it.
For example, on the classic form, you had added a child data view, then added a new component (a
text box), placed it on a tab and bound it to the child data view column. In the process of conversion,
this text box will be placed within a custom panel on a separate custom page because the binding is
unique to the form and there are no UI components on the Kinetic application bound to that same new
data view.
On the other hand, if you add a new component and bind it to a data view that also exists in the Kinetic
equivalent, such component will be placed on a custom panel on an existing page bound to that data
view. However, if you bind a new UI component to a data view column and the Kinetic equivalent has a
component with the same binding, the new component will be placed next to the existing one in the
Kinetic application.
This logic applies to additional UI components while existing base components that have been adjusted
will not be moved.
94 March, 2023
Some classic customization elements may require rework in Kinetic using Application Studio - for
example:
l UI components that cannot be automatically converted to a Kinetic equivalent
l Built-in dashboard panels
l In some cases, data views renamed in the Kinetic equivalent
l Key Fields views not used for key fields in the Kinetic equivalent
l Data rules written in VB.net.
Some classic customization elements cannot be converted by the program - for example:
l Custom actions and conditions in Data Rules.
l Events and additional client-side business logic that is based on custom code - for example,
complex validation logic in the UI.
Such elements need to be re-imagined in compliance with the principles of the no code/low code
Kinetic UX framework. Complex business logic should execute on the server using Functions and BPM
directives.
95 March, 2023
Verifying Conversion Results in Configuration
Upgrade Dashboard
Configuration Upgrade collates the information on the system configurations that are unique to your
business. It provides information on existing custom Business Activity Queries (BAQs), BPM Directives,
Report Styles and Definitions, Dashboards and Menu options, and finally, your customization and
personalization layers - both classic and Kinetic.
After the upgrade to Kinetic 2023.1, run this dashboard to review your current system configuration that
now includes new Kinetic customization layers automatically generated during the upgrade conversion
process.
1. Review the Status of each Kinetic layer:
l Pass - The layer has been fully converted. Requires verification in Application Studio to
make sure everything is functional and custom components are placed in correct layout
locations.
l Warning - The layer has been partially converted. Requires editing in Application Studio.
l Error - The layer contains elements that are not compatible with Kinetic UX. Need to be re-
imagined using the available Application Studio and Functions/BPM functionality.
2. Use the Comment column to review the conversion log messages for each layer. These will point
you to the specific issues detected during conversion.
Layers that for some reason did not get converted are not displayed on the
dashboard. Use the Conversion Workbench logs for more detailed information.
96 March, 2023
These logs contain comments on all classic layers.
Multi-Tenant and Express customers can get these logs by filing a request to the
Cloud Operations team.
3. Use Application Studio to edit the newly converted layers.
Use Application Studio Help and Epicor Learning Center (ELC) training resources for
more information on tailoring Kinetic to your business needs.
97 March, 2023
Components Overview
The Kinetic Framework provides a set of predefined user interface (UI) components (or controls) that
you can use to modify your applications. You can find them all on the Toolbox > Components tab. You
first add a component - for example, a button, check box, or combo box, to a page layout. You then edit
its properties to define its ID, data binding, behavior, look, etc.
There are components that you can add to a page as standalone UI elements, others have to be placed
within other components of "container" or "organizer" type. For example, you can add a Panel Card to
an empty page, but you can't add a button to the same page outside the Panel Card, it can only go in.
Here are the components that you use to host other components: Panel Card, Panel Card Grid, and
GroupBox.
"Organizer' components, like 1 Column, 2 Column, Container, etc. provide the second level of
encapsulation - they cannot be added outside "container" components listed above, but they can host
lower level components, like buttons, check boxes, text boxes, etc.
98 March, 2023
Modifying Page Layout
Expand each item below to learn what you can do with layout components and see some examples.
To add a component to a page in the app, first select the page you wish to modify. You can select it in
two ways:
l
On the Application Map , select the page you want to modify and press Edit :
l
On the Layout panel , search for a page or select it from the navigation tree:
This page opens in the Layout Designer.
99 March, 2023
In the Layout Designer, you can use the search on the Toolbox > Components tab to locate the
component you need.
1. Go to the Layout Designer .

2. On the Toolbox > Componentstab, in the search field, start typing the name of the component
that you want to use.
3. Drag and drop the component onto the canvas.

You can now define its properties.
1. From the Toolbox > Components tab, drag a Button and drop it on the
canvas.
2. Select the button you added and go to the Properties panel.
3. In the Basic > Label Text field, enter the text you want to display on the button.
You can now define other properties for this button or, for example, create an event for it by
selecting a hook type in the Behavior property group.
A panel card is one of the main components of an application page. You can drag and drop other
components there to structure the information on the page (for example, you can create several cards
that will display different details for a record).
100 March, 2023

1. From the Toolbox > Components tab, drag a Panel Card and drop it on
the canvas.
If there are any other panel cards on the canvas that you don't need to use now, you can collapse
them by selecting on the left next to the card's name.
2. Select the card you added and go to the Properties panel.

3. In the Basic > Title field, enter the panel card name.
4. Scroll down and make sure the Advanced > Expand at Runtime check box is selected. This way
this card will be always expanded when you open the page.
Sometimes the amount of data you want to display in a container component, such as a Panel Card or
Panel Card Grid, is so large that you need extra screen space for it. The Advanced > Enable FullScreen
property of the Panel Card and Panel Card Grid components allows you to automatically create full
screen views for displaying additional data.
By default, the Enable FullScreen property is selected for the Panel Card Grid component.
So, by default, each Panel Card Grid has an additional full screen view which, at runtime,
displays additional grid rows that do not fit the summary view.
For Panel Cards, you need to enable it manually.
To enable a Full Screen view for a Panel Card:
1. Add a new Panel Card to the page layout.

Note that it has just one container box for components.
2. Select the card you just added and go to its properties.
3. On the Properties panel, expand the Advanced group and scroll down to the Enable FullScreen
check box and select it.
101 March, 2023

The FullScreen button appears at the bottom of the panel card.
4. Click the FullScreen button on the layout.
The panel card expands. Note it now has the second container box. You place the primary UI
components you want to display on the panel card at all times. You use the second container for
the additional components that you want to display only in the full screen view.
5. Click the Back button to collapse the Full Screen view container.
6. For these full screen views, the system automatically creates tree view elements in the
application. Note that on the App Map, they have a different color and cannot be edited.
102 March, 2023

Also note that full screen views can have standard application pages as their child views:
7. At runtime, full screen views also display as separate nodes in the application navigation (if it is
enabled for the app) and can be directly accessed from there.
103 March, 2023

You can use the standard cut/copy/paste functionality (Ctrl+X/Ctrl+C/Ctrl+V keyboard shortcuts) to
replicate components:
l within the current layout tab
104 March, 2023

l or on any layout tab open in Application Studio
You can paste the copied components into container controls only - for example, a
column.
When you select a component on the layout design canvas, you can use the standard set of tools to
move or delete it:
Use the up and down arrow controls, or the Up and Down Arrow keys on the keyboard, to
quickly move the component upwards or downwards within the parent container.
If the parent container of the component has horizontal orientation, there are left and
right arrow controls (with corresponding keys on the keyboard) instead - . Use
them to move the component horizontally.
Use this control to delete the component.
105 March, 2023

Use this one to drag and drop the component anywhere on the page layout.
In your layer, you can hide a component from other users while still keeping it in the application's
layout. To hide a component, navigate to its Properties and enable the State > Hidden property.
If you want to compare how the layout looks with and without this component, use the Unhide button.
The hidden component appears on the layout in a disabled state.
Clear the Hidden state property to make the component visible again.
106 March, 2023

If your application is overall personalizable, but you'd like some components to stay exactly the way
they are, you can disable personalization for them.
1. On the canvas, select the required component and go to Properties.

2. Clear the State > Personalizable check box.
This makes the component unavailable for personalization, but it will stay in the layout.
However, if a user tries to change it in the personalization panel and hovers over it, it will be
grayed out and the following message will display:
User-defined reusable components are interface template items like panel cards, pages, sliding panels,
and other items you can create in the Custom Component Editor (requires SDK license) and use in
multiple layers.
107 March, 2023

l In the Toolbox, select the User Defined tab.
l Pick a component from the list of published custom components and drag it onto the canvas.
l In your custom components, you can have all the base components like buttons, grids, text
boxes, etc., except widgets and other custom components.
108 March, 2023

Setting Up Component Properties
Kinetic provides a set of predefined user interface (UI) components that you can use to modify your
applications. You can find them all on the Toolbox > Components tab. You first add a component - for
example, a button, check box, or combo box, to a page layout. You then edit its properties to define its
ID, data binding, behavior, look, etc.
Learn what each component does by hovering over it in the Toolbox > Components panel. A Tool Tip
displays that explains its purpose.
As you select a component on a layout and go to its properties, you can see that the properties are
grouped by categories. Some components have many properties; categories allow navigating to a
property you need quicker and with minimal scrolling. The Properties panel contains the following
groups:
Basic
Includes such unique component properties as ID, Title, or Label Text. As a rule, Basic properties are
required.
For example, here is the Basic properties group for a Panel Card Grid component:
109 March, 2023

Behavior
Includes the list of available hooks that you can use to quickly set up the component as an event
trigger.
For example, use the On Click hook to automatically create an event that will be triggered by a click on
this button:
110 March, 2023

Comments
This section is reserved for user comments. You can add comments to existing application or user-
defined components - for example:
Data
Includes properties related to data binding - EpBinding. Read more about component binding in
Setting Up Data Binding.
111 March, 2023

Layout
Includes properties that impact component appearance, width, etc - for example:
State
Includes properties that define component state - Hidden, Disabled, ReadOnly, etc. as well as
Personalizable and Customizable properties enabled by default.
112 March, 2023

Advanced
Includes properties specific to each component type. Fore example, the Advanced property group for a
Button would look like this:
Whereas, a Panel Card Grid would have View Options, Action Data, etc. under this group.
Required Properties
As a rule, required properties are located in the Basic category and marked with an asterisk *.
113 March, 2023

Make sure you specify these properties when you add new component to the layout. Most often, the
system generates unique IDs for new components. We recommend that you change system IDs to
something more meaningful and appropriate to your layer. It becomes most relevant when you refer to
these components by ID in events.
Application Studio (Design) Mode

In Kinetic, all the components in Application Studio appear on a layout in design mode meaning that
field / grid data does not load, the components are in disabled state - you cannot select check boxes or
combo box items, enter data, pick dates, etc. Use Preview to test component behavior.
114 March, 2023

Setting up Data Bindings
Some fields in Application Studio have in-built data look-ups (autocomplete) available that helps users
setup data bindings in layouts and events by making a selection for a field instead of typing it.
See the below ways of using the data look-up feature:
l Setting up Ep Binding controls - typing in the field brings back the full list of available
application views, including UD fields, BAQ views and additional columns (if defined). The list of
results dynamically responds as you type. You can make your selection using either a keyboard
or mouse.
l You can enter custom values that do not appear on the list.
l To make the look-up feature work, ensure that you have the correct data
table setup in the Data View designer.
In case of ERP/ICE schema data views, ensure that the Dataset and table
properties are setup a part of the data view. In case of BAQ views, ensure that
the BAQ ID is setup as a part of the data view. Additional columns required
for data bindings can be setup as a part of the data view.
115 March, 2023

The following is an example of the OrderHed data view.
l Declaring %Patches% - patches are predefined constants such as default datasetID or

tableName. They are typically used for ease of application development and are defined for each
application in their server directory, for example:
C:\inetpub\wwwroot\<KineticVersion>\Server\Apps\MetaUI\Erp.UI.AbcCodeEntry\patch.jsonc.
Patches are typically used for configuring Datasets and Events. The trigger point for displaying
the available patches is the keydown event of typing the percent % sign. Make a selection and
complete your entry by entering the percent sign % again.
Notice the P sign indicator displays when a Patch is used for a property. Hover your mouse over
the sign to display the Patch ID.
116 March, 2023

l Declaring Variables - typically used for Page Caption and website widget URL to define
{Data.Binding} values. The trigger point for displaying the available data binding is the keydown
event of opening a curly bracket {. Make a selection and complete your entry by entering the
closing bracket }.
A typical example includes:
l Page Caption: Customer {Customer.CustID} - Ship To {ShipTo.ShipToNum}

l Website widget url property: https://yourwebapp.com/app/
{OrderHed.CustNum}?order={OrderHed.OrderNum}
117 March, 2023

Component Reference
This article contains the list of commonly used UI components available in the Application Studio's
Layout Designer.
Each component has a minimal number of required properties - as a rule, you define these
under the Basic property group. Required properties in this article, as well as in
Application Studio, are marked with an asterisk *.
The properties in the Comments, Layout, and State property groups are mostly the same
for all components. Any component-specific properties from these groups are called out
separately below.
1 Column
Column is a container, where multiple components can be added.
Key properties
Component
Options and Usage
Property
Basic > Id* The unique ID of the component. You can change the default value for something
that is more appropriate and meaningful for your configuration.
The ID is used for referencing the component in data rules and events.
Basic > Label The default system label text for the very first column. Enter a label for your
Text* column here.
Comments Use this field to add developer comments/notes for the control.
Data > Key Field The Key Field indicates that a data bound component is a key field. If true, the
field is enabled if there is no current record, allowing the user to select an
existing record or create new one.
State > Per- Use this field to enable/disable the ability for users to show or hide the control
sonalizable with personalization.
118 March, 2023

Component
Options and Usage
Property
State > Cus- Use this field to enable/disable the ability for the control to be customized in
tomizable other layers in application studio. If you set this to false it will be locked for
modification in layers.
State> Hidden Use this field to set the control as hidden.
Advanced > Select the number of columns.

columns
Advanced > Use this field to set the display orientation of child components placed within the
Orientation container.
2 Column
2 Column is a container where components can be added.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the very first column. Enter a label for your
Text* column here.
Comments Use this field to add developer comments/notes for the control .
119 March, 2023

Component
Options and Usage
Property

columns
Advanced > Use this field to set the display orientation of child components placed within the
Orientation container.
Address Format
Use this component to use an address field to define an address format by selecting address fields
provided.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the address format. Enter a label text for the
Text* control.
120 March, 2023

Component
Options and Usage
Property
Behavior > On The Behavior property group contains a list of hooks you can use to quickly create
Blur, On Create events triggered by some operation with the button:
On Blur - use this hook to generate an event triggered when the focus shifts away
from the button.
On Create - use this hook to generate an event that will run when the button is
initialized.
The "plus" sign next to the hook means that it is available for the
component (no event is yet set up with it). Press it to generate and launch a new
event in the Event Designer. The system will automatically create the event and
define its trigger properties - type, hook, and target (your button name or label
text).
Data > You can set up client-side binding to be able to refer to the button in data rules at
EpBinding runtime. For example, you can configure a condition and either display or hide the
button from view depending on how the condition evaluates. The client-side
binding is a variable that can be anything you want, however, recommended
format is [DataViewName].[ColumnName] where DataViewName would be the
name of the data view used on the page - for example, on the Details page in Order
Entry, you can set the following EpBinding for your button - OrderDtl.btnLineDtl.
Layout > Align- Use this field to set the alignment of the control.
ment
State > Cus- Use this field to enable/disable the ability for the control to be customized
tomizable in other layers in application studio. If you set this to false it will be locked
for modification in layers.
State> Dis- Use this field to set the control as disabled.
abled
State> Read Use this field to set the control as read-only.
Only
State> High-
light Selected
121 March, 2023

Component
Options and Usage
Property

Available
Actions
Advanced > Max Use this field to set the display orientation of child components placed within the
Horizontal container.
items
Advanced > Is
Delimited
Button
Buttons allow you to take action and make choices with a single click. Buttons may contain text or
icons and come in multiple sizes and styles.
Key properties
Component
Options and Usage
Property
Basic > Id* The unique ID of the component. You can change the default value for something that
is more appropriate and meaningful for your configuration.
Basic > Label The default system label text for the very first button you add is Button-1. The index is
Text* incremented with every new button component added to the layout within your layer.
Enter a label for your button here.
122 March, 2023

Component
Options and Usage
Property
Behavior > The Behavior property group contains a list of hooks you can use to quickly create
On Click, On events triggered by some operation with the button:
Blur, On
Create On Click - use this hook to generate an event triggered by the button click.
from the button.
initialized.
component (no event is yet set up with it). Press it to generate and launch a new event
in the Event Designer. The system will automatically create the event and define its
trigger properties - type, hook, and target (your button name or label text).
When an event is already tied to the button, the "ellipsis" sign displays
next to the used hook instead. Press it to edit the event.
button from view depending on how the condition evaluates. The client-side binding is
a variable that can be anything you want, however, recommended format is
[DataViewName].[ColumnName] where DataViewName would be the name of the
data view used on the page - for example, on the Details page in Order Entry, you can
set the following EpBinding for your button - OrderDtl.btnLineDtl.
Advanced > Select one of the available options with immediate preview in the Layout Designer.
Button Style The default style is Primary.
Advanced > Select one of the available options to define button size and preview in the Layout
Button Size Designer. The default size is Regular.
123 March, 2023

Component
Options and Usage
Property
Advanced > Use this field to add a Material Design icon to your button in the following format: mdi
Icon mdi-[icon ID] - for example, mdi mdi-map-search-outline:
By default, the icon appears in front of the button label text. Kinetic 2023.1 ships a
complete set of Material Design icons (v3.9.97, see full list here) that you can use in
your applications.
Misc Use the Icon Align Right check box to change the default icon alignment.
Advanced
Check Box
A check box is a type of control that, by default, lets you choose between two opposite states, actions,
or values. A check box is considered "selected" when it contains a check mark and "cleared" when it's
empty.
Key properties
Component Property Options and Usage
Basic > Id* The unique ID of the component. You can change the
default value for something that is more appropriate
and meaningful for your configuration.
The ID is used for referencing the component in data

rules and events.
Basic > Label Text* The default system label text for the very first check
box you add is CheckBox-1. The index is incremented
with every new component of this type added to the
layout within your layer. Enter a label for your check
box here.
124 March, 2023

Behavior > On Blur, On Create The Behavior property group contains a list of hooks
you can use to quickly create events triggered by
some operation with the check box:
On Blur - use this hook to generate an event

triggered when the focus shifts away from the
component.
On Create - use this hook to generate an event that

will run when the component is initialized.
The "plus" sign next to the hook means

that it is available for the component (no event is yet
set up with it). Press it to generate and launch a new
event in the Event Designer. The system will
automatically create the event and define its trigger
properties - type, hook, and target (your check box
name (label text)).
When an event is already tied to the button, the
"ellipsis" sign displays next to the used

hook instead. Press it to edit the event.
125 March, 2023

Data > EpBinding Use this field to bind your check box to a data view
column (of boolean data type) - for example, to a
user-defined (UD) column, using the following format:
[DataViewName].[ColumnName].
You can also set up client-side binding to be able to

refer to the check box in data rules at runtime. For
example, you can configure a condition and either
display or hide the component from view depending
on how the condition evaluates. The client-side
binding is a variable that can be anything you want,
however, recommended format is [DataViewName].
[ColumnName] where DataViewName would be the
name of the data view used on the page - for
example, on the Details page in Order Entry, you can
set the following EpBinding for your check box -
OrderDtl.chkSelectThis.
State (Misc) The Check Box component has two unique properties
in this group:
l Highlight Selected - choose this option to

highlight the label text of the check box in the
"selected" state.
l Three State - allows for the third state of the

check box - indeterminate.
Color Picker
A Color Picker provide users with a predefined palette or a free-form gradient for a great UX when
selecting colors.
Key properties
126 March, 2023

Basic > Id* The unique ID of the component. You can change the default
value for something that is more appropriate and meaningful
for your configuration.
The ID is used for referencing the component in data rules and

events.
Basic > Label Text* The default system label text for the very first combo box you
add is ep-color-picker-1. The index is incremented with every
new component of this type added to the layout within your
layer. Enter a label for your combo box here.
Behavior > On Blur, On Create The Behavior property group contains a list of hooks you can
use to quickly create events triggered by some operation with
the check box:
On Blur - use this hook to generate an event triggered when the

focus shifts away from the component.
On Create - use this hook to generate an event that will run

when the component is initialized.
The "plus" sign next to the hook means that it is

available for the component (no event is yet set up with it).
Press it to generate and launch a new event in the Event
Designer. The system will automatically create the event and
define its trigger properties - type, hook, and target (your check
box name (label text)).
When an event is already tied to the button, the "ellipsis" sign
displays next to the used hook instead. Press it to

edit the event.
Data > Key Field The Key Field indicates that a data bound component is a key
field. If true, the field is enabled if there is no current record,
allowing the user to select an existing record or create new one.
127 March, 2023

Data > EpBinding Use this field to bind your combo box to a data view column -
for example, to a user-defined (UD) column, using the following
format: [View.Coloumn].
You can also set up client-side binding to be able to refer to the

combo box in data rules at runtime. For example, you can
configure a condition and either display or hide the component
from view depending on how the condition evaluates. The
client-side binding is a variable that can be anything you want,
[ColumnName] where DataViewName would be the name of
the data view used on the page - for example, on the Details
page in Order Entry, you can set the following EpBinding for
your combo box - OrderDtl.cboClassCombo.
Layout < Alignment Select how you wish to display components within the
group box - Left, Right, and Center.
State > Personalizable Use this field to enable/disable the ability for users to
show or hide the control with personalization.
State > Customizable Use this field to enable/disable the ability for the control
to be customized in other layers in application studio. If
you set this to false it will be locked for modification in lay-
ers.
State> Hidden Use this field to set the control as Hidden.
State> Disabled Use this field to set the control as Disabled.
State> Read-only Use this field to set the control as Read-only.
Combo Box
A combo box is a type of input field that includes a combination of a pick-list and a single-line editable
Text Box allowing you to either directly type in a value or select one from the list.
Key properties
128 March, 2023

value for something that is more appropriate and meaningful for
your configuration.

events.
add is erp-combo-box-1. The index is incremented with every
Data > EpBinding Use this field to bind your combo box to a data view column - for
example, to a user-defined (UD) column, using the following
format: [DataViewName].[ColumnName].

combo box in data rules at runtime. For example, you can
configure a condition and either display or hide the component
from view depending on how the condition evaluates. The client-
side binding is a variable that can be anything you want,
[ColumnName] where DataViewName would be the name of the
data view used on the page - for example, on the Details page in
Order Entry, you can set the following EpBinding for your combo
box - OrderDtl.cboClassCombo.
Reusable Combo Use the fields in this property group to build your combo box off
one of the predefined reusable combo boxes set up in the system
(shipped by Epicor or user-defined.
Please review the reusable combo box example in the Setting up

a Reusable Combo section.
Advanced > Drop Down Style Select one of the two options:
l DropDown (default) - allows typing in a value into this

field.
l DropDownList - only allows selecting one of the listed
values.
129 March, 2023

Advanced > Row Filter Use this field to define a client-side filter for your combo data.
For example, you may need to use it if a service method you are
calling does not support the required filtering.
Use the following syntax to set up a row filter: [column] =

[value] - for example, CustomerCustID = 'Dalton' where
CustomerCustID is the name of the column returned by the
GetList method. As a result, the GetList method underlying the
combo fetches all records from the server, but only the records
for Dalton display in the combo box.
Setting up a Static List Combo

In a user-defined combo box, you can create your own lists of values to choose from. For example, you
buy and resell apples and want to mark how ripe apples in each incoming pack are. Let's create a
Ripening Stage combo in Receipt Entry:
1. From Toolbox > Components, select Combo Box and add it to the page layout.
2. Select the newly added component on the design canvas and go to its properties.
3. Expand the Basic property group and change the default Label Text to Ripening Stage.
4. Next, in Data > EpBinding, define what data view column you want to tie your field to. In this
example, let's create a client-side binding - for example, RcvDtl.HowRipe. This value will be
define further processing of the received pack (it can be set to Inspection Required if the value
in the combo is not Unripe, but we are not going to set it up in this example). To store this value
in the database, before you set up the binding, you need to create a user-defined field and add it
to the data model.
5. Expand the Advanced property group and open the List section; then use to add three list
items:
Display Value
Unripe U
Ripe R
Senescent S
6. Finally, in the Advanced property group, in the TextField, type in display and in the Value Field,
type in value.
130 March, 2023

Currently, these two fields have to have these hard-coded values. Both fields are
case sensitive too.
7. Press Preview and see you combo box in action. Note that the additional logic that sets the
Inspection Required check box requires a data rule to be set up (more on data rules in the
Working with Data Rules article of Application Studio Help).
Setting up a BAQ Combo

In this example, let's create a combo that displays the list of customers. We will use the standard
system zCustomer01 Business Activity Query (BAQ). We will also display an additional BAQ column
(State) in the drop-down list. And we will add a text box filter for the query to display only the
customers in the selected state.
You can do this in any application - for example, in an abstract UD maintenance. The combo box in this
example is configured on the Order Entry > Details page.
1. Open Order Entry and launch Application Studio; then on the Application Map, select the
Details page and press Edit.
2. From Toolbox > Components, select a Panel Card and add it to the top of the Details page
layout. Optionally, change its title to Combo Box Examples.
3. Add a 2 Column component to the panel card body.
4. Add Combo Box and Text Box components.
5. Select the combo box on the layout and edit its properties like this:
131 March, 2023

l Change the default Label Text to Customer.
l In the Data > EpBinding, for this example, use a client-side binding - OrderDtl.Customer.
l Expand the Advanced property group and in the QueryId field, enter zCustomer01.
l In Advanced > TextField, enter Customer_Name. This column value will display in the
drop-down list.
l In the Advanced > ValueField, enter Customer_CustID. This value will be saved to the
database (requires binding to a physical data view/data table column).
6. Preview the layer. Open a sales order record, locate the combo and try it out. The combo displays
the list of customers in the system.
7. Return to Application Studio and combo box properties. Let's display one more query results
column in the drop-down. In the Advanced property group, open the Columns section.
8. If we are displaying more than one column, we need to define drop-down columns for each query
column. Use to add two columns:
Field Caption
Customer_Name Customer
Customer_State State
9. Go to the Reusable Combo property group; then in the Hidden Columns Append, enter
Customer_State. This will make the state values from the query results display in the drop-down
column you defined in the previous step. If you are adding more than one column to display,
separate the column names with a comma - for example: Customer_State, Customer_CustID.
10. Preview the layer. Open a sales order record, locate the combo and try it out. The combo displays
the list of customers and their states.
11. Return to Application Studio; on the Details page layout, select the Text Box you added
previously and open its properties:
l Change its Label Text to State.
l In the Data > EpBinding field, enter some binding - for example, OrderDtl.State.
The fields you use as filters for your combo box component must belong to
the same data view - in this example, it's OrderDtl.
12. Now go to the Customer combo box properties:
132 March, 2023

l In the Reusable Combo > Filters field, enter Customer_State = '?{StateCol}'.
With this expression we are passing a dynamic filter value with our query to the server. We
use Customer_State display field as it appears in the query.
Use a comma to separate multiple filters - for example, CustCnt_CustNum = '?

{CustNumCol}',CustCnt_Name = '?{CustNameCol}'.
You can verify the names of the query results columns in the BAQ Designer or
simply by temporarily adding a BAQ data view in Application Studio - the
query columns will display as data view columns in the Designer.
'?{StateCol}' - StateCol is a runtime variable. Its name can be anything that makes sense
to you. The single question mark prefixing the field value means that a REST request to
execute a BAQ will go through only if the value is NOT empty or null. The Customer_State
field is a string, therefore we enclose it in single quote marks.
l In the Filters Params field, enter StateCol = ?[State].
If you have more than one filter for your BAQ, list the parameters separating them with a
comma - for example, CustNumCol = ?[Character04],CustNameCol = ?[Character05].
Beware of the square bracket syntax here. State is the data view column
name you set up in the text box EpBinding - OrderDtl.State.
13. Preview the layer and open a sales order record. Enter a value into the State text box - for
example, MN, and expand the combo. The combo displays the list of customers from the state of
Minnesota only:
133 March, 2023

You can set up the filter field as any other UI control - for example, another combo
box or a check box.
Setting up a BO Combo (Default GetList Method)

You can configure a combo to retrieve data from a service method dataset. In this example, let's get the
list of orders from the dataset returned by the standard GetList method of the SalesOrder service. We
will also set up a filter for the combo: it will display order numbers greater than the filter value.
Before we get to the combo setup, let's have a look at the SalesorderSvc.GetList method in the
interactive REST API Help and see what it returns. Here's the format for the app server REST help site:
https://[Server]/[KineticInstance]/apps/resthelp.
It returns a parameter of tableset type - a table called OrderHedList. One of the columns in this table is
OrderNum. We will use it in the combo settings.
We will continue with the setup from the previous section - BAQ Combo:
1. On the Order Entry > Details page, add another 2 Column component to the Combos panel card.
2. Add Combo Box and Numeric Box components.
134 March, 2023

3. Select the Numeric Box on the layout and open its properties:
l Change its Label Text to Order Number.
l In the Data > EpBinding field, enter some binding - for example, OrderDtl.OrderNumber.
Again, we use fictional client-side binding here for the runtime logic. Such
column does not exist in the database or data view, it is only needed for
referring to it in the combo filter.
l Change the default Label Text to Orders.
l In the Data > EpBinding, for this example, use a client-side binding - OrderDtl.Orders.
l Expand the Reusable Combo property group and in the Svc field, select
Erp.BO.SalesOrderSvc.
l Use the SvcPath field to enter the name of the service method to call.
In this example, we can keep it blank: if the value is not specified, the system
will call the GetList method by default.
l In the Reusable Combo > Filters field, enter OrderNum >= ?{OrderNumCol}.
With this expression we are passing a dynamic value into the whereClause parameter of
the GetList method.
?{OrderNumCol} - OrderNumCol is a runtime variable. Its value can be anything that

makes sense to you. The single question mark prefixing the field value means that a REST
request to execute a BAQ will go through only if the value is NOT empty or null. The
OrderNum field is an integer, therefore we do not need to enclose it in single quote marks.
You can also hard code a value for a column. In this case, instead of a variable, just enter a
fixed value in the Filters field - for example, OrderNum = 5400.
l In the Filters Params field, enter OrderNumCol = ?[OrderNumber].
Beware of the square bracket syntax here! OrderNumber is the data view
column name you set up in the numeric box EpBinding -
OrderDtl.OrderNumber.
135 March, 2023

l In Advanced > TextField, enter OrderNum. This column value will display in the drop-
down list.
l In the Advanced > Value Field, enter OrderNum. This value will be saved to the database
(requires binding to a physical data view/data table column).
5. Preview the layer. Open any order and try out the combo:
Setting up a BO Combo (Custom Method)

You can populate the combo with values from a simple service method parameter that contains a
delimited list. As an example, we'll take the CustomerSvc.GetBillDayList method. Before we set up the
combo, let's see what parameters it requires and what it returns.
Go to the interactive REST API Help and locate the method. Note that it requires a single string
parameter, which is called billFreq. We'll pass it through an additional text field.
136 March, 2023

Also note that the method returns the billDayList parameter of string data type that contains a
delimited list.
Bill Frequency can be Weekly (W) or Monthly (M), so let's create a static list combo for it.
1. Again, on the Order Entry > Details page, add another 2 Column component to the Combos
panel card.
2. Add two Combo Box components.
3. Select the first combo box on the layout, open its properties, and set it up as a static list combo:
l Change its Label Text to Bill Frequency.
l In the Data > EpBinding field, enter some binding - for example, OrderDtl.BillFrequency.
Again, we use fictional client-side binding here for the runtime logic. Such
column does not exist in the database or data view, it is only needed for
referring to it in the combo filter.
l
Expand the Advanced property group and open the List section; then press to add two
items:
Display Value
Weekly W
Monthly M
l In the TextField, type in display and in the Value Field, type in value.
4. Select the second combo box on the layout and edit its properties like this:
l Change the default Label Text to Bill Day.

l In the Data > EpBinding, for this example, use a client-side binding - OrderDtl.BillDay.
137 March, 2023

l Expand the Reusable Combo property group and in the Svc field, select
Erp.BO.CustomerSvc.
l In the SvcPath field, enter the name of the service method - GetBillDayList.
l In the Parameter Name field, enter the name of the return parameter - billDayList
l Select the isDelimited check box because we know that the return parameter contains a
delimited list. If you don't select it, nothing will display in the drop-down at runtime.
l In the Reusable Combo > Rest Arguments field, enter billFreq = '?{BillFreqCol}'.
With this expression we are passing a dynamic value into the billFreq parameter of the
GetBillDayList method.
'?{BillFreqCol}' - BillFreqCol is a runtime variable. Its value can be anything that makes
sense to you. The single question mark prefixing the field value means that a REST request
to execute a BAQ will go through only if the value is NOT empty or null. The billFreq
parameter is of string type, therefore we need to enclose it in single quote marks.
l In the Rest Arguments Params field, enter BillFreqCol = ?[BillFrequency].
Beware of the square bracket syntax here. BillFrequency is the data view
column name you set up in the text box EpBinding - OrderDtl.BillFrequency.
l In Advanced > TextField, enter desc; in the Advanced > Value Field, enter code. These
are the required values for this type of combo setup.
5. Preview the layer and try out the combos:
Setting up a Reusable Combo
138 March, 2023

You can use combos predefined in the system. The full list of these reusable combos displays in the
Reusable Combo > Type drop-down. Once you select a reusable combo, its settings populate
automatically. You can then modify its filters to tie them to your context, or create additional filters.
In this example, we will use the system customer contacts combo (CustCnt.cboCustCnt). We will
modify its default CustNum filter to get the value from the current context. Plus, we will introduce a
new filter - by contact title - to the combo configuration.
1. On the Order Entry > Details page, add a 1 Column component to the Combos panel card.
2. Add a Combo Box to it.
l Change the default Label Text to Customer Contacts.
l In the Data > EpBinding, for this example, use a client-side binding - OrderDtl.CustCnt.
l Expand the Reusable Combo property group and in the Type field, select
CustCnt.cboCustCnt.
l In Sub Type, select default.
The combo settings get populated automatically and are protected from
editing. But we can assign values to the variables in the Filters property:
CustNum = '?{CustNumCol,''}',ShipToNum = '?{ShipToNumColumn}'.
l We are now in Order Entry. The Details page we are working in is bound to the OrderDtl
data view. This data view contains the CustNum column, so when you load order details at
runtime, you get the CustNum value in the background as well. Let's pass it into the
reusable combo filter. In the Filters Params field, enter CustNumCol = ?[CustNum].
4. Preview the layer and open a sales order for Addison. In the Customer Contacts drop-down, only
contacts for Addison display:
139 March, 2023

5. Return to Application Studio and in the Reusable Combo > Filters Append field, enter
ContactTitle = 'Vice President'.
ContactTitle is the name of a column returned by the Customer Contact service

(Erp.BO.CustCntSvc). 'Vice President' is a hard-coded string value we set for this
column. It can be another variable value taken from the context (in this case you
would additionally prefix it with a ? and enclose in curly brackets {}).
6. Preview the layer and open any order for Addison again. The Customer Contacts drop-down
displays only vice presidents now:
140 March, 2023

Setting up a Data View Combo
You can populate your combo box with data from an existing (loaded) data view - for example,
LandingPage.
1. On the Order Entry > Details page, add a 1 Column component to the Combos panel card.
2. Add a Combo Box to it.
l Change the default Label Text to All Orders.

l In the Data > EpBinding, for this example, use a client-side binding - OrderDtl.AllOrders.
l Expand the Reusable Combo property group and in the View Name field, enter
LandingPage.
l In Advanced > TextField and Advanced > Value Field, enter, for example, OrderNum. It
can also be any other column from the selected data view.
4. Preview the layer. Open any order and try out the All Orders combo. It now displays the numbers
for all orders in the system:
Setting up a Combo in a Grid

You can use combo boxes in updatable grids to select a value in a column. In this example, before we
actually get to configuring the combo, we will need some preliminary setup as well:
141 March, 2023

1. Add a new data view and bind it to the updatable system BAQ - zPartUpdate:
2. Add a Panel Card Grid component to the Details page layout and bind and set it up like this:
l Change the Title to UBAQ Grid.

l In Data > Grid Model, set EpBinding to PartUpdateView.
l Under Grid Model, expand the Provider Model node and in the Baq ID field, enter
zPartUpdate.
l Now, go back to Grid Model and expand the Columns node. Add two columns to display:
Field Title
Part_PartNum Part
Part_NetWeightUOM UOM
3. In the Part_NetWeightUOM column properties, in the Erp Editor field, select Combo; then
expand the Erp Editor Model node. The combo properties display:
l In the Reusable Combo > Svc field, enter the name of the service we will call -
Erp.BO.UOMSvc.
l In the Parameter Name field, enter the name of the returned table - UOMList.
l Expand the Advanced property group and enter UOMDesc for TextField and UOMCode for
Value Field.
4. Preview the layer. Select a row in UBAQ Grid and expand the drop-down in the UOM field. The
combo displays the list of UOMs defined in the system:
142 March, 2023

Saving the update value in an updatable BAQ grid requires setting up an event to
run the database update.
Container
Container is used to build flexible layouts of components with custom spacing and alignment rules.
Key properties

events.
add is metafx-flex-box-1. The index is incremented with every
Comments Use this field to add developer comments/notes for the control
.
143 March, 2023

allowing the user to select an existing record or create new
one.
Layout > Minimum Width Use this drop-down list to select the percentage of the
screen this panel card will use, such as 50%, 33%, and so
on. If you select the Flex Layout check box, you can
instead change the Minimum Length percentage on the
component directly in the layout.
Layout > Flex Direction Select how you wish to display components within the group
box - vertically (Column) or horizontally (Row, default).
Layout > Align Main Axis

Layout > Align Cross Axis
Layout > Gap
you set this to false it will be locked for modification in
layers.
Currency Box
Currency Box allows user to have the currency field displayed along with the amount, by default the
currency get toggled as per the value selected from the Currency Selector.
Key properties
144 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the currency box. Enter a label text for the
Text* control.
Behavior > On The Behavior property group contains a list of hooks you can use to quickly
Blur, On Create create events triggered by some operation with the button:
from the button.
initialized.
text).
Data > EpBinding You can set up client-side binding to be able to refer to the button in data rules at
runtime. For example, you can configure a condition and either display or hide
the button from view depending on how the condition evaluates. The client-side
name of the data view used on the page - for example, on the Details page in
Order Entry, you can set the following EpBinding for your button -
OrderDtl.btnLineDtl.
Data > EpBind-

ing Document
145 March, 2023

Component
Options and Usage
Property
Data > EpBind- You can set the Base Currency data binding using the format
ing ShowBase View.Column.
Data > EpBind- You can set the Document Symbol data binding using format
ing Document View.Column.
Symbol
Layout > Align- Use this field to set the alignment of the control to Left, Right, and Center.
ment
State > Per- Use this field to enable/disable the ability for users to show or hide the
sonalizable control with personalization.
State> Disabled Use this field to set the control as disabled.
Only
State> Auto Use this field to set the focus to the control.
Focus
Available Actions
Advanced > Use this field to set the active currency type to BASE, DOC, RPT1, RPT2, RPT3,
Active Currency and GLOBAL.
Type
Advanced > Use this field to set the format for the field by overriding extended prop-
Mask erties format.
Advanced Show Use this field to show the base currency.
Base
Advanced Show Use this field to show the currency symbol.
Symbol
146 March, 2023

Component
Options and Usage
Property
Advanced Dis- Use this field to toggle the currency value as per the value selected for Cur-
able Toggle rency Selector.
Currency Selector
Currency Select allows users to select the currency type from the drop-down.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the currency selector. Enter a label text for the
Text* control.
from the button.
initialized.
text).
147 March, 2023

Component
Options and Usage
Property
Data > EpBind- Use this to set the Document Currency Column data binding using the
ing Document format View.Column.
ment
Layout > Width Use this field to set a specific width for the control.
Only
Advanced Show When this field is enabled the doc currency type is ignored and base cur-
Document Cur- rency is used.
rency
Date Picker
Date Picker is a combination of a Date Input and a pop-up calendar graphic UI which allows you to
select a date from a calendar. Sometimes this component displays with a Time Picker component.
Key Properties
148 March, 2023


events.
Basic > Label Text* The default system label text for the very first picker
component you add is [Component]-1 - for example,
DatePicker-1. The index is incremented with every new
component of this type added to the layout within your layer.
Enter a label for your picker component here.
Behavior > On Blur, On Create The Behavior property group contains a list of hooks you can
the button:
On Blur - use this hook to generate an event triggered when

the focus shifts away from the button.

when the button is initialized.

define its trigger properties - type, hook, and target (your
button name or label text).
Comments Use this field to add developer comments/notes for the control
.
149 March, 2023

Data > EpBinding Use this field to bind your Date Picker to a data view column -
If you bind your component to a UD field, make sure the field

you specify in EpBinding for Date Picker is of Date data type.

picker component in data rules at runtime. For example, you
can configure a condition and either display or hide another
component from view depending on how the condition
evaluates. The client-side binding is a variable that can be
anything you want, however, recommended format is
[DataViewName].[ColumnName] where DataViewName would
be the name of the data view used on the page - for example,
on the Details page in Order Entry, you can set the following
EpBinding for your date picker - OrderDtl.dteShipDate.
Layout > Alignment Use this field to set the alignment of the control to Left,
Right, and Center.
you set this to false it will be locked for modification in lay-
ers.
State> Read Only Use this field to set the control as read-only.
State> Auto Focus Use this field to set the focus to the control.
Advanced> Format Placeholder This sets the way the format sections of the input field are
rendered.
Advanced> Place Holder This field sets the hint, the DatePicker displays when its
value is null.
150 March, 2023

Advanced> Min Allowed Date This field specifies the minimum valid date.
Advanced> Max Allowed Date This field specifies the maximum valid date.
Advanced Range Validation This field determines whether the built-in minimum or
maximum validators are enforced when validating a form.
Advanced Navigation This field determines whether to display the navigation
side-bar on calender.
Advanced> Mask this field overrides the default display format for te date time
value using Standard DateTime Format Strings. Examples:
l MM/dd/yyyy (02/03/2022)
l m/d/yyyy hh:mm:ss (2/03/2022 23:02:32)
l MMM yyy (Jan 2022)
Optional properties for Date Picker

Advanced > Week Number Select this check box to display week numbers in the drop-down
calendar:
151 March, 2023

File Picker Client
File Picker Client allows user to select a local file.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the File Picker Client. Enter a label text for the
Text* control.
from the button.
initialized.
text).
152 March, 2023

Component
Options and Usage
Property
Data > Special This field specifies the server folder that should navigate to select files.
Folder
l Report
l WebDeployment
l Report Definition
l CustomReportDefinition
l UserDate
l CompanyData
l EWADeployment
l Attachment
Data > Filter This field specifies the filters to be added to the file selector for example:
*.xml)|*.xml|All files (*.*)|*.*
Data > Binding This field specifies the binding to store relative file path.
File Name
ment
153 March, 2023

Component
Options and Usage
Property
Only
Focus
Advanced > Check Set this field if the file must exist on the server. The actual value will check if the
File Exists file exists on the server and throw an error if it does not. A false value will confirm
while overwriting the file.
File Picker Server

File Picker Server allows user to select a file form the server.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the File Picker Server. Enter a label text for the
Text* control.
154 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
155 March, 2023

Component
Options and Usage
Property
Data > Special This field specifies the server folder that should navigate to select files.
Folder
l Report
l WebDeployment
l Report Definition
l UserData
l CompanyData
l EWADeployment
l Attachment
Data > Filter This field specifies the filters to be added to the file selector for example:
*.xml)|*.xml|All files (*.*)|*.*
Data > Binding This field specifies the binding to store relative file path.
File Name
ment
Only
Focus
156 March, 2023

Component
Options and Usage
Property
Advanced > Check Set this field if the file must exist on the server. The actual value will check if the
File Exists file exists on the server and throw an error if it does not. A false value will confirm
File Server Folder

File Server Folder allows user to select a folder from the server.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the File Server Folder. Enter a label text for the
Text* control.
from the button.
initialized.
text).
Comments Use this field to add developer comments/notes for the control.
157 March, 2023

Component
Options and Usage
Property
ment
Only
Focus
158 March, 2023

Component
Options and Usage
Property
Advanced > Spe- Set this field if the file must exist on the server. The actual value will check if the
cial Folder file exists on the server and throw an error if it does not. A false value will confirm
This field specifies the server folder that should navigate to select files.
l Report
l WebDeployment
l Report Definition
l UserDate
l CompanyData
l EWADeployment
l Attachment
Advanced > Dis- Validates the folder still exists on the server on click of OK.
able Validation
Fiscal Year Suffix

Fiscal Year Suffix enables user to define/load fiscal year as well as suffix.
Key properties
Component
Options and Usage
Property
159 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > EpBind- You can set up client-side binding to be able to refer to the button in data rules at
ing runtime. For example, you can configure a condition and either display or hide
ment
160 March, 2023

Component
Options and Usage
Property
Only
Focus
Advanced > Set this field if the file must exist on the server. The actual value will check if the
Special Folder file exists on the server and throw an error if it does not. A false value will confirm
This field specifies the server folder that should navigate to select files.
l Report
l WebDeployment
l Report Definition
l UserDate
l CompanyData
l EWADeployment
l Attachment
Advanced > Dis- Validates the folder still exists on the server on click of OK.
able Validation
Foreign Lang Desc

Foreign Language Description allows user to save the foreign language for the selected value, supports:
l PartLangDesc
161 March, 2023

l LangDesc
l DynAttrValuesSetLangDesc tables
Key properties
Component
Options and Usage
Property
Basic > Id* The unique ID of the component. You can change the default value for
something that is more appropriate and meaningful for your configuration.
Basic > Label The default system label text for the Foreign Language Description. Enter a
Text* label text for the control.
Behavior > The Behavior property group contains a list of hooks you can use to quickly
create events triggered by some operation with the button:
On Search Click,
On Blur, On On Search Click - use this hook to generate an event triggered by the click
Create on the search icon in the text box.
On Blur - use this hook to generate an event triggered when the focus shifts
away from the button.
On Create - use this hook to generate an event that will run when the
button is initialized.
The "plus" sign next to the hook means that it is available for
the component (no event is yet set up with it). Press it to generate and
launch a new event in the Event Designer. The system will automatically
create the event and define its trigger properties - type, hook, and target
(your button name or label text).
Data > Key Field The Key Field indicates that a data bound component is a key field. If true,
the field is enabled if there is no current record, allowing the user to select
an existing record or create new one.
162 March, 2023

Component
Options and Usage
Property
Data > You can set up client-side binding to be able to refer to the button in data
EpBinding rules at runtime. For example, you can configure a condition and either
display or hide the button from view depending on how the condition
evaluates. The client-side binding is a variable that can be anything you
want, however, recommended format is [DataViewName].[ColumnName]
where DataViewName would be the name of the data view used on the page
- for example, on the Details page in Order Entry, you can set the following
EpBinding for your button - OrderDtl.btnLineDtl.
Data > EpBinding to identify LangDesc/DynAttrValueSetLangDesc record, for

EpBinding Key1 LangDesc table this should be set as 'LangDesc.Key1', in case of dynamic
table this should be mapped to the
'DynAttrValueSetLangDesc.AttributeSetID' field.
Data > EpBinding mapping to identify LangDesc record, for LangDesc table this
EpBinding Key 2 should be set as 'LangDesc.Key2'.
Data > EpBinding mapping to identify LangDesc record, for langDesc table this
EpBinding Key 3 should be set as 'langDesc.Key3'.
Data > Table Table name associated with the screen, UOM, BankFee, FOB to name few,
Name and for dynamic table we need to use DynAttValueSetLangDesc.
Data > Binding Specifies the dataview associated with the dynamic table.
Dataview
Data > Display We need to set true for short description, this is specific to dynamic table.
Short
Description
State > Use this field to enable/disable the ability for users to show or hide the
Personalizable control with personalization.
State > Use this field to enable/disable the ability for the control to be customized in
Customizable other layers in application studio. If you set this to false it will be locked for

Only
163 March, 2023

Component
Options and Usage
Property
Advanced > Max Specifies the maximum number of characters allowed in a text box.
Length
Advanced > Enables the search button.

Enable Search
Advanced > Disables Text Entry, but leaves the search button enabled. If enabled, Search
Search Only is set to True.
Advanced When enabled, the user will be unable to add or modify any data but will be
Disable able to view any existing data.
Translation
Panel
GL Account Editor
General Ledger Multi-book account editor component with possible multi-book account code entries.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-gl-account-editor-1 box. Enter a label
Text* text for the control.
164 March, 2023

Component
Options and Usage
Property
On Book Select
from the button.
initialized.
text).
Data > Coa Code Set data binding for COA Code using format View.Column.
Column
Data > Binding Use this field to set data binding for External Company using format
External Com- View.Column.
panyId
165 March, 2023

Component
Options and Usage
Property
Data > Binding Use this field to set data binding for description using format
Description View.Column.
Data > Binding Use this field to set data binding for account display using format
Acct Disp View.Column.
Data > Binding Use this field to set data binding for segments using format View.Column.
Segments
Data > Binding Use this field to set data binding Invalid Message using format
Invalid Account View.Column.
Message
ment
Layout > Use this field to set description of field width.
Description
Width
Only
Focus
Advanced > Use this field to set account search Event Binding ID to overwrite default.
Account Search
Event Binding
166 March, 2023

Component
Options and Usage
Property
Advanced > Use this field to set segment search Event Binding ID to overwrite default.
Segment Search
Event Binding
Advanced > Use this field to set description field orientation.

Description Ori-
entaion
Advanced Hide Use this field to hide dynamic segments.
Dynamic
Advanced Do Use this field to disable dynamic segments required entry.
not require
Dynamic
Advanced Allow Use this field to enable patterns in account.
Pattern
Advanced > Pat- Use this field to select the pattern option allowed in account.
tern Options
Advanced > Val- Use this field to enable segment value validation.
idate Segment
Values
Advanced > Val- Use this field to enable account code validation.
idate Account
Code
Advanced > Val- Use this field to enable validation upon account load.
idate Account
on Load
Advanced > Val- Use this field to enable validation that required segments are entered.
idate Required
Segments
Advanced > Val- Use this field to enable validation that required segments are entered.
idate Segment
Properties
167 March, 2023

Component
Options and Usage
Property
Advanced > Hide Use this field to hide control label (Obsolete: use able text).
Segment Labels
Advanced > Use this field to enable description field.
Show Descrip-
tion
Advanced > Do Use this field to disable description caching.
not cache
description
Advanced > Use this fieldto enable account search button.
Show Account
Search Button
GL Control Panel
GL Control Panel lists the GL Control types and codes.
Key properties
Component
Options and Usage
Property
168 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Advanced > Use this field to expand the panel by default when the form opens at runtime.
Expand at
Runtime
169 March, 2023

Component
Options and Usage
Property
Advanced > Use this field to set the Search to run for the Control Type field. Default search
Search for GL used is GLCTEntity.GLControlType.
Control Type
Advanced > Use this field to set the Search to run for the GL Control Code field. Default
Search for GL search used is GLCntrl.GLControlCode.
Control Code
Advanced > Full Use this field to enable Full Screen mode.
Screen
GL Multibook Account Editor

GL Multibook Account Editor is used with possible multi-book account code entries.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-gl-multibook-account-editor-1. Enter a
Text* label text for the control.
170 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > Account Use this field to edit the Account editor properties.
Editor
ment
171 March, 2023

Component
Options and Usage
Property
Only
Focus
Grid / Panel Card Grid

To add a grid to the layout, you can use either Grid or Panel Card Grid. Here is the difference between
the two:
l Grid - An arrangement of data in rows and columns, or a more complex structure. Grids are often
referred to as tables and are widely used in communication tabular data or complex lists. The
grid is driven by model defined by IEpGridModel interface.
If you need to group several grids and probably other UI controls, like buttons, text boxes, etc.
under one container component, take a standard Panel Card and just add anything you need to
its body. Use the Grid component as a 'building block' to construct component groupings - for
example, in Panel Cards.
l Panel Card Grid - A composite component that combines a standard Panel Card container-type
component and a single grid. You cannot add other grids or components to the body of a Panel
Card Grid. Use this component to display standalone grids.
Grid can support nesting of other component types so that a button or combo box is present in a
column when the grid is in editable mode.
Grids and Panel Card Grids share some basic properties with Panel Cards. All three can have contextual
actions (Action Data) defined - please refer to the Panel Card component section for details on setting
up Action Data. Also note that Title is not a required field for a standalone grid.
The heart of these components is in the Data property group that defines data source for the grid. The
table below also covers some key properties from the Advanced property group.
172 March, 2023

When you change the grid's layout within Application Studio, these layout changes save
with the grid and then display when you preview and run the application layer. The layout
changes you can save to a grid are:
l Column widths
l Column sequence
l Filters
l Column sorting
l Group By options
l Show or Hide summaries
l Summary aggregate options (Count, Sum, Average, and so on)
l Grid personalizations made within Application Studio (show/hide columns, column
sequence)
Key properties
173 March, 2023

Data > Grid Model > Ep Binding You can bind your grid to a data view. In this field, select the ID
of an existing data view - start typing and the system will
prompt you with a view ID that matches your entry. The data
from the specified view will automatically display in the grid. Set
up Columns to define what exact columns should appear in the
grid.
If you set up a data provider for your grid - dataset returned by a

service method or Business Activity Query (BAQ) results, binding
the grid to a data view works in reverse direction. in this case, if
you specify a data view in the Grid Model > Ep Binding field,
the system automatically populates this view with data from the
grid. This is another convenient way of loading data into a view.
For example, in your grid's provider model section, you

configure a call to Erp.BO.PartSvc.GetList method and map the
dataset columns to grid columns. You can set up additional
filtering for your call to get the exact data you need (we will look
at this example further below). Whatever data gets into the grid
from that service call automatically populates the data view you
specify in the Grid Model > Ep Binding field. It can be an
"empty" data view (just its ID is specified) that will take any
shape based on the incoming data.
Data > Grid Model > Columns Use this section do display specific columns in your grid. Press
to add a new column.
Enter the data source column title for Field - for example,
PartNum (column from the table returned by the Part service) or
Customer_CustomerCustID (column from the BAQ results table).
Data > Grid Model > Provider Use this section to define the data source for your grid - a
Model method or BAQ results dataset. Please refer to the Setting Up
Data Provider for a Grid section for examples.
Data > Grid Model > Auto Load Select this option to automatically load the columns from the
Columns data source.
Data > Grid Model > Resizable At runtime, allows you to resize grid columns by dragging the
edges (resize handles) of the header cells.
174 March, 2023

Data > Grid Model > Reorderable At runtime, allows you to reorder columns by dragging the
header cells.
Data > Grid Model > Groupable At runtime, allows you to display grouped table data by
dragging a key column to group by. This can be initiated by the
user or programmatically as needed.
Data > Grid Model > Filterable At runtime, allows you to display only those records that meet
specified criteria as selected from the list of options:
l is equal to,
l is not equal to,
l Contains,
l Does not contain,
l Starts with,
l Ends with,
l Is null,
l Is not null,
l Is empty,
l Is not empty
Data > Grid Model > Pageable At runtime, allows you to split its content into pages from 1 to n
depending on the total number of items and items per page.
Data > Grid Model > Sortable At runtime, allows you to sort data by one column in ascending
or descending order by clicking on the column header.
Data > Grid Model > Selectable At runtime, allows you to select and highlight a row within the
grid.
175 March, 2023

Data > Grid Model > Export Excel By default, you can export maximum of 5,000 records to an
Settings Excel spreadsheet using the Export to Excel functionality. This
option is found in the Grid's Overflow menu.
Use the Export Excel Settings > Number of pages to export

setting to override this value. You can set a maximum number of
20,000 records that can be exported from a grid, by setting this
value to 400.
Note each page = 50 records.
Advanced > View Options You can create different representations of the data returned by
the provider by setting up views for your grid. At runtime, you
can select views from the combo box in the component header.
Please go to the Adding View Options to the Grid section below

for examples.
Guided Setup for Grid

Guided setup is a powerful tool that simplifies the often complex and time-consuming task of setting up
a grid. With numerous properties and settings to consider, configuring a grid can be overwhelming for
users. Guided setup helps to streamline this process by guiding users through a series of choices and
questions to determine their preferences and needs. Users can quickly and easily set up a panel card
grid that is customized to their specifications.
1. In Application Studio, in any application where panel card grid need to be added / customized;
then on the Toolbox > Components tab, select Panel Card Grid and add it to the layout.
176 March, 2023

2. Select the Data source from the left tree view.
3. Select the Data View from the drop-down to bind. Enabling the Allow Updates option will allow
the user to select which columns in the grid can be edited during runtime of the application. Click
177 March, 2023

Next.
4. Include the name of the grid in the Title and ensure that the columns displayed are from the data
view selected in step 3. The Grid Guided Setup page displays all columns present in the Data
View. Select the column name from the Visible Columns list that you wish to display, and select
the columns that you wish to edit from the Updatable Columns list.
178 March, 2023

5. A user can select different view options in a single grid. To add a filter to a view option, select
, enter the name of the filter in the Description field, and set the and/or condition in the
Filters Grid, more than one filter can be added. For more information, refer to Adding View
Options to the grid.
6. Select Finish.
7. Save and Publish the event. The selected view options are listed in the drop-down.
179 March, 2023

Setting up data provider for a grid
This section covers the setups for the following data providers:
l BAQ
l Service
l Data View
BAQ
In this example, let us configure the grid to populate with data from the system zCustShipments query.
1. In Application Studio, open a page that you wish to modify; then on the Toolbox > Components
tab, select Panel Card Grid and add it to the layout.
2. Configure the properties of the newly added component like this:
l Change the default Title to something like Shipments - BAQ.
l Go to Data > Grid Model > Provider Model and in the Baq ID field, enter
zCustShipments.
By default, if you don't explicitly define the columns for your grid, the system will display
all columns returned by the query. Define what BAQ columns you want to display.
180 March, 2023

l Go back to Data > Grid Model and expand the Columns node.
l
Use to add columns - for example:
Field Title
ShipDtl_OrderNum Order
ShipDtl_PackNum Pack
ShipHead_ShipDate Ship Date
3. Save and Preview the layer. The grid should display shipment details:
Service
l Change the default Title to something like Shipments - Service.

l Go to Data > Grid Model > Provider Model and in the Svc field, enter
Erp.BO.CustShipSvc.
l In the Svc Path field, enter GetList.
With this data provider, you need to explicitly define the columns for your grid, otherwise
the grid won't display at all.
l
181 March, 2023

Field Title Erp Editor
PackNum Pack -
ShipDate Ship Date Datetime
We recommend setting up data type for dates for a more readable format at
runtime.
3. Save and Preview the layer. The grid should display shipment details:
Data View
In this example, let us simply display data from the LandingPage data view in the grid. Instead of
LandingPage, there can be any view in the application.
l Change the default Title to something like Data View.

l In the Data > Grid Model > Ep Binding field, enter LandingPage.
Optionally, define the columns you wish to display.
l
Field Title
Key1 Record
Character01 Customer ID
182 March, 2023

3. Save and Preview the layer. The grid should display data from the landing page view:
Adding View Options to the grid

When you add view options for your grid, you define the provider model for each view option. Below are
two examples of how you can set up a view option depending on the data source underlying the grid:
BAQ Results Dataset

In this example, let us add a panel card grid to the Details page of the UD03 Maintenance app. It will
have two views: one will display the list of all parts in the system, the other - only the manufactured
parts.
1. In UD03 Maintenance (or any other app to your liking), launch Application Studio and create a
new layer for your configuration.
2. From the Application Map, navigate to the Details page and add a Panel Card Grid component to
the page layout.
3. Go to its properties and set it up like this:
l For the Title, type in Parts.

l Expand the Advanced property group and open the View Options node.
l
Press to add a new view option.
l In the Description field, type in All. This will be the default view.
l In the Baq ID field, enter zPartTracker01. This a system query that fetches part data.
l Select the Set Default option. When the page loads, this view will display first.
l
Press one more time to add the second view option.
l In the Description field, type in Manufactured.
l In the Baq ID field, enter zPartTracker01 again.
183 March, 2023

l Now, expand the Baq Options node and in the Where field, enter the following expression:
Part_PartNum = 'M'
Part_PartNum is the name of the column returned by the query. In this example, we hard
code a value and put it in single quotes as it's a string. You can also specify a dynamic
value to, for example, filter the data by the current context.
Note on the where clause syntax:
The where clause functionality in query-based grids supports SQL

comparison operators, like =, <, or >, and BAQ constants, like Today,
Tomorrow, or CurrentCompany, etc. Advanced SQL functions are not
supported.
A single question mark prefixing a dynamic field value means that a REST
request to execute a BAQ will go through only if the value is NOT empty or
null. For example, OrderHed_OrderNum = ?{OrderHed.OrderNum}.
A double question mark prefixing a dynamic field value means that a REST
request to execute a BAQ will go through even if the value is empty or null.
For example, Customer_CustNum = ??{Customer.CustNum}.
Values of string data type (including constants) are put in single quote marks.
For example, OrderHed_CustID = '??{Customer.CustID}' or OrderDtl_
ReqDate > '??{Constant.Yesterday}'.
4. Finally, go to Data > Grid Model and expand the Columns node.
5. Use to add two columns:
Field Title
Part_PartNum Part
Part_TypeCode Type
6. Save and Preview the layer. It should work similar to this:
184 March, 2023

Service Method Dataset
For example, let's call the GetList method of Erp.BO.CustCntSvc (Customer Contacts service) to get
customer contacts. We will create two view options - one to display all contacts for all customers, the
second - to display contacts from Mexico.
2. From the Application Map, navigate to the Details page and add a Panel Card Grid component to
the page layout.
l For the Title, type in Contacts.

l Expand the Advanced property group and open the View Options node.
l
Press to add a new view option.
l In the Description field, type in All. This will be the default view.
l In the Svc field, enter Erp.BO.CustCntSvc.
l In the Svc Path, enter GetList.
l Select the Set Default option. When the page loads, this view will display first.
l
Press one more time to add the second view option.
l In the Description field, type in Mexico.
l In the Svc field, enter Erp.BO.CustCntSvc.
l In the Svc Path, enter GetList.
185 March, 2023

l In the Rest Params field, press the Edit icon and in the JSON Editor, enter:
{
"whereClause" : "Country = 'Mexico'"
}
whereClause is the name of the parameter for the GetList method. Country is the name of
a column returned with the dataset. 'Mexico' is the hard coded value we set for this
column as a filter.
4. Finally, go to Data > Grid Model and expand the Columns node.
5. Use to add two columns:
Field Title
Name Name
Country Country
6. Save and Preview the layer. It should work similar to this:
GroupBox
GroupBox is an empty "container" component. You can place it onto a blank page and add other
components into it. Unlike Panel Card, it doesn't have a header and toolbar.
Key properties
186 March, 2023


events.
Basic > Label Text* The default system title for the very first group box you add is
MetafxBox-1. The index is incremented with every new
Enter a label text for your panel card here or keep it blank.
Layout > Flex Direction Select how you wish to display components within the group
box - vertically (Column) or horizontally (Row, default).
Label
Label component allows user to create a label.
Key properties
Component
Options and Usage
Property
Basic > Id* The unique ID of the component. You can change the default value for something that
is more appropriate and meaningful for your configuration.
Basic > Label The default system label text for the ep-label-1. Enter a label text for the control.
Text*
187 March, 2023

Component
Options and Usage
Property
Behavior > The Behavior property group contains a list of hooks you can use to quickly create
On Blur, On events triggered by some operation with the button:
Create
from the button.
initialized.
component (no event is yet set up with it). Press it to generate and launch a new event
in the Event Designer. The system will automatically create the event and define its
trigger properties - type, hook, and target (your button name or label text).
button from view depending on how the condition evaluates. The client-side binding is
a variable that can be anything you want, however, recommended format is
[DataViewName].[ColumnName] where DataViewName would be the name of the
data view used on the page - for example, on the Details page in Order Entry, you can
set the following EpBinding for your button - OrderDtl.btnLineDtl.
Layout > Use this field to set the alignment of the control to Left, Right, and Center.
Alignment
State> Hid- Use this field to set the control as hidden.
den
Link Combo Box

Link Combo Box allows user to select from the list of predefined formulas and populate values within
them.
Key properties
188 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the erp-link-combo-box-1. Enter a label text for
Text* the control.
from the button.
initialized.
text).
ment
189 March, 2023

Component
Options and Usage
Property
Only
Focus
List Box
List Box allows user to display a list of items. It allows for multiple selection of items.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-list-box-1. Enter a label text for the
Text* control.
190 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
191 March, 2023

Component
Options and Usage
Property
Data > Items Use this field to set the collection of selection list items.
Select the three dots to expand the items list. The following parameters are
displayed to set the list itmes:
Id - Set the ID for the list item.
Text - Set the text value for the list item.
Id Name - (Obsolete)- Set the Id name for the list item.
Description - Set the detailed description for the list item.
SubText - Set the sub-text for the list item.
LeftIcon - Set the icon for the list item.
Command - Set the command string for the list item.
Selected - Set this check-box to set the flag indicating the list item is selected.
Check MarkHidden - Set this check-box to set the flag indicating the list item has
hidden check mark.
Toggle Disabled - Set this check-box to set the flag indicating the list item is
disabled.
Required - Set this check-box to set the flag indicating the list item is required.
Bookmark - Set this check-box to set the flag indicating the list item has a
bookmark.
ment
192 March, 2023

Component
Options and Usage
Property

Only
Focus
Multilevel Menu
MultiLevelMenu is hierarchical menu that slides from the right to the left, as the user selects an item in
the list, to reveal the next level of available options.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the ep-multi-level-menu-1. Enter a label text for
Text* the control.
193 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
194 March, 2023

Component
Options and Usage
Property
Data > Items Use this field to the menu items.
Select the three dots to expand the items list. The following parameters are
displayed to set the list items:
Id - Determines the id by which menu item can be identified.
Parent ID - Determines the menu item parentId.
Icon - Defines an icon to be rendered next to the title. (i.e. mdi mdi-help-circle-
outline).
Caption - Determines the main text caption of the item.
Description - Determines the description text of the item.
Data > Items Determines the DataView that holds the items definitions.
Dataview
Data > Items ID Determines the column name for the id when items are data bound.
Column
Data > Item Par- Determines the column name for the parent id when items are data bound.
ent ID Column
Data > Item Cap- Determines the column name for the caption when items are data bound.
tion Column
ment
195 March, 2023

Component
Options and Usage
Property

Only
Focus
Advanced > Root Determines the menu id with which we start.
Menu Id
Advanced > Hide Use this field to hide and disable the search functionality.
Search
Multiview Calender
The MultiViewCalender is an Angular form control that represents a graphical Gregorian calender with
multiple horizontal views. It supports the selection of and navigation between dates as well as data
templates and ranges for scheduling appointments.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the ep-multi-view-calender-1. Enter a label text
Text* for the control.
196 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > Range Use this field to enter the range start Epbinding for selection.
Start EpBinding
Data > Range Use this field to enter the range end EpBinding for selection.
End EpBinding
Data > EpBind- You can set the Document Symbol data binding using format View.Column.
ing Document
Symbol
197 March, 2023

Component
Options and Usage
Property
Data > Selection Use this to select the Range Start Date and Range End Date.
Range
ment
Layout > Months Use this field to set or get the views property of the Calender and defines the
Displayed number of rendered months. By default, 2 months is displayed.

Only
Focus
Available Actions
Advanced > This field determines to enable range selection.

Range Selection
Advanced > Use this field to determine whether the built-in min or max validators are
Range Val- enforced when validating a form.
idation
Advanced Week Use this field to determine to display a week number column in the month view.
Number
198 March, 2023

Nav link
Navigation link uses anchor tags to display links.
Key properties
Component
Options and Usage
Property
Basic Name Use this field to set name for the hyperlink.
Basic > Text* The default system label text for the ep-nav-link-1. This text is displayed on the
anchor tag.
from the button.
initialized.
text).
199 March, 2023

Component
Options and Usage
Property
Data > Page This specifies page on the anchor tag.
ment

Only
Advanced > Href Enter the URL to redirect to when clicking on the anchor tag.
Advanced > Icon This is the icon class which is displayed beside anchor tag.
Advanced > Tar- This field specifies the location to open the linked document.
get
Advanced Rela- This field specifies the relationship between the current document and the linked
tionship document.
Advanced Title This field shows the tooltip on the anchor tag.
200 March, 2023

Numeric Box
Numeric box is meant for numeric entry, numbers/decimals/currencies etc. Provides validation and
checks.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the currency box. Enter a label text for the
Text* control.
from the button.
initialized.
text).
201 March, 2023

Component
Options and Usage
Property
Data > EpBind-

ing Document
Data > EpBind- You can set the Base Currency data binding using the format
ing ShowBase View.Column.
Data > EpBind- You can set the Document Symbol data binding using format
ing Document View.Column.
Symbol
ment
Only
Focus
Available Actions
202 March, 2023

Component
Options and Usage
Property
Type
Mask erties format.
Base
Advanced Show Use this filed to show the currency symbol.
Symbol
Advanced Dis- Use this filed to toggle the currency value as per the value selected for Cur-
Output Print Format

Output print format provides a selection of output formats for the report. Use the Routing option to
turn on/off Advanced Print Routing when the report is executed. This option is available when a valid
and enabled routing rule exists for the selected report style.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-print-output-format-1. Enter a label
Text* text for the control.
203 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > Binding Use this field to set data binding for EnableRouting using format View.Column.
EnableRouting This will control if report routing is enabled for the current report.
Data > Binding Use this field to set data binding for the report identifier using format
Report Iden- View.Column. This is the context for the current report.
tifier
ment
204 March, 2023

Component
Options and Usage
Property

Only
Focus
Advanced > Input Use this field to set a value for the report identifier. This property can be set
Report Identifier instead of data binding to set context for a specific report.
Advanced > Input Use this field to set a value for the report style. This property can be set instead
Report Style of data binding to set context for a specific report style.
Advanced > Use this field to select the DropDown style:

DropDown
l DropDown
Style
l DropDown Style
PDF Viewer
PDF Viewer is a component that can show a pdf file inline in the application.
Key properties
205 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the erp-pdf-viewer-1. Enter a label text for the
Text* control.
from the button.
initialized.
text).
Data > Selected Use this field to select the page.

Page
206 March, 2023

Component
Options and Usage
Property
ment

Only
Focus
Advanced > Show This check-box when selected displays the toolbar.
Toolbar
Advanced > This check-box when selected displays Open PDF Viewer button.
Show Open File
Button
Advanced > This check-box is selected to display the zoom buttons of the file.
Show Zoom But-
tons
Advanced > Use this field to display the Multiple or Single page of the pdf.
Page View
Mode
Advanced > This check-box is selected to display change paging buttons of the pdf.
Show Paging
Buttons
207 March, 2023

Component
Options and Usage
Property
Advanced > Show This check-box is selected to display the sidebar button of the pdf.
Sidebar Button
PE Log Viewer
The PE Log Viewer displays log data through a series of expandable nodes. Configure the component to
get data from a service. The component pulls data from this service to appear within the viewer. Based
on its structure, the data can expand or collapse by selecting text nodes. This component also has a
search bar which you can show or hide.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-pe-log-viewer-1. Enter a label text for
Text* the control.
from the button.
initialized.
text).
208 March, 2023

Component
Options and Usage
Property
Data > Svc Defines the service that pulls the log data into the PE Log Viewer. For example,
Erp.BO.ActTypeSvc
Data > GetNode Defines how the nodes from the log populate the viewer. It accesses the path to
SvcPath the service and then pulls in the data. For example, GetNodeById.
Data > Defines how the log viewer finds the data from the node. It first accesses the
FindNode service path and then the node. For example, FindNode.
SvcPath
ment
Layout > Height Use this field to set the height of the control.
Advanced > Select this option to display the Search bar within the PE Log Viewer. Set to True
Enable Search by default, clear this check box to hide the Search bar.
209 March, 2023

Creating Node Actions
Customize the PE Log Viewer to run actions when you select a node on the log. Through Application
Studio, create a layer that runs node actions.
1. Launch the application that contains the PE Log Viewer component.

2. Select the Overflow Menu and Application Studio.
3. Create a new layer.
4. Go to the Toolbox.
5. Drag the PE Log Viewer component onto the design canvas.
6. Select the Event Designer and create a new event.
7. Enter an Id and Description for the event.
8. Select the No Trigger action. Go to Properties > Trigger.
9. Define its Type. Select the Tree option.
10. Define its Hook. choose the On Node Select option.
11. Select its Target PE Log Viewer component; for example, PELogViewer-1.
12. Finish the event to launch an Action.
For example, select the erp-message-handler action to display a Toast message that
displays the ID and data from the node. Use this syntax:
Selected Node - [sysTreeNode.UID] – [sysTreeNode.Data]
13. Save and Publish the layer.

14. Launch Menu Maintenance and select this layer as the default for the PE Log Viewer.
Panel Card
A card is a container that helps chunking data/information into smaller more easily visible pieces. Cards
can include any type of media and act only as a visual grouping or separating mechanism.
Here's how you can use it

l Use to display content composed of different elements
l Use to showcase elements whose size or supported actions vary – like photos with captions of
variable length.
210 March, 2023

l Use when displaying content that:
o As a collection, consists of multiple data types (images, movies, text)
o Doesn't require direct comparison
o Contains interactive content
l Use to visually group digestible portions of information that call for an action; like accepting a
request or accessing more details.
l Use to gather various pieces of information about a single subject to form one coherent piece of
content.
Cards are better suited for use cases when users browse for information than when they
search. Cards work best for collections of heterogeneous items (when not all the content
is of the same basic type).
Key properties
something that is more appropriate and meaningful for your
configuration.
Basic > Title* The default system title for the very first panel card you add is
PanelCard-1. The index is incremented with every new component of
this type added to the layout within your layer. Enter a title for your
panel card here.
211 March, 2023

Behavior The Behavior property group contains a list of hooks you can use to
quickly create events triggered by some operation with the panel
card:
On Panel Card Expand - use this hook to generate an event triggered

when the panel cards gets expanded.
On Panel Card Collapse - use this hook to generate an event that will
run when the panel cards gets collapsed.

available for the component (no event is yet set up with it). Press it to
generate and launch a new event in the Event Designer. The system
will automatically create the event and define its trigger properties -
type, hook, and target (your panel card ID).
When an event is already tied to the button, the "ellipsis" sign
displays next to the used hook instead. Press it to edit

the event.
Data > EpBinding Use this field to bind your panel card to a data view column - for
example, to a user-defined (UD) column, using the following format:
[DataViewName].[ColumnName].

combo box in data rules at runtime. For example, you can configure a
condition and either display or hide another UI component from view
depending on how the condition evaluates. The client-side binding is
a variable that can be anything you want, however, recommended
format is [DataViewName].[ColumnName] where DataViewName
would be the name of the data view used on the page - for example,
on the Details page in Order Entry, you can set the following
EpBinding for your panel card - OrderDtl.pcaMyPanelCard.
Layout > Minimum Width Use this drop-down list to select the percentage of the screen
this panel card will use, such as 50%, 33%, and so on. If you
select the Flex Layout check box, you can instead change the
Minimum Length percentage on the component directly in the
layout.
212 March, 2023

Layout > Flex Layout Select this option to customize how the controls display within
the layout. This option shows the Minimum Width drop-down
list on each panel card and group box within the panel card. You
can then change the width of the panel card or group box dir-
ectly in the layout. The panel cards or group boxes display using
the new width so you can visually see the updated layout.
Review the Using Flex Layout section on Modifying Application
Structure for information on where to find this property and
how to use it.
Advanced > Enable Action
Use this option to activate the action overflow menu and the
Menu
toolbar on the panel card header. You can use the Advanced > Action
Data section to setup tool actions for the panel card. By default,
action display in the overflow menu. You can also choose to add them
to the toolbar as buttons (default) or icons.
Advanced > Expand at Select this option to display the expanded panel card on page load.
Runtime
Advanced > Enable Full Select this option to enable a full screen view for the panel card.
Screen Please review the Enabling a Full Screen View section of Modifying
Page Layout for details on the Full Screen View feature.
213 March, 2023

Advanced > Action Data

Select the Enable Action Menu option to make your
action(s) display on the panel card.
You can create custom actions specific to the data in the panel card.
To add an action:
1. In the Advanced > Action Data section, press to add a new

tool action.
2. Enter an ID for your action - for example, toolAction1. This can

be used for reference to the action in events or context menu
setup.
3. Enter a Description - for example, Action 1. depending on how

you want your action to display in the panel card, this will show
either as tool tip for an icon or as label text for a button.
4. Kinetic 2023.1 ships a complete set of Material Design icons

(v3.9.97, see full list here). In the Icon field, specify an icon code
in the following format : mdi mdi-[IconID] - for example, mdi
mdi-package-variant.
5. Select the Add to Primary Toolbar option to place the icon

into the toolbar next to the panel card overflow menu icon:
If you don't specify an icon and keep the Add to

Primary Toolbar option cleared, the action will
display as the overflow menu item only. If you
select Add to Primary Toolbar for the action
without an icon, it will display as a button in the
panel card toolbar:
214 March, 2023

Panel Card Gantt

Panel Card Gantt is a expandable container that displays a grid and allows interaction with the grid
using additional components in the panel card header.
Key properties
Component
Options and Usage
Property
Basic > Title* The default system title for the currency box. Enter a label text for the control.
from the button.
initialized.
text).
215 March, 2023

Component
Options and Usage
Property
216 March, 2023

Component
Options and Usage
Property
Data > Grid Defines the data source for the grid.
Model
Scrollable -
Height -
Width -
Row Height -
Page Size -
Entity Type -
Drag Image Icon -
Resizable -
Sortable -
Pageable -
Groupable -
Filterable -
Advanced Filter
Reorderable -
Row Reorder -
l Reorder Rows
l Sortable
Editable -
Disable Paste New
Disable Paste Update -
Selectable -
Maximum Columns -
217 March, 2023

Component
Options and Usage
Property
Selection Options
l Checkbox Selection
l Show Select All
l Select by Field
l Select All EpBinding
l Select All Page Count
Edit Options
l Edit Mode
l Update On Change
Columns
l Field
l Title
l Ep Binding
l ID
l Erp Editor
Disable Currency Toggle
Is Link
Skip Row Change on link Click
Filterable
Sortable
Width
Masked
Editable
Selector
Hidden
218 March, 2023

Component
Options and Usage
Property
Export Excel Settings
l File Name
l Number of pages to export
ID
Ep Binding
Columns Hidden
Provider Model
l Ep Binding
l Description
l Svc
l Svc path
l Table Name
l Out Param Name
l Client Filter
l Rest Params
l Columns
Data > EpBind- You can set the Base Currency data binding using the format View.Column.
ing ShowBase
Data > EpBind- You can set the Document Symbol data binding using format View.Column.
ing Document
Symbol
ment
219 March, 2023

Component
Options and Usage
Property

Only
Focus
Available Actions
Type
Mask erties format.
Base
Advanced Show Use this filed to show the currency symbol.
Symbol
Advanced Dis- Use this filed to toggle the currency value as per the value selected for Cur-
Panel Card Grid

Panel Card Grid is a expandable container that displays a grid and allows interaction with the grid using
additional components in the panel card header.
Key properties
220 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the metafx-panel-card-grid-1. Enter a label text
Text* for the control.
Behavior > On
Panel Card
Expand, On Panel
Card Collapse
Data > Grid

Model
Layout > Min- Use this field to set the alignment of the control to Left, Right, and Center.
imum Width
Layout > Width
221 March, 2023

Component
Options and Usage
Property

Only
Focus
Advanced >
Auto Fill Con-
tainer
Advanced
Enable
FullScreen
Advanced >
Expand at
Runtime
Advanced > Hide
Filter Icon
Advanced > Dis-
able Panel Card
Style
Advanced >
Export to Excel
Disabled
Advanced > Dis-
able Copy
Options
222 March, 2023

Component
Options and Usage
Property
Advanced >
Show Filter and
Group Options
Advanced >
Action Data
Advanced >
View Options
Advanced > Val-
idate
Part Rev Description

Part Rev Description Allows user to configure part, Revision and Description controls.
Key properties
Component
Options and Usage
Property
Basic > Label Use this field to set the label text for the Part control.
Part
Basic Label Revi- Use this field to set the label text for the Revision control.
sion
Basic > Label Use this field to sett he label text for the Description control.
Description*
223 March, 2023

Component
Options and Usage
Property
Search Click, create events triggered by some operation with the button:
On Blur, On
On Search Click - use this hook to generate an event triggered by the click on the
Create search icon in the text box.
from the button.
initialized.
text).
Data > EpBind- Set the part epBinding notation to [DataViewName].[ColumnName].

ing PartNum
Data > EpBind- Set the Revision epBinding notation to [DataViewName].[ColumnName].
ing Revi-
sionNum
224 March, 2023

Component
Options and Usage
Property
Data > EpBind- Set the Description epBinding notation to [DataViewname].][Columnname].

ing PartDesc
Data > Allow Use this field to set the custom values in rev combo.
custom
ment

Only
Focus
Picture Box
Picture Box is used to display picture in the component.
Key properties
Component
Options and Usage
Property
225 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the erp-picture-box-1. Enter a label text for the
Text* control.
from the button.
initialized.
text).
Layout > Width Use this field to set the width of the image.
Layout > Height Use this field to set the height of the image.
226 March, 2023

Component
Options and Usage
Property
Only
Advanced > Use this field to set the type of the image from the drop-down that includes:
Image Type
l imageBlob
l url
l iconClass
l fileStore
Advanced > Use this field to set the image style.

Image Style
Advanced Hide Use this field to remove any border from the image.
Border
Advanced Image Use this filed to set fill type. "Zoom" zooms the image to fill all space avail-
Fill Type able. Fit shows the whole image and leaves unused space blank.
Advanced Image Use this field to add the source/path of the image.
Quantity UOM
Quantity UOM allows to Unit Of Measure field with a numeric field along with the available units.
Key properties
227 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > Quantity

Model
Data > Combo
Model
228 March, 2023

Component
Options and Usage
Property
ment
Only
Focus
Radio Button
A Radio Button, sometimes called an option button, is a selector element that allows you to choose
only one of a predefined set of mutually exclusive options. Radio Buttons can be oriented vertically or
horizontally and may include any type of content as the selected value passing applicable data back to
the system on submission.
Key properties
your configuration.

events.
229 March, 2023

Behavior The Behavior property group contains a list of hooks you can
the component:



define its trigger properties - type, hook, and target (radio
button ID).
When an event is already tied to the component, the "ellipsis"
sign displays next to the used hook instead. Press it

to edit the event.
Data > EpBinding Use this field to bind your radio button to a data view column -

component in data rules at runtime. The client-side binding is a
variable that can be anything you want, however, recommended
format is [DataViewName].[ColumnName] where
DataViewName would be the name of the data view used on the
page - for example, on the Details page in Order Entry, you can
set the following EpBinding for your radio box -
OrderDtl.MyColumn.
Advanced > Vertical Align Select this option to stack option items vertically. By default, the
items display in a row.
230 March, 2023

Advanced > Data Use this section to add option items for the control. Define a
Label and a Value (fixed or dynamic) for each option. Please
refer to the Setup Example section for details on configuring a
radio button.
Setup example
You can set up a radio button component with several options all bound to a single data view column
(recommended approach). If your specific configuration requires so, you can add several single-option
radio buttons each bound to its own column.
In this example, let us create a simple abstract radio button with two options. The second approach
described above would require the same steps with only difference that there will be one option instead
of two.
2. From the Application Map, navigate to the Details page and add a Radio Button component to
the page layout.
l In the Data > EpBinding field, enter EpBinding - for example, UD03.Number01.
l Expand the Advanced property group and select the Vertical Align option.
l
Open the Advanced > Data node and press to add a new option.
l In the Label field, type in Option 1. This text will display next to the radio button.
l In the Value field, enter 1. This value will be saved to the database.
l
Press one more time to add the second option.
l In the Label field, type in Option 2.
l In the Value field, enter 2.
4. Save and Preview the layer.
An event with a toast message displaying the current value of the UD03.Number01
column has been added to run before the system save event (OnClick_toolSave).
231 March, 2023

Relationship Map
Relationship map allows user to choose only one of a predefined set of manually exclusive options.
Key properties
something that is more appropriate and meaningful for your configuration.
Data > Key Field The Key Field indicates that a data bound component is a key field. If true,
the field is enabled if there is no current record, allowing the user to select
an existing record or create new one.
Data > EpBinding You can set up client-side binding to be able to refer to the button in data
rules at runtime. For example, you can configure a condition and either
display or hide the button from view depending on how the condition
evaluates. The client-side binding is a variable that can be anything you
want, however, recommended format is [DataViewName].[ColumnName]
where DataViewName would be the name of the data view used on the
page - for example, on the Details page in Order Entry, you can set the
following EpBinding for your button - OrderDtl.btnLineDtl.
232 March, 2023

Layout > Alignment Use this field to set the alignment of the control to Left, Right, and
Center.
State > Per- Use this field to enable/disable the ability for users to show or hide
sonalizable the control with personalization.
State > Customizable Use this field to enable/disable the ability for the control to be cus-
tomized in other layers in application studio. If you set this to false it
will be locked for modification in layers.
State> Read Only Use this field to set the control as read-only.
State> Auto Focus Use this field to set the focus to the control.
Advanced > Expanded Use this check-box to indicate if the component is expanded.
Advanced > Header Use this field to set the title that is displayed at the top of the component.
Text
Advanced > Svc Use this service field to fetch the diagram data.
Advanced Svc path
Advanced Input Argu- Use this field to enter the arguments to be provided to the service.
ments
Advanced Cap Width
Rich Text Editor

Rich Text Editor allows users to enter text and images which could be formatted according to their
preferences.
Key properties
233 March, 2023

Component
Options and Usage
Property
Basic > Label The default system label text for the erp-rich-text editor-1. Enter a label text for
Text* the control.
from the button.
initialized.
text).
ment
234 March, 2023

Component
Options and Usage
Property
Layout > Height Use this field to set the specific height of the control.
Only
Focus
Advanced > Show Use this field to toggle to show or hide advanced toolbar items for the control.
All Tools
Row Navigator
Row Navigator scrubs among the records in a DataView that might be linked to few epBinded
components on the target page/panel to display the current record details or to a grid.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the ep-row-navigator-1. Enter a label text for
Text* the control.
235 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
ment
236 March, 2023

Component
Options and Usage
Property

Only
Advanced > Use this field to set the label for the combo box.
ComboBox Label
Advanced > Show Use this field to show or hide the record count text.
Count Text
Advanced > Use this field to set field/column names to be displayed on combo box
Columns example array of strings having field names.
Scheduler
Scheduler component provides options for scheduling and displaying events in different views.
Key properties
Component
Options and Usage
Property
237 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
Data > Column

Bindings
Data > Editable
Layout > Width
238 March, 2023

Component
Options and Usage
Property
Only
Advanced >
Disable Day View
Advanced >
Disable MultiDay
View
Advanced > Dis-

able Week View
Advanced Dis-
able Work Week
View
Advanced Dis-
able Month
View
Advanced Dis-
able Timeline
View
Advanced Dis-
able Timeline
Week View
Advanced Dis-
able Agenda
View
239 March, 2023

Component
Options and Usage
Property
Advanced Show
Work Hours
Advanced
Enable Export
PDF
Search Chip Selector

Search Chip Selector allows user to search and display selected items as chips.
Key properties
Component
Options and Usage
Property
Search Click, On create events triggered by some operation with the button:
Blur, On Create
On Search Click - use this hook to generate an event triggered by the click on the
search icon in the text box
from the button.
initialized.
text).
240 March, 2023

Component
Options and Usage
Property
ment
Only
Focus
Advanced > Plural Use this field to set the label text message when multiple chips are selected.
Label Text
Advanced > Use this field to set the label text message when a single chip is selected.
Singular Label
Text
241 March, 2023

Component
Options and Usage
Property
Advanced > Use this field to set the label text message when no chip is selected.
Empty Label
Text
Advanced Error Use this field to set the chip validation error message.
Message Text
Advanced Click to set the parameters for MultiField Bindings.
MultiField Bind-
l Click the plus icon to set the limit for the field.
ings
EpBinding - Set data binding using the format View.Column.
Display Value - Sets the above epBinding as chip label.
Selection List
Selection list allows users to select and sort data.
Key properties
your configuration.

events.
Basic > Label Text* The default system title for the very first text box you add is
SelectionList-1. The index is incremented with every new
Enter a label text for your component here.
242 March, 2023

Behavior The Behavior property group contains a list of hooks you can use
to quickly create events triggered by some operation with the
component:



available for the component (no event is yet set up with it). Press
it to generate and launch a new event in the Event Designer. The
system will automatically create the event and define its trigger
properties - type, hook, and target (depending on the hook type
can be text box ID or EpBinding).

to edit the event.
Data > EpBinding Use this field to bind your component to a data view column -

component in data rules at runtime. The client-side binding is a
set the following EpBinding for your selection list -
Customer.MyColumn.
243 March, 2023

Dataviews Selection List gets data from a data view. Use this section to
specify the source and target data views. You must populate the
specified source view prior to initializing the Selection List
component. Please review Loading Data into a View for details
on populating data views.
Go to the Setup Example section for more information on

configuring Selection Lists.
Advanced > Target Label Text When the Selection List is defined as a dual (2-column), use this
field to specify a label for the right-hand column displaying
selected items.
Advanced > Mode Types Two options available:
Single (default) - keep this value if you wish to display the list in
a single column. When users select item(s) from the list they are
marked with a check sign.
Dual - select this option if you wish to display the component as

a 2-column table. The list displays in the left-hand column. When
users select item(s) they move to the right-hand column.
Dual mode provides additional functionality that allows users to

sort items in both lists (available for selection and selected), as
well as select all and clear all items.
Advanced > Ui Mode Select (deafult) - this option suits both single and dual mode
lists.
Switch - this option is used for single mode lists to display a

switch next to each list item. Items get selected when the switch
is turned on.
SingleSelect - this option is used for single mode lists to display

the standard selection ticks.
Advanced > Reorder Selected (default) - in dual mode, allows to sort the selected
items alphabetically.
All - in dual mode, allows to sort items in both lists.
244 March, 2023

Advanced > Rows Allows setting the height of the window to display the number of
rows you define. By default, this property is set to 10. If there are
more items than you defined in this property, a scroll bar gets
enabled at runtime.
Advanced > Delimited Choose this option if you wish to save the selected values as a
delimited string. When you select this option, choose a
Delimiter character - a tilde, comma, or period.
Setup Example
In this example, let us use the system zCustomer01 query to populate the source data view for the
selection list. For other ways of loading data into a view, please refers to Loading Data into a View.
Creating a data view

2. From the sidebar menu, select Data Views and press to add a new view.
3. Rename the view - for example, to Customers.
4. Press Save.
You can keep the settings for this view undefined - this way, it will uptake the schema of any
incoming data.
Configuring an event to populate the view

We want to make sure that when we initialize the selection list on the screen at runtime, the source
view is already populated. Let's make the data load event run before the system BeforeInitialize event.
1. From the sidebar menu, select Events and press to add a new view.
2. Rename the event to something like Load_Customers.
245 March, 2023

3. On the canvas, select the No Trigger widget and edit it as follows:
l In the Type field, select Event.
l Choose Before for the Hook.
l In the Target field, select BeforeInitalize.
4. From the Toolbox, select the erp-baq action and add it to the workflow.
5. Configure the erp-baq action like this:
l Expand the BAQ Options node and in the BAQ Id field, enter zCustomer01.
l Select Customers for View Name.
l Let us narrow the results a little. Expand the BAQ Execute Options and in the Where field,
enter: Customer_State = 'MN' or Customer_State = 'Minnesota'. This will fetch only the
customers from the state of Minnesota.
6. Save the layer.
Setting up the Selection List

1. From the Application Map, navigate to the Details page and add a Selection List component to
the page layout.
2. In the Properties, type in Customers for Label Text.
3. Go to Data > EpBinding and specify the data view column the selection result will be written to -
for example, UD03.Character02.
If you need to save the selection results with the record, you must add a UD column
to the database table. For more information on working with user-defined tables
and columns, please review the Working with User-Defined Data section of the
Application Studio help.
4. Expand the Dataviews node and set up the properties like this:
l Source View Name - Customers. The data view we created and populated with an event.
l Source Code Col - Customer_CustID. This value is passed to the target view and stored in
the database.
l Source Desc Col - Customer_Name. This value displays in the list.
l Target View Name - UD03. This is just an example; here you enter the name of the data
view that will pass data to the server.
246 March, 2023

l Target Code Col - Character02. Again, this is just an example; enter the column name the
selection result value will be written to.
5. Expand the Advanced property group. We are going to configure the selection list in dual mode.
In the Target Label Text, enter a label for the left-hand results column.
6. In the Mode Types, select Dual.
7. Keep all other default values.
8. Select the Delimited option; then in the Delimiter drop-down, choose tilde (~).
9. Preview the layer. It should look and function similar to how is shown below:
Shape
Shape component allows users to customize a color and shape based on different statuses -
OK/Warning/Stop/Global/None.
Key properties
247 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
ment
248 March, 2023

Component
Options and Usage
Property
Only
Advanced > Use this field to set the caption for the enabled state of the control.
Enabled caption
Advanced > Use this field to set the caption for the disabled state of the control.
Disabled caption
Advanced > Use this field to select among various status-OK/Warn-

Status ing?Stop/Global/None.
Tab
Tab allows user to add tabstrip where multiple tabs can be added.
Key properties
Component
Options and Usage
Property
249 March, 2023

Component
Options and Usage
Property
Data > Data Id - Set a unique identifier for the control.
Title - Set the title to be displayed on the tab.
EpBinding - Set data binding using format View.Column.
Selected - Set the tab as currently open tab.
Page - Select page that should be displayed in the tab.
Tag
Tag allows users to have different colored labels and checkboxes for different statuses -
OK/Warning/Stop/Global/None.
Key properties
Component
Options and Usage
Property
250 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
ment
251 March, 2023

Component
Options and Usage
Property

Only
Advanced > True Use this field to set the caption of the control when the control is in checked
Caption state.
Advanced > True Use this field to set the status for the checked state of the control-
Status OK/Warning/Stop/Global/None.
Advanced > Use this field to set the caption of the control when the control is in
False Caption unchecked state.
Advanced False Use this field to set the status for the unchecked state of the control-
Status OK/Warning/Stop/Global/None.
Text Area
Based on the rows, columns, and maxLength properties, users can enter vast numbers of characters.
Key properties
Component
Options and Usage
Property
Basic > Label The default system label text for the erp-text-area-1. Enter a label text for the
Text* control.
252 March, 2023

Component
Options and Usage
Property
from the button.
initialized.
text).
ment
253 March, 2023

Component
Options and Usage
Property

Only
Focus
Advanced > Use this field to display default number of rows to be displayed in text area.
Default Rows to
display
Advanced > Use this field to set the default width of the text area control.
Width
Advanced Max Use this field to set the maximum number of characters allowed in a text
Length area.
Advanced No Use this field to hide the floating label.
Floating Label
Advanced Spell Use this filed to enable spell and grammar check.
Check
Text Box
Text box is an input field that allows you to enter or edit alpha-numeric characters.
Key properties
your configuration.

events.
254 March, 2023

Basic > Label Text* The default system title for the very first text box you add is
TextBox-1. The index is incremented with every new component
of this type added to the layout within your layer. Enter a label
text for your text box here.
Behavior The Behavior property group contains a list of hooks you can use
to quickly create events triggered by some operation with the
button:
On Search Click - use this hook to generate an event triggered

by the click on the search icon in the text box.
Prior to using the On Search Click link for

generating the search event, make sure you:
l Specify EpBinding for the text box field (Data

> EpBinding)
l Select the Advanced > Enable Search
option to activate search functionality for
the component.



available for the component (no event is yet set up with it). Press
it to generate and launch a new event in the Event Designer. The
system will automatically create the event and define its trigger
properties - type, hook, and target (depending on the hook type
can be text box ID or EpBinding).

to edit the event.
255 March, 2023

Data > EpBinding Use this field to bind your panel card to a data view column - for
This field is required if you wish to enable search

for the text box. Search events are triggered by
EpBinding. Learn more about configuring search
for the component in the Using Searches in
Application Studio hands-on course on Epicor
Learning Center (ELC).

text box in data rules at runtime. The client-side binding is a
set the following EpBinding for your text box -
OrderDtl.MyColumn.
Data > Ep Binding SearchDesc Binding for the Description element added to display a
search with an additional description element.
Layout > Alignment Use this field to set the alignment of the control to Left,
Right, and Center.
State > Personalizable Use this field to enable/disable the ability for users to show
or hide the control with personalization.
State > Customizable Use this field to enable/disable the ability for the control to
be customized in other layers in application studio. If you
set this to false it will be locked for modification in layers.
State > Hidden Use this field to set the control as hidden.
256 March, 2023

State > Disabled Use this field to set the control as disabled.
State > Read Only Use this field to set the control as read-only.
State > Auto Focus Use this field to set the focus to the control.
Advanced > Max length Indicates number of characters allowed in the text box.
Advanced > Pattern Force input to match this regular expression.
Advanced > No Floating Label Use this field to hide the floating label.
Advanced > Auto Complete Allows the browser to predict the value to be entered in the
text box.
Advanced > Auto Correct Correct typos, capitalization errors, and misspelled words,
as well as automatically insert symbols and other pieces of
text.
Advanced > Auto Capitalize Makes text input automatically capitalized as it is
entered/edited.
Advanced > Spell Check Indicates spell and grammar check.
Advanced > Enable Search Indicates this field allows searching for records
Learn more about configuring search for the component in the

Using Searches in Application Studio hands-on course on
Epicor Learning Center (ELC).
Advanced > Search Only Prevents users from entering new values in this field. If selected,
users can only launch the search and select an existing record.
Advanced > Masked Enables the masking of the text, usually used for password
fields.
Advanced > LabelText Indicates the caption for the description element. Use with
SearchDesc epBindingSearchDesc to set a custom label for the descrip-
tion element.
257 March, 2023

Time Picker
Time Picker is a text box with an icon that allow the user to select a specific time to be entered using a
mask into the text input area. You can add this component as a field or as a cell in a grid. The time
picked can include hours, minutes, and seconds in any desired increments.
Key Properties
your configuration.

events.
Basic > Label Text* The default system label text for the very first picker component
you add is [Component]-1 - for example, TimePicker-1. The
index is incremented with every new component of this type
added to the layout within your layer. Enter a label for your
picker component here.
Data > EpBinding Use this field to bind your combo box to a data view column - for
If you bind your component to a UD field, make sure the field

you specify in EpBinding for Time Picker is bound to a column of
numeric type.

picker component in data rules at runtime. For example, you can
configure a condition and either display or hide another
component from view depending on how the condition
evaluates. The client-side binding is a variable that can be
anything you want, however, recommended format is
[DataViewName].[ColumnName] where DataViewName would
be the name of the data view used on the page - for example, on
the Details page in Order Entry, you can set the following
EpBinding for your date picker - OrderDtl.dteShipDate.
258 March, 2023

Optional properties for Time Picker
Advanced > Now Button Select this check box to display the Now button on the time picker.
Pressing the Now button allows automatically setting the current
system time.
Advanced > Cancel Button Select this check box to add the Cancel button to the time picker
allowing users to roll back on any selection they have made in the
time picker.
Advanced > Use24HourClock Select this option to display time in a 24-hour format instead of
default AM/PM format.
Here's how the time picker can look like with Now Button, Cancel
Button, and Use24HourClock options selected:
259 March, 2023

Advanced > Time Stored as Select this option to link, or bind, the time value to a date
Date Time value. When users select a date on a Date Picker, the time
they select in the Time Picker stores with this date. Both val-
ues bind to the same column in the database. End users can
change the date and the time stays the same, and likewise
edit the time and the date stays the same.
Advanced > IsDecimal Select this check box to indicate the Time Picker can store
time using decimals such as 18.25 (6:15 pm) instead of
seconds since midnight. The scheduling boards and other
applications store time in decimals for more accurate values.
This value saves with an accompanying Date Picker to accur-
ately update date/time values.
Advanced > Round to Select this check box round the time value to the nearest
Minutes minute. The seconds no longer appear in the field. For
example, 5:41:34 displays as 5:42 and 8:19:15 displays as 8:19.
Advanced > Treat Zero As Null This option allows treating the time value of, for example, 00:00 as
a null, i.e. considering it not set.
260 March, 2023

Data Rules Overview
You can use the Rules designer to create new row rules for data views. Data rules highlight key fields,
disable selected fields, hide pages, and activate other actions that help control how your company uses
an application. Once you set up a new rule, you set up its function or condition/no condition, and then
you set up one or more actions for it. After you save a rule, it appears in the Rules List grid. After that, if
you're satisfied with it and want it to affect the application, you can publish the rule.
In the Rules designer, you can manage the existing or create new rules for a component in an
application. You need rules to define how the component function within the application. Each rule can
have various data conditions and one or more actions that activate when the condition is met. Also, you
can set up a rule to have no condition, but still perform a required action.
An application can have two types of rules:
l System rules - These rules are already in the system. Once you open Rules, all system rules for
this application display in the Rules List grid. You can copy these rules, but cannot edit or delete
them.
l User created rules - These are the rules you create. You can manage them as you want: copy,
edit, publish, or delete them.
261 March, 2023

Events Overview
In Application Studio, an event is a single action or a sequence of actions that perform some function in
your application. It can be navigation to a page, updating a field value, or making a call against the
REST API. There are built-in system events - for example, save/update record, delete record, create
record, etc. You can also add your own events that execute custom logic - for example, open and close
user-defined sliding panels or load data into an additional data view.
Events can be triggered by some change in the UI - for example, a button click or a changed grid row.
Such events have a trigger. For example, when you press a button, a sliding panel rolls out.
Events can also be part of other events. This way, they execute when the parent event flow reaches
them. These events have no trigger. You use the event-next widget in the Event Designer to invoke
child events from the current event flow.
You cannot modify events that belong to the base application layer, but you can append your custom
logic by creating a separate event that fires immediately before or after the target system event. To do
this, in your custom event, set up the trigger of the Event type with either a Before or After hook and
specify the ID of the target system event.
There may also be cases when you need to change something inside the system event workflow - for
example, insert an action in the middle of the flow or change the settings of the existing action. To do
this, copy the system event first, then modify as needed. Finally, update references to the original
system event to point to the modified one instead.
In this section, we will cover:
l Features available in Event Designer
l Creating a new event with and without a trigger
l Designing event workflow.
262 March, 2023

Creating and Modifying Events
You create and modify events in the Event Designer.
Using the Events panel
1. In Application Studio, select Events from the sidebar menu.
The Events panel displays.
This panel contains the list of all events in your layer. The events are grouped by trigger type:
l Component - this folder holds events with the following trigger types - Control (buttons,
tool actions/menu items, etc.), Grid, Page, Tree, Window. For example, if you create an
event with a button onclick trigger, it will go into this folder.
l Data - this folder contains events triggered by some data change - for example, row
changed in the grid, a field value changed, etc. It groups the events by the following trigger
types - DataTable, DataView, EpBinding.
l General - this folder contains events that are set to be triggered automatically before or
after other events (Event trigger type).
l User Defined Actions - this folder contains events without a trigger. These events are used
in other events. Custom events of this type are placed at the bottom of the list.
2. Start typing in the search window to get a list of matches. Then select the event you want to
modify.
263 March, 2023

3. Right-click an event in the tree view to bring up its context menu that has different options
depending on whether the event belongs to the base or layer.
l You can only Copy base events.
You would do this if you needed to modify the existing logic of the event. For additional
logic that can be executed before the event or immediately after it, use a separate event
with a before or after event trigger.
If you modified base events in product versions prior to Kinetic 2023.1, make
sure you verify each such event is functional after the upgrade. Epicor can
change base application logic, which may lead to breaking the modified base
event.
264 March, 2023

l You can Copy or Delete the events created in the layer.
Creating new events

1. To create a new event, on the Events panel, press Add New.
A NewEvent opens in a new tab for editing:
2. Give your event meaningful Id and Description - for example:
Defining the trigger
265 March, 2023

Keep the No Trigger widget intact if you don't need a trigger for your event.
To set up a trigger:
1. On the workflow canvas, select the No Trigger widget and go to its properties.
2. From the Type drop-down, select the trigger type - for example, Control.
For details on the available trigger types and their hooks, please refer to this article
- Reference: Event Triggers and Hooks.
3. Next, choose one of the hooks available for the selected trigger type. For example, from the Hook
drop-down, select On Click.
Each trigger type has a predefined list of hooks that can be used with it. For
example, the Control type has On Click, On Create, On Blur, and On Double Click,
etc. And DataView has View Changing, View Changed, Row Changing, and Row
Changed hooks. Learn more about hooks in the Reference: Event Triggers and
Hooks article.
4. Finally, enter the Target ID. For triggers of control type, this can be a button ID, grid ID, or page
name. For triggers of data type, this can be data view ID, data table ID, or EpBinding value. For
the Control - On Click trigger setup, you can type in an action item ID - for example,
ToolCreateNewPack:
Creating events without trigger
266 March, 2023

If you want your event to be triggered from another event:
1. When you create a new event, keep the default No Trigger widget intact and design your event
as needed - for example:
2. Open the event you want to add your event to.
3. On the Toolbox > User Defined tab, select your event and add it to the flow:
4. Alternately, on the Toolbox > Actions tab, select the event-next action and drag it onto the
267 March, 2023

canvas. On its properties, specify the ID of your event:
Designing the workflow

To construct your event workflow, use the predefined system Actions:
Or you can use User Defined actions - these can be existing system events or other user defined events:
268 March, 2023

Learn what each event action does by hovering over it in the Toolbox > Actions panel. A Tool Tip
displays that explains its purpose.
To add an action to your worklow, select it on the Toolbox > Actions or Toolbox > User Defined tab,
then drag and drop it onto the canvas. Use Search to quickly locate the action you need:
269 March, 2023

Any newly added actions automatically connects to the last action in the workflow. You
can rearrange the order of actions by removing and resetting connections between them.
To configure an action, select it on the workflow and go to its properties panel. Each action has a
different set of properties that you need to define. For example, you configure a slider-open action, the
only thing you need to specify is the sliding panel ID. However, configuring a rest-erp action to call a
service method on the server requires that you specify service and method IDs and define request and
response parameters. You might also use the .JSON editor to specify the dataset model.
Go to Reference: Event Actions for the details on configuring the most common actions.
You can find more examples of event setups in the Application Studio help and in the
Hands On Exercises on Epicor Learning Center (ELC).
Editing child events

Child events are added into the flow through event-next widgets. On the design canvas, these widgets
contain an active link to the event they call. Click on that link to open the child event workflow in a new
tab for quick editing.
270 March, 2023

Copy-pasting workflow elements
In the Event Designer, you can cut/copy action widgets and paste them within the same workflow or
any other workflow open in a different tab.
1. On the design canvas, select the widget you wish to cut or copy.
2. On the keyboard, press Ctrl+X (cut) or Ctrl+C (copy).
3. Use Ctrl+V to paste the element to a desired location.
For example:
271 March, 2023

272 March, 2023
Using the ERP-BAQ Event Action
You can add, update, and validate data using the ERP-BAQ event action. Select the operation you want
to run when users launch the event action. During this help article, we explore the different ways you
can configure the ERP-BAQ action to update your database.
1. Within Application Studio, go to the Event Designer.
2. Select the erp-baq event action.
3. Go to the Properties panel and select the BAQ Update Options node.
273 March, 2023

4. Click the Operations drop-down list and select the operation this action will run. Each operation
has properties you define.
274 March, 2023

5. When you select the getNew operation, the event adds a row to the BAQ database table. Users
enter a new record within this row.
6. Select the update operation to save changes to a single row or multiple rows. By default this
operation updates a single row. If you want this event to save changes to multiple rows at the
275 March, 2023

same time, select the Send All Rows checkbox. To prevent data from saving when an error
occurs, select the Rollback Data On Error check box.
7. When you select the fieldUpdate operation, you notify the server that a field changed. The server
then updates related fields. For example, if you update a Part Number, this operation notifies the
server that the Part Number changed and related fields, like Unit of Measure and Part
Description, need to update as well. You typically add this operation to a table column changed
event. Enter the specific Field Name for the field you want to monitor.
276 March, 2023

8. Select the fieldValidate operation to check if the updated field value is correct before the change
saves to the database. For example, you create an application layer that only allows entry for
manufactured parts. This operation checks that the Part Type is set to "M" (for manufactured).
Typically you add this operation to a column changing event. Enter the Field Name for the field
you will validate, and then enter the Field Value this operation will check against the selected
field.
277 March, 2023

9. You can also link the BAQ action to a customAction. After you select this operation, enter the
Action Id for the custom action that will run. If you want to include all BAQ rows when the action
runs, select the Send All Rows check box.
278 March, 2023

10. After you finish configuring the erp-baq action, click the Preview button to test the action.
279 March, 2023

Data Views Overview
A data view is a representation of data in the underlying dataset table (data table). The field values that
you see on the application screen are part of in-memory data that populates a data view. How does
data get from physical database tables into data views? Let's look at an example. In Order Entry, when
you open a customer order, you trigger a server call that executes a service method - in this case, the
GetById method of the Sales Order service (Erp.BO.SalesOrderSvc). This method, based on a predefined
tableset schema (a combination of related data tables), reads data from the database, copies it, and
returns as a dataset (in-memory copy of a tableset). Then, the returned data gets mapped to a data
view, or multiple data views if there are several data tables in a dataset, which usually is the case. In
your application, user-interface (UI) fields are bound to data view columns. That's how order details
appear for you on the screen.
Data View Designer allows you to create user-defined representations of data for your Kinetic
modifications. You can edit existing data views in the application - add columns, edit static filters, tools,
or parent-child relations - or add totally new views.
Your data views can be standalone entities that you can use to create new apps, pages, or "extensions"
for existing data views. Or you can set them up as child views for other data views.
Each data view is wired to a single data table.
You load data into your custom data view by using an event that calls a service (rest-erp action), a BAQ
(erp-baq), or Function (erp-function). This event can be hooked to a UI trigger or used as part of
another event. These REST call actions request data from the server via service methods - as explained
above - including the DynamicQuery.Execute method for Business Activity Queries) and Functions.
When you configure a REST call action, you map the response parameter (dataset) to specific data view
(s). And you don't have to map them all, the ones you don't will simply be ignored by the system. For
example, you want to add a sliding panel with additional part information for a sales order line. You can
use the part number in a selected line to invoke the Part.GetById method that will return the full Part
Service dataset. You can then map just one data table, say, Part (main table) to a data view. You then
bind the sliding panel UI controls (text fields, buttons, check boxes, etc.) to data view columns. This
example is detailed in the Using Grids in Application Studio course on Epicor Learning Center (ELC).
280 March, 2023

Using System Data Views
In Kinetic, every application comes with several predefined data views. In this article, learn how you can
use them in your configurations:
TransView
TransView is a system data view defined in each application to store variables during the user session
that are then used in data rules, accessed in event conditions, or passed as REST parameters. You can
append columns to it on the fly as needed.
KeyFields
KeyFields is a data view used in the system when there are two or more key fields to enable triggering
the record retrieval on leave of the last field. KeyFields view is used for this trigger on change of the
KeyFields columns.
actionResult
This data view is used for storing response for the following event actions:
l app-open
l credit-card-entry
l rest
l rest-erp
l serial-read-set
l erp-function
searchResult
This data view is used for storing results returned by search (search-show action).
Constant
This data view contains all available constants, including BAQ constants. Here's the full list of available
fields:
281 March, 2023

l CompanyID l DEC_PRICE l LastDayOfPrevWeek
l CompanyName l DefaultUM l LastDayOfWeek
l CountryCode l DefaultUOM l MobileConnect
l CountryGroupCode l DefUM l Month
l CurComp l DesignMode l PlantID
l CurCompName l EmployeeID l ProductCode
l CurLangID l FirstDayOfMonth l ProductName
l CurrentCompany l FirstDayOfNextMonth l SecurityManager
l CurrentCompanyName l FirstDayOfNextWeek l Today
l CurrentEmployeeID l FirstDayOfPrevMonth l Tomorrow
l CurrentLanguageID l FirstDayOfPrevWeek l UserID
l CurrentPlant l FirstDayOfUserCultureWeek l VersionString
l CurrentTime l FirstDayOfWeek l Week
l CurrentUserID l LanguageID l WorkstationDescription
l Day l LastDayOfMonth l WorkstationID
l DayOfWeek l LastDayOfNextMonth l Year
l DEC_COST l LastDayOfNextWeek l Yesterday
l DEC_GENERAL l LastDayOfPrevMonth
CallContextBpmData / CallContextClientData
These data views are used for storing values of context BPM or client variables for the current data
transaction- for example, Character01 (BPM) or CurrentCompany/CurrentUserID (Client).
sysTools
The system auto generates the bindings for the New Line Tool and Delete Line Tool for each of the
data views present in the application. These can be viewed in the sysTools data view.
matches
When you use a dataview-condition action to make a selection of records from a data view based on
some criteria, the system generates a temporary data view, by the same name, that holds only the
records that "match" the defined condition, if any. The system uses the word matches to refer to this
282 March, 2023

subset of data selected from the source view for further manipulation - for instance, updating multiple
rows in the view.
Here's an example of a dataview-condition setup:
Once you made a selection from a view and mapped the results of this selection to matches, you can
then execute another action that you define in a separate event to be iterated for each row of the
temporary data view - for example, row-update:
The updated records automatically merge into the source data view.
283 March, 2023

Defining a New Data View
In this article, we will focus on how to create a new view from scratch, but all the instructions below are
equally applicable to editing existing data views.
First of all, select or add a layer you want to create your data view for. Then, follow these steps to add a
new view and define its main properties:
1. Access Data View Designer from the Menu.
When you click the designer icon , the Data Views panel slides on. You can pick an
existing data view directly from the tree or use search.
2. Press New to start creating a new view.
The new data view properties page displays.
Here's what you can do in the Data View Designer:
Mapping view to a data source

On the Dataview section there are two columns - Data and Server:
284 March, 2023

The Data column contains properties that define the in-memory dataset handled by the application:
l Data View ID - specifies an ID for your view. Notice that, by default, the ID of the newly created
view displays in the following format: NewView-[index], where index is used to ensure the ID is
unique. Change it to something meaningful. The best practice is to use the Server Table name
for a Data View ID - for example, name the view for the OrdertDtl database table as OrderDtl.
This will help you immediately identify the contents of the view. You use the Data View ID in data
binding (EpBinding) - for example, OrderDtl.OrderNum.
l Dataset ID - specifies the in-app ID for the dataset returned by the service. Again, as a rule, for
clarity, this ID is the same as the Server Dataset ID.
l Data Table - specifies the name of the dataset table. Can be anything, but typically is the same
as the corresponding Server Table name - for example, ShipDtl. By specifying a data table name,
you create a mapping between a physical database table and a data table handled by the Kinetic
application.
When you bind a UI field to a data view column, you specify the EpBinding property in the
following format: [Data View ID].[Column] - for example, OrderHed.OrderNum. You need to
specify Data Table and Dataset ID to enable EpBinding and Row Rule intellisense for a
data view/column, otherwise you would have to remember this exact value and enter it by
hand.
You also need a Data Table ID when you map data tables returned by a service in a single
dataset to multiple data views. For example, if you are getting data from the Part service,
you can map the main Part table to one data view, the PartBinInfo table to another.
If you keep Dataset ID and Data Table properties undefined, the system will assume both
these IDs to be the Data View ID. There will be no prompts for data view columns when
you specify EpBinding. In this case, you also don't need to bind Server Dataset and Table
285 March, 2023

to the view. The data view will contain columns provided by the Server Table specified in
the response parameter of a data load action. For example, you create a new view, enter
an ID - MyView, and press save. Technically, your view is ready to go. At different points of
the application flow, you can have events that load data into this view from different data
sources - service method, Function, or BAQ results dataset. More on data loading events in
the next article - Loading Data into a View.
The Server column contains data source properties:
l Server Schema - defines the data source: ERP/ICE service method dataset or Business Activity
Query (BAQ) results dataset.
Review the available options:
o ERP - used for product services and tables - for example,

Erp.BO.CustomerSvc/Erp.Customer.
o ICE - used for system and UD services and tables - for example,
Ice.BO.SecGroupSvc/Ice.SecGroup or Ice.BO.UD01Svc/Ice.UD01.
o BAQ - used for BAQ results datasets.
When you select ERP or ICE schema, the other default properties related to services
remain on the screen for editing. If you select BAQ schema, only the BAQ ID
property field displays in the Server column.
l Server Dataset ID - specifies the service ID without the Svc postfix. For example, to specify the
Sales Order service (Epr.BO.SalesOrderSvc), type in SalesOrder.
l Server Table - specifies the ID of the table from the service tableset - for example, OrderRel or
OrderMsc.
l BAQ ID - specifies the name of the Business Activity Query when you select the BAQ server
schema.
Defining parent-child relationships

You can set up parent-child relationships between data views in the child view properties.
286 March, 2023

Typically, this functionality is used in the system data view structure, and most often you don't have to
do this setup for your custom data views. It is enough to just specify a parent data view column as a
request parameter for a method that you use to load data into your child data view. For example, in
Sales Order Entry, you want to display additional part details for a sales order line. You will create a
data view that will hold the part details data. You can get the data from the server by using a GetById
method that has part number (PartNum) as an input parameter. You inject the PartNum from the Order
Detail view into the Part.GetById method call to get data for a specific part.
This example is described in detail in the Using Grids in Application Studio course on the
Epicor Learning Center (ELC).
However, if you choose to use a BAQ to fetch this additional part data from the server. For this BAQ, you
can have a dynamic parent view key filter instead of the method request parameter described above. In
the data view that you create for the BAQ results, you can define OrderDtl as a Parent Data View, then
bind the PartNum column form the OrderDtl view to the PartNum column from the BAQ data view. This
way the BAQ view would display data just for the specified part record. Therefore, most often, you
would use this functionality when setting up dashboards.
Here are the general steps for defining a parent-child relationship:
1. You first select a Parent Data View from the drop-down that contains all data views in the
current layer. The child view would use a column from the parent to filter data.
2. Press New to add a new relationship.
3. In the Parent Column, select a field from the parent data view.
4. In the Child Column, select a field from the child data view to create binding.
5. Press New again to add another view relationship.
6. Press Remove to delete a relationship.
Defining Options
287 March, 2023

Static Filter
Use static filters to apply additional criteria to the data provided by the application server. Sometimes,
more than one data view can be bound to a single server table. To populate both views, you create an
event that calls a method of the corresponding service. You map the service response (dataset) to these
two views. Finally, on the client side, you use a static filter to select the specific data for each data view.
For example, Apply Credit Memo has two data views that have the CashDtl table from the
ApplyCreditMemo service dataset as a data source. The CCPayment and CashDtl views filter data
returned by the ApplyCreditMemo service method by the value of the IsCreditPayment column of bit
data type:
l For CCPayment, the filter is set to IsCreditPayment = true:
l For CashDtl, this filter is set to false:
288 March, 2023

The format for static filters is [DataViewColumn] = [Value]. Use single quote marks
for string values - for example, KitFlag = 'C'. Separate multiple criteria with a
comma.
Dirty View - Confirm Changes

This option, turned on by default, enables displaying a system dialog confirming what to do with
unsaved changes when you exit an application screen.
Adding columns
You can add your own columns to custom and system data views. For example, the UI fields bound to
these additional columns can display calculated or concatenated data. For example, you can inject the
result of some client-side calculation logic (designed as an event) into an additional data view column.
289 March, 2023

To create an additional column:
1. Press New in the top right corner of the Columns grid.

A new row is added. Note that the Additional Column check box is selected.
2. Add a Column ID.

3. Save the view.
You can remove additional columns, you cannot remove columns that originate from the server dataset.
It is possible to modify the caption and format of a column. However, please note that any
modifications made to the format of a column will only have a visual impact within the
application.
Setting up context menu for a column

Context menus are special menus that appear when you right-click a text box, drop-down list, or other
UI control. You can use the Data View Designer to create and modify these context menus for specific
data view columns.
Context menus that you create for data view columns (system or additional) belong to a certain layer.
As part of that layer modification they can be made available to all users or specific user groups within
your organization.
Context menus are another way for hooking custom events. To define a context menu action:
1. In the Columns grid, select the row for the column you wish to add a new context menu to and
press launch context menu .
2. On the Custom Context Menu panel that slides on, press New .
290 March, 2023

3. In the Menu Text column, enter the text that will appear in the menu.
4. In the ID column, add a unique ID for the menu item. This will be the trigger for an event.
5. Type in the Event ID for the event you want to be triggered when this menu item is selected.
6. If you want to replace an item from the standard context menu, specify the GUID of the item to
be replaced in the ReplaceID column.
7. Select the Hidden check box if you need to hide your context menu item from view.
8. Select Remove Like Context Menu if you wish to turn off the standard context menu for a field
(if any). This way, at run time, only the custom context menu items will display for this field.
9. Press Ok to complete the setup.
Note that although Tools and Static Filters functionality is primarily used by the internal
Epicor development team you can use it as described in the Adding Tools and Defining
Static Filters sections.
Adding Tools
At data view level, you can add custom tool actions to the overflow menu or toolbar on the component
that is bound to this data view - for example, a page or panel card grid. Here's how you add tools to
your data view:
291 March, 2023

1. On the Tools panel, press New .
A new line gets added to the grid.
2. In the Type column, select one of the four available options: New, Custom New, Delete, or
Custom Delete.
The New and Delete type tools are used to add and remove records in the data table underlying
the view. For example, on the Order Entry's Line Detail page, there's the Kit Details panel card
grid bound to the SalesKitComponent view. This view has a New tool that adds a new kit detail.
When you look at this grid at runtime, you see the New icon in the top-right corner of the panel
card. When pressed, this icon launches an action that creates a new line.
These tools come with predefined settings: the Delete tool displays in the overflow
menu, the New tool appears in the toolbar next to it; both of these tools also have
predefined icons, etc. The only setting you can edit is the Text that appears in the
overflow menu or in the tooltip for an icon. Note the text you enter will be
automatically prefixed with either the word New or Delete depending on the tool
type. For example, if in the Text column, you type in Pack for a New tool, at
runtime, it will display as New Pack. If you don't specify any text, only the prefixes
will display. This logic also applies to Custom type tools.
3. In the ID column for Custom type tools, enter an ID that you can then hook to an event - for
example, create a record, open a page or a sliding panel, etc.
292 March, 2023

4. In the Text column, specify the text that will display in the menu - for example, Pack or Line.
Remember that in the UI, this value will be automatically prefixed with either New or Delete
depending on the tool type.
5. Kinetic framework supports the full set of Material Design icons. In the Icon column, you can
specify an icon code for your tool action using the following format - mdi mdi-[Material Design
Icon ID] - for example, mdi mdi-map-marker.
6. Optionally, specify Current Data View.
7. Select the check box in the Show in Tool Bar column if you want your tool action displayed as a
separate icon in the toolbar next to the overflow menu.
8. You can hide the tools of New and Delete types by selecting the Hidden check box.
9. To remove a tool, select its row and press remove.
293 March, 2023

Loading Data into a View
Most often, you use events to load data from server into a data view. You select when and under what
conditions the data populates the view. You may need this data right after you launch the app or only if
a user opens a certain page. In other words, load the data only when you need it for better application
performance and reduced network payload. Learn more about events in the Working with Events
section of the Application Studio Help.
You can also load data from grid provider model - service, BAQ, or Function - into a bound data view.
In this article, we will cover:
Loading data from Grid Provider Model

If your grid has a defined provider model - meaning that it gets populated with data returned by a
query, service method, or Function - you can additionally bind your grid to a data view. This data view
is then automatically populated with current data form the grid. For example, you have a user-defined
grid that gets data directly from the zPartDetails custom query:
Here's how you can load data into a data view from this grid:
1. On the grid properties panel, go to Data > Grid Model.
2. In the Ep Binding field, enter the ID of the view you wish to bind this grid to - for example:
PartDetailsView:
294 March, 2023

With this setup, the PartDetailsView automatically gets populated with data from the selected (or
default) grid row.
If you have view options set up for your grid, you need to specify a data view ID in
each of them. Similar configuration is described in the Using Grids in Application
Studio course on Epicor Learning Center (ELC).
Creating an event for populating a view

You create events in the Event Designer. There are two ways to create a new event:
1. On the Events sidebar panel, press New .
The Event Designer launches with a new event.
Use this option to create an event if you don't know what control to hook it to or if you plan to
use it without a trigger (as part of another event).
2. On the Properties panel for a control - for example, a button, expand the Behavior group and
select a hook type: On Click, On Blur, or On Create.
295 March, 2023

The Event Designer launches with a new event that has a predefined trigger.
Use this option when the trigger for your event is a layout component, or control - for example, a
button, a check box, etc. This process automates trigger setup.
Configuring action to load data from service method dataset

You can call service methods via REST API to load data into a view. For example, when you launch Order
Entry, the system calls the GetRows method of the Sales order service to populate the LandingPage
296 March, 2023

view underlying the grid on the app's landing page. In the Event Designer, use the rest-erp action to
configure a service method call:
1. On the Toolbox > Actions, search for rest-erp, then add this action to the event flow.
2. Select the rest-erp widget on the canvas, then on its Properties tab, drill down to the Advanced >
Rest Services group.
3. In the Service Name field, select a service or enter its name in the following format:
[ServerSchema].BO.[Service] - for example, Erp.BO.SalesOrderSvc or Ice.BO.SecGroupSvc.
4. From the Service Operation drop-down, select the service method to call - for example, GetByID
or GetNewShipHead.
5. Expand the Method Parameters group. when you select a method, the system automatically
takes its required parameters from the Kinetic REST API and populates the input parameters list.
6. Each parameter has a system data type. Specify parameter's value. You can assign a static value
to the parameter - for example, a fixed number (5313) or string ('Addison') depending of the
parameter data type, or dynamic - a data view column in the following format: {[DataView].
[Column]} - for example, {PartDimensions.PartNum}. This way the system binds the current
value of the specified column to a method parameter.
7. Go back one level to the Rest Services group and expand ERP Rest Arguments > Response
Parameters. Then press New to add a new parameter.
8. In the Parameter Name field, enter the name of the Data Table specified in the data view
settings - for example, OrderDtl.
9. In the View Name field, enter the ID of the view into which you want to load the returned data -
for example, CCPayment.
10. In the Parse from Response Path, type in returnObj. This is the response container with returned
server data.
11. Save your event.
Configuring action to load data from Business Activity Query

(BAQ) Results dataset
Getting data into your view from a BAQ is easy:
1. On the Toolbox > Actions, search for erp-baq, then add this action to the event flow.
2. Select a BAQ from the BAQ Id drop-down. It lists all the BAQs in the system.
3. Specify the View Name.
4. Save your event.
297 March, 2023

This is it. This event calls the DynamicQuery service to execute the specified BAQ. It that maps the BAQ
Results dataset to the data view.
Configuring action to load data from Function response

parameter of tableset type
1. On the Toolbox > Actions, search for erp-function, then add this action to the event flow.
2. Select the erp-function widget on the canvas, then on its Properties tab, expand the Advanced
group. Kinetic Functions are exposed in the REST API v.2 only, therefore you need to specify a
required API Key for your call. You create these keys in API Key Maintenance; learn more about
them in Application Help.
3. Enter the API Key value - for example, 355sgCESs4OPR5R6JCbNl1g48a1fn7ytOtHVpfYnT7ZB7.
4. Type in the Kinetic Functions Library ID - for example, SecFuncLibrary.
5. In the Service Operation field, type in the Function ID - for example, CheckSecurity.
6. Expand Method Parameters. The list is empty as the system does not automatically read the
Function signature.
7. If your Function has request parameters, press New to add a new parameter.
l In the Field Name, enter the name of the Function request parameter - for example,
partNum.
l Select Data Type.
l Specify Field Value. It can be a fixed value - for example, '00C1', a system constant - for
example, {Constant.CurrentUserID}, or a data view column - for example,
{OrderHed.OrderNum}.
8. Now go to Advanced > Response Parameters to map the Function response. Press New to
add a new parameter.
298 March, 2023

9. In the Parameter Name field, enter the name of the returned data table - for example, Table1.
10. Type in the View Name for the view you are mapping the response to.
11. In the Parse from Response Path, enter the name of the response parameter of tableset type
specified in the Function signature - for example, dsCustomer.
12. Save the event.
Hooking the loading event

You can directly invoke the data load event with a trigger or make it part of another system or user-
defined event.
To hook a data load event to some action in the UI - for example, a button click or data view change -
you define a trigger:
1. When you create a new event, it automatically contains a No Trigger widget. Select this widget
on the canvas.
2. On the Properties panel, select a trigger Type - for example, Control.
3. Select a Hook - for example, On Click.
4. In the Target field, enter the ID of the component - for example, BtnCreateNewPack.
This means that the event fires when a UI control - for example, a button - with a specified ID
(BtnCreateNewPack) is pressed.
If you want your event to be triggered from another event:
1. When you create a new event, keep the default No Trigger widget intact and design your event
as needed.
2. Open the event you want to add your event to.
3. On the Toolbox > User Defined tab, select your event and add it to the flow.
4. Alternately, on the Toolbox > Actions tab, select the event-next action and drag it onto the
canvas. On its properties, specify the ID of your event.
Clearing data from the view

Make sure you clear data from your additional view when users clear screen with the main record:
299 March, 2023

To do this:
1. On the Events panel, select the system Data_Clear event placeholder.
2. Do not change the trigger settings and got to Toolbox > Actions.
3. Locate the dataview-clear action and add it to the flow:
300 March, 2023

4. On the action properties panel, expand the Basic category and enter the ID of the data view you
wish to clear - for example, PartSubs.
301 March, 2023

Widgets Overview
Data Discovery widgets are self-contained wizard-based user interface (UI) components that visualize
data provided by the embedded business intelligence system on the Kinetic Home Page.
You can use some of these widgets - Data Discovery Card, Data Discovery Chart, as well as other
Home Page widgets like Website Widget - in your new or modified applications. In the Data Discovery
Card and Chart widgets, you can use the publish and subscribe functionality to set them up for
displaying the data specific to your application context.
In Application Studio, all available widgets display on the Toolbox > Widgets tab of the Layout
Designer.
Widgets appear on this tab only if the Data Discovery extension is installed.
In the three examples below we will add a widget of each available type to the Customer Shipment
Entry application. Follow these steps to create a new layer for this application first:
1. From the main menu, navigate to Material Management > Shipping/Receiving > General
Operations > Customer Shipment Entry.
2. In the Overflow menu , select Application Studio.
The Application Studio launches and displays the Application Map.
3. Let us first save the layer. In the top right corner of the screen, press the New Layer link.
The Layer Selection panel slides on.
302 March, 2023

4. For the Layer Name, type in Widgets.
5. Add a Description - for example, Widgets Demo.
6. In the Layer Selection window, press Save Layer.
7. On the Application Map, select the Details page and click Edit .
The Details page layout displays.
8. From the Toolbox > Components tab, select Panel Card and drag it onto the page layout.
303 March, 2023

9. Select the newly added panel card and edit its properties and expand the Basic group:
l Change the default ID to MetricsPanel.

l Change the Title to Customer Metrics.
10. Now define some structure for the Customer Metrics panel card by adding a Column component
to it. This creates a page-wide container for other components you can add to the panel card.
Go to Toolbox > Components, select 1 Column and add it to the panel card.
304 March, 2023

11. Select the Column component on the layout and go to the Properties list.
12. Expand the Advanced property group and change Orientation to horizontal to stack inside
components side by side instead of one on top of the other (default vertical orientation):
Stay in the Application Studio and move on to the first example - Adding a Data Discovery Card to a
Kinetic App.
305 March, 2023

Adding a Data Discovery Card to a Kinetic App
Data Discovery Card is a widget that provides a summary of data in just one number - for example, the
sum of all open orders value for customers, which you can build into your Kinetic application as is or, if
necessary, filtered by the current customer using the publish and subscribe functionality. In this
example, let us do something similar.
1. Go to the Toolbox > Widgets tab.

2. Select the Data Discovery Card widget from the list and drag it onto the empty column you just
added to the Customer Metrics panel.
The Widget Setup dialog slides on.
3. From the Data Discovery View drop-down, select one of the preset views - for this example,
Customer Past Due Balance.
The widget title is populated automatically. You can change it to your own any
time. The widget preview also displays. It shows the past due balance for all and
306 March, 2023

each customer as you click through the slider.
4. On the Widget Setup slider, press Ok.
5. Let us now make the widget display a value relevant to a specific customer who the current
shipment record belongs to.
This setup is optional.
Select the widget on the layout and open its properties.
6. On the Properties panel, click the Pub Sub Setup button.
The Subscriber Setup panel displays.
307 March, 2023

7. Click the New icon in the top right corner of the panel.
A new line is added to the grid.
8. From the Subscriber drop-down that lists fields exposed by the selected view, choose Customer,
which is a customer name.
9. Keep the = (equals) condition.
10. In the Publisher field, select ShipHead.CustomerName column that stores the current customer
name. Then click OK.
11. Launch application preview.
12. On the Customer Shipment Entry landing page, select any record from the grid.
13. Note that the Customer Past Due Balance widget displays the value for the current customer -
in this case, Dalton Manufacturing:
308 March, 2023

Move to the next example - Adding a Data Discovery Chart to a Kinetic App.
309 March, 2023

Adding a Data Discovery Chart to a Kinetic App
In this example, you will add one of the system chart views provided by Data Discovery to the Kinetic
Customer Shipment Entry.
If necessary, you can configure Data Discovery Chart to be context-specific by using the
available publish and subscribe functionality. Please refer to the Pub Sub Setup
instructions provided in the previous example (Adding a Data Discovery Card) for details.
1. Go to the Toolbar > Widgets tab, select the Data Discovery Chart widget and drag it to the
Customer Metrics panel next to the Customer Past Due Balance widget.
The Widget Setup panel slides on.
2. For Data Discovery View, select Sales Orders - Value by Month and click OK.
The widget on the layout displays the chart based on the system BAQ used for this view.
3. You can adjust widget height and width by specifying the number of pixels in the Height and
Width property fields respectively. Set the width of the widget to 300.
310 March, 2023

4. You can further tune the data displayed by the widget by using the publish and subscribe
functionality (Pub Sub Setup). For example, if you create your own chart view based on a
custom BAQ, and display it in your Kinetic application, you can link the displayed data to current
customer, part, etc.
5. You can change the view any time by clicking the Guided Setup button in its properties.
6. Launch Preview and open a shipment record.
Note the newly added Sales Orders - Value by Month widget displays a chart.
311 March, 2023

You can now move on to the third example - Adding a Website Widget.
312 March, 2023

Adding a Website Widget
In this example, we will use a simple demo to step through a typical Website widget setup. This
example is revisited and enhanced in the Working with Sliding Panels section of the Application
Studio help.
1. On the Toolbar > Widgets panel, select the Website widget and drag it onto the canvas next to
the Data Discovery widgets.
2. Select the Website widget on the layout and modify its properties:
l For Title, type in Customer Location.

Paste this Google Maps URL into the Url field:
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26371661.85956456!2d-
113.72360706725829!3d36.21040627051876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!
2sru!4v1600081621641!5m2!1sen!2sru
You can specify both static or dynamic URLs. Dynamic URLs contain context-specific
parameter(s) taken from the dataview - for example, some field value. To pass a
field value into the Website widget URL, enter its Ep Binding value in curly brackets
- {}. For example, {Customer.CustID}.
l Set the widget Width to 300.
313 March, 2023

3. Optionally, you can select:
l the Token check box to configure the Website widget to use authenticated visitors.
l the User Context check box if you need to pass the current Kinetic user information to the
web resource.
4. Launch the preview and drill into one of the records on the Customer Shipment Entry landing
page.
Note the website widget displays the embedded map from the Google Maps website.
314 March, 2023

315 March, 2023
Sliding Panels Overview
Slide-out panels are typically used for showing info, warning, or error messages to a user in a dialog
format. They can also be used to display additional context-specific information.
Sliding panels can be of two different types:
l In-App
In-App sliding panels are created in an application as standalone pages that you invoke at
runtime by triggering an event. They are specific to that application and cannot be run from
other applications.
l Reusable
Reusable sliding panels are standalone applications which are referenced and run from within
other applications to provide common functionality across multiple applications. Sliding panels
of this type are designed independently from other applications, then referenced and used.
You can create, edit, and add layers on reusable sliding panel applications in Application Studio
to enable code reuse of common dialog-like behavior and other forms across applications.
316 March, 2023

Creating In-App Sliding Panels
In this example, let us add a sliding panel to the Customer Shipment Entry application. It will be
triggered by a button click and will display the Ship To location on the embedded Google map.
You can design the sliding panel layout using any available or user-defined components, and widgets. In
this example, we are going to add a Website Widget to the slider. We will inject the value of the
ShipHead.ShipTo AddressFormatted field as a query string into the Google Maps search URL. Google
Maps displays an embedded map only if it finds a complete match for the search string, meaning this
scenario will work for real customers, and most likely not for sample ones shipped with the educational
DB - for example, Addison, Dalton, etc.
Creating a sliding panel layout

1. Launch Customer Shipment Entry.
2. From the Overflow menu in the top right corner of the screen, select Application Studio.
The Application Studio launches and displays the default Application Map tab.
3. Select the root element in the application navigation scheme and click Add New .
An empty child page is added to the root element.
You must add a new page to the application's root element to be able to convert it
into a sliding panel.
4. On the new page's Details panel, edit its basic properties:
l For the Name, type in ShipToLocationPanel

l In the Caption field, enter Ship To Location.
l Finally, from the Page Type drop-down, select SlidingPanel.
When you select the SlidingPanel page type, the page disconnects from the
navigation tree and moves to the separate Slide Out Panels container.
l Scroll down and select the CollapseOnOutSideClick check box to make your panel
collapse when you click anywhere on the screen outside the panel.
317 March, 2023

5. Select the Ship To Location page in the Slide Out Panels section and click Edit .
The page layout displays.
6. You can use the Width Types field in the page caption properties to set the default width for the
panel. For this example, let's keep it Small.
7. On the Toolbar > Components tab, select the GroupBox component and drag it to onto the
canvas.
You can add the following container-type components to the sliding panel layout:
Panel Card, Panel Card Grid, or GroupBox.
8. In the GroupBox properties, remove the default Label Text and keep this field blank.
9. Now, go to the Widgets tab. Add a Website widget into the GroupBox.
318 March, 2023

10. Select the widget on the sliding panel layout and open its properties.
11. Change the default title to Map.

12. Insert the following URL into the Url field:
https://maps.google.com/maps?t=&z=13&ie=UTF8&iwloc=&output=embed&q=
{ShipHead.ShipToAddressFormatted}
319 March, 2023

You use curly brackets to inject EpiBinding value into a URL. In this example, we use
the current data view field value for a Google search query parameter. The first part
of the URL up to the q parameter is standard Google Maps boilerplate for search.
13. Set Width to something like 550.

14. Set widget Height to, say, 600.
15. Save the layer and remain in the Application Studio.
Adding an action button to a panel card

In this step, let's create an Action menu item that will invoke the slider when you click on it.
1. On the Application Map, select the Details page and click Edit .
2. On the page layout, select the Header Details panel card component and open its properties.
3. Expand the Advanced property group and make sure the Enable Action Menu option is selected.
4. In the same group, open Action Data, press to add a new item and set it up like this:
l ID:ToolShowMap - Remember/Copy this ID, you will use it to set up an event.
l Description: Show on Map
l Icon: mdi mdi-map-marker - Kinetic 2023.1 ships a complete set of Material Design icons
(v3.9.97, see full list here) that you can use in your applications, in this example, we will
use the standard map marker icon.
l ShortCut: Ctrl+M - You can create your own hot-key shortcuts for actions.
320 March, 2023

5. Save the layer.
Configuring an event to display the sliding panel

In this step, you will add an event that shows the slider and is triggered by a button click.
1. From the sidebar menu, open Events.
2. Press Add New to add a new event.
3. For Id, type in OnClick_ToolShowMap.

4. Add a Description - for example, Show the ship to location map on tool icon click.
321 March, 2023

5. Select the No Trigger widget on the design canvas and configure it like this:
l From the Type drop-down, select Control.

l For Hook, select On Click.
l In the Target field, type in the Action ID - ToolShowMap.
6. Go to the Toolbox > Actions tab and select the slider-open action..
The trigger automatically connects to the newly added slider-open widget.
322 March, 2023

7. Select the slider-open widget and edit its properties.
8. Expand the Basic property group and open Parameters section,; then in the Page field, enter the
sliding panel ID - ShipToLocationPanel.
9. Save the layer.
Testing the layer

You can test your new slider in the Preview Mode of Application Studio, or by deploying your layer to
the menu.
Here's how it should work:
323 March, 2023

324 March, 2023
Creating Reusable Sliding Panels
Reusable sliding panels are separate applications that can be added as a child view to another parent
application. To create a reusable panel, you can use an existing application or create a new one.
Creating new applications requires an SDK license.
These are the basic steps for setting up a reusable sliding panel in an application:
1. Create a new application or use an existing one. Note its application ID. It consists of a standard
prefix - for example, Erp.UI., and a unique ID - for example, Erp.Ui.PartInfoLookUp.
2. In the parent application - for example, Sales Order Entry, create a new event triggered, for
example, by a button click. The button can be something like Show Part Info.
3. In the Event Editor, go to Toolbox > Components and add an app-open action to the event
workflow.
4. Set up Param properties for the app-open action:
l In the View field, type in the child's application view ID - for example,
Epr.UI.PartInfoLookUp.
l Use the Layer field to specify any modifications you want to apply against this child view.
l Select the SlideOut option to make the child application slide out and not open in a new
window.
l The next eight fields - OnOk, OnCancel, etc. are used for processing data returned from
the child app. You will get back to them after you set up the closing event in the child
application.
l Use the ValueIn field to specify input parameters you want to pass into the child app. In
the JSON EDITOR, use this syntax to specify a dynamic parameter you are passing: {"
[ParamName]" : "{[DataView.Column]}. For example, {"Filter1" : "
{JobHead.PartNum}"}.
5. If you are passing data from the parent app, in the child app, add an event with an row-update
action in the Event Designer (Toolbox > Actions > row-update).
6. In the row-update action properties, map the incoming value to a column in the child
application data view.
7. In the child app, in the root page properties, add a button control - for example, an OK button,
that will trigger an event that collapses the sliding panel.
325 March, 2023

At runtime, when you invoke a child app, it always launches at the landing (root)
page. Any buttons you add to the root page properties panel will always appear at
the bottom of the application screen if it is launched as a sliding panel. However,
they will not be displayed if the app is launched in a standard window.
8. In the child application's Event Designer, add an event that contains a app-close action (Toolbox
> Actions > app-close).
9. In the app-close action properties:
l Enter a value into the required Result field - for example, OK.
This field can take any available enumerated type values: Ok, Cancel, None,
Abort, Retry, Ignore, Yes, No.
l If the child app returns data into the parent app, use the Dataviews field to specify the
source (child app) and destination (parent) data views.
l Again, if you return any data from the child app, use the ValueOut field to specify
outbound parameters.
You can have multiple events with a app-close action tied to controls in your child application.
For example, you can have OK and Cancel or Yes and No buttons that trigger different view
closing events.
10. Back in the parent application, in the event you used to launch the child app as a slider, bring up
the properties of the app-open action again.
l Select the field that corresponds to the Result specified in the child application - for
example, OnOk.
l Press the Edit button to launch the JSON Editor and add code for processing the response
from the child app.
If you have several possible results in the child app, configure them in corresponding app-open
property fields the same way.
You can set up another application - for example, Customer Shipment Entry, to show the
Erp.UI.PartInfoLookUp application on a slide-out panel.
326 March, 2023

Adding a Layer to the Menu
After you finish a layer in the Application Studio and save it, you can add it to the menu in Menu
Maintenance making it available for other users within your company.
For the presentation purposes, you will use Lot Tracker and create a layer for it first and then add it to
the main menu.
Creating a Layer
1. Go to Lot Tracker.
Menu Path: Executive Analysis > Trackers > Lot Tracker
327 March, 2023

3. Go the Layout designer .

4. Select the page title and go to the Properties panel.
5. In the Caption field, enter XXX (where XXX are your initials) before Lot Tracker, ans select Save
.
6. In the Layer Name and Description fields, enter XXX Test Layer, where XXX are your initials, and
select Save Layer.
328 March, 2023

Both fields are mandatory. You will need Description to identify the layer in Menu
Maintenance.
7. Go to the Company Name drop-down list and select the company where the layer will be
available. This field defaults to ALL companies, but you can select any company that you have
permission to access through your user account. This layer then only displays within the
company you select.
You can later use the Save As option to move this layer to a different company. You
may do this to move the layer from a test company to a production company..
8. Close Lot Tracker.
Adding the Layer to the Menu

1. Go to System Setup > Security Maintenance > Menu Maintenance.
2. Menu Maintenance displays. Select the menu inside which you will add the layer on the Landing
Page, such as MAINMENU.
3. In the tree view, expand Executive Analysis > Trackers and select Lot Tracker.
4. In the menu properties, enter or search for the customization in the Kinetic Customization field.
The Kinetic Customization slides on. In the Available customizations column, you can select
which layers you want to apply to this application. Note you can see only the layers that have a
description.
5. Select the Select check box beside the XXX Test Layer you created earlier (where XXX are your
initials).
329 March, 2023

6. Select Apply.
7. Select Save.
8. Now log out and then log back into Kinetic. This refreshes the menu, adding the layer to the user
interface.
Now, when you launch Lot Tracker from Executive Analysis > Trackers, it will always open in the
modified form you selected for it (in this case, the page title will be XXX Lot Tracker, where XXX are
your initials). If you want to add or change something, once you launch the Application Studio, you will
land on the XXX Test Layer (where XXX are your initials) by default. After you change the layer and save
it, the application will load with all the changes automatically.
Adding Two or More Layers to the Menu

You can also apply several modification layers at the same time.
The order of the layers specifies the order in which the system will apply the changes to the application
UI. It means that you need to place layers in the way where the first layer in the Selected
customization column gets applied first, and the last layer gets applied last. The last layer has
330 March, 2023

precedence over the lower layers, and, in case of conflicts (for example, different changes for the same
component), it will override the changes of the lower layers.
For example, you have two layers you want to apply to the application: A and B. In A, you changed the
name of the page to Test A and added a new button to the layout. In B, you changed the name of the
page to Test B, but left everything else as it originally was (no new components, etc). This way, you will
have two options of the layers order:
l A, then B: B overrides the changes to the page name, so it is Test B. But as the new button from
A has no conflicts with B, it remains in the application layout.
l B, then A: A overrides the changes to the page name, so it is Test A. The new button remains in
the application layout.
To rearrange the layers, change the Order values in the Kinetic Customization window in Menu
Maintenance.
331 March, 2023

Importing and Exporting Layers
You can use the Solution Workbench to distribute your application modifications to other locations
within your organization, from one application server to another. Through this program, you generate a
.cab file that contains the selected layers and import them on another system.
Exporting a layer
Assume you modified Sales Order Entry and created a layer named CounterSale that displays simplified
layout for counter sales. Here's how you export it.
This action requires Can Create Solutions privileges enabled in User Account Security
Maintenance.
1. From the main menu, go to System Management > Solution Management > Solution
Workbench.
2. Create a New Solution record. Note the read-only Release Version field displays the current
version of your Kinetic system.
3. Enter your Solution ID and select Solution Type.
You typically select ALL Solution Type to display all delivered elements in the
database.
4. Save the record.

5. Click Add to Solution. Note the Element list contains the below options:
l KNTCCustLayer - application customizations stored in the XXXDef table.
l KNTCPersLayer - application personalizations stored in the XXXDef table.
6. In this example, select KNTCCustLayer and click Search.
7. In the Advanced Element Search window, you can narrow down your search results by entering
criteria in the Starting At field. For example, enter count and click Search.
8. Select the CounterSale record and click OK.
9. Click Add to Solution.
You are now ready to build your solution (.cab file). For more information on the
remaining controls, see the Solution Workbench help topics.
332 March, 2023

Importing the solution
Here's how you import the previously exported CounterSales layer on another system.
This action requires Can Install Solutions privileges enabled in User Account Security
Maintenance.
1. From the main menu, go to System Management > Solution Management > Solution
Workbench.
2. From the Actions menu, select Install Solution.
3. Click Solution File, search for and select the .cab containing the modifications you want to
install.
For more information on the remaining controls, see the Solution Workbench help
topics.
333 March, 2023

Using the Save As Option
Some layers were originally created to only run in specific companies. You may need to move a layer
from one company to another target company. You can then add this layer to the menu in the target
company. Do this by using the Save As option within Application Studio. Typically you use this feature
to move a custom layer from a test company into a production company.
You can only save a layer to a company that you have rights to access. Your system
manager assigns which companies you can access on your user account. System
managers create and update accounts through User Account Security Maintenance.
To save a layer to another target company:
1. Select the layer you wish to move.
2. Select the Overflow menu and the Save As option.
334 March, 2023

3. The Layer Selection panel displays. Specify Layer Name and Description. Both fields are
mandatory.
4. Go to the Company Name drop-down list and select the target company. You can select any
company that you have permission to access through your user account.
5. If this layer will be a child of the original layer, expand the Parent Layer node and select the
check box. The layer name displays next to this check box.
335 March, 2023

6. Select Save Layer.
7. When you save a layer that has business activity queries (BAQs), business process management
directives (BPMs), and other dependent elements, you receive a warning that you need to import
these elements separately into the target company as well.
You do this by creating a solution (.cab) file within the Solution Workbench. You
add the dependent elements to the solution and export it. You then import this
solution into the target company. The Importing and Exporting Layers help article
explains how you use the Solution Workbench.
8. Select Ok.
This layer is now available within the target company. You can add it to the company menu using Menu
Maintenance. Review the Working with Menu Maintenance help article for more information.
336 March, 2023

Using Application Studio Homepage
Through the Application Studio Homepage, you manage custom base applications and application
layers. This management tool displays all the base and added layers in your system. It shows you their
current update level, draft status, and published status. You can also use Application Studio Homepage
to customize base applications, create application layers, and launch the Basic Application Wizard. If
you own the Software Developer Kit, or SDK, you can create new applications and build reusable
components of any type using default templates. You can also create your own SDK component
templates.
You can launch Application Studio Homepage if you have either Dashboard Developer or
Customize Privileges rights on your user account. Your system manager activates these
rights within User Account Security Maintenance.
If you have Dashboard Developer rights, you can change existing dashboards and other
base applications you create. If you have Customize Privileges rights, you can create new
applications and alternate versions, or layers, for existing applications.
Finding Base and Layer Applications

When you first launch the Application Studio Homepage, you need to find the base layer or custom
layer you want to work on.
1. Go to System Management > Application Studio.
2. The Application Studio Homepage displays. The layers first display in alphabetical order by
Application ID, typically starting with Erp.UI.AbcCodeEntry, Erp.UI.AccountBudgetEntry, and so
on.
337 March, 2023

3. Select on a Column Header to sort the layers by descending or ascending order.
4. Find a specific layer by selecting the Funnel icon.
5. Use the Group By bar to group the layers by a selected column name, such as the Published
column.
6. This example shows the layers are now organized in two groups - layers that are not published
(Published: false) and layers that are published (Published: true).
7. You can also enter values in the Filter fields to limit the records that display. If you enter "d" in
the Type field, you can filter the results to only show layers that are Dashboard types.
338 March, 2023

8. If you select the Funnel button next to the Filter field, you can further define how the
Application Studio Homepage uses this value to filter the layers. Select an option like is equal to,
Contains, Starts with, and so on.
9. You remove the filter value by selecting the Clear Filter button next to the Filter field.
Use these Sort, Group By, and Filter options to find the layers you need to work on.
Upgrading Applications
After you upgrade Kinetic, make sure your layers work with the current version. Use the Application
Studio Homepage to upgrade several layers at the same time.
1. Click on the Select check box on each layer you want to upgrade.
339 March, 2023

2. Select all the layers on the grid by clicking the Select All check box.
The upgrade process makes sure the base application and all its layers upgrade to
the current version. When you select a specific layer, the process automatically
upgrades the base application and all its layers as well. It ignores any layers that
were already upgraded to the current version.
3. When you finish selecting the layers to upgrade, click the Overflow menu and select Upgrade
Selected Layers.
340 March, 2023

4. A Status column appears.
5. If the layer updated, the Upgrade Success status displays in the column.
341 March, 2023

6. If there was a problem, the status shows Upgrade Failed and the Error column indicates there as
a problem.
You can troubleshoot errors by running the application and using either the Debug Tool
or the browser Developer Tools. Review Debugging Applications for details on how to use
these tools.
Publishing Applications
Before other people at your company can use your applications, you must publish them. The
Application Studio Homepage shows which layers are published and which layers are not. Similar to
upgrading applications, you can select multiple unpublished layers and publish them at the same time.
1. When a layer is not published, it shows the Has Draft status. A check appears next to each layer
that is an unpublished draft.
2. When a layer is published, it displays the Published status. A check appears next to each layer
that is published.
342 March, 2023

3. Either select specific layers to publish, or click Select All to select all the layers.
4. Now select the Overflow menu and Publish Selected Layers.
5. A Status column appears that indicates the selected layers are now Published.
You can now add these published layers to the main menu using Menu Maintenance.
Learn more about this application by reviewing Working with Menu Maintenance.
Modifying an Existing Application

Use the Application Studio Homepage to directly launch a selected layer within Application Studio.
343 March, 2023

1. Find the layer using sort, group by, and filter tools described in the previous section.
2. Select the Layer Name hyperlink for the layer.
3. The layer now opens within Application Studio.
4. After you finish changing the layer and exit Application Studio, you return to the Application
Studio Homepage.
Launching the Basic Application Wizard

You launch the Basic Application Wizard from the Application Studio Homepage. This wizard steps you
through creating a single page application, setting up the application's layout, events, and data views.
344 March, 2023

1. Launch the Application Studio Homepage.
2. Select the New icon.
3. The Create new App panel displays. Select Wizard: Erp App Create to create an ERP application
and select OK.
345 March, 2023

346 March, 2023
4. The New Application Wizard panel displays. Go through the steps to create the basic
application.
To learn about each step within this wizard go to Working with the Basic Application
Wizard.
Creating an Application
Create a new application from the Application Studio Homepage. You define the application type,
prefix, and Id. You can then launch this application within Application Studio to design it.
This functionality is available only if you install the Software Developer Kit (SDK) license.
1. Select the New icon.
347 March, 2023

2. The Add New panel slides on.
3. From the Type drop-down list, select what kind of application you want to create, such as Apps,
Configurator, Report, and so on. This way you choose which type, or template, the system will
use to create the new application. You can edit the existing templates or create your own.
All available templates are located in the <...>/Server/Apps/MetaUI/Shared/templates folder. If

you want to edit a default template, go to its folder and adjust the corresponding .jsonc file.
If you want to add a new template:
1. Create a folder with all necessary .jsonc files and add it to the
<...>/Server/Apps/MetaUI/Shared/templates folder.
2. In the ApplicationType .json file, add an entry with the details of your new template.
3. Save the changes.
Now, when you open Application Studio Homepage and select New, you will have it in the list of
the application types.
4. Select the Prefix for your new application. This value defines whether you are creating a Kinetic
application (Erp.UI) that will handle a business task or a Kinetic framework application (Ice.UI)
that will handle a system management task.
5. In the Id field, enter the unique application ID for this new application. You use this value as you
develop the application and add it to the main menu.
6. The system displays the prefix paired with the Id. This is the full name of your application.
7. Select Ok.
348 March, 2023

8. The new application appears in the grid. Select its Layer Name link to launch it within
Application Studio.
The Application Map displays pages and layout based on the application type you
selected.
Creating a Reusable Component

In the Custom Component Editor, you can create reusable snippets of UI to use in multiple custom
applications.
his functionality is available only if you install the Software Developer Kit (SDK) licensed.
To create a reusable component:
1. Go to the Components tab.
2. Select New to add a new reusable component.
3. Enter the component ID in the Id field and select OK. It launches the Custom Component Editor
in Application Studio.
4. Now, build and modify the component as necessary. In this example, from Toolbar, drag and
drop the Panel Card component onto the canvas.
5. Drag and drop the Combo Box and File Select components onto the panel card.
6. Select the panel card and go to Properties. In the Title field, enter TestReusableComponent.
The result will look similar to the following:
349 March, 2023

7. Save and publish the component.
8. Exit the editor. You return to Application Studio Homepage.
9. Go to the Components tab. The component you added appears in the grid. You can edit it
whenever necessary.
Testing the Reusable Component

You can now select the new component in Application Studio. You can use it in any application that you
modify. In this example, we will test it in ABC Code Maintenance.
1. From the main menu, go to Material Management > Inventory Management > General
Operations > ABC Code.
2. Launch Application Studio.
3. In the Layout designer , go to Toolbox > User Defined. There you can see the component
you created.
350 March, 2023

4. Drag and drop it anywhere onto the canvas. The component expands, you can set its properties
as usual.
5. Exit Application Studio.
351 March, 2023

Finding Active Customizations
As you move to the current Kinetic version, you need to find which customizations are in active use
across your organization. Do this by creating a cross company business activity query (BAQ). This BAQ
filters the Ice.Menu table to display customized menu items running in all companies.
Adding the BAQ

1. Launch the Business Activity Query Designer. From the main menu, navigate to Executive
Analysis > Business Activity Management > Setup > Business Activity Query Designer.
2. Select New to add the query.
3. Enter a Query ID and Description, like CustomC and Customization Check.
4. Select the Shared check box. Other users at your company can then view this query.
5. Select the Cross Company check box. This causes the query to pull data from all the companies
within your organization.
6. Select Save.
Designing the Query Phrase

1. Go to the left toolbar.
2. Select the SubQueries icon and the SubQuery:TopLevel link.
352 March, 2023

3. Go to the Tables panel.
4. In the Search field, enter Ice.Menu.
5. Drag the Ice.menu table to the SubQuery Designer.
6. Select the Ice.Menu table and the Table Criteria tab. Create a criterion that filters the query to
display custom menu items. These items have the "-c" prefix in their Arguments values.
7. Select New to add the criterion.
8. Select the following values:
l Field Name -- Arguments
l Operation -- LIKE
l Filter Value -- %-c% constant (select specified constant and enter %-c%)
9. The Table Criteria grid will look like the following:
353 March, 2023

Adding Display Fields
1. Select the Display Fields icon.
2. The Display Fields panel slides on. In the Available Fields grid, select the following fields:
l Company
l Menu ID
l Name
l Program
l Arguments
l OldProgram
3. Select the Right Arrow button.
4. The Display Field(s) grid now has these fields:
354 March, 2023

5. Select the Close button.
6. Select Save.
Testing the Query
1. Select the Preview icon .
2. Make sure the query syntax is okay. Select the Analyze Query icon.
3. Check the message at the bottom of the designer. If the query works correctly, the "Syntax is OK"
message displays.
4. Test the query by selecting the Test Query icon.
5. The Query Results grid displays custom menu items that are active across companies. Each
menu item displays in this grid has a "-c" in its Arguments value.
355 March, 2023

You can now locate custom applications on menus throughout your organization.
356 March, 2023

Working with Dashboards
Dashboards are flexible, powerful tools that provide easy access to critical information in a real-time
environment. In addition to the standard dashboards available in the application, you can also create
custom dashboards that display specific data you need.
Think of a dashboard as your personalized information and command center. Much like your car’s
dashboard gives you current information and controls to run the car, the dashboard displays the
current information and processes you need to more efficiently perform your tasks. The data you
choose to display can be refreshed automatically or manually, so you are able to act on changes as they
immediately occur.
Now you can test, generate, and deploy any dashboard as a Kinetic UX application, and then add it to
the main menu to make it available for other users within your company. And after that, you can modify
your dashboard the way you want it to be using Application Studio.
357 March, 2023

Modifying Kinetic UX Dashboards
Just like any other application, you can modify your dashboards using Application Studio.
Before you can modify a Kinetic UX dashboard, you need to create a classic dashboard or update an
installed dashboard. Generate it as a Kinetic UX application and add it to the main menu using Menu
Maintenance.
Conversion program 180 that automatically runs during system upgrades does not convert
customization layers for dashboards. You need to recreate them using Application Studio.
Generating Dashboard as a Kinetic UX Application

You can create a new dashboard or take a classic system dashboard and generate a Kinetic UX for it.
For this example, we will use the Sales Order Backlog Status system dashboard as a base. You first
copy this dashboard and then convert the copy into a Kinetic UX application.
Before you start creating/converting a dashboard, make sure you have Dashboard
Developer rights enabled on your account in User Account Security Maintenance.
1. From the main menu, go to Executive Analysis > Business Activity Management > General
Operation > Dashboard.
This program is available in a smart client only.
2. If necessary, from the Tools menu, select Developer. This ensures that you are working in the
developer mode as you generate the dashboard.
3. Select Definition ID and search for and select SalesOrderBacklogSts.
4. You see a message that system dashboards cannot be modified. Click OK.
5. Copy the dashboard. Go to File > Copy Dashboard.
6. The Copy Dashboard dialog box displays. Enter a Definition ID, such as SOBacklogKinetic and
click the OK button.
7. If your Classic dashboard has a URL/XSLT view, verify that this view points to a HTTPS site.
Kinetic only supports HTTPS sites. If you generate a dashboard to an HTTP or different site, you
will cause an error and the URL/XSLT view may not display site content in your dashboard.
8. Generate the Kinetic UX version. From the Tools menu, select Deploy Dashboard.
358 March, 2023

9. The Deploy Dashboard window displays. Go to the Application section and select Preview.
10. The dashboard definition builds; the field at the bottom of the window displays its progress. The
dashboard opens as a Kinetic application in a separate window.
11. Test the dashboard to make sure it loads the information you need and displays it in the format
you want.
Dashboard grids converted from ERP Classic to the new UI automatically include
the Full Screen button for displaying additional data.
359 March, 2023

12. Once you are done with testing, exit the dashboard.
You return to the Deploy Dashboard window.
360 March, 2023

13. Select the Generate Application check box.
14. Select Deploy.
This generates the Kinetic dashboard file and uploads it to a folder to the following
directory: Server\Apps\MetaUI. The name of the folder is the name of the
generated Kinetic dashboard application, you can review it in the field at the
bottom of the Deploy Dashboard window. For this dashboard, the name is
Ice.UIDbd.SOBackLogKinetic. Note the name as you will need it in the next task.
Adding Kinetic Dashboards to the Main Menu

After you generate a dashboard as a Kinetic UX application, you are ready to add it as a menu item to
make it available for other users within your company.
1. Log into your Kinetic browser.

361 March, 2023

3. Menu Maintenance displays. Select the menu inside which you will add the dashboard on the
Landing Page, such as MAINMENU.
4. You are adding this dashboard to the Status Dashboards menu folder. In the Nav Tree, select the
Executive Analysis > Status Dashboards folder.
5. Go to the Menu Items grid and select the Add button.

6. In the Menu ID field, enter UD_KDXXX, where XXX are your initials.
7. In the Name field, enter XXX Kinetic SO Backlog Status Dashboard, where XXX are your initials.
This name will display as the name of your Kinetic dashboard in the main menu.
8. From the Module drop-down list, select UD.
362 March, 2023

9. Verify Order Sequence is set to 0 so that this menu item remains the first one in the Status
Dashboards folder.
10. Go to the Program Type drop-down list and verify Kinetic App displays.
11. Go to the Kinetic Application field. Select the Search icon and find
Ice.UIDbd.SOBackLogKinetic.
The URL field fills in with the dashboard's URL:

metafx/#/view/Ice.UIDbd.SOBackLogKinetic.
12. Select Save and restart Kinetic. You can now launch this Kinetic dashboard from the
Executive Analysis > Status Dashboards folder in the main menu.
Launching the Dashboard in Application Studio

Just like any other application, you can modify a Kinetic UX dashboard the way you want to use it
within your business flow. You can launch the dashboard within Application Studio i multiple ways.
1. Go to the Application Studio Homepage.
2. Find the Ice.UIDbd.SOBacklogKinetic dashboard and select the Base link.

3. The dashboard launches within Application Studio.
363 March, 2023

4. You can also launch Application Studio directly from the application. Open the XXX Kinetic SO
Backlog Status Dashboard dashboard (where XXX are your initials) from the main menu.
6. Alternatively on your keyboard, press Ctrl + Alt + D.
The dashboard now displays in Application Studio.
Customizing a Dashboard Layout

Modify the dashboard layout within Application Studio.
Depending on the rights in your user account, you can customize this Kinetic UX
dashboard in a couple ways. If you have Dashboard Developer rights and you generated
364 March, 2023

the Kinetic UX version, you can make changes to the base dashboard application. If you
have Customization rights, you can also create layers for this dashboard to design
different versions of it. Other users cannot make changes to this dashboard.
1. On the Application Map, select the dashboard page and the Edit icon.
2. Go to its Properties.
3. In the Caption field, enter XXX (where XXX are your initials) before Sales Order Backlog Status.
4. The page title switches to XXX Sales Order Backlog Status, where XXX are your initials.
5. Select the Sales Order Backlog Status panel grid card and go to the Properties panel.
365 March, 2023

6. Expand the metafx-panel-card-grid>Basic property group and change the Title field to SO
Backlog Status.
You can preview how the dashboard looks and functions any time in the process.
To do that, select the Preview button. If you have customization rights,

Application Studio may prompt you to create a layer. Enter its Layer Name and
Description and select Save Layer.
366 March, 2023

7. Now expand Data and go to Grid Model > Columns.
8. The properties of the first column (Customer_Name) display. The Columns drop-down contains
all columns defined for the grid.
9. Select the OrderHed_PONum column and press Remove. The SO Backlog Status grid
refreshes without this column. This way you can delete any columns that you do not need in the
grid.
10. Return to the metafx-panel-grid properties.
367 March, 2023

11. Expand the Advanced group; scroll down to the Expand at Runtime check box and select it. This
way the panel card will always expand when you run the application.
12. Open View Options. View options represent the filters available in this dashboard for the SO
Backlog Status grid. When you open the dashboard, the records in the grid filter by Open
Releases by default.
View options are created based on the existing BAQs. You will add a new view
option in the next task.
368 March, 2023

13. Note that the drop-down contains these grid views:
l Open Releases
l Late Releases
l This Week's Releases
l Next Week's Releases
l Completed Releases
14. Select the Open Releases view option and clear the Set Default check box.
369 March, 2023

15. Then, select the Completed Releases view option.
16. Set it as default instead.
17. Select Save. Now when you filter or run the dashboard, the grid's filter changes to
Completed Releases. This way the grid will always use this filter when you open the dashboard.
370 March, 2023

Adding a View Option to a Grid
You can add a simple BAQ-based view option for this dashboard. In this task, use the same BAQ that is
used for the view options in this dashboard.
1. In the Advanced > View Options section, select the Completed Releases view option and copy
its Baq ID. This is the ID of the BAQ you will use as the base for your view option.
371 March, 2023

2. Press to add a new view option. You will add a view option that will filter all records
whose open value is more than 10,000.
372 March, 2023

3. In the Description field, enter Open Value More Than 10,000.
4. In the Baq ID field, paste the value you copied: zSalesOrderBackLog.
373 March, 2023

5. Go to Baq Options.
6. In the Where field, enter the following where clause: Calculated_OpenValue > 10000.00.
Calculated_OpenValue is the ID of the column. This way you create a where clause
that says that if the value of the column for a record is greater than 10,000, then
this record must be included in the results of this filter.
7. Preview the layer.
374 March, 2023

8. From the combo box in the panel card header, select Open Value More Than 10,000.
9. The OpenValue column all shows values greater than 10,000.

10. Exit the Preview.
11. Save your layer.
375 March, 2023

BAQ Reports Overview
Everything is data-driven now. However, data provides value only if users can easily access and report
on it in an automated fashion and in real time. In the Kinetic, you can create your own Business Activity
Queries to pull in a specific set of information from your database and convert them into custom SQL
Server Reporting Services (SSRS) Reports.
You create custom queries through the Business Activity Query Designer program. You then use the
BAQ Report Designer to select this BAQ as the base for a report - and also define the option fields,
filters, and sort by options that will appear on the report interface. The reports you create through this
tool are flat reports; they are restricted to only pull data from the table defined on their selected BAQs.
You can also use one or more of your queries as data sources for more complex reports you create in
the Report Data Definition program. When you set up a report definition based on multiple BAQs, you
can also define standard report criteria and filters as well as the parent-child relationship for the source
BAQs.
376 March, 2023

Modifying the BAQ Report Submission Form
Conversion program 180 that automatically runs during system upgrades does not convert
customization layers for BAQ reports. You need to recreate them using Application Studio.
If you do not have BAQ reports in Kinetic, first you need to create a BAQ report app in BAQ Report
Designer and add it to your menu.
Modifying the BAQ Report Application Layout in Application

Studio
Launch your BAQ report app and use Application Studio to modify its layout.
1. From the main menu, go to the location where you have added you report and run the app. Your
BAQ reports displays as a Kinetic UX application. Note that the Options panel cards is expanded.
2. Press Ctrl + Alt + D to launch Application Studio.
If you don't have an SDK license, by default, the Application Studio opens with a
new layer and all your changes will be applied to it.
3. On the default Application Map view, note that your report has got a single page. Select it and
press Edit. The layout designer opens in a new tab.

Let's imagine you want to move the Filter panel card to the top of the page and expand it on
application load as well.
4. Select the Options panel card and drag it below the Filter card.
The Options card moves under Filter, and Filter is now on top of the page.
5. Select the Filter panel card and open the Properties panel on the right.
6. Expand the Advanced property group and select the Expand at Runtime check box.
7. Save and publish your changes.
8. Exit the Application Studio and review the updated layout:
377 March, 2023

Note that the expanded Filter panel card now displays at the top of the page.
Updating Report Definition

If you need to modify the report definition - for example, add or remove filters or options, or specify
sorting order, you must do it in BAQ Report Designer. When you complete your updates, regenerate the
application by using the Preview Application action again. If necessary, make additional changes in the
layer applied to the report menu.
378 March, 2023

Simple Landing Page Modification
When you launch an application, you are typically presented with the Landing Page. The records are
either sorted alphabetically (Customer Entry) or by date (Sales Order Entry). You can scroll through the
grid to view important details about each record, select a record to view its details or invoke the Search
panel to look for specific records.
In this example, we will enhance the initial application experience by removing a couple of columns,
adding a new column and creating a data rule to highlights specific records.
We will use Order Entry in this example. Assume you don't require the PO and Bill To Customer Name
columns to appear on the Landing Page grid. Also, you would like add a column displaying total order
amount.
1. From the main menu, go to Sales Management >Order Management > General Operation >
Order Entry.
379 March, 2023

2. From the Overflow menu , select Application Studio.
3. Let's define a new layer first. Press <NewLayer>.

4. Enter a Layer Name, such as LandingPageGrid and press Save Layer.
5. On the Application Map, select the Sales Orders Landing Page and press Edit.
380 March, 2023

6. Click anywhere inside the grid and select the Properties tab.
7. Select Data > Grid Model > Columns.
8. From the list, select the PO column and press Delete.
9. Repeat step 8 to remove the BTCustNumName column.
10. Now add a new column displaying total order amount. Press Add Column and enter the
below properties:
l Field - DocOrderAmt
l Title - Order Amount
11. Save the layer.
Data Rules are simple, yet powerful tools to create data-driven behaviors such as changing a color,
disabling a field, or setting its default value. We will create a data rule to highlight all open orders on
the Landing Page grid, so they are easily identified.
1. From the Sidebar, select Data Rules and press Add New .
2. In the Header section, enter or select the following:
l Name - LandingPage
l Description - Highlight Open Orders
381 March, 2023

l Action Data View - LandingPage
l Row Rules Criteria - Conditions
3. Press Select Condition > Condition and specify the following:
l Data View - LandingPage
l Field - OpenOrder
l Operator - Equal
l Value/Field - Value
l Value - True
4. Now create an Action. Press Select Action > Setting Style and specify the below parameters:
l Actions - SettingStyle.RowStatus
l Status - Highlight
5. Save the layer. Verify the data rule looks as follows:
6. Preview the layer.

The PO and Bill To Customer Name columns no longer display on the grid. Instead, the Order
Amount column showing total amount of each order is now part of the grid. The data rule we
created highlights all open orders in the grid.
382 March, 2023

At this stage, you are ready to publish this layout and make it available to all users. For more
information, see Adding a Layer to the Menu.
383 March, 2023

Using Quick Filters
In this scenario, we will make changes to the Job Entry Landing Page. By default, the application
enables switching between All, Firm and Unfirm job views. To narrow down search results, users can
launch the Search panel and filter jobs by Type, Status, Project ID and so on.
We will modify the Landing Page experience in a way that users can directly switch between Job Types
(Manufacturing, Project and Service) and Job Statuses (Firm, Engineered, Released, Completed and
Closed). The grid results will automatically respond to the selected criteria.
You can implement this concept in other Kinetic applications as needed. For example,
filter sales orders by Order Type, Sold to Customer and so on.
Add Job Status Check Boxes

We will start by adding check boxes to filter jobs by their status.
1. From the main menu, go to Production Management >Job Management > General Operation
> Job Entry.
384 March, 2023

2. From the Overflow menu , select Application Studio.
3. Let's define a new layer first. Press <NewLayer>.

4. Enter a Layer Name, such as LandingPageFilter and press Save Layer.
5. On the Application Map, select the Jobs Landing Page and press Edit.
385 March, 2023

The Jobs page layout displays.
6. In the Toolbox, search for the Check Box and place it to the right of the Job Num search box.
7. Select the check box and go to Properties. We will add basic identifiers for the check box and
bind it to a TransView column.
TransView is an EpDataView you can use to append columns on the fly as needed,
to store variables which can be used in row rules, accessed in event conditions or
passed as rest call parameters.
Add the below information:
l Id - chb_Firm
l Label Text - Firm
l EpBinding - TransView.Firm
386 March, 2023

8. Repeat steps 6 - 7 to add additional status check boxes.
Id Label Text EpBinding
chb_Engineered Engineered TransView.Engineered
chb_Released Released TransView.Released
chb_Completed Completed TransView.Completed
chb_Closed Closed TransView.Closed
387 March, 2023

Your layout should look as follows:
9. Save the layer.
Add View Options

In this step, we will create four different representations of the data returned by the service call. Users
will be able to quickly switch between them using a combo box selector in the grid header. A status of
each check box will be included in service call input parameters.
1. First, let's take a look how the landing page gets populated with data. Click anywhere in the grid
and select Properties.
2. Select Data > Grid Model > Provider Model.
The application makes a REST (Representational State Transfer) call to the Erp.BO.JobEntrySvc
(Svc), calls the GetList method (SvcPath) and provides input parameters (RestParams). We will
make a call to this service in the views we create.
388 March, 2023

3. Select metafx-panel-card-grid, scroll down and expand the Advanced category.
4. Press View Options and remove all existing views.
389 March, 2023

5. We will first create a view that displays all jobs regardless of their type. Press and enter the
below:
l Ep Binding - LandingPage
l Description - All
l Svc - Erp.BO.JobEntrySvc
l SvcPath - GetList
6. Now we will add REST call parameters. In the Rest Params property, press Edit to invoke JSON
Editor and enter the below clause:
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobReleased = ??
{TransView.Released} and JobEngineered=??{TransView.Engineered} and JobFirm=??
{TransView.Firm} and JobComplete=??{TransView.Completed} and JobClosed=??
{TransView.Closed} BY JobNum DESC"
}
Notice we are passing EpBinding values of our newly created check boxes to call parameters, e.g.
JobReleased = ??{TransView.Released}.
The JSON Editor entry should look as follows:
Note on the where clause syntax:
390 March, 2023

The where clause functionality in query-based grids supports SQL comparison
operators, like =, <, or >, and BAQ constants, like Today, Tomorrow, or
CurrentCompany, etc. Advanced SQL functions are not supported.
A single question mark prefixing the field value means that a REST request will go
through only if the value is NOT empty or null. For example, OrderNum = ?
{OrderHed.OrderNum}.
A double question mark prefixing the field value means that a REST will go through
even if the value is empty or null. For example, CustNum = ??
{Customer.CustNum}.
Values of string data type (including constants) are put in single quote marks. For
example, CustID = '??{Customer.CustID}' or ReqDate > '??{Constant.Yesterday}'.
7. Lets' make the All view default, scroll to the bottom and enable the Set Default check box.
8. Press to create a view displaying Manufacturing jobs by including JobType='MFG' in the rest
call parameters.
l Description - Manfucturing
l SvcPath - GetList
l Rest Params -
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobType='MFG' and
JobReleased = ??{TransView.Released} and JobEngineered=??{TransView.Engineered}
and JobFirm=??{TransView.Firm} and JobComplete=??{TransView.Completed} and
JobClosed=??{TransView.Closed} BY JobNum DESC"
}
9. Press to create a view displaying Project jobs:

l Description - Project
391 March, 2023

l SvcPath - GetList
l Rest Params -
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobType='PRJ' and
}
10. Lastly, press to create a view displaying Service jobs:

l Description - Service
l SvcPath - GetList
l Rest Params -
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobType='SRV' and
}
11. Save your layout.
392 March, 2023

12. Verify the newly created views display on the list.
Do not preview the layer at this stage and proceed to the following task to define the
expected application logic.
Create Data Rules

Lastly, we'll create several data rules to control logic of job status check boxes. For example, we want to
disable selecting closed jobs that were not completed.
1. We will first create a rule to display active jobs by default. We do this by setting Firm, Engineered
and Released check boxes to true and making Completed and Closed check boxes clear. From
the Sidebar, select Data Rules and press Add New .
2. In the Header section, enter or select the following:
l Name - LP_InitFilters
l Description - Initial Filters
393 March, 2023

l Action Data View - TransView
l Row Rule Criteria - No Condition
3. Create an Action. From the Select Action menu, choose Set Value and enter the below:
l Actions - SetColumnValue
l Field - Firm
l Value/Field - Value
l Value - True
4. Repeat step 3 to set default statutes of the remaining check boxes.
Actions Field Value/Field Value
SetColumnValue Engineered Value True
SetColumnValue Released Value True
SetColumnValue Completed Value False
SetColumnValue Closed Value False
5. Additionally, we'll disable the Closed check box. In the next step, we will create another rule to
allow selecting this check box only when certain condition is met. From the Select Action menu,
select Disable and enter the below:
l Actions - DisableColumns
l Column - Closed
6. Save the layout. Your rule should look as follows:
394 March, 2023

7. Now, create a rule to disable selecting Closed jobs, unless there were Completed.
8. Now create a rule to disable selecting Released jobs, unless they are Firm or Engineered. Be sure
to select OR operator between the conditions.
395 March, 2023

9. Lastly, create a rule to disable displaying Completed and Closed jobs, unless their status is Firm,
or either Engineered/Released (group condition).
10. Save the layout.
Test the Results

1. Select Preview.
2. By default, the All view by displays, and you can select different views from the drop-down list.
3. Notice you are presented with active jobs by default. Select different views and job statuses and
observe how results change.
396 March, 2023

At this stage, you are ready to publish this layout and make it available to all users. For more
information, see Adding a Layer to the Menu.
397 March, 2023

Skip Landing Page
When you launch an application, you are first presented with the Landing page which populates the
grid with records, such sales orders, quotes or parts.
In some cases, you may want to you may want to modify this user experience. For example, when your
company maintains thousands of part records, you may want to skip the Landing page. Instead, you
want to present users directly with the Details tab, where they can create or select an existing part they
need to work with.
In this example, we will use Part.
1. From the main menu, go to Production Management > Job Management > Setup > Part.
398 March, 2023

3. We will start by creating a new layer. Press <NewLayer>.
4. Enter a Layer Name, such as SkipLanding and press Save Layer.
5. On the Application Map, select the Part Maintenance Landing Page and press Edit.
The Part Maintenance page layout displays.
6. Click anywhere inside the grid and select Properties.

7. We will first create a new empty grid view which does not perform any REST call. Expand the
Advanced property group and locate the View Options node.
8. Expand View Options and press to add a new grid view:

l Description - Empty
l Client Filter - 1=0
399 March, 2023

Using the clause "1=0" ensures no data is sent back to minimize the response
payload.
9. We want this view to automatically load on application start. Select the Set Default option at the
bottom.
10. Now that we created a new view option for the grid, we need to modify the existing one. From
the View Options drop-down, select All.
11. Scroll to the bottom and clear the Set Default option.
12. We will now create an event to open the Main page (shown in step 5). It will run right after the
system Form_OnLoad event. From the sidebar menu, open Events and press to add a
400 March, 2023

new event and configure it like this:
l Rename the event to NavigateToMain.
l Select the No Trigger widget on the design canvas and edit its properties:
o For Type, select Event.
o For Hook, select After.
o In the Target field, choose Form_OnLoad. This event will run immediately after the
system Form_Onload event.
l From Toolbox, select the page-navigate-to action and add it to the workflow.
l Select the action widget to open its Properties. Press Parameters and in the Page
parameter, enter Main.
13. Save the layer and from the Overflow menu, press Publish. Exit Application Studio and Part.
14. Now we need to deploy the layer to other users in the company. In the smart client, go to System
Setup > Security Maintenance > Menu Maintenance.
Note the following about deploying Kinetic customizations:
l Kinetic customizations can be attached to Kinetic application menus only.

l For new Kinetic customers, Kinetic forms (menus) are enabled by default.
l For on-premise customers upgraded/migrated from previous releases of ERP
to Kinetic, usage of Kinetic forms is optional.
401 March, 2023

If you were to apply Kinetic customization to an existing menu which is not
Kinetic App type, you need to create a new menu instead.
15. In the tree view, expand Production Management >Job Management > Setup and select Part.
16. Press Customization. Select the layer you created earlier and move it to the Selected
customizations column by using the Right Arrow button.
17. Save the record and exit Menu Maintenance.
402 March, 2023

18. We are now ready to test the behavior. Launch Part, observe the Landing Page is skipped and you
are taken to the Details tab.
403 March, 2023

Working with the Basic Application Wizard in App
Studio
Run the Basic Application Wizard to step through creating a single page application. The wizard guides
you through setting up the application's layout, events, and data views. You can create a page that
displays a parent data view and a child data view. The child data view limits what it displays based on
the record that you select in the parent data view.
This wizard only supports pulling data from a BAQ into data views for display in your basic
application. If you want to pull data from Rest BO Calls, customize your basic application
in Application Studio.
During run time, this single page application can show you specific information you need. It can also
become the base application that you develop further by customizing its layers within Application
Studio.
Using this wizard, you can create multiple panel cards, grid views, and tracker views. The data views
within the application can have publish and subscribe relationships. You can also decide on the number
of columns that appear on the grids and the components that display on the panel cards.
During this example, you create an application that displays supplier and purchase point information.
You first create a parent data view that displays each supplier. You then create a child data view that
displays the purchase points linked to a selected supplier. You will also filter what suppliers appear in
the application based on whether they are active or inactive.
Creating the Parent Data View

1. Launch the Application Studio Homepage.
2. Select New to create a new App.
404 March, 2023

3. The Create new App panel slides on. Select Wizard: Erp App Create to create an ERP
application and select OK.
405 March, 2023

406 March, 2023
4. The New Application Wizard panel slides on and the Application details step appears first.
Enter a Name for your new application, such as SupplierReview.
407 March, 2023

5. Select the Next button.
6. The Data source details step displays. Select the BAQ (Business Activity Query) drop-down list
and the parent BAQ for your application, such as zSupplierTracker01.
408 March, 2023

7. If the Allow Update check box is selected, users can enter data through this BAQ. Accept this
default value if you want users to enter data in this application. If you clear (deselect) this check
box, users can only view the data (read only) that displays in this application.
8. Enter a Data View Name that identifies this data view in your application, such as Supplier.
9. Add a Filter for this BAQ so it only shows supplier records for a specific company. Select New
to add this filter.
10. The application will pull all of its records from the EPIC06 company. Select the Field Name drop-
down list and the Vendor_Company column.
11. The Filter Type drop-down list has two options, Specified Constant and Specified Dataview
Value. When you later create the child data view, you will select the Specified Dataview Value
option. For the parent data view, select the Specified Constant option.
12. Use the default Operator equals (=) value.
13. Enter the Filter Value that limits the data results to only display suppliers from a specific
company. You enter EPIC06.
You can add multiple filters to the data source. The application adds these multiple
filters to the static data source filter using the AND Class operator. The application
then pulls data using this combined filter statement.
14. Click the Next button.
Adding the Parent Grid

Now decide whether to show the data in a grid.
1. The Grid details step displays. The Data View Name shows the name you entered for the data
view in the previous wizard step.
409 March, 2023

2. The wizard selects the Add a Grid View check box by default to place a grid on your parent view.
Clear this check box to prevent the wizard from adding a grid.
If you add a grid and later decide that you do not want it, return to this wizard step
and clear the Add a Grid View check box.
3. All columns available in the data view appear by default in the Columns grid.
l Select the check boxes in the Visible column to select all the columns you want to display
on the grid. Hide a column by clearing its Visible check box.
l If you want to enter data in any of these columns, select its Updatable check box.
4. Enter the View options you will use to filter the data results. You want to see either the Active or
Inactive suppliers in this application. Select the Add (+) button.
410 March, 2023

5. Enter the Description that displays on the View drop-down list, such as Active.
6. Go to the Filters grid and select New to add a filter expression.
7. Select the Field Name drop-down list. Since you want this view to only display active suppliers,
select the Vendor_Inactive field.
8. The Inactive check box contains a Boolean (True/False) value. Go to the Filter Type drop-down
list and select the Specified Constant value.
9. Use the default Operator equals (=) option.
10. Enter a Filter Value of False. When users select this view, only active suppliers will display in the
parent grid.
411 March, 2023

11. Now add the Inactive view. Select the Add (+) button again.
12. Enter the Description for this view, such as Inactive.
13. Go to the Filters grid and select New to add a filter expression.
14. You enter a similar expression, but for this view you want to display inactive suppliers:
l Field Name - Vendor_Inactive
l Filter Type - Specified Constant
l Operator - = (Equals)
l Filter Value - True
15. Select Next to move on to the next wizard step.
Adding the Parent Form Card

You next decide whether you want to include a Form Card on the application. This card displays records
from the data view through a series of fields.
1. The wizard selects the Add a Form Card check box by default to place a card that displays
parent view data in a field layout. Clear this check box to prevent the wizard from adding a form
card.
412 March, 2023

If you add a form card and later decide that you do not want it, return to this wizard
step and clear the Add a Form Card check box.
413 March, 2023

2. The Title appears by default, such as Supplier.
414 March, 2023

3. The Fields grid shows you the fields from the data view available for display.
l If you want to display a field on the form card, select its Add Component check box.
l If you want to enter data in any of these fields, select its Updatable check box.
l If you want to display and enter data in all the available fields, then select their respective
Select All check boxes.
Creating the Child Data View

You added a Supplier parent view to the application. Now add a child view that displays the purchase
points for each selected supplier.
1. The Application summary step displays. Review the navigation tree (Nav Tree) structure for your
application in the Summary field. Expand and collapse each level in the Nav Tree.
415 March, 2023

2. Also, in the Summary view, a hyperlink is available for the Grid and Form card. On clicking the
hyperlink, you will be able to navigate to the respective sections of the app and update any of the
sections.
3. Next create the child view. Select the Add Data View link.
4. You return to the Data source details step. Select the BAQ drop-down list and find the BAQ that
contains the child data, such as zSupplierPP.
416 March, 2023

5. Enter the Data View Name you will use to identify this data source throughout the application,
such as Purchase Points.
417 March, 2023

6. When you added the parent data view, you filtered its results for a specific company. Now that
you have a parent view, link this child data view to a selected supplier on the parent data view.
Select the Filter Type drop-down list and the Specified Dataview Value option.
7. Go to the Parent View drop-down list and select the Supplier data view.
8. Indicate the child data view only displays purchase points for a selected supplier. Go to the Field
Value drop-down list and select the Vendor_VendorID option.
Adding the Child Grid

Now add a grid that will display the purchase points for a selected supplier.
1. The wizard selects the Add a Grid View check box by default to place a grid on your child view.
Clear this check box to prevent the wizard from adding a grid.
418 March, 2023

2. Enter a Title for the child grid, like Purchase Points.
3. Select the check boxes in the Visible column to select all the columns you want to display on the
child grid. Hide a column by clearing its Visible check box. If you want to enter data in any of
419 March, 2023

these columns, select its Updatable check box.
Adding the Child Form Card

Add a child form card that will display selected fields from the child data view.
1. The wizard selects the Add a Form Card check box by default to place a card that displays child
view data in a field layout. Clear this check box to prevent the wizard from adding a form card.
420 March, 2023

2. Enter a Title that displays over the card in the application, such as Purchase Points.
3. The Fields grid shows you the fields from the data view available for display.
421 March, 2023

l If you want to display a field on the child form card, select its Add Component check box.
l If you want to enter data in any of these fields, select its Updatable check box.
l If you want to display and enter data in all the available fields, then select their respective
Select All check boxes.
Reviewing the Application Summary

You have created the basic application. Review its structure before you finish it.
1. The Application summary step displays. Go to the Summary field. Expand or collapse each node
on the navigation tree (Nav Tree) to review each data view and its grid and form nodes. You can
click on each data view to move back to that part of the application and make changes.
If you go to a data view and make changes, be sure to click Next to save these
changes to your application.
422 March, 2023

If a dependent data view is affected by changes, you can navigate to it from the
Summary view. You can then update the dependent data to work as expected.
423 March, 2023

2. The left column contains the App and Data stepper which shows each wizard step. This stepper
displays your information. You can also navigate to the selected data view using the stepper.
424 March, 2023

3. Go backwards through the steps by clicking the Previous button or by selecting a specific data
view from the stepper.
When you first launch the wizard, the stepper is read only, as you have not built the
application yet. After you have finished some steps, go backwards through them
either by clicking the Previous button or the stepper.
4. If you do not want to save your application, click the Cancel or Close button at any time to exit
the wizard.
5. When you are ready to compile the application, click the Finish button.
425 March, 2023

Reviewing the Validation Process
On clicking Finish, the Custom Validation runs to validate the data. If it detects an error it displays in
the stepper. You can go to the step where the error has occurred and fix it. Once you fix the error, the
step updates the validation status.
You will also see validation messages about the error, where it occurred and what needs to be
corrected.
Examples of Validation Messages
Invalid Parent Child Relationship

When you change the parent BAQ or the data view for your application, the child data view is affected
and the error occurs.
426 March, 2023

1. In this example, zSupplierTracker01 is the parent BAQ and Supplier is its data view.
2. Select a different BAQ.
427 March, 2023

3. The stepper displays an error.
428 March, 2023

4. When you select the Next and Finish, the Application summary step displays and you will see the
validation message that says Parent Child relationship is invalid for the PurchasePoints Data
view.
429 March, 2023

5. To fix this error, go to the PurchasePoints data view, delete the existing filter, select Next and
Finish.
In case you go to PurchasePoints data view and did not delete the filter, you will get another
validation message that says data view filter mappings are invalid which is explained in the
following section.
430 March, 2023

Invalid Data View Filter Mappings
This error occurs when you have gone to the PurchasePoints data view and have not deleted the
filter.
To fix this error, delete this filter and select Next.
431 March, 2023

When you select Finish, the Application summary step displays and you get another validation
message that says Views option filter in the child grid is invalid.
432 March, 2023

The following section explains when this error occurs and how to fix it.
433 March, 2023

Invalid Grid View Option Filter
This error occurs when you have not updated the filter in the grid Views option of the
PurchasePoints data view.
434 March, 2023

435 March, 2023
To fix this error, delete the existing filter and select Next, or add a new filter based on the
Supplier data view and select Next.
6. Select Finish.
436 March, 2023

Your basic application automatically launches within Application Studio.
437 March, 2023

Making Changes in Application Studio
You now use Application Studio to refine how the basic application displays and runs.
1. Your basic application automatically launches within Application Studio. Its Application ID
displays in the right column, such as Ice.UIDbd.SupplierReivew.
The applications you create with the Basic Application Wizard use the
Ice.UIDbd prefix for their Application ID values. You can filter on this prefix in
the Application Studio Homepage to find these custom applications.
2. Review the layout for the application. Select its SupplierReview node.
3. Now that you are in Application Studio, make the changes you need to the basic
application.
438 March, 2023

4. Test how this application works during run time. Select the Preview button.
You application displays in a separate tab on your browser.
5. Select a supplier on the Supplier parent grid.
439 March, 2023

The Purchase Points child grid updates to only display the purchase points linked to the
selected supplier.
6. Scroll down to review the form cards. The Supplier form card displays parent information
for the selected supplier.
440 March, 2023

The Purchase Points form card displays information for the selected purchase point.
You can select the Refresh All option from the overflow menu of the basic application to
refresh the grids and form cards all at once.
441 March, 2023

Continue to make changes to the basic application within Application Studio. Create layers
to develop other versions you can review and test.
442 March, 2023

Introduction to User-Defined (UD) Forms
Kinetic delivers 40 standalone (single-table) and 11 parent/child (parent-child table) User-Defined (UD)
tables. These empty tables (UD01-UD40, UD100-UD110) are available in the database; you can either
add these tables as grids to existing programs or add them to the Menu to create a custom entry
program so users can enter and store data unique to your organization and/or industry. You can use
these tables to create your own entry programs of the Kinetic App type and display this user-defined
data in applications.
To create a custom Kinetic UX application off a system UD table, you first use Menu Maintenance to add
this UD table directly to the Menu and then configure it in the Application Studio.
Each UD table (including the Child table in UD100-110) has five primary keys. The other keys contained
within the user-defined table can be used to enter additional primary data. However if you do not need
them, you may hide these keys from view. You can also add other controls to the UD application UI.
Prent/Child tables all have the same basic functionality as the Standalone tables, but they contain
additional functionality you use to create parent/child data relationships.
Using file names UD100 to UD110, these user-defined tables are made up of two tables – a Parent table
and a Child table. UD100, for example, has the parent UD100 table and a child table, UD100A. The
UD100A table holds the child data to its parent table. Each parent and child table has five main keys for
the data you want users to enter; however, you can add other elements as you need.
Do not confuse creation of user-defined fields with UD tables delivered directly with the
system. User-defined fields are additional columns you add to an existing table via the
User Defined Column Maintenance program. When you search for these custom columns,
their names include the "_c" suffix. For an example of creating and using extended user-
defined fields, please review the Part Advisor Modification Walkthrough.
443 March, 2023

Scenario Overview
You will create a user-defined program by modifying one of the existing UD Entry forms shipped
withKinetic. You will use the UD05 table to store a list of service agreements that will be applied to
sales order records in the OrderHed table.
The scenario will cover:
l Creating a menu for a UD Entry program

l Configuring application layout (UD Entry and Sales Order Entry)
l Deploying layers for UD Entry and Sales Order Entry
l Adding a user-defined field to the database and defining its external properties
l Applying user-defiend data to other system records
To complete this walkthrough, you need to make sure you have all the required
permissions and rights set up for your user account:
l Access to theKineticApplication server where you will use the functionality of

theMissing variable referenceApplication server where you will use the functionality
of theAdministration Console or the Data Model Generator tool to regenerate the
data model with new UD fields
l Customize Privileges enabled for the user account
444 March, 2023

Adding Menu Item for the UD05 Entry
Menu items for the provided UD tables do not show up in the Kinetic menu by default. In this step,
create a menu for the UD05 Entry program so that you can open it and edit in Application Studio.
1. Open Menu Maintenance

Menu Path: System Setup > Security Maintenance > Menu Maintenance.
2. Select the top level menu you want to add the custom program or menu under. In this scenario,
select Main Menu.
3. In the Tree View, navigate to Main Menu > Sales Management > Order Management > Setup.
4. In the Menu Items card, select New to add the program.
5. For the Menu ID, type in UD05XXX where XXX are your initials.
6. For the Name, type in XXX Service Agreement Maintenance where XXX are your initials.
7. Specify Order Sequence to make sure your new menu item is somewhere at the top of the list.
8. For the Program Type, select Kinetic App.
9. Then in the Kinetic Application field, enter or search for Ice.UI.UD05Entry.
445 March, 2023

This selector displays the list of all Kinetic UIs available to users including the 51
system UD Entry programs.
10. Save the changes and close Menu Maintenance.

11. Close and re-launch Kinetic.
This will reload the menus and make the UD05 Entry form available.
Move on to the next step - Modifying Service Agreement Maintenance.
446 March, 2023

Modifying Service Agreement Maintenance
1. Launch XXX Service Agreement Maintenance.
Menu Path: Sales Management > Order Management > Setup.
Here's the default view of the UD05 Entry:
2. From the Overflow menu in the top right corner of the screen, select Application Studio.
Application Studio launches; the Application Map tab displays.
3. On the map, select the Details page; on its Properties panel, remove the Key1 text from the Page
Caption property so it reads as {UD05.Key1}.
447 March, 2023

4. Then click Edit .
5. Select the (Do not remove) Key1 text box; on the Properties panel, expand the Basic property
group and change Label Text to Service Code.
6. From the Toolbox > Components, select the Numeric Box component and drag it onto the
panel card that contains the default controls - Key1 (Service Code) and Character01
(Description).
7. Select the new component and edit its properties as follows:
a. For Basic > Label Text, type in Coverage Limit.

b. For Data > EpBinding, enter UD05.Number01.
8. Add another Numeric Box component to the layout.
9. Select the newly added component and edit its properties like this:
a. For Label Text, type in Effective Months.

b. For EpBinding, enter UD05.Number02.
10. Save the layer as SA Maint XXX where XXX are your initials. For Description, enter Service
Agreement Maintenance XXX where XXX are also your initials.
448 March, 2023

Now make a few more cosmetic changes to the UI.
11. Go to the Application Map tab and select the UD05 Entry node.
12. On the Details pane, change the Caption to Service Agreement Entry.
13. Now, select the UD05 Maintenance node and change its caption to Service Agreement
Maintenance. Then click Edit .
The Landing Page layout opens for editing.
14. Select the UD Codes; then in its Properties, change the Basic > Title to Service Agreements.
15. Change the Key1 search box Label Text to Code.
16. On the Properties panel, expand the Data property group and go to Grid Model > Columns.
The Key1 column properties display.
17. Select the Key2 column and press to remove it.

18. Remove all columns except Key1 and Character01.
449 March, 2023

19. Use to add two more columns - Number01 and Number02. In their Field property, type
in Number01 and Number02 respectively to bind them to these table columns.
20. Define the Title property for these four columns per table below:
Column Title
Key1 Service Code
Character01 Description
Number01 Coverage Limit
Number02 Effective Months
21. Save and publish the layer.

22. Exit Application Studio and close Service Agreement Maintenance.
Move on to the next step - Deploying SA Maint XXX Layer.
450 March, 2023

Deploying SA Maint XXX Layer
To make your changes available to users, you must apply your layer to the application. You do this in
Menu Maintenance.
1. Launch Menu Maintenance and open the XXX Service Agreement Maintenance menu where
XXX are your initials.
Menu Path: Sales Management > Order Management > Setup > XXX Service Agreement
Maintenance.
The Kinetic Customization panel slides on.
3. Select the Select check box beside your layer from the list of available customizations.
4. Select Apply.
5. Save the menu and exit Menu Maintenance.

6. Restart Kinetic.
Move on to the next step - Adding UD Field to OrderHed Table.
451 March, 2023

Adding UD Field to OrderHed Table
In this step, let's add a user-defined (UD) field to the OrderHed table. This column will store the Service
Agreement code and will be linked to the Key1 field of the UD05 table in the next step.
1. Launch User Defined Column Maintenance.
Menu Path: System Setup > System Maintenance > UD Column Maintenance.
2. Select the Add button.

3. The Search panel slides out.
4. Enter OrderHed in the Starting At field and select Search.
5. Select the OrderHed table and select OK.
The new OrderHed_UD table is created. The Table not in database shape displays on table details.
452 March, 2023

6. Select Save.
7. Expand the Columns card, and select Add to add new column.
The Column Detail card displays for editing.
8. Add a new column with the following properties:
453 March, 2023

l Column Name - ServiceCode.
When you tab out of this field, a _c postfix is automatically added to the
column name, so the full field name you will use in EpiBinding is
ServiceCode_c.
l Data type - String.

l Format - x(20).
9. Save the table and keep User Defined Column Maintenance open.
Move on to the next step - Regenerating Data Model.
454 March, 2023

Regenerating Data Model
In this step, add your new column to the Data Model so that it becomes available for Order Entry
configuration.
You should regenerate the data model as soon as possible after you add a new user-
defined column. Users should also log out of the Kinetic system as the data model
regenerates. While the system will usually work as expected, some processes may
generate errors when the user-defined metadata does not match the data model.
In this example, regenerate the model from the Administration Console.
For the detailed description of this process, please refer to the help documentation within
the Epicor Administration Console.
1. On the Kinetic application server, launch Administration Console.

2. In the navigation panel on the left, expand the Database Server Management and drill down to
your database node - for example, Kinetic.
3. On the Actions panel on the right, select Regenerate Data Model.
The Generate Data Model dialog pops up.
4. Specify the credentials for database connection and press Generate.
455 March, 2023

Data Model generation may take a while.
5. Once it has been successfully completed, in the navigation, select your Kinetic instance and click
Recycle IIS Application Pool on the right-hand Actions panel.
6. After the application pool has been successfully recycled, back on User Defined Column
Maintenance, click Refresh.
The OrderHed_UD table details now display two green shapes - Table in Sync and Data Model
in sync.
456 March, 2023

Move on to the next step - Defining Extended Properties for the UD Field.
457 March, 2023

Defining Extended Properties for the UD Field
In this step, we will link the Key1 field of the UD05 table to the ServiceCode_c UD field of the
OrderHed table.
1. From the main menu, navigate to System Setup > System Maintenance > Extended
Properties.
2. Locate the OrderHed_UD table that contains the column you wish to modify by using the Data
Table ID search window above the landing page grid or grid filters.
If you know exactly what table you are looking for, in the grid header, you can
select the System Code, type in the Data Table ID, and press Tab on your
keyboard to go straight to the record.
3. On the Field List card, select the ServiceCode_c column you wish to modify.
4. In the Like Table field, select the UD05 table.

5. From the Like Field field, select Key1.
6. Save the changes and exit Extended Properties Maintenance.
458 March, 2023

Move on to the next step - Adding Service Agreement Records to Database.
459 March, 2023

Adding Service Agreement Records to Database
In this step, let us use the modified UD05 Entry to add several Service Agreement code records:
Service Code Description Coverage Limit Effective Months
SHAKERS Covers things that shake 1500 12

ROCKERS Covers things that rock 3500 24
MOVERS Covers things that move 2200 6
STOPPERS Covers things that stop 1800 9
1. Open Service Agreement Maintenance.

Note the changes in the UI after you applied the SA Maint layer:
2. Press to add a new record.
3. Enter the data for the first agreement code and save it.
460 March, 2023

4. Add the three other records and see that now they all display in the Landing Page grid:
Move on to the next step - Adding a Combo Box with Service Codes to Order Entry.
461 March, 2023

Adding a Combo Box with Service Codes to Order
Entry
In this step, add a new field to Order Entry and bind it to the OrderHed.ServiceCode_c. This will allow
selecting a service agreement code for a sales order record.
1. Launch Order Entry .

Menu Path: Sales Management > Order Management > General Operations > Order Entry.
2. From the Overflow menu in the top right corner of the form, select Application Studio.
Application Studio launches displaying Application Map.
3. Now, on the Application Map, select the Details page and press Edit.
462 March, 2023

4. From the Toolbox > Components, select Combo Box and drag it to the Order Detail panel.
463 March, 2023

5. On the layout, select ComboBox-1 and edit its properties:
l In the Basic > Label Text field, type in Service Code.
l In the Data > EpBinding field, select OrderHed.ServiceCode_c.
6. Expand the Reusable Combo property group and configure the combo like this:
Property Value Explanation
ComboId ServiceCodes Unique identifier for the control
Svc Ice.BO.UD05Svc The Kinetic service you call to retrieve rows from the UD05
table
SvcPath GetRows Service Method
Table UD05 The database table that contains user-defined Service Code
Name records
464 March, 2023

7. Expand the Advanced field, select DropDown and set up the following properties:
Property Value Explanation
Drop Down DropDown Will display as a standard combo box

Style
Text Field Key1 Specifies the field of the UD05 table that will display in the drop-
down control
Value Field Key1 Defines the column key this drop-down list uses to locate the
specific record from a database table
8. Press Preview .
9. Open any order. Note that the Service Code combo box contains the four records from the UD05
table available for selection:
10. Save the layer.

For the Layer Name and Description, enter Service Codes XXX where XXX are your initials.
465 March, 2023

11. Publish the layer.
12. Exit the Application Studio and Order Entry.
Move on to the next step - Deploying Layer and Testing Configuration.
466 March, 2023

Deploying Layer and Testing Configuration
In this step, again use Menu Maintenance to apply your layer to the Order Entry menu. Test the
modified UI and functionality.
If you still need to keep the base Order Entry application on the menu, you can create a
separate menu item for the modified Order Entry application - for example, Order Entry -
Service Codes.

3. In the tree view, expand Sales Management > Order Management > General Operations and
select Order Entry.
The Kinetic Customization slides on. In the Available customizations column, you can select
which layers you want to apply to this application. Note you can see only the layers that have a
description.
467 March, 2023

5. Select the Select check box beside your layer from the list of available customizations.
6. Select Apply.
7. Save the menu and exit Menu Maintenance.
8. Restart Kinetic.
9. Launch Order Entry and enter a new record to test the changes:
468 March, 2023

Congratulations! You have successfully completed this exercise.
469 March, 2023

Calling Functions from Kinetic Apps
Functions can call into the application server logic or database tables just as you can with BPM
directives. You can then validate, manipulate, or execute actions based on the data passed through the
Function with parameters as you define.
Functions give you the ability to define exactly the service, method and parameters you wish to expose
dynamically. It also allows you to define exactly which parts of Kinetic you wish to interact with -
services, assemblies, or database tables.
Functions are created within a library. Library is Functions' single unit of deployment.
Because Functions are server-side modifications, you can reuse a Function across any client as well as
from BPM directives. They are also exposed in the Kinetic REST API v.2. Kinetic applications interact
with the server using REST calls to the API v.2 endpoints. In Application Studio, you can create events
that execute these calls to perform the requested custom server logic. Use the Making Counter Sales
Easier walkthrough to learn about this process in more detail.
470 March, 2023

Walkthrough: Making Counter Sales Easier
Introduction
In this example, let's create an application exclusively designated for entering counter sales orders. It
will be based on the standard Sales Order Entry app with a layer applied to it. We will call it Counter
Sale.
The Counter Sale application will be a separate menu item. It will have a simpler order header and the
ability to create a customer on the fly, from the new order itself. For that, we will add a New Customer
button that will bring up a sliding panel for entering the new customer details. When this form is
submitted, the system will create a new customer record using a Function (custom server logic).
Additionally, all new orders initiated from the Counter Sale application will be automatically marked as
"counter sale". We will use a BPM directive for that.
Learning Objectives
During this exercise, you will:
l Understand how to call a Function from an application

l Learn how to add a Function library and design a Widget Function (no code)
l Learn how to create temporary bindings in the UI layer
l Learn how to specify input parameters for the called Function
l Learn how to handle simple output parameters returned by a Function
l Recap on how to create in-app sliding panels, define custom controls, and create various events
Prerequisites
l Your user account should have the Customize Privileges (required to access Application Studio)
and Security Manager (required to access System Setup and System Management modules)
options enabled.
l Your user account should be assigned to the following Security Groups:
o Functions Administrator
o Functions Developer
This is required for developing and managing Functions.
471 March, 2023

Creating Counter Sale Menu
In this step, you will create a layer for the Sales Order Entry application and deploy it as a new menu
item - Counter Sale.
Modifying the UI of a standard application

At the initial stage of this modification, you will make the Counter Sale UI a bit simpler than the
standard Order Entry. In further steps of this walkthrough, you will add more custom controls: a new
sliding panel, a button, and several events to that same layer.
1. Launch Order Entry.
Menu Path: Sales Management > Order Management > General Operations > Order Entry.
2. In the Overflow menu in the top right corner of the screen, select Application Studio.
When the Application Studio launches and displays the Application Map, go ahead and save your
layer right away.
3. Click the Save icon, then enter a Layer Name - for this example, enter CounterSale, and a
Description - for example, Simplified Order Entry UI for counter sales.
4. On the Application Map, select the Details page and click Edit.
The Details page layout displays. Let's hide some unnecessary fields to make the UI a bit simpler
for counter sales.
472 March, 2023

5. On the Order Detail panel card, hide the fields outlined on the image below. To hide a field, in its
properties, select the State > Hidden option.
You can click UNHIDE at the top of the screen to display hidden fields at any time.
6. Remove the Options and Summary group boxes from the Status column as well.
7. Make sure the Order Detail panel card now looks similar to this:
473 March, 2023

8. Save and publish the layer. Then close Application Studio and Order Entry.
Deploying a layer to a new menu

In this sub-step, create a new Counter Sale menu and apply your layer to the app's UI.

474 March, 2023

3. In the navigation tree, drill down to Main Menu > Sales Management > Order Management >
General Operations to define the location for your new menu.
4. In the Menu Items card, select New to add the sub menu.
5. Specify the following menu settings:
l Menu ID: XXXOECS where XXX are you initials and OECS stands for "Order Entry Counter
Sales".
l Module: UD.
l Name: Counter Sale - this is how your app will display in the main Kinetic menu.
l Program Type: Kinetic App.
l Program: Erp.UI.SalesOrderEntry - select from the list.
l Customization: Counter Sale.
475 March, 2023

6. Save the menu and close Menu Maintenance.
7. Restart the client.
8. Verify the new Counter Sale menu displays correctly:
Move on to the next step - Making New Orders Default to Counter Sale.
476 March, 2023

Making New Orders Default to Counter Sale
In this step, let's add logic to set the Counter Sale check box (OrderHed.CounterSale) to true for each
new order initiated from this application. To do that, you will create a post-processing directive that will
set the Counter Sale field of the ds.OrderHed table to true if a certain condition is satisfied. That
condition will evaluate the BPM Call Context: if the Character01 field is equal to "CounterSale", the
Counter Sale field in the Order Header gets set to true.
Later in this walkthrough, you will add an event to the CounterSale layer to set up BPM context for the
GetNewOrderHed method call.
1. Open Method Directives.
Menu Path: System Management > Business Process Management > Method Directives
Maintenance.
2. On the Detail sheet, click on the Method Code button.
The Method Search window pops up.
477 March, 2023

3. Select the GetNewOrderHed method of the Erp.BO.SalesOrder service and press OK.
4. From the New drop-down in the Main Menu, select New Post-Processing.
The Post-Processing > Detail sheet displays for editing.
l For Directive Name, type in CounterSaleDefaults.

l Enter a Description - for example, Set Defaults if call context defines this is a Counter
Sale.
5. Now press Design to launch the BPM Workflow Designer.
478 March, 2023

6. From the Flow Chart panel, select the Condition widget and add it to the canvas.
7. On the Condition 0 sheet of the Properties panel in the lower part of the screen, click New.
A new condition line appears in the grid.
8. From the drop-down in the Condition column, select the following statement:
The specified call context field is equal to the specified expression:
l Click the specified call context link.
The Select Table Field(s) window displays.
479 March, 2023

l From the callContextBpmData table, select the Character01 field and press OK.
l Keep the default is equal to expression.
l Then click the specified link.
l In the Specify C# expression editor that pops up, set the expression to the "CounterSale"
value and press OK to close the window.
480 March, 2023

9. From the Setters panel, select the Set Field widget and add it to the workflow.
Connect the Condition widget to the Set Field widget.
481 March, 2023

10. Set up the Set Field action as follows:
l Click the first specified link.
The Select Table Field(s) window pops ups.
482 March, 2023

l From the method's dataset, select the OrderHed table (ds.OrderHed), then choose the
CounterSale field and press OK.
l Keep the changed row value.
l Click the second specified link.
l In the Specify C# expression editor, type in true and press OK.
483 March, 2023

11. Save the workflow and close the Designer.
12. Enable and save the directive.
484 March, 2023

Move on to the next step - Adding Function to Create New Customer.
485 March, 2023

Adding Function to Create New Customer
In this step, you will use Epicor Functions Maintenance to create and design a Function that adds a new
customer to the database and returns their ID. That ID can be used for further custom modifications -
for example, you can attach a CS_ prefix to it. In this example, this ID will automatically populate the
Customer (OrderHed.CustomerCustID) field on the new counter sale order header.
Make sure your user account has been added to the following Security Groups:
l Functions Administrator - among other things, can publish or unpublish libraries

l Functions Developer - can create Widget Functions
Creating an API Key for REST calls

Applications talk to Kinetic Services via REST API v.2 endpoints. Version 2 API requires an key to be
passed with any service method call via REST. In this substep, create an API Key that the Counter Sale
application will use to call the Function.
1. Launch API Key Maintenance.
Menu Path: System Setup > Security Maintenance > API Key Maintenance.
2. Select New to add a new API key.
3. Type in a Key ID - for example, CounterSale.
It can be more generic if you plan to use it in other apps as well.
4. Enter a Name - for example, Counter Sale Key.

5. Save the key.
486 March, 2023

The Key field now displays its value. Select and click CTRL+ C to copy the API or add it to your
clipboard, then save it to a file for later use.
The key value displays just once after creation. If you refresh the UI or close the
program, you will not be able to retrieve the key value again. In that case, create a
new key.
Creating a Function library and defining its properties

In this sub-step, create a Function library, define its context, and accessibility. In this example, we will
be adding a Function that creates a new customer record by calling the GetNewCustomer method of
the Customer service, hence we will add this service as a reference to the library. Also, a Function can
be called via REST from an authorized company only (there can be more than one authorized
companies). Therefore, in this example, we will add the EPIC06 (Epicor Education) company to the list
of authorized companies for the library. If you are working in a different company, make sure you add it
instead.
1. Using the desktop client, launch Epicor Functions Maintenance.
Menu Path: System Management > Business Process Management > Epicor Functions
Maintenance.
2. From the New drop-down, select Add Library.
487 March, 2023

The Summary sheet displays for editing.
3. In the Library field, type in the ID of your library - in this example, CounterSales.
4. Add a Description - for example, Contains Functions related to counter sales.
5. Move on to the References > Services sheet and click Add.
The Service Search window pops up.
488 March, 2023

6. Make sure the System Code is ERP and the Type is Business Object, then in the Name Starts
With field, enter customer and click Search.
7. Select the Customer service and click OK.
8. Now go to the Security sheet and add the Epicor Education company to the Authorized
Companies list.
489 March, 2023

9. Save the library.
Creating a Widget Function and setting up its parameters

In this sub-step, you will create a Function and its signature. The Function you are about to create will
accept an ID, name, email address, and comments/notes that will be used to create a new customer.
The Function will return the customer ID that will be automatically applied to the new Counter Sale
order.
490 March, 2023

1. From the New drop-down in the Main Menu, select Add Widget Function.
2. Enter a Function ID - in this example, NewCustomer.

3. Add a Description - for example, Creates a new customer and returns the ID.
4. Open the Signature sheet in the lower part of the screen and add the following Request
Parameters:
Name Type
id System.String
name System.String
email System.String
notes System.String
5. Add one Response Parameter:
Name Type
newID System.String
491 March, 2023

6. Press Complete and stay on this screen.
Designing Function Workflow

In this sub-step, design the Function workflow. It will first call the GetNewCustomer method and get
the Customer dataset. It will then set some field values using data passed in with parameters. Next, it
will apply mandatory Customer Territory logic and, finally, will call the Update method to apply the
data changes to the new customer record. After that, it will map the Customer ID field from the
Customer dataset to the newID output parameter.
1. On the Function sheet, click Design to launch the Function Designer.

2. From the Callers panel on the right, select the Invoke BO Method widget and add it to the
canvas.
Rename it to something like GetNewCustomer. Connect the Start widget to the

GetNewCustomer widget.
492 March, 2023

3. Set up the GetNewCustomer action like this:
l Click the specified link.
The Method Search window displays. Note only the Customer service that you previously
added as a reference is available.
493 March, 2023

l Select the GetNewCustomer method and click OK.
l Click the not configured link.
The Setup Method Parameters window displays.
l In the Binding column of the ds parameter, select create new variable.
The Create new variable window pops up.
494 March, 2023

l For the Name, enter dsCustomer and click OK.
l In the Setup Method Parameters window, click OK to close it.
4. From the Setters panel, select the Set Field widget and drag it onto the canvas.
Rename the widget to Set ID. Connect GetNewCustomer to Set ID.
495 March, 2023

5. Configure the Set ID action:
The Select Table Field(s) window displays.
496 March, 2023

l From the dsCustomer.Customer table, select the CustID field and press OK.
l From the changed row toggle, select the added row option.
The Specify C# expression window launches.
l In the Available variables panel, expand the Parameters node and double-click on the id
parameter.
497 March, 2023

The id parameter is added to the Editor as id.
l Press OK to close the Editor.

6. In the same manner, add a sequence of three more Set Field actions with the following settings:
Action specified field (dsCustomer.Customer specified

Row Type
Name table) expression
Set Name Name the added name (parameter)

row
Set Email EMailAddress the added email (parameter)

row
Set Notes Comment the added notes (parameter)

row
7. From the Callers panel on the right, select another Invoke BO Method widget and add it to the
canvas.
Rename it to something like GetCustTerritory. Connect the fourth Set Field widget (Set Notes)
to the GetCustTerritory widget.
498 March, 2023

8. Set up the GetCustTerritory action like this:
The Method Search window displays.
499 March, 2023

l Select the GetCustomerTerritory method and click OK.
l Bind the ds parameter to the dsCustomer variable.
l Bind the custNum method parameter to the following expression:
dsCustomerCustomerRow.CustNum
500 March, 2023

This will bind the parameter to the CustNum field of the dsCustomer.Customer table.
You can manually enter this expression or simply double-click the field in the
Available variables panel of the C# Expression Editor - in this example:
Directive variables > dsCustomer > Customer > CustNum.

9. Add one more Invoke BO Method widget to the workflow.
Rename it to CustomerUpdate. Connect the GetCustTerritory widget to the CustomerUpdate

widget.
10. Set up the CustomerUpdate action like this:

l In the Method Search window, select the Update method and click OK.
501 March, 2023

l Bind the ds parameter to the dsCustomer variable.
502 March, 2023

11. Finally, from the Setters panel, select the Set Argument/Variable widget and add it to the
workflow.
Rename it to Set newID. Connect the CustomerUpdate widget to the Set newID widget.
12. Define the action:

The Select an Argument/Variable window pops up.
503 March, 2023

l Select the newID parameter and click OK.
The Specify C# expression window displays.
l In the Available variables panel, drill down to Directive variables > dsCustomer >
Customer and double-click the CustID field.
Your expression should look like this: dsCustomerCustomerRow.CustID
13. Review and save the workflow, then close the Function Designer.
504 March, 2023

14. Save the library.
15. Publish the library (Actions > Promote Library to Production).
The Kinetic REST API v.2 exposes only published (promoted to production) Function
libraries.
505 March, 2023

Testing Function in the Kinetic REST API interactive help
In this substep, run a quick test to make sure your Function works properly.
1. In internet browser, enter the URL of the Kinetic REST API home page in the following format:
https://[KineticServer]/[KineticInstanceName]/apps/resthelp - for example:

https://KineticServer/Kinetic2023.1/apps/resthelp.
Use epicor/epicor for credentials.
2. In the Menu, select Epicor Functions.
3. Specify the Company - in this example, it's EPIC06 (Epicor Education).
506 March, 2023

Note the CounterSales library appears in the list. But before we proceed with testing, let's set up
the API Key header for our REST calls.
4. In the Select header drop-down, select API Key and press Add header.
5. On the form that slides out, paste the API Key you created in the first sub-step into the Header
Value field and press Set.
507 March, 2023

6. Now select the CounterSales library.
7. Expand the POST method node and click Try it out.
8. Specify values for the request parameters and click Execute.
508 March, 2023

The response code should be 200 (Successful) and the Response body should contain the newID
value:
509 March, 2023

9. Additionally, you can use Customer Maintenance to verify the new record has been created.
Move on to the next step - Adding Event to Set CounterSale Context.
510 March, 2023

Adding Event to Set CounterSale Context
In this step, let's add an event to the CounterSale layer that will set the value of the Character01 call
context field to CounterSale before the GetNewOrderHed method is called. This will trigger the post-
processing directive that sets the order to be a Counter Sale. So, whenever you create a new order in
the Counter Sale application, it will be automatically marked as a counter sale.
You are not going to have a UI trigger for this event, instead it will be called from the default
BeforeGetNew event. BeforeGetNew is an empty container event where you can add logic you want to
execute prior to creating a new record.
Creating a row update event

1. Open the Counter Sale application.
2. Launch Application Studio.
3. Go to the Event Designer and press to add a New Event.

4. Edit the event properties like this:
l For ID, type in SetCounterSaleContext.
l Add a Description - for example, Set callContextBpmData.Character01 to
"CounterSale".
l Keep the No Trigger widget undefined. This event will be called from another one.
511 March, 2023

5. Now move to the Toolbox > Actions tab, select the row-update action and add it to the canvas.
6. In its properties, expand Basic > Parameters. Then press to add a new parameter.
7. OpenColumns and press again to add a new item.
8. Configure the column like this:
l Ep Binding - select CallContextBpmData.Character01.
l Value - Press Edit. In the JSON EDITOR that pops up replace the default characters with
"CounterSale" and press Save.
512 March, 2023

l Keep Data Type blank.
9. Save the event and return to the Events panel.
Calling an event from another event

1. Locate the BeforeGetNew event and select it for editing:
2. From the Toolbox > User Defined, select Event Actions > event-next and drag it onto the
canvas.
3. Save the event.
513 March, 2023

Testing the event
For the testing purposes, let's unhide the otherwise unnecessary Counter Sale check box on the Detail
page. We will use it to verify the events and the BPM directive work properly.
1. From the Application Map tab, go to the Details page layout, and press UNHIDE at the top of the
page.
All hidden components are displayed on the layout grayed out.
2. Select the Counter Sale field and clear the Hidden check box in its properties.
3. Click the UNHIDE button again to hide the other components.
4. Save and publish the layer, then select Preview.
5. On the landing page of the Counter Sale app, select Add New to create a new order.
6. Note that the new blank order has the Counter Sale check box selected by default.
You can hide this check box again if you want.
7. Close the preview.
514 March, 2023

Stay in the Application Studio and move on to the next step - Adding Slider Panel to Enter New
Customer Details.
515 March, 2023

Adding Slider Panel to Enter New Customer Details
In this step, you will add a button to the Details page that will open a sliding panel. This sliding panel
will contain fields that you will map to the input parameters of the Function that will create a new
customer.
Adding a button to the layout

In this substep, add a button to the Order Detail panel card.
1. In the Application Studio, open the Details page layout.

2. From the Toolbox > Components tab, select the Button component and drag it onto the header
of the Order Detail panel card.
3. Edit its properties like this:

l Expand the Basic group of properties, and for Id, type in AddNewCustomer.
l For Label Text, enter New Customer.
l Expand the Button group of properties, and in the Button Style drop-down, select
Outline.
l Select Medium for the Button Size.
516 March, 2023

4. Save the layer.
Adding an in-app sliding panel

In this sub-step, create a sliding panel for entering new customer data.
1. Go to the Application Map.

2. Select the root Sales Orders element in the tree and click Add New.
A new child page is generated:
517 March, 2023

3. Select the new blank page and edit its properties:
l For the Name, type in NewCustomer.
l Specify the Caption - New Customer.
l In the Page Type field, select Sliding Panel:
The new page gets detached from the tree and moves to the Slide Out Panels area.
Continue editing its properties.
l Select the Show Buttons option. Any buttons you specify will always display at the bottom
of the sliding panel. For this example, edit the properties of the empty default button:
518 March, 2023

l In the ID field, type in AddNewCustomerOK.
l Enter OK for Label Text.
4. Keep the other default settings and save your changes to the layer.
Designing the sliding panel layout

We will create a new customer by calling the NewCustomer Function that you designed previously. In
this sub-step, add four fields for entering new customer data to the sliding panel. Bind these fields to
the NewCustomer Function input parameters - id, name, email, and notes.
1. Select the New Customer sliding panel and click Edit.
The panel layout displays.
2. On the Toolbox > Components, select the GroupBox component and drag it onto the canvas.
519 March, 2023

3. In its properties, remove Basic > Label Text and set Layout > Flex Direction to Column. This
way, the components will stack vertically.
4. On the Components tab, type in text in the search field.
Two components appear in the search results - Text Area and Text Box.
5. Add three Text Boxes and one Text Area to the layout.
520 March, 2023

6. Select the first text box and edit its properties:
l Label Text - ID
l Ep Binding - OrderHed.NewCustID
521 March, 2023

On the client side, you can make up your own non-existing bindings for UI
fields. You can then use these bindings to map user-entered data to
Function/method input parameters or other fields on the data view.
7. Edit the properties of the second text box as follows:

l Label Text - Name
l Ep Binding - OrderHed.NewCustName
8. Edit the properties of the third text box as follows:
l Label Text - Email
l Ep Binding - OrderHed.NewCustEmail
9. Select the Text Area component and set up its properties like this:
l Label Text - Comments
l Ep Binding - OrderHed.NewCustComments
l Adjust the Width to make it about the same as the width of the text boxes above. In this
example, it's 39.
10. Select the page caption component (New Customer) and set its width to 400:
11. Save your changes.
522 March, 2023

Creating a button-click event to launch a sliding panel
In this sub-step, add an event that will launch the slider when the New Customer button is clicked.
After that, you will finally be able to preview the changes you made in the backend.
1. Open the Events panel and add a New Event.

2. In the new event properties, type in AddNewCustomerForm for Id.
The recommended event naming convention suggests you specify event IDs in the
following formats:
l [EventID]Form - for events that open a form

l [EventID]Action - for events that perform some action initiated from a form.
3. Add a Description - for example, Opens New Customer slider.
4. Select the No Trigger widget and edit its properties:
523 March, 2023

l Type - Control (a button is a UI control)
l Hook - On Click
l Target (Control ID - in this example, the ID of the New Customer button) -
AddNewCustomer
6. On the Toolbox > Actions tab, select slider-open. Add it to the design canvas.
Trigger automatically connects to the slider-open widget.
524 March, 2023

7. In the slider-open properties, specify the New Customer sliding panel ID in the Basic >
Parameters > Page field - in this example, NewCustomer:
8. Save the event and press Preview.

9. Add a new order and verify the panel slides out when you click the New Customer button.
Note the single OK button on the panel - let's add some logic to it.
Move on to the next step - Create Event to Call Function/Create New Customer.
525 March, 2023

Adding Event to Call Function/Create New
Customer
In this step, you will add an event that will:
l call the NewCustomer Function using the parameter values entered on the New Customer
sliding panel;
l update the value of the sales order Customer field with the new customer ID;
l call the SalesOrder.Update method to save the order to the database and refresh data on the
screen.
This event will be triggered by a click of the OK button on the New Customer sliding panel.
1. In the Event Designer, press New Event.

2. For the event Id, type in AddNewCustomerAction.
3. Add a Description - for example, Calls Function on OK.
526 March, 2023

4. Select the No Trigger widget on the canvas and set it up like this:
l Type - Control
l Hook - On Click
l Target - AddNewCustomerOK (button ID)
5. From Toolbox > Actions, select erp-function and add the widget to the canvas.
6. Edit the action properties like this:

l In Advanced, enter the API Key you created previously for example,
F3nEO1TCV7FNaZxhaG4zhflxI0AaoiZSQDYXG41XAaI5p
l In the ERP Functions Library field, select CounterSales.
527 March, 2023

l Select the NewCustomer Function for Service Operation.
l Expand MethodParameters. Note that this section lists all the parameters you set up in
the Functions signature.
l Select each parameter and map it to the fields you created on the sliding panel:
Field Name Field Data Type Field Value
id string OrderHed.NewCustID
name string OrderHed.NewCustName
email string OrderHed.NewCustEmail
notes string OrderHed.NewCustComments
This maps each sliding panel field to its corresponding Function parameter ("field") using
your custom binding.
l Expand the Behavior property group and select the On Success option to create a new
branch for adding further logic that will only be performed if the Function call is successful.
528 March, 2023

l On the Select an Action panel that slides out, select row-update.
7. In the row-update properties:
go to Basic > Parameters and press to a new parameter. Then press again
to add a new column.
529 March, 2023

l Set Ep Binding to OrderHed.CustomerCustID.
l In the Value field, press Edit; then in the JSON EDITOR, enter:
"{actionResult.newID}"
This will set the value of the Customer field in the Order Header to what has been returned in the
newID response parameter of the NewCustomer Function. Note that simple Function response
parameters automatically populate the actionResult system data view.
8. On the Toolbox > Actions tab, select the event-next action and add it to the workflow.
9. In the action properties set the Basic > Event ID field to SysUpdate.
This is the standard system event that executes when you save a record.
10. Finally, on the Toolbox > Actions tab, select the slider-close action and add it to the workflow.
11. Review the event workflow. it should look similar to this:
530 March, 2023

12. Save and publish the layer.
13. Close Application Studio.
Move on to the next step - Testing the Counter Sale Application.
531 March, 2023

Testing the Counter Sale Application
In this final step, run the Counter Sale application to test the new functionality.
1. Launch Counter Sale.

2. In the top-right corner of the screen, click New Order.
The new order's Details page displays.
3. Press the New Customer button.
The New Customer panel slides out.
4. Enter customer details - for example:
l ID - Peter
l Name - Peter Gabriel
l Email - PG@home.com
l Comments - test
5. Press OK.
6. To the 'Customer put on hold' message, select OK.
Note:
l The New Customer panel collapses

l The Customer field in the order header is populated with the ID of the newly added
customer - PETER
l The order number has been generated and the order saved
532 March, 2023

7. Here's how it should work:
Congratulations. You have successfully completed this walkthrough.
533 March, 2023

Working with Kinetic SDK
The Kinetic Software Developer Kit (SDK) is available if you purchase an SDK license. Typically, Epicor
partners and customers with more complex customization projects use the Kinetic SDK.
You can only use this toolset within on-premises and public cloud environments. You
cannot use it within multi-tenant cloud environments.
This SDK toolset broadens your ability to customize the Kinetic system. You expand it by creating
innovative solutions for your unique business needs. Do this by creating and then adding a User-Defined
(UD) service to your system. This service has its own namespace within the REST API, and it also has its
own set of tables and basic methods.
You work with Epicor Support to integrate your UD service with the Kinetic cloud environment. It is a
no-code/low-code extension that you can then modify using other system tools.
The UD service can interact with all the system logic and rules. Use Business Process Management
(BPM) directives to customize actions the service runs. You can also extend its methods by creating
Functions that handle unique tasks. Create Business Activity Queries (BAQs) that pull UD service data
for display in custom dashboards and BAQ reports.
Launch Application Studio to a modify the user interface for the UD service, as well create events and
data rules that define how users interact with the custom application. Create recipes in Automation
Studio that run automatic tasks that use and/or update data in the UD service. For example, if a
534 March, 2023

currency exchange rate changes in an external application, an Automation Studio recipe can then
update this currency exchange rate within the UD Service data.
Before you run the UD service in your live environment, thoroughly test it within a pilot or development
environment. This environment must mirror your live environment. When the UD service runs as you
expect, use Solution Workbench to package the UD service. You can then install this package within
your live environment.
535 March, 2023

Using the UD Service Designer
You create User-Defined (UD) services for new Kinetic applications within the UD Service Designer.
When you purchase the Software Developer Kit license, this tool is available from the main menu in the
smart client.
The UD Service Designer is a flexible tool you use to maintain all service components. Use it to define
tables, fields, datasets, and so on; each component is independent from the other components. Each
component has its own tab on the interface.
Launching the UD Service Designer

You run the UD Service Designer from the Kinetic smart client:
1. Go to your desktop and launch the Kinetic smart client icon.
2. Log in with a user account that gives you access to the system tools.
3. Select the Menu icon.
4. Filter the menu.
5. Select the UD Service Designer from the menu options.
536 March, 2023

6. The UD Service Designer displays.
537 March, 2023

Reviewing the UD Service Designer Interface
The UD Service Designer interface contains the following elements:
1. The Main Menu bar:
a. File - Use this menu item to create, save or delete services and service components, or to
exit the program.
b. Edit - Provides various editing options.
c. Actions - Contains a list of generation and synchronization actions.
d. Tools - Use these tools to personalize the Service Designer interface.
e. Help - Contains links to the application help and EPICWeb.
2. Service Designer Maintenance Panel:
a. Service tab - Contains Detail, List and Licensing sheets.
b. DataSet tab - Contains Detail, List and Relation sheets.
c. Table tab - Contains Detail, List, Column, Link and Key sheets.
538 March, 2023

3. Service Designer Tree View:
a. Services, DataSets and Tables tabs
b. Displays the tree view of the service component structure.
Interface tips:
l As you work on a service, it is easier to use the Service sheets (Detail, List, Licensing) and then
use the Tree View to navigate to the other components.
l Only have one service and its components open within the UD Service Designer at a time. This is
especially true if you are updating an existing service. Use the Clear button on the toolbar to keep
the number of open services to a minimum.
It is recommended that you install the SDK license in a development or pilot environment.
Create and then thoroughly test your customizations in this environment. After you finish
testing, use the Solution Workbench to package your customizations into a solutions file.
You can then use the Solution Workbench to import your customizations into your live
environment.
An important part of the interface is the Tree View, a panel found on the left side of the UD Service
Designer. How the Tree View refreshes depends on how you load in a service. If users populate the Tree
View using the Search program, the selected service and its components load in, or overlay, the Tree
View nodes. If users enter components directly through a field, all the components and their nodes
appear, or append, within the Tree View.
Example: Select the Tables tab and, within the Tree View, the Tables node. Within the
DataTable ID, enter ShipVia and press <Tab>. Now click File > New Table, within the
DataTable ID, enter Part and press <Tab>. Both the ShipVia and the Part tables appear in
the Tree View. Now click the DataTableID button and select the ABCCode table. Only the
ABC Code table appears in the Tree View, and its higher-level objects populate the Tree
View with its lower-level components.
When you select a service through a search, the service first populates the DataSet and Tables views. A
DataSet next populates the Tables views.
Creating New Services

Use the Service Creation Wizard to build new UD services in the UD Service Designer.
539 March, 2023

1. In the main toolbar, select the Down Arrow next to the New icon and select New Service.
2. The Create a New Class window displays. On the Service Definition step in the Service Name
field, enter the name of your service.
3. The Type drop-down list selects the User Defined service type by default.
4. Click Next.
5. On the Main DataSet step, leave the default value in the Create new field. The UD Services
Designer automatically adds a "_c" suffix to the dataset. This indicates its a custom table and
makes sure it does not conflict with other tables in the database. Select Next.
540 March, 2023

6. On the Main table step, accept the default settings for the table and select Next.
541 March, 2023

7. On the List DataSet step, accept the default settings and click Next.
542 March, 2023

8. On the List table step, accept the default settings and click Next.
543 March, 2023

9. On the final Finish step, review the details of your service and click Finish.
Adding Fields
You can add additional fields to your new service table. They append to the table. When users enter
data in these fields, the framework automatically populates them with this entered data for display. To
add a field:
1. On the main toolbar, select the Down Arrow next to the New icon and select New Column.
2. The Table > Column > Detail sheet displays. Enter the Column name. This is the value that
identifies this field in the database, such as MyNewService_c.MyNewField. You use this value to
display the column data by adding it to the interface in Application Studio.
544 March, 2023

3. Enter the Like field and Description to define the key field this column uses in the database. Any
tables that share this Like field can then display the data from this new column (field).
4. The Like column defines what key field outside this table you will use to link this field to data in
a related table, such as CustID.
5. Select the Data type for this field. Available options include String, Numeric, Integer, and so on.
6. After you select the Data type, the default Format for this type appears, like x(10). This indicates
the new field holds an alphanumeric value ten characters long. You can change this default
format in the Override column.
7. Save the field.
Continue adding the fields you need for the UD service.
545 March, 2023

Deploying UD Services
After you finish creating the UD service and adding fields to it, you are ready to deploy it. This makes
the service available to customize and use within Kinetic.
If you deploy the UD service and then later add more fields to it, you will need to redeploy
it following the steps in this section.
1. Contact Epicor Support to submit a support case. Explain you are adding a UD service to your
Kinetic environment.
2. Epicor Support will then regenerate the data model for your environment. This builds the table
structure.
3. Now return to the Service Designer to generate the UD service. This synchronizes the service with
the table structure in your Kinetic database.
4. Go to Actions > Generate Service. You can also select the Generate button on the toolbar.
5. The Generate Service dialog box displays. Select Yes. Your UD service integrates with the current
table structure.
6. Contact Epicor Support again to submit a second support case. State that you have generated
the UD service and that you need to restart the application pool.
7. Epicor Support will then stop and start your application server. Your Kinetic environment now
refreshes with the generated assemblies for your UD service.
546 March, 2023

The name of service looks like this: Ext.Services.BO.MyNewService. The Ext prefix means
your new service generated in your own development environment.
You can now access the UD service in Application Studio, Business Activity Query (BAQ) Designer, and
other tools. Learn how to do this in the Reviewing the UD Service help article.
547 March, 2023

Scenario Overview
This walkthrough is based on the true customer experience with Classic UX customization with some
processes simplified so it fits this concise format.
In this scenario, there's a soap producing and selling company. They want to add a part subtype
property that would display a specific type of soap based on its usage - beauty soap, guest soap,
kitchen soap. etc., and would be mostly used for reporting purposes. They want to display this soap
type info in the Part Advisor Tracker, a useful function that answers basic questions about a particular
part as you quote parts, or prepare for production of a particular part. The company also wants to pull
some additional part information to the Activity sheet of the tracker based on system BAQ data.
The implementation of this scenario includes:
l Adding user-defined codes for soap types

For this walkthough, we use the User Defined Codes Maintenance program that provides an
efficient way of creating user defined codes. Instead of modifying a user-defined table to hold
this information, you can create a user defined code type.
l Creating a user-defined (UD) column and binding it to the part subtype (Soap Type)
listSince there's no system field to store part subtypes, you will create a UD field using UD
Column Maintenance.
You will need access to the Administration Console because adding a UD column to
the database requires regeneration of the Data Model. To do this in cloud-based
Kinetic, you must submit an EpicCare ticket with the Cloud Operations team.
l Modifying Part Maintenance to enable soap type entry for specific parts
You will add a new combo box that will display soap type codes to the Part Maintenance
application. In addition to that, you will add an event that will be triggered by a button click and
will display different websites depending on the current soap type.
l Modifying Part Advisor - Layer I

You will create a layer that will contain a new UI component - the Soap Type text box, as well as
a rule that will highlight some fields on the part details page depending on the soap subtype
value of the current part.
l Modifying Part Advisor - Layer II

Sometimes changes don't happen all at once. To imitate this situation, you will create another
layer that will contain an additional Panel Card Grid UI component on the Activity tab. This grid
will be bound to a system Business Activity Query and will provide two view options.
548 March, 2023

l Deploying the layers for Part Advisor
To add a new item for the modified Part Advisor to the Main Menu, you will use the Kinetic App
program type. In Kinetic, you can apply multiple layers to an application interface. You can also
merge them, although, for this walkthrough we will simply apply both layers to the Part Advisor
UI as they do not overlap.
549 March, 2023

Defining UD Codes for Part Subtypes
In this step, use the User Defined Codes Maintenance program to add several codes for different soap
types. You will then create a user-defined column and add it to the Part table in database.
Creating User-Defined (UD) Codes for Different Types of Soap

In this sub-step, create the PartSType code type and add several codes for different types of soap to
the UDCodes table.
1. Launch User Defined Codes Maintenance.
Menu Path: System Setup > System Maintenance > User Codes.
2. In the Column Detail card, select New to add the new code type.
3. For the Code Type ID, type in PartSType.

4. For the Description, enter Part Subtype.
5. In the Long Description field, add the full description of the new code type.
In this example, add the following explanation: The Part Subtype codes stand for different
types of soap the company sells.
6. Save your code type, then select New in the Codes card to add the new code.
550 March, 2023

7. Select the User Codes Details option in the tree and add several codes to the PartSType code
type.
Use the data from the table below for code definitions:
Code Description Long Description
BS Beauty Soap Beauty Soap features fragrance and ingredients for different skin types.
They can feature special oil blend or glycerin.
GS Guest Soap Mini soap, generally smaller than the usual soap bar and comes with
various attractive shapes. Designed for guests usage.
KS Kitchen Soap Kitchen soap is a soap intended for use in the kitchen mainly to serve
the purpose of dish washing.
LS Laundry Effective in cleaning solid particles, grease and organic compound in

Soap clothes. Can be quite convenient to wash clothes during travels
because it is easy to carry.
MS Medicated Medicated soap is soap with added antiseptics and disinfectants to kill
Soap bacteria.
NS Novelty Soap Soap that comes in various shapes and colors such as fish, cake, and
mustache. Novelty soap serves more than a cleaning soap. It provides
enjoyment and amusement to the children who use it.
8. Save your changes and exit User Defined Codes Maintenance.
551 March, 2023

Adding a UD Field to the Part Table
In this sub-step, add a column to a user-defined table that will be appended to the main Part table.
Further on during this walkthrough, you will bind this field to a combo box on the modified Part
Maintenance application UI.
1. Navigate to the User Defined Column Maintenance program.

Menu Path: System Setup > System Maintenance > UD Column Maintenance.
2. Go to the Table tab, and from the New drop-down, select New Table.
The Table Search window displays.
3. In the Starting At field, type in part and click Search.
4. Select the Part table from the results and click OK.
Note that the new table ID conforms to the following naming convention: parent
table ID + _UD suffix. The Table not in database shape displays as the new Part_
UD table has not been added to the data model.
5. Now, from the New drop-down, select New Column.
552 March, 2023

6. For the Column name, type in SubType.
Note that when you move on to the next field, the _c suffix is automatically added
to the Column name.
7. For Description, type in Subtype used for reporting.

8. Change the default format to x(50) and keep all other defaults intact.
9. Save your changes.

Keep the program open to verify the result of the next step.
553 March, 2023

Add the Part_UD Table to the Data Model
To complete this sub-step, you must have access to the Administration Console on the
application server.
To regenerate data model and recycle application pools in a cloud-based Kinetic, you
must promptly submit a request via an EpicCare case and specify the location of the
newly added user-defined data (table/column) - System, Live, or Pilot - and the best time
the Cloud Operations team can run these processes.
If you are using the on-premise Kinetic environment, complete these steps to add the Part_UD table to
the Kinetic database:
1. Launch Administration Console.

2. In the Tree View, navigate to your database node - Database Server Management > [Your DB
Server Instance] > [Database Name].
3. On the Actions pane, select Regenerate Data Model.

The Generate Data Model window displays.
554 March, 2023

By default, this form contains the credentials defined on the Database Connection
tab of the Application Server Configuration. Please refer to the Administration
Console help for details on application server setup.
4. Click Generate.
5. Once the regeneration process completes successfully, from either the Action menu or the
Actions pane, select Recycle IIS Application Pool.
6. Now go back to the User Defined Column Maintenance program in Kinetic to verify the table
has been added to the database.
Note that for the Part_UD table two green shapes now appear on the Table sheet:
Table in sync and Data Model in sync. The UD column you have added can now be
used for binding.
555 March, 2023

7. Close UD Column Maintenance.
Move on to the next step - Adding a Combo Box to List UD Codes in Part Maintenance.
556 March, 2023

Adding a Combo Box to List UD Codes in Part
Maintenance
In this step, add a combo box that will display your user codes in Part Maintenance, add your layer to
the Part Menu item, and define subtype for a few parts in the Demo DB.
Adding a New Component to the Application UI

In this sub-step, create a layer for the Part Maintenance application and add a combo box that will
display PartSType codes you previously defined in User Defined Codes Maintenance. You will also add
a label for this combo box.
1. Open Part Maintenance.

You can access this application using multiple Menu Paths - for example, Material Management
> Inventory Management > Setup > Part.
2. On the Landing Page, in the Overflow menu, select Application Studio.

3. On the Application Map that opens by default, scroll down and locate the Attributes page; then
press Edit.
4. Go ahead and save your layer right away. Select the <NewLayer> link in the top-right corner of
the screen. The Layer Selection panel slides on.
5. Type in XXX_SubTypes where XXX are your initials for Layer Name.
6. Add a Description - for example, Subtypes and Website Launch Event.
7. On the Toolbox > Components tab, select Combo Box and add it to the General column of the
Attributes panel card:
557 March, 2023

8. Now, on the layout, select the newly added combo box and set it up like this:
l Expand the Basic property group and type in Soap Type for Label Text.
l Expand the Data property group and in the EpBinding field, select Part.SubType_c. The
value selected in this combo box at runtime will be saved to this database field.
558 March, 2023

l Expand the Reusable Combo group; then from the Type drop-down, select
UserCodes.UserCodesCombo.
This is a predefined system combo box type that is already set up to fetch
data from the UDCodes database table. You just need to specify your Code
Type as a parameter.
l From the Sub Type drop-down, select default.
All the necessary properties of the component get populated. Note the value
of the Filters field - CodeTypeID = '?{CodeTypeParam}'. The Code Type ID is
mapped to the Code Type parameter. In the next step, define this parameter.
559 March, 2023

l Under the Reusable Combo group, scroll down, locate the Filters Params field, and type
CodeTypeParam = PartSType in it.
Don't use any additional syntax around PartSType.
l Finally, go to the Advanced property group and in the Drop Down Style field, select
DropDownList.
If you don't specify a value in this field, by default, the DropDown type is
defined for the combo box meaning that users will be able to type in a value
into this field. DropDownList only allows selecting one of the listed values.
9. Preview the layer to verify it's working as expected.

10. Save the layer.
560 March, 2023

Creating a Menu Item for the Modified Application
In this sub-step, create a new menu item for the modified Part Maintenance application.

select Main Menu.
3. In the Tree View, navigate to Material Management > Inventory Management > Setup.
4. In the Menu Items card, select New to add the menu item.
5. For the Menu ID, type in UDXXXPRT where XXX are your initials.
6. Make sure the value of the Module field is set to UD.
7. For the Name, enter XXX Part - Subtypes where XXX are your initials.
8. Select Order Sequence.
The greater the value, the lower the position of your item in the menu list.
9. For the Program Type, select Kinetic App.
10. Enter Erp.UI.PartEntry in the Kinetic Application field or search for and locate the application.
11. Select Search in the Kinetic Customizations field. The Kinetic Customizations panel slides on.
12. From the Customization drop-down, select your layer: XXX_SubTypes:
561 March, 2023

13. Save the new menu and exit Menu Maintenance.
14. Restart Kinetic.
Defining Subtypes for Parts in the Demo Database

In this sub-step, define subtypes for several parts from the Demo database shipped with Kinetic. You
will use these parts for previewing and testing the Part Maintenance and Part Advisor modifications.
1. Launch your XXX Part - Subtypes application.

2. On the Landing Page, note the following parts: 00C1, 00C1A, 00C2, 00C2A, 00C3, 00C3A. Define
soap type for them.
562 March, 2023

3. Open 00C1; then go to the Attributes page, and from the Soap Type drop-down, select Beauty
Soap.
563 March, 2023

5. Set the Soap Type for the following parts according to the table below:
Part ID Soap Type
00C1A Guest Soap
00C2 Kitchen Soap
00C2A Laundry Soap
00C3 Medicated Soap
00C3A Novelty Soap
6. Keep Part Maintenance open.

Move on to the next step - Creating an Event that Launches a Website.
564 March, 2023

Creating an Event That Launches a Website
In this step, create a very simple event to demonstrate the mechanics of the process. The event will be
triggered by a button click and will launch a website page with search results for the current Soap Type
in the browser. This button will launch different web pages for the Kitchen and Laundry Soap (KS and
LS) types, and will be disabled for the other four soap types (BS, GS, MS, and NS).
Adding a Button to Trigger an Event

In this sub-step, add a button to the Part Advisor Details page. This button will trigger our event.
1. In Part Maintenance, launch Application Studio.

2. On the Application Map, scroll down to locate the Attributes page and press Edit.
3. From the Toolbox > Components tab, drag the Button component and drop it under the Soap
Type field.
4. Select the new button and edit its properties:

l Enter Launch Google Search for the Basic > Label Text.
l In the Data > EpBinding field, type in PartView.BtnLaunchWebsite.
This binding is optional and does not link the button to any database field, it will be used
in the rule you will create later in this step to disable this button for certain Soap Types.
565 March, 2023

5. Keep the button properties open and move on to the next sub-step to set up the event.
Adding an Event to Launch a Website

In this sub-step, use the Switch event action, which unlike a condition that provides two options - true
or false - allows for multiple options (cases). Depending on the value of the Soap Type field, the event
will launch different URLs.
1. On the Launch Google Search button's Properties panel, expand the Behavior property group
and select the On Click option.
This automatically creates an event with the Launch Google Search button specified in its trigger.
2. Go to the Toolbox > Actions tab and select Switch; drag it onto the canvas.
It automatically connects to the Trigger.
566 March, 2023

3. In the Switch properties, expand the Basic property group and type in {PartView.SubType_c} in
the Value field.
Further actions will depend on the current value of the specified field.
4. In the Basic group, open Parameters > Case Statements and press to add a new case.
5. In the Case properties, enter KS for Value.
6. Open Action. On the Select an Action panel that slides out, select url-open. The workflow
should now look like this:
567 March, 2023

l On the url-open Properties panel, go to Basic > Parameters; then in the Url field, enter:
http://www.google.com/search?q=kitchen+soap+description.
l Type in Kitchen Soap for Title.
7. Now go back to the switch properties and add another case - LS.
8. Press Action and select the url-open action again.

9. Configure the url-open action as follows:
l In the URL field, enter http://www.google.com/search?q=laundry+soap+description.
l In the Title field, type in Laundry Soap.
10. Review the event workflow and save the layer.
568 March, 2023

Disabling the Button for Selected Soap Types
We could have continued adding cases to the Switch if we needed to. But in this walkthrough, let us
assume that we don't want this event for the remaining four Soap Types. Instead, we will use a rule to
disable the Launch Google Search button for the Beauty, Guest, Medicated, and Novelty Soap Types.
1. From the sidebar menu, open Data Rules and press to add a new rule.
2. Set up the rule as shown on the image below:
You can use logical operators - AND (Default) and OR - to define the relationship
between multiple conditions. Click on the operator to toggle between the two
available values.
When you add the Action, select the SettingStyle > SettingStyle.Disabled action.
In Actions > Field, type in the value of the EpBinding property of the Launch
Google Search button without the Part data view prefix - BtnLaunchWebsite.
3. Save the layer.
Previewing the event

1. In the Application Studio, press Preview.
2. Open Part 00C2.
This part has a Kitchen Soap type, and the Launch Google Search button is enabled.
569 March, 2023

3. Click the Launch Google Search button.
The browser on your computer launching this page -
https://www.google.com/search?q=kitchen+soap+description.
4. Now open Part 00C2A and click the button again to verify it opens this page -
https://www.google.com/search?q=laundry+soap+description.
5. Finally, open Part 00C1.
This part's Soap Type is Beauty Soap, and the Launch Google Search button is disabled.
6. Save the changes, publish the XXX_SubTypes layer (where XXX are your initials), and exit
Application Studio.
Move on to the next step - Adding the Soap Type Field to Part Advisor.
570 March, 2023

Adding the Soap Type Field to Part Advisor
In this step, you will use the Application Studio to create a layer that contains a new UI component we
want to show - a text box bound to the SubType_c UD column. This text box will display the code of the
part's subtype (Soap Type).
1. Launch the Part Advisor tracker.

Menu Path: Executive Analysis > Trackers > Part Advisor.
2. Launch Application Studio by pressing Ctrl + Alt + D on your keyboard or by selecting
Application Studio from the Overflow menu in the top right corner of the screen.
The Application Studio displays the Application Map.
3. Select the Details page and press Edit .
4. From the Toolbox > Components, select the Text Box component and drag it onto the canvas.
571 March, 2023

5. Select the newly added text box on the canvas and open its Properties panel:
l For the Basic > Label Text, type in Soap Type.

l In the Data > EpBinding field, select PartView.SubType_c.
This binds the new text box to the UD column you have previously added to the Part table.
572 March, 2023

6. Press Save.
The Layer Selection dialog displays.
7. For both the Layer Name and Description, type in XXX_SoapType where XXX are your initials.
8. Save the layer.

9. Select Preview to verify your changes.
10. From the grid on the Part Advisor landing page, select part 00C1.
The part details display. Note the new field displays the short description of the part subtype.
573 March, 2023

11. Keep Application Studio open.
Move on to the next step - Adding a Rule for the Kitchen Soap Type.
574 March, 2023

Adding a Rule to Highlight Fields for the Selected
Part Subtype
In this step, further modify the Details page by adding a rule for the Kitchen Soap subtype that will
highlight the Part Description and Product Group fields when this subtype is selected.
1. In Application Studio from the sidebar menu, select Data Rules.
2. Press to add a new rule.

The Data Rule Designer opens a new rule for editing. Edit the Header section first.
3. For the Name, enter KitchenSoapWarn.
4. For the Description, type in Warning for Kitchen Soap.
5. From the Action Data View drop-down, select PartView.
Keep the default Row Rules Criteria (Conditions).
6. In the Conditions section, from the Select Condition drop-down, choose the Condition option.
7. Then select PartView for Data View.

8. In the Field field, type in SubType_c.
575 March, 2023

9. Set the Operator to Equal.
10. In the Value field, type in KS.
11. In the Actions section, from the Actions drop-down, select SettingStyle.Status.
12. In Field, select the PartDescription and ProdCode fields.

13. From the Status drop-down, select Warning.
14. The final rule settings should look like this:
576 March, 2023

15. Save the rule and preview your changes.
Open part 00C2 and note that the two fields are highlighted with warning color:
16. Save and Publish the layer; then exit Application Studio.
Move on to the next step - Adding a Panel Card with Additional Part Info.
577 March, 2023

Adding a Panel Card with Additional Part Info
In this step, use Application Studio to create a new layer for the Activity tab of the Part Advisor tracker
by adding a Panel Card Grid component that will display data from the system zPartWhereUsed
Business Activity Query (BAQ). This grid will provide additional information on part usage.
Adding a Panel Card Grid Component to the UI

In this sub-step, add a Panel Card Grid component to the Part Advisor UI and set its main properties.
1. Open Part Advisor and launch Application Studio.
2. Select the Activity tab page and press Edit .

3. From the Toolbox > Components tab, select the Panel Card Grid component and drag it to the
top of the page layout.
4. Save the layer as XXX_ WhereUsed where XXX are your initials.
Do not forget to enter a layer description. In this example, make it identical to the
layer name - XXX_WhereUsed where XXX are your initials.
5. Open the component's Properties.
l Expand the Basic property group and for Id, type in whereUsedPart.
l For Title, enter Where Used
578 March, 2023

l Expand the Advanced group and select the Expand at Runtime option.
Binding the Grid to BAQ and Adding Grid Columns

In this sub-step, define the system zPartWhereUsed BAQ as the gird's data provider and add columns to
your grid.
579 March, 2023

1. On the grid's Properties panel, expand the Data group and go to Grid Model > Provider Model;
then in the Baq ID field, type in zPartWhereUsed.
2. Now go to Grid Model > Columns and press to add a new column. We will specify Field
(as it appears in the BAQ's Display Fields), Title (that we want to display), and Erp Editor (data
type):
l For the first column, type in PartMtl_PartNum for Field.

l For Title, enter Parent Part.
l From the Erp Editor, select Text.
3. Add five more columns with the following values:
Field Title Erp Editor
Part_PartDescription Description Text
PartMtl_RevisionNum Rev Text
PartMtl_MtlPartNum Part Text
PartMtl_QtyPer Qty/Parent Number
Calculated_Type Type Text
4. Preview your changes. Your grid should look similar to this:
580 March, 2023

Configuring View Options for the Grid
In this example, we will add two view options for the grid - one will display all parts, the other - only the
ones that are not approved. In addition to that, both views will filter the BAQ results by the current part
ID, so that only the rows relevant to the current part display.
1. In the grid properties, go to the Advanced group again and open View Options.
2. Press to add a new view.
l For Description, type in All.

l In the Baq Id field, enter zPartWhereUsed.
l Select the Set Default check box at the bottom.
l Open Baq Options; then in the Where field, enter this filtering condition:
PartMtl_MtlPartNum = '??{KeyFields.PartNum}'
3. Press again to add another view and configure it as follows:

l For Description, type in Unapproved.
l In the Baq Id field, enter zPartWhereUsed.
l In the Baq Options > Where field, enter this filtering condition:
PartMtl_MtlPartNum = '??{KeyFields.PartNum}' and PartRev_Approved = false
4. Save the layer and preview your changes.

Now, when you open the Activity sheet for a part, it displays the Where Used Panel Card Grid
with information from the zPartWhereUsed BAQ for the current part.
View option: All
581 March, 2023

View Option: Unapproved
5. Save and Publish the layer; then exit Application Studio.
Move on to the final step of the walkthrough - Deploying the Part Advisor Configuration.
582 March, 2023

Deploying the Part Advisor Configuration
In this step, create and deploy a new menu for the modified Part Advisor Tracker.
In this example, we will create a new menu, but you can also apply layers to existing
menus. For example, you can use different Kinetic App menus for Part Advisor for different
user groups, or have just one if you want all users to have access to your configuration.
Creating a Menu for the Modified Part Advisor

In this sub-step, use the Menu Maintenance program to add a new menu for the modified Part Advisor
Tracker.

select Main Menu.
3. In the Tree View, navigate to Executive Analysis > Trackers.
4. In the Menu Items card, select New to add the menu.
5. For the Menu ID, type in UDXXKNTC where XX are your initials.
6. Make sure the value of the Module field is set to UD.
7. For the Name, enter XXX Part Advisor where XXX are your initials.
8. Keep the default Order Sequence.
The greater the value, the lower the position of your item in the menu list.
9. For the Program Type, enter or search for Kinetic App.
10. Enter or search for Erp.UI.PartAdvisor in the Kinetic Application field.
The Kinetic Customization panel slides on.
12. Select the Select check box beside your layers from the list of available customizations.
583 March, 2023

We have created two layers for this tracker. Here you can choose what layers are
relevant and must be applied. Let us apply both layers now. Note that if there are
more than one layer selected, the changes will be applied to the program UI based
on the order of layers in the Order column.
13. Save the menu and restart Kinetic.
Reviewing Part Maintenance and Part Advisor Configurations

In this sub-step, launch the modified Part Advisor Tracker and verify your changes to the UI.
1. Launch XXX Part Advisor where XXX are your initials.

Menu Path: Executive Analysis > Trackers > XXX Part Advisor.
Verify both layers have been applied.
l Open part 00C1 and note that the part's Soap Type displays.
l Open part 00C2 and note the Description and Product Group fields are highlighted (the
rule is applied).
l Go to the Activity tab and note the Where Used grid displays All and Unapproved parent
parts for the current part.
584 March, 2023

2. Once again launch XXX Part -Subtypes where XXX are your initials.
Menu Path: Material Management > Inventory Management > Setup > XXX Part-Subtypes.
Verify the application works with the applied XXX_SubTypes layer correctly:
l Open part 00C1A and go to the Attributes page. Note the Soap Type combo box and the
disabled Launch Google Search button.
l Open Part 00C2A and on its Attributes page, note the Launch Google Search button is
enabled.
l Press the button to verify it opens the correct search page in the browser.
Congratulations! You have successfully completed this walkthough.
585 March, 2023

Kinetic AppStudioUserGuide 2023.1

Uploaded by

Copyright:

Available Formats

You might also like

Kinetic AppStudioUserGuide 2023.1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kinetic AppStudioUserGuide 2023.1

Uploaded by

Copyright:

Available Formats

Kinetic Application

Studio User Guide

Copyright © 2023 Epicor Software Corporation Epicor.

Welcome to Application Studio 13

Application Studio Quick Start 14

Modifying Application Structure 30

Promoting Personalization to Customization 60

Modifying Page Layout 99

Setting Up Component Properties 109

Component Reference 118

Events Overview 262

Creating and Modifying Events 263

Data Views Overview 280

Using System Data Views 281

Adding a Data Discovery Card to a Kinetic App 306

Adding a Data Discovery Chart to a Kinetic App 310

Adding a Website Widget 313

Sliding Panels Overview 316

Creating In-App Sliding Panels 317

Adding a Layer to the Menu 327

Using Application Studio Homepage 337

Modifying Kinetic UX Dashboards 358

Modifying the BAQ Report Submission Form 377

Using Quick Filters 384

Working with the Basic Application Wizard in App Studio 404

Scenario Overview 444

Adding Menu Item for the UD05 Entry 445

Modifying Service Agreement Maintenance 447

Deploying SA Maint XXX Layer 451

Adding UD Field to OrderHed Table 452

Regenerating Data Model 455

Defining Extended Properties for the UD Field 458

Adding Service Agreement Records to Database 460

Adding a Combo Box with Service Codes to Order Entry 462

Deploying Layer and Testing Configuration 467

Calling Functions from Kinetic Apps 470

Walkthrough: Making Counter Sales Easier 471

Adding Function to Create New Customer 486

Testing the Counter Sale Application 532

Working with Kinetic SDK 534

Using the UD Service Designer 536

Defining UD Codes for Part Subtypes 550

Adding a Panel Card with Additional Part Info 578

You can launch Application Studio in a couple ways:

1. Launch Application Studio from an application:

b. From the Overflow menu , select Application Studio.

Alternatively, you can press Ctrl + Alt + D.

This opens the Application Studio.

2. Use Application Studio Home Page:

1. Select <New Layer>.

2. Specify Layer Name and Description. Both fields are mandatory.

For more information, Adding a Layer to the Menu.

Here's how you load a previously created layer:

1. Select <New Layer>.

2. Select Change Layer.

The following is an overview of Sidebar controls:

l Data Rules - displays the set of system and custom rules.

l Clicking on an event node opens the event for editing.

You can copy , but you cannot delete base events.