0% found this document useful (0 votes)
2K views272 pages

Kinetic AppStudioUserGuide

Uploaded by

pcw5891
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2K views272 pages

Kinetic AppStudioUserGuide

Uploaded by

pcw5891
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 272

Kinetic Application

Studio User Guide


Version 2023.2
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 8

Application Studio Quick Start 9

Modifying Application Structure 25


Application Map Tools 25
Reviewing an Application Map 25
Application Landing Page 25
Tab 27
Pages 29
Virtual Pages 32
Sliding Panels 35
Using Flex Layout 39
Reviewing the Page Level Property 39
Adjusting Widths on Panel Cards and Group Boxes 42
Creating a New Page 46
Creating a New Tab 49
Setting Up Shortcuts for Application Tools 54

Promoting Personalization to Customization 55

Debugging Applications 57
Using the Debug Tool 57
Using Browser Developer Tools 62
Using EO Browser for a Smart Client 85
Application Studio Learning Resources 88
Application Studio Help 88
ToolTips 88
Epicor Learning Center 89
Running the Upgrade Conversion Process 91
Conversion Process Logic 91
Conversion Program Capabilities 92
Selecting Specific Customizations 93
Reworking Converted Elements 95
Verifying Conversion Results in Configuration Upgrade Dashboard 96

Adding a Layer to the Menu 98


Creating a Layer 98
Adding the Layer to the Menu 99
Adding Two or More Layers to the Menu 101
Importing and Exporting Layers 103

3 January, 2024
Exporting a Layer in Solution Workbench 103
Importing Layers from Solution Workbench 104
Exporting a Single Layer from Application Studio Homepage 104
Exporting Layers with Parent Child Relationship 105
Exporting Applications and Layers 107
Importing Layers into Application Studio Homepage 108
Using the Save As Option 111

Using Application Studio Homepage 114


Finding Base and Layer Applications 114
Upgrading Applications 116
Publishing Applications 119
Modifying an Existing Application 120
Creating an Application 121
Creating a Reusable Component 123
Testing the Reusable Component 124
Launching the Basic Application Wizard 125
Working with the Basic Application Wizard in App Studio 129
Creating the Parent Data View 129
Adding the Parent Grid 134
Adding the Parent Form Card 137
Creating the Child Data View 139
Adding the Child Grid 142
Adding the Child Form Card 144
Reviewing the Application Summary 146
Reviewing the Validation Process 150
Examples of Validation Messages 150
Invalid Parent Child Relationship 150
Invalid Data View Filter Mappings 155
Invalid Grid View Option Filter 158
Making Changes in Application Studio 162
Finding Active Customizations 167
Adding the BAQ 167
Designing the Query Phrase 167
Adding Display Fields 169
Testing the Query 170
Correcting Orphaned UI Components 171
Orphaned Components 171
Correcting Orphans 171
Delete Custom Applications and Layers 174
Delete selected applications and layers from the application studio 174

4 January, 2024
Differentiate System applications and custom applications 176
Components Overview 178

Modifying Page Layout 179

Setting Up Component Properties 190


Basic 190
Behavior 191
Comments 192
Data 192
Layout 193
State 193
Advanced 194
Required Properties 195
Application Studio (Design) Mode 195
Data Rules Overview 196

Working with Data Rules 197


Entering a Rule's Header Details 197
Creating a Condition 199
Creating an Action 199
Testing the Rule 201
Copying a Data Rule 202
Deleting a Data Rule 203
Enable and Disable a Rule 205
Cross Data View Rule 207
Function Criteria 210
Events Overview 212

Creating and Modifying Events 213


Using the Events panel 213
Creating new events 215
Defining the trigger 215
Creating events without trigger 216
Overriding system events 218
Allowing Interaction During Events 220
Designing the workflow 221
Defining the connector flow 223
Editing child events 225
Copy-pasting workflow elements 226
Disabling Events 227
Data Views Overview 229

5 January, 2024
Using System Data Views 230
TransView 230
KeyFields 230
actionResult 230
searchResult 230
Constant 230
CallContextBpmData / CallContextClientData 231
sysTools 231
matches 231
Defining a New Data View 233
Mapping view to a data source 233
Defining parent-child relationships 235
Defining Options 236
Adding columns 237
Setting up context menu for a column 238
Adding Tools 239
Loading Data into a View 242
Loading data from Grid Provider Model 242
Creating an event for populating a view 243
Configuring action to load data from service method dataset 244
Configuring action to load data from Business Activity Query (BAQ) Results dataset 245
Configuring action to load data from Function response parameter of tableset type 246
Hooking the loading event 247
Clearing data from the view 247
Working with Kinetic SDK 249

Using the UD Service Designer 251


Launching the UD Service Designer 251
Reviewing the UD Service Designer Interface 253
Interface tips: 254
Creating New Services 254
Adding Fields 258
Deploying UD Services 260
Reviewing the User-Defined Service 262
Table Structure 262
Launching the UI Application 263
Exploring the User Interface 264
Reviewing Base Events 267
More Customizing Tools 269
Selecting Security Codes for User Defined Applications 271

6 January, 2024
7 January, 2024
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).

8 January, 2024
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.

9 January, 2024
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.

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:

10 January, 2024
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, review and Adding a Layer to the Menu.

Here's how you load a previously created layer:

1. Select <New Layer>.


The Layer Selection panel opens.

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.

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

11 January, 2024
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.

When in the layout, Events, Rules, and Data Views panels, and searching
for a specific node, you can still access context options to copy and delete
within the search results.

l Edit, Add and Delete actions performed in the Layout Tree are identical to those

12 January, 2024
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).

13 January, 2024
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

14 January, 2024
time 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.
l The error details display in the Problems panel.

15 January, 2024
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:

16 January, 2024
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.2, 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.
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.

17 January, 2024
2. Now, create a child layer. First, click on the layer.

3. Press Change Layer.

18 January, 2024
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.

19 January, 2024
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.

20 January, 2024
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 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 everything else as it originally was (no new components, etc). This way, you will have two
options of the layers order:

21 January, 2024
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.

22 January, 2024
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.

23 January, 2024
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.

24 January, 2024
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.

25 January, 2024
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 (pre-
fix) 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 dis-
play screen. It is a root property that affects the
entire application. This property is set to false by
default.

26 January, 2024
Property Value Description
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.

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

27 January, 2024
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.

Property Value Description


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
injected 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.
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 %data-
setid%.
You can learn more about the concept of using
patches in Setting up Data Bindings.

28 January, 2024
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.

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.

29 January, 2024
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.

Property Value Description


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.
Ep Binding Customer.CustID This property is used to link, or bind a page to a
specific application view. In this example, the
page is configured to display records to a selected
customer.
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.
Parent Details Indicates this page is a child of the Details Page.

30 January, 2024
Property Value Description
Page Caption Customer {Cus- Defines the Page name that display on a form.
tomer.CustID} - Billing Notice this value contains {Customer.CustID} vari-
able that 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 located. 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
Order and 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, sup-
pliers, 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 cus-
tomer/prospect and to review any conversations
that were previously entered in the log.
Disable clear Controls the availability of the Change Log panel
Change Log on a 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
Attachments on a page.

For more information on how to customize Application Page Layout, see Modifying
Application Layout and Working with ... examples.

31 January, 2024
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.

32 January, 2024
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.

33 January, 2024
See how it looks at runtime.

Note the following:

34 January, 2024
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.

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.

35 January, 2024
Property Value Description
Name Slider.ChangeCustomerID Defines the name of the page.
Caption Change Customer ID Defines the Panel name that displays
Application Map.
Page Type SlidingPanel Indicates the page can only be dis-
played as a Sligthout Panel. When you
create a new page anywhere in Applic-
ation 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 %datasetid%.
You can learn more about the concept
of using patches in Setting up Data Bind-
ings.
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 com-
ponent) to link a page with it’s child
nodes.
Status When selected, Sliding Panel captions
display based on pre-defined formats,
including Success, Info, Warning and
Error.
Hide Close Icon clear Controls the availability of the Close
icon on the panel.

36 January, 2024
Property Value Description
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
sideClick clicking 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 typically used as an Event trigger
point to perform 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

37 January, 2024
Data. 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.

38 January, 2024
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:

39 January, 2024
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.

40 January, 2024
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

41 January, 2024
application. 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.

42 January, 2024
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.

43 January, 2024
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.

7. You can also use the Flex Layout property on group boxes within panel cards. Add a panel
card to the layout.

44 January, 2024
8. Go to its Properties, expand the Layout node, and select the Flex Layout check box.

9. Place two group boxes inside the panel card.

45 January, 2024
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.

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.

46 January, 2024
3. Click on the Billing Page and click Add.

4. An empty page is added to the Billing node in the Navigation tree.

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.

47 January, 2024
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.

48 January, 2024
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.

49 January, 2024
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.

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.

50 January, 2024
l Page - select the newly created Page, in this example, NewTab.

The New Tab is now part of the layout.

51 January, 2024
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.

52 January, 2024
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.

53 January, 2024
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.

54 January, 2024
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:

Alternatively, you can press Ctrl + Alt + D.

55 January, 2024
3. Select <New Layer> .
The Layer Selection panel opens.

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.

56 January, 2024
Debugging Applications
Debug the applications you create and change them in the Application Studio through a couple of
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 of ways. Select the Overflow menu and the Debug Tool.
You can also press the Ctrl + Shift + D keyboard shortcut (D is for debug).

57 January, 2024
3. The Debug Tool displays. The Log option launches by default.

4. Perform an action within the application, like select a record.

58 January, 2024
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.

59 January, 2024
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.

60 January, 2024
11. Select the Bottom Panel button to place the Debug Tool below the application again.

61 January, 2024
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:

62 January, 2024
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).
The list of available shortcuts includes commands you can use to debug applications, such as
Ctrl + Alt + 8 to enable browser debugging.

63 January, 2024
Also, the list of available keyboard shortcuts is different for every application.

You can personalize the keyboard shortcuts for an application in the edit mode, by selecting
the Edit option in the sliding panel.

64 January, 2024
In this article, you 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.

3. Select the Console tab.

65 January, 2024
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.


2. Select the Console tab.
3. Now, click anywhere inside Kinetic and press Ctrl + Alt + 8 on your keyboard. You should see
the following message.

66 January, 2024
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.
2. Select the Console tab.

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).

67 January, 2024
You can search for a component, such as Stock Valuation Percent, using the
dynamic Filter box.

68 January, 2024
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.

69 January, 2024
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.

70 January, 2024
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.

1. Navigate to a page you want to examine. In this example, ABC Code Details page is selected.
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.

71 January, 2024
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

72 January, 2024
updated values.

73 January, 2024
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:

1. Navigate to a page you want to examine. In this example, ABC Code Details page is selected.
2. Modify the record, for example, update Count Frequency value.

74 January, 2024
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.

75 January, 2024
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.

76 January, 2024
4. Observe the GetByID method was called. You can inspect call headers and payload body of
the request.

5. You can use the Response tab to view the response body in a Tree format.

77 January, 2024
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.

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

78 January, 2024
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

79 January, 2024
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

80 January, 2024
Modified.

l Show change states of all dataviews - epDebug.allChangeStates


Shows change states of all dataviews in a simple tabular form.

81 January, 2024
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

82 January, 2024
snapshots on the fly.

l Dump data copy of a specified data table - epDebug.dumpTableData(tabName:string)

83 January, 2024
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.

84 January, 2024
l Dump rule actions - epDebug.ruleActions
Dumps all data rule results in a tree-view format.

Using EO Browser for a Smart Client


The Essential Object (EO) Web Browser is a built-in web browser that allows you to view Kinetic
forms. When Kinetic launches on client workstations, a number of items automatically load into
memory. As you launch classic form programs during a session, some of these programs are also
loaded into an application cache to improve performance and track application activity. Temporary
data for the Kinetic applications is stored in this browser's cache.

To activate debugging for the desktop smart client, edit your local Kinetic.sysconfig file.

1. Open the Kinetic.sysconfig file on your local.


(C:\Epicor\ERP11\LocalClients|Kinetic\config).

85 January, 2024
2. Add these tags to the sysconfig file after the HomePageUrl.
<DisableSPA value="False" />

<LaunchEOBrowserDebug value="true"/>

3. Save the config file and launch the smart client.


You will see the EO Browser's console launches when you log in and also a console log will be
displayed, on the launch of an application.

86 January, 2024
87 January, 2024
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.

88 January, 2024
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,
like text boxes, buttons and display data using grids. See how to configure widgets and

89 January, 2024
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.

90 January, 2024
Running the Upgrade Conversion Process
As you upgrade to Kinetic 2023.2, the system automatically runs conversion program 180 to
convert existing classic customization layers into Kinetic customization layers. You can run
conversion program 180 in default mode to convert all customizations or use a configuration
conversion settings file to only convert selected custom layers. If the application that the Classic
custom layer modifies has a Kinetic UX equivalent, the process converts the layer.

You can specify different layer types in the settings file. When you DO NOT use a
configuration conversion settings file, this conversion program only processes layers
defined as Customization types.

Using the Conversion Workbench, you can also rerun conversion program 180 on demand as often
as you need. You may want to do this when:

l A classic application that has a customization layer is converted into Kinetic by Epicor; you
want to apply your existing customization to it.

l Conversion program 180 gains new capabilities that make conversions 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 before you rerun
the conversion. This prevents an existing Kinetic customization from getting overwritten
by mistake.

During this help article, we explore the following:

l Conversion Process Logic

l Conversion Program Capabilities

l Selecting Specific Customizations

l Reworking Converted Elements

Conversion Process Logic


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 incompatibility with Kinetic
UX.

If the original layer is empty or only contains unsupported elements, the conversion program does
not generate a Kinetic layer. The conversion considers a customization as empty if it does not

91 January, 2024
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.

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 converts the following
elements:

l Simple UI components - for example, text boxes, labels, numeric boxes

l Combo boxes - Some complex setups may still require revision and rework

l Foreign key data views - this includes 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 cannot 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 group 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 added a child data view. You then added a text box, placed it
on a tab, and bound it to the child data view column. During the conversion process, this text box will
be placed within a custom panel on a separate custom page. This happens because the binding is

92 January, 2024
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 text box and bind it to a data view that also exists in the Kinetic
equivalent layer, that text box is placed on a custom panel on an existing page bound to that data
view. However, if you bind a new text box to a data view column and the Kinetic equivalent layer has
a component with the same binding, the text box will be placed next to the existing one in the Kinetic
application.

This logic applies to additional UI components. The process does not move any existing base
components that were already adjusted.

Selecting Specific Customizations


By default the conversion program 180 process converts all the available Classic customization
layers. This may be more custom layers than you are ready to uplift into Kinetic. You can limit what
Classic customizations the process converts by creating a Customization Conversion Settings File.
Through this file you define the specific applications and their layers that the process will convert to
Kinetic.

Create this XML file using a text editor such as Notepad or a similar application.

Use the following syntax:


<CustomizationConversionSettings>
<CustomizationID>
<Company></Company>
<ProductID></ProductID>
<TypeCode></TypeCode>
<CGCCode></CGCCode>
<Key1></Key1>
<Key2></Key2>
<Key3></Key3>
</CustomizationID>
</CustomizationConversionSettings>

You can optionally define the Company, Product ID, Type Code (layer type, such as Customization,
Productization, and so on), and CGC Code (culture code). You then enter the specific applications
with the Classic layers you want to convert in the three Key tags. Key1 is mandatory; to run the
settings file, you MUST enter a value in the Key1 tag.

Only use the tag elements you need. If a tag element in this file is empty, the settings file applies the
element using an empty string value. Any Classic custom layers created for these selected
applications convert into the Kinetic UX.

93 January, 2024
Example Settings File:

<CustomizationConversionSettings>
<CustomizationID>
<Key1>MyCustomerEntry</Key1>
</CustomizationID>
</CustomizationConversionSettings>

This example file only includes the mandatory Key1 tag. All the other tag elements are removed so
they do not generate empty string values. Any custom layers that have the MyCustomerEntry file
name convert to the Kinetic UX.

After you create the file, you then upload this Customization Conversion Settings file before you run
the process:

1. Launch the Conversion Workbench.

2. Select conversion program 180. This launches Data Conversion Maintenance.

3. Go to the Actions menu or the Overflow menu and select Upload Settings File. This places
the settings file on your SQL server.

4. Select the Overflow menu again and select Submit. The process converts the Classic custom
layers for the applications defined in the file.

5. You can later edit this file. Because it is now on the server, you can select the Overflow menu
and Download Settings File.

94 January, 2024
6. Make the changes you need by entering different applications in the <Key> tags and defining
other tag options.

7. Upload the file again and submit the conversion process. The process runs with your new
settings.

You can also remove the settings file. Create an empty file and then upload it to the
server. Kinetic will remove the settings file.

Reworking Converted Elements


Some classic customization elements may require rework in Kinetic using Application Studio - for
example:

l UI components that cannot automatically convert 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 process, such as:

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 January, 2024
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.2, 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.
These logs contain comments on all classic layers.

96 January, 2024
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 January, 2024
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

2. From the Overflow menu , select Application Studio:

98 January, 2024
Alternatively, you can press Ctrl + Alt + D.

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 .
The Layer Selection panel opens.

6. In the Layer Name and Description fields, enter XXX Test Layer, where XXX are your initials,
and select Save Layer.

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.

99 January, 2024
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).

100 January, 2024


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

101 January, 2024


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.

102 January, 2024


Importing and Exporting Layers
You can import and export layers through two applications.

You can use the Application Studio homepage to export multiple custom layers to a single MetaUI
folder on your local and import the layer from the MetaUI folder to another Kinetic environment.

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.

You cannot export/import System Layers.

In this article we will cover:

l Exporting a Layer in Solution Workbench


l Importing a Layer from Solution Workbench
l Exporting a Single Layer from Application Studio Homepage
l Exporting Layers with Parent Child Relationship
l Exporting Applications and Layers
l Importing Layers into Application Studio Homepage

Exporting a Layer in Solution Workbench


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.

103 January, 2024


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.

Importing Layers from Solution Workbench


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.

Exporting a Single Layer from Application Studio Homepage


Assume you created a layer CalcCountFrequency in ABC Code Maintenance, here's how you export
it.

1. Launch the Application Studio Homepage.


2. Find and select CalcCountFrequency from the list of available layers by selecting its
checkbox.
3. From the overflow menu, select Export.

104 January, 2024


When you select Export, the layer CalcCountFrequency is saved to a MetaUI folder in your
local.

Exporting Layers with Parent Child Relationship


If you have layers that have a parent child relationship and you export the child layer, the exported
layer will have both the parent and child layers in it.

105 January, 2024


1. Assume you have a layer AddNewCode and its child layer CreateABCCode.

2. When you export the child layer such as CreateABCCode, the exported layer will have both
the parent layer - AddNewCode and child layer - CreateABCCode.

3. Now you create a duplicate of the child layer such as CreateNewCode and export both the
child layer - CreateABCCode and its duplicate - CreateNewCode.

106 January, 2024


The exported layer will contain the parent layer - AddNewCode, its child layer -
CreateABCCode, and the duplicate child layer - CreateNewCode.

Exporting Applications and Layers


You can now export both the applications and layers simultaneously from the application studio
homepage.

1. Launch the Application Studio Homepage.


2. Find and select an application.
3. Find and select a layer.
4. From the overflow menu, select Export.

107 January, 2024


You now have a single MetaUI folder with two folders for apps and layers.

Importing Layers into Application Studio Homepage


To import layers from the Application Studio Homepage, you select the MetaUI from your local and
import it to a specific Kinetic environment.

You cannot import a layer without its base application. If you do so, you will receive an
error stating that the application does not exist.

1. Launch the Application Studio Homepage.

2. From the overflow menu, select Import.

108 January, 2024


The Import Customization sliding panel slides in.

3. Select the icon to import the layer.


4. Select the MetaUI folder from your local.
While importing a MetaUI folder, if you select the Automatically overwrite duplicate files
checkbox, it will overwrite if any duplicates are found. If you do not select the checkbox, the
duplicate files will not be imported.

5. Select OK.
6. If your import was successful, you will receive an Import Successful message on the sliding
panel and also find the imported layer in the list of layers on the Application Studio Homepage.
Select OK to close the message.

109 January, 2024


110 January, 2024
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.

111 January, 2024


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.
6. Select Save Layer.

112 January, 2024


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.

113 January, 2024


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.

114 January, 2024


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.

115 January, 2024


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.

116 January, 2024


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.

117 January, 2024


4. A Status column appears.

5. If the layer updated, the Upgrade Success status displays in the column.

6. If there was a problem, the status shows Upgrade Failed and the Error column indicates there
as a problem.

118 January, 2024


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.

119 January, 2024


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.

120 January, 2024


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.

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.

1. Select the New icon.

121 January, 2024


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.

122 January, 2024


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:

123 January, 2024


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.

124 January, 2024


4. Drag and drop it anywhere onto the canvas. The component expands, you can set its
properties as usual.

5. Exit Application Studio.

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.

1. Launch the Application Studio Homepage.

2. Select the New icon.

125 January, 2024


3. The Create new App panel displays. Select Wizard: Erp App Create to create an ERP
application and select OK.

126 January, 2024


127 January, 2024
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.

128 January, 2024


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.

129 January, 2024


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

130 January, 2024


131 January, 2024
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.

132 January, 2024


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.

133 January, 2024


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.

134 January, 2024


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.

135 January, 2024


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.

136 January, 2024


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.

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.

137 January, 2024


2. The Title appears by default, such as Supplier.

3. The Fields grid shows you the fields from the data view available for display.

138 January, 2024


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.

4. Select the Next button.

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.

139 January, 2024


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.

140 January, 2024


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

141 January, 2024


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.

9. Select the Next button.

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.

142 January, 2024


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 these columns, select its Updatable check box.

143 January, 2024


4. Select the Next button.

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.

144 January, 2024


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.

145 January, 2024


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.

4. Select the Next button.

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.

146 January, 2024


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.

147 January, 2024


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.

148 January, 2024


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.

149 January, 2024


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.

150 January, 2024


1. In this example, zSupplierTracker01 is the parent BAQ and Supplier is its data view.

2. Select a different BAQ.

151 January, 2024


3. The stepper displays an error.

152 January, 2024


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.

153 January, 2024


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.

154 January, 2024


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.

155 January, 2024


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.

156 January, 2024


The following section explains when this error occurs and how to fix it.

157 January, 2024


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.

158 January, 2024


159 January, 2024
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.

160 January, 2024


Your basic application automatically launches within Application Studio.

161 January, 2024


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.

162 January, 2024


4. Test how this application works during run time. Select the Preview button.

Your application displays in a separate tab on your browser.

5. Select a supplier on the Supplier parent grid.

163 January, 2024


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.

164 January, 2024


The Purchase Points form card displays information for the selected purchase point.

Select the Refresh All option from the overflow menu of the basic application to refresh
the grids and form cards all at once.

165 January, 2024


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

166 January, 2024


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.

167 January, 2024


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:

168 January, 2024


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:

169 January, 2024


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.

You can now locate custom applications on menus throughout your organization.

170 January, 2024


Correcting Orphaned UI Components
Because you place each custom layer over a base application installed with the system, Kinetic
validates these layers regularly to ensure they run without error. This validation always runs during
major version updates, as these updates often extend the use and function of the base application.
Because of this, the system must test and validate each layer. You can then correct problems so the
layer works with the current base application.

While these validation errors will help you troubleshoot issues, be sure you thoroughly
test your customizations after every major version update.

Orphaned Components
One common error is that control components (check boxes, fields, combo boxes, and so on) can
become orphaned on layers. Then often occurs when you combine several custom layers and one
layer changes, or the base application changes its container control layout. What happens is a
container control like a card, group box, column container, or row container is removed from one
layer, but a component exists on another layer that was inside this container control.

For example, you add a component on a child layer inside a card that exists on a parent layer, but
later you remove this card from the parent layer. The component is still on your child layer, but it is
not visible because the card that once showed the component is gone. Another example is when you
add a component to a parent layer, but then remove the card in a child layer. The component no
longer displays. For both examples, the components still exist in one layer, but because they are no
longer inside a container component, they do not display. You need to either move or delete these
components in Application Studio.

Correcting Orphans
When a user runs a custom layer that has orphaned components, a warning panel slides on:

171 January, 2024


Correct orphaned components by opening the layer in Application Studio. Review the Problems
Panel for orphaned component warnings. A warning will display for each page that has orphaned
components:

Do the following:

172 January, 2024


1. Select the page name in the warning. The page opens for editing.

2. Scroll to the bottom of the page and find the Orphan Components card. This card displays the
missing components.

3. Either move the components to a new layout location or remove them from the layout.

4. Save the layer.

5. Publish the layer.

6. Validate the custom layer now runs without errors.

173 January, 2024


Delete Custom Applications and Layers
The app studio home page allows users to delete custom applications and layers. This feature
provides an option for users to remove applications once they have been created and added to the
home page. This enables customers to clean up their unused customizations by deleting
applications and layers from the home page.

Delete selected applications and layers from the application studio


For a Non SDK-licensed company users can delete one or more selected applications and layers
from the studio homepage using the grid overflow menu delete option. For SKD-licensed company
users, users who have Customization rights can delete the custom base app and all custom layers,
while users who have Dashboard rights can only delete custom apps. If you delete multiple base
apps, then you will also delete the associated child layers if you delete the parent layer.

If a user with only Dashboard developer rights tries to delete a custom base app that has
customization layers, the delete operation will fail because the user does not have customization
rights to delete layers.

Users cannot delete System applications.

A warning message is displayed. You can only delete apps/layers if you are authorized to delete.

174 January, 2024


175 January, 2024
If the user is a non-SDK license user, who has customization rights can delete the custom base apps
and all custom layers to which the logged-in user has the rights to modify. Users who have
Dashboard rights can only delete the custom base apps to which the logged-in user has the rights to
modify. If he tries to delete the apps to which he does not have access, the following error message
is displayed:

If the delete operation fails, a validation message will appear inside the grid indicating that the user is
not authorized to delete.

Differentiate System applications and custom applications


The Application Studio home page Apps grid has a column to differentiate between system and
custom apps, providing users with a more intuitive navigation experience and allowing them to
quickly identify which apps are system-made and which are custom-made. System apps are marked
with a tick, while custom apps have no indicator, and layers show no indicator.

176 January, 2024


177 January, 2024
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
Panel Card Gantt.

"Organizer' components, like 1 Column, 2 Column, Container, GroupBox 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.

178 January, 2024


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.

179 January, 2024


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).

180 January, 2024


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.

181 January, 2024


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.

182 January, 2024


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.

Also note that full screen views can have standard application pages as their child views:

7. At run-time, 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.

183 January, 2024


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

184 January, 2024


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.

185 January, 2024


Use this control to delete the component.

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.

186 January, 2024


Clear the Hidden state property to make the component visible again.

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.

187 January, 2024


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.

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.
l The App Studio Templates have a default width of 1440 for newly created pages. Users can
modify the width of existing pages to 1440 from their current width. If the Width type is set to
'Custom' in Sliding Panels, the width property should be enabled, and the above width
changes will not apply.

188 January, 2024


Nested components allow you to further enhance the flexibility and customization options within a
panel card. By simply dragging additional components into the panel card, you can create nested
structures that accommodate multiple components within a single container or column.

For instance, on the panel card, you can drop four components side by side, effectively arranging
them in a horizontal layout. This kind of nesting functionality provides an intuitive way to organize
and group related components together, enabling you to design more complex and interactive user
interfaces.

In scenarios where a user desires even greater customization, such as having six or seven
components side by side, they can achieve this by creating a nested structure within a single
container. This nesting concept allows for a deeper level of component organization and layout
management, providing the flexibility needed to accommodate various design requirements.

189 January, 2024


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:

190 January, 2024


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:

191 January, 2024


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.

192 January, 2024


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.

Personalizable - A particular component or field can be personalized by individual users in the


runtime environment. It empowers users to customize their own screens or views by enabling or
disabling specific elements within a component. This level of personalization allows users to tailor
the application's interface to their unique preferences and optimize their productivity.

Customizable - Customizable refers to the ability to modify or adjust a specific component or field
within the application's interface. When a component is marked as customizable in App Studio, it
grants users the freedom to personalize their screen according to their preferences or requirements.
This personalization can be performed by enabling or disabling specific fields or components to tailor
the interface to their needs

193 January, 2024


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.

194 January, 2024


Required Properties
As a rule, required properties are located in the Basic category and marked with an asterisk *.

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.

195 January, 2024


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.

196 January, 2024


Working with Data Rules
Learn how to create a simple rule. For presentation purposes, you will use the Sales Order Entry
form and create a rule that highlights the Discount percentage field when you enter a value that is
greater than the set value.

In this article, we will cover:

l Entering a rule's header details


l Creating a condition
l Creating an action
l Testing the rule
l Copying a rule
l Deleting a rule
l Enable and Disable a rule
l Cross Data View rule
l Function Criteria

Entering a Rule's Header Details


1. Open Sales Order Entry.

2. From the Overflow menu , select Application Studio:

197 January, 2024


Alternatively, you can press Ctrl + Alt + D.

3. Go to Rules .

4. Select New Rule .

198 January, 2024


5. In the Header section, enter/select the following:
l Name: HighlightDiscountPercent
l Description: Highlight when discount percentage is greater than the set value
The rule's name and description will display in the Rules List grid after you save it. A
concise description helps you easier identify the rule in the grid.

l Action Data View: OrderDtl


l Row Rule Criteria: Conditions
In case you do not want to set a condition to your row rule, select No Condition in the
Row Rule Criteria.

This way you indicate that the rule is based on zero, one or more conditions.

Creating a Condition
1. From the Select Condition list, select Condition.
2. In Data View, select OrderDtl.
3. In Field, select DiscountPercent. This is the field that will call the action.
4. Specify the following parameters:
l Operator: GreaterThan
l Value/Field: Value
l Value: 8
When the discount percentage is greater than 8, the action runs.

Creating an Action
Now you will create an action for that condition.

199 January, 2024


1. From the Select Action list, select Setting Style.
2. Specify the parameters for the action:
l Actions: SettingStyle.Status
l Field: DiscountPercent
l Status: Highlight
This way the action falls to the following: when the when the discount percentage is greater than the
set value, the Discount field is highlighted.

You can create an action for one or more fields.

1. From the Select Action list, select Setting Style.


2. Specify the parameters for the action:
l Actions: DisableColumns
l Field: DiscountPercent, DspUnitPrice
l Status: Highlight
This way the action falls to the following: when the when the discount percentage is greater than the
set value, the Discount and Unit Price fields will be highlighted.

You can also create one or more actions.

For the second action:

200 January, 2024


1. From the Select Action list, select DisableColumns.
2. Specify the parameters for the action:
l Actions: DisableColumns
l Column: SellingQuantity
This way the action falls to the following: when the discount percentage is greater than the set value,
the Discountand Unit Price fields are highlighted and the Order Qty field is disabled.

Testing the Rule

1. Select Preview to preview how the rule works in the application.


If the Application Studio hints you to create a layer, enter its Layer Name and Description and
select Save Layer.

l Enter a value that is greater than the set percentage in the Discount field. In this
example, enter a value that is greater than 8. Note how the Discount and Unit Price
fields are highlighted and Order Qty field is disabled.

201 January, 2024


When you create a rule that highlights something, the color will depend on the Status
type you select for an action.

l Red - Error
l Orange - Warning
l Green - Ok
l Blue - Highlight
2. Close the preview and save the rule.
The Rules List grid refreshes with the rule you created. Now, when you publish this
modification, this rule will be applied to the application among all others.

Copying a Data Rule


You can copy both system rules and user defined rules.

You can copy a rule in two ways:

l Select Copy from the overflow menu.

l Right-click a rule and select Copy.

202 January, 2024


You can find the copy of the rule in the Data Rules list.

Deleting a Data Rule


You can only delete user defined rules. System rules cannot be deleted.

You can delete a rule in two ways:

203 January, 2024


l Select Delete from the overflow menu.

l Right-click a rule and select Delete.

When you select Delete, you get a warning asking if you want to delete the selected items,
select Yes.

204 January, 2024


The rule gets deleted from the Data Rules list.

Enable and Disable a Rule


You can enable and disable a row rule from the overflow menu.

l To disable a rule, select Disable from the overflow menu.

l A message appears on the screen asking if you want to disable the selected row rule, select
Yes.

205 January, 2024


The row rule will be disabled, you will see the Disabled checkbox being selected.

l To enable a row rule, select Enable from the overflow menu.

l A message appears on the screen asking if you want to enable the selected row rule, select
Yes.

206 January, 2024


The row rule will be enabled, you will see no selection on the Disabled checkbox.

Cross Data View Rule


In Cross Data View rule, you apply an action on a data view other than the one you specified in
the Conditions.

For presentation purposes, you will use the Sales Order Entry form.

207 January, 2024


1. Open Sales Order Entry.

2. From the Overflow menu , select Application Studio:

Alternatively, you can press Ctrl + Alt + D.

3. Go to Rules .

4. Select New Rule .

208 January, 2024


5. In the Header section, enter the rule's name and description which will display in the
Rules List grid after you save it. A concise description helps you easier identify the rule
in the grid.
6. Select the following:
l Action Data View: OrderDtl
l Row Rule Criteria: Conditions

7. From the Select Condition list, select Condition.


8. In Data View, select OrderHed.
9. In Field, select DocTotalDiscount.
10. Specify the following parameters:
l Operator: Less Than
l Value/Field: Value
l Value: 7

11. From the Select Action list, select Setting Style.


12. Specify the parameters for the action:
l Actions: SettingStyle.ReadOnly
l Field: PartNum

209 January, 2024


When the discount percentage is lesser than the set value, the action runs and the
PartNum field in the OrderDtl data view is changed to Read Only.

Function Criteria
Due to its impact on performance and security, you cannot select functions for new data
rules. Any existing data rules with functions will continue to work as before and you edit
these data rules in Application Studio.

When you change the Function criteria to Conditions or No Condition and save the data rule, you
will no longer see Function in the Row Rule Criteria.

If a data rule has a function, you cannot copy it.

210 January, 2024


When you select an existing data rule with function, a warning appears in the problems panel located
at the bottom of the page.

Warning Message: Avoid using functions in the row rules which shall incur performance
of application

211 January, 2024


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.

212 January, 2024


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.

213 January, 2024


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.2,


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.

214 January, 2024


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

215 January, 2024


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


If you want your event to be triggered from another event:

216 January, 2024


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
canvas. On its properties, specify the ID of your event:

217 January, 2024


Overriding system events
Each application has a series of system events that run when users do certain actions. When a user
selects the Add button, the application adds a new record to the database and then the AfterGetNew
system event runs. Likewise when a user deletes a record, the AfterDelete system event runs. You
can create custom events that run before or after these system events.

However running your custom event before or after the system event may be difficult, as some
custom events may need the same parameters as the system event. You can resolve this by
creating a trigger that overrides a system event, replacing it with your custom event. Every place the
application calls the system event in your layer, your custom event runs instead. Use this feature to
design consistent event behaviors that run throughout your custom layer.

Be aware that when you override a system event, you will change the original event
flow of the application. Make sure your overriding custom event passes the same
parameters that the next event needs to run. If you do not define these parameters,
your override event may cause errors or unexpected results.

This example show how to override the AfterGetNew system event in Business Category
Maintenance. When this override event runs, it displays a toast message that verifies the user has
added a new business category.

1. Launch Business Category Maintenance and then Application Studio.


2. Create a new layer for the application, such as OverrideTest.

218 January, 2024


3. Go to the toolbar and select the Events button.

4. Create a new event that uses an Event ID you can find later, such as ce_OverrideMessage.
5. Select the trigger on the Event Diagram and go to the Properties panel.
6. Expand the Trigger node and define the following values:
l Go to the Type drop-down and select Event.
l Select the Hook drop-down and select Override.
l Go to the Target drop-down and select the system event you will override, such as
AfterGetNew.
7. Now add the event action or actions that will run, such as erp-message-handler. This event
action will display the toast message.

8. Enter the message text that will display when users add a new business category. Go to the
Properties panel.
9. Expand the Param node and enter the following values:
l Go to the Type drop-down and select Toast.
l Select the Level drop-down and choose info.
l Enter the Message that will appear, such as "You have successfully added a new
business category to the database."

219 January, 2024


10. Preview the layer.

11. The Landing Page displays. Press the Add button.


12. The Details page shows the new record. Your toast message appears, stating you have
successfully added a new business category.

Your custom ce_OverrideMessage event now runs instead of the AfterGetNew system event.

Allowing Interaction During Events


While a process runs, you can either allow users to continue using the application layer or
prevent them from working in it until the process finishes.

If you want the user to continue using the application layer while a process runs, select the
Allow interaction during events check box. This check box is on the Layer Details panel. If
you DO NOT select this check box, the application pauses until the process finishes its run:

220 January, 2024


You can control this on a specific event as well. This check box is also available for events on the
Trigger panel. If you select the Allow interaction during events check box on the trigger, the user
can continue using the application while the event runs.

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:

Learn what each event action does by hovering over it in the Toolbox > Actions panel. A Tool Tip
displays that explains its purpose.

221 January, 2024


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:

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.

222 January, 2024


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).

Defining the connector flow


While you create your event, you can define the conditional options that flow between event actions.
Do this on the diagram by selecting the line, or connector, that links each event action. Define flow
options for the connecters such as Success, Ok, True, False, and so on. The available flow options
you can select depends on the starting, or source, event action at the beginning of the connector.

1. Select the connector between two event actions.

2. Go to the Properties panel and expand the Behavior node.


3. Go to the Select a connector drop-down and select a flow option. The connector between
these event actions has the Success, Error, and Empty flow options.
4. Depending on the source event action, you may have more flow options on the Properties
panel, such as Empty, Ok, Yes, and so on. However not all of these flow options will work in
the target, or receiving event action. For example, if the source event action is an erp-message
handler and the target event action is a condition, this condition event action can only process

223 January, 2024


the Success, Error, and Empty flow options.

5. As another example, a source condition event action has limited connector flow options.
Select the connector that flows away from a condition event action.

6. When you go to the Properties > Behavior node, you now have the True and False options.
7. Remove and add connectors between event actions. Remove a connector by selecting it and
pressing the delete icon.

224 January, 2024


8. Now select the event action.

9. Click the blue dot on the event action and drag a connector to the next event action in the flow.
10. Go to the Properties panel and expand the Behavior node.

11. Go to the Select a connector drop-down and select the flow option you want for the new
connector.

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.

225 January, 2024


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:

226 January, 2024


Disabling Events
Disable an event to stop it from running its actions. The system then skips the event. Do this to
troubleshoot errors, debug a layer, or to shut off obsolete events. This feature disables the event
during both preview and run-time modes.

You cannot disable system events and other locked events. You can only disable custom events
within layers.

To disable an event:

227 January, 2024


1. Select the Events button.

2. Find the event you wish to disable. It displays on the design canvas.
3. Select the Disabled check box.
Now when you test the layer, this event no longer runs. The log displays an Event <Event Name> is
not executed since it is disabled message.

Restore the event by displaying it again on the design canvas. Then clear the Disabled check box.

228 January, 2024


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).

229 January, 2024


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 data view available in system base applications and their custom layers. You can
create and store variables in this data view, and these variables then run during each user session.
Use these variables in data rules, access them in event conditions, or pass them as REST
parameters. You can also use this data view for any on-the-fly defined columns. Some example
variables:

l TransView.dtFrom
l TransView.dtTo

KeyFields
KeyFields is a system data view that runs when two or more key fields must trigger an event to
retrieve a record. This event trigger occurs when users leave the last field to change 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

230 January, 2024


This data view contains all available constants, including BAQ constants. Here's the full list of
available fields:

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

231 January, 2024


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.

232 January, 2024


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:

The Data column contains properties that define the in-memory dataset handled by the application:

233 January, 2024


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 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

234 January, 2024


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.

235 January, 2024


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
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:

236 January, 2024


l For CCPayment, the filter is set to IsCreditPayment = true:

l For CashDtl, this filter is set to false:

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

237 January, 2024


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.

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:

238 January, 2024


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 .

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:

239 January, 2024


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.

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.

240 January, 2024


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.

241 January, 2024


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:

242 January, 2024


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.

243 January, 2024


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

244 January, 2024


LandingPage 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.
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.

245 January, 2024


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.
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.

246 January, 2024


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:

To do this:

247 January, 2024


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:

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.

248 January, 2024


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 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
currency exchange rate changes in an external application, an Automation Studio recipe can then
update this currency exchange rate within the UD Service data.

249 January, 2024


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.

250 January, 2024


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.

251 January, 2024


6. The UD Service Designer displays.

252 January, 2024


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.

3. Service Designer Tree View:

253 January, 2024


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.

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.

254 January, 2024


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.

255 January, 2024


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

256 January, 2024


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

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

257 January, 2024


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.

258 January, 2024


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.

259 January, 2024


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.

The name of service looks like this: Ext.Services.BO.MyNewService

260 January, 2024


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.

261 January, 2024


Reviewing the User-Defined Service
When you generate a User-Defined (UD) service, it contains all the standard methods for interacting
with the database, such as GetNew, GetById, Update, and so on. It also includes the standard
business rules that enforce database integrity.

This help article explores the user interface (UI) application structure of a UD service. Leverage this
information to understand what items the service includes so you can better customize the
UI application to handle your business needs.

While Epicor Support can regenerate the service as you need, the Service Designer
only creates the UI application the first time you generate the UD service. This makes
sure that the updated service DOES NOT override any customizations and other
changes you made within Kinetic. If you need to regenerate the UI application, you
must first delete the UI application within Application Studio before you generate it
again within the Service Designer.

Table Structure
When you generate a UD service, it contains the basic functionality it needs to run within Kinetic. It
has two datasets, one for the main table and then another for the list table. The base service includes
the SysRevID and the SysRowID columns for the main table. It also has the SysIndex key field
column. This column is the primary key for the service, as by default it uses the SysRowID to identify
the key. If you need more key fields, add key field columns to the service before you generate it.

262 January, 2024


Launching the UI Application
After you generate the UD service and Epicor Support regenerates the data model and stops/starts
the application pool, you can access the UD service within Kinetic. Do this by using Application
Studio. The generation process creates a unique UI application for your service that you can
customize.

To begin customizing the UD service:

1. Launch Application Studio Homepage.

2. Your service displays as a base layer on the Landing Page. It has an Application ID and a
Layer Name. The service also has the Published status. The Published status means that you
can place this base layer on the menu.

3. Select the Base link.

4. The Modify Designer dialog displays. As a best practice, create a custom layer instead of
modifying the base layer. You can then always return to the base layer if a custom layer has
issues. Select Use Layer.

5. This launches the user-defined service within Application Studio. Select the
<NewLayer> link.

263 January, 2024


6. The Layer Selection panel slides on. Enter the Layer Name for the new custom layer.

7. Now enter a Description that briefly describes the purpose of the new layer.

8. Select the Save Layer link.

You can now customize the user interface for the UD service.

Exploring the User Interface


The base UI application generates with the following features:

1. The Application Map displays three items. There is a Landing Page, a Base Entry card, and
a Details page.

264 January, 2024


2. The Landing Page has at least one key field (Key1). Other key fields may display here if you
added them in the UD Service Designer.

3. The Details page displays an entry field for Key1 in the Detail card.

265 January, 2024


4. Select the Run button to launch a preview of the UI application.

5. The base user interface has the Filter and Search fields for the Landing Page.

6. The Landing Page has a grid that displays the current list of records.

7. Create new records on the Landing Page by selecting the Add button.

8. Filter records on the Landing Page grid by selecting the Funnel button.

9. Select a record link on the Landing Page to display the Detail card.

10. The base Detail card has the Crumb Bar in the top left so users can navigate to different levels
in a record. The base UI application has one level. If you add more levels to the UI application,
they appear on the crumb bar. Users can then select each link on this bar to display a different
level of the record.

266 January, 2024


11. The Detail card has the primary Key1 entry field.

12. You can create new records by selecting the Add button.

13. Click the Save button to save records you enter through this UI application.

14. The Overflow menu contains the primary menu options such as Delete, Refresh, Clear, and
so on.

This base user interface gives you the building blocks for your UI application. Leverage Application
Studio to add more pages and components that you need on the user interface.

Reviewing Base Events


The UD service generates with the events the system requires to run the UI application.

1. Select the Events toolbar button to review these base events.

267 January, 2024


2. The UI application contains the base Control click events for adding, updating, and saving
records:

l OnClick_toolClearUI

l OnClick_toolDelete

l OnClick_toolNew

l OnClick_toolRefresh

l OnClick_toolSave

l OnClick_toolSearch

3. The UI application has the Grid event, Onclick_grdLandingPage, for selecting the Landing
Page grid.

4. The UI application also has the DataTable event, ColumnChanging_Key1, that handles data
entry changes within the Key1 field.

5. The default EpBinding events links GL accounts, balances, segments, and the Key1 field to
the database.

268 January, 2024


If you need more events, create custom events within Application Studio. For example,
the base service only has events that handle the Key1 field. If you need more key fields,
create the events that access these key fields.

More Customizing Tools


You further customize this service using the following Kinetic tools.

l Application Studio - Use this design environment to create applications and processes to fit
your business needs. Create a user interface for a UD service and then build events, data
rules, dataviews, and other items that interact with it. Review the Welcome to Application
Studio help article to start learning about this primary development tool.

l Automation Studio - Epicor Automation Studio, powered by Workato®, connects Kinetic with
external cloud-based tools that help you automate business workflows across cloud and on-
premises applications. Do this by creating recipes that integrate with your database. Start
learning how to create recipes by reviewing the Using Automation Studio help article.

l BAQ Designer - Design business activity queries (BAQs) that pull data from a UD service for
display in custom grids, dashboards, and BAQ reports. You create queries in the Business
Activity Query (BAQ) Designer. Review the Working with Business Activity Query (BAQ)
Designer help article for more information.

l Epicor Functions Maintenance - Create new methods (functions) for a UD service through
this tool. While the UD Service Designer generates the base methods, you may need these
additional methods to run a business task. Learn more about Epicor Functions Maintenance
by reviewing the Classic help system.

l Business Process Management (BPM) - Create method and data directives that cause
default values to populate fields, make specific fields mandatory, and so on. To find the
methods created for the UD service, search for User-Defined methods. Learn more about
Method Directive Maintenance and Data Directive Maintenance by reviewing the Classic help
system.

l Extended Properties Maintenance - Through this application you define additional, or


extended properties for selected fields within the UD service tables. Define Like tables, BAQ
Zones, and other properties using Extended Properties Maintenance. Read the Defining
Extended Column Properties help article for more information.

l Field Security Maintenance - Use this application to define security privileges for the fields
within the UD service table. Limit access to specific fields by restricting and granting access to
selected users and security groups. Review the Maintaining Field Security help article for
details.

269 January, 2024


l Menu Maintenance - After you finish developing the UI application for the UD service in
Application Studio, make it available to users in your environment by adding it to the menu
through Menu Maintenance. Learn more by reading the Working with Menu Maintenance
help article.

l Solution Workbench - When you are ready to install the UD service in your live environment,
package the UD service and its functions, method directives, queries, and other items into a
solution file. You create solution files using the Solution Workbench. Learn more about this
application by reviewing the Classic help system.

270 January, 2024


Selecting Security Codes for User Defined
Applications
You can define how users access the custom application's base layer by assigning a Security Code.
If you are a member of the security group assigned to this application, with your account level setting
that allows you edit the base layer, you then get the access to edit the base layer where the security
code was added.

If you do not have the required access at your account level setting, you will not be able to edit the
base layer even if you are a member of the security group assigned to this application.

This feature is only available on user defined applications and not available on system
applications.

A user with Security Manager access and the creator of the application can now add or edit the
security code on the base layer.

In the custom application's base layer, use the sliding panel on the right to edit the properties. You
will now see a hyperlink on Properties, below the application name.

When you click Properties, the Application Properties panel slides in, which displays the
Application Name and Base Access Sec Code.

271 January, 2024


When you select the arrow on the Base Access Sec Code, a combo box with Security Code and
Description displays. You can select only one security code.

272 January, 2024

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy