Kinetic AppStudioUserGuide
Kinetic AppStudioUserGuide
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.
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
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
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
4 January, 2024
Differentiate System applications and custom applications 176
Components Overview 178
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
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.
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.
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:
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.
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.
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.
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.
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:
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.
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.
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).
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.
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.
18 January, 2024
4. Select Create Layer.
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:
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.
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.
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
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.
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.
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.
25 January, 2024
Click on the Landing Page icon to display the Customer Page properties in the
right pane.
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.
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.
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
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'.
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.
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.
39 January, 2024
1. Go to the Application Map.
2. Select the Landing Page for the application, such as ABC Code Maintenance.
40 January, 2024
7. The properties for the page display, including Caption and Page Type.
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.
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.
45 January, 2024
10. Change their Minimum Width values to 50%. The group boxes display side by side.
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.
46 January, 2024
3. Click on the Billing Page and click Add.
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.
7. Add a few controls to your Page. For example, add a Panel Card and a Button control.
48 January, 2024
10. Select a customer record. Your new Page is now part of the Application Map.
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.
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.
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.
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.
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.
55 January, 2024
3. Select <New Layer> .
The Layer Selection panel opens.
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.
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.
58 January, 2024
5. The Log populates with the calls the application made to the system to run the action.
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.
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.
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.
16. The Preview tab refreshes with your change. You can then test the change within the preview.
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
},
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.
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.
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.
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
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.
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.
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.
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.
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.
80 January, 2024
Modified.
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.
82 January, 2024
snapshots on the fly.
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.
84 January, 2024
l Dump rule actions - epDebug.ruleActions
Dumps all data rule results in a tree-view format.
To activate debugging for the desktop smart client, edit your local Kinetic.sysconfig file.
85 January, 2024
2. Add these tags to the sysconfig file after the HomePageUrl.
<DisableSPA value="False" />
<LaunchEOBrowserDebug value="true"/>
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!
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.
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.
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 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.
Create this XML file using a text editor such as Notepad or a similar application.
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:
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.
l Key Fields views not used for key fields in the Kinetic equivalent
Some classic customization elements cannot be converted by the process, such as:
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.
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.
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
98 January, 2024
Alternatively, you can press Ctrl + Alt + D.
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..
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).
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
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.
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.
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.
You are now ready to build your solution (.cab file). For more information on the
remaining controls, see the Solution Workbench help topics.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Application Map displays pages and layout based on the application type
you selected.
his functionality is available only if you install the Software Developer Kit (SDK)
licensed.
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:
9. Go to the Components tab. The component you added appears in the grid. You can edit it
whenever necessary.
1. From the main menu, go to Material Management > Inventory Management > General
Operations > ABC Code.
3. In the Layout designer , go to Toolbox > User Defined. There you can see the
component you created.
To learn about each step within this wizard go to Working with the Basic Application
Wizard.
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.
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.
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.
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.
1. The Grid details step displays. The Data View Name shows the name you entered for the
data view in the previous wizard step.
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.
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.
10. Enter a Filter Value of False. When users select this view, only active suppliers will display in
the parent grid.
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 Operator - = (Equals)
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.
3. The Fields grid shows you the fields from the data view available for display.
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.
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.
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.
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.
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.
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.
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.
3. The Fields grid shows you the fields from the data view available for display.
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.
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.
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.
You will also see validation messages about the error, where it occurred and what needs to be
corrected.
6. Select Finish.
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.
6. Scroll down to review the form cards. The Supplier form card displays parent
information for the selected supplier.
Select the Refresh All option from the overflow menu of the basic application to refresh
the grids and form cards all at once.
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.
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.
l Operation -- LIKE
l Filter Value -- %-c% constant (select specified constant and enter %-c%)
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
6. Select Save.
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.
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.
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:
Do the following:
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.
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.
A warning message is displayed. You can only delete apps/layers if you are authorized to delete.
If the delete operation fails, a validation message will appear inside the grid indicating that the user is
not authorized to delete.
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.
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:
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).
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.
3. On the Properties panel, expand the Advanced group and scroll down to the Enable
FullScreen check box and select it.
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.
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.
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
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.
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.
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 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.
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.
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:
For example, use the On Click hook to automatically create an event that will be triggered by a click
on this button:
Data
Includes properties related to data binding - EpBinding. Read more about component binding in
Setting Up Data Binding.
State
Includes properties that define component state - Hidden, Disabled, ReadOnly, etc. as well as
Personalizable and Customizable properties enabled by default.
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
Whereas, a Panel Card Grid would have View Options, Action Data, etc. under this group.
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.
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.
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.
3. Go to Rules .
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.
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.
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.
When you select Delete, you get a warning asking if you want to delete the selected items,
select Yes.
l A message appears on the screen asking if you want to disable the selected row rule, select
Yes.
l A message appears on the screen asking if you want to enable the selected row rule, select
Yes.
For presentation purposes, you will use the Sales Order Entry form.
3. Go to Rules .
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.
Warning Message: Avoid using functions in the row rules which shall incur performance
of application
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.
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.
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.
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:
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:
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.
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."
Your custom ce_OverrideMessage event now runs instead of the AfterGetNew system event.
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:
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.
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.
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.
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.
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:
You cannot disable system events and other locked events. You can only disable custom events
within layers.
To disable an event:
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.
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.
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).
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
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
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.
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:
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.
The Data column contains properties that define the in-memory dataset handled by the application:
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
l Server Schema - defines the data source: ERP/ICE service method dataset or Business
Activity Query (BAQ) results dataset.
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.
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.
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.
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.
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:
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.
Adding columns
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.
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:
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.
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:
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.
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.
You can also load data from grid provider model - service, BAQ, or Function - into a bound data view.
Here's how you can load data into a data view from this grid:
2. In the Ep Binding field, enter the ID of the view you wish to bind this grid to - for example:
PartDetailsView:
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).
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.
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.
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.
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.
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.
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.
To do this:
2. Do not change the trigger settings and got to Toolbox > Actions.
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.
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.
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.
2. Log in with a user account that gives you access to the system tools.
a. File - Use this menu item to create, save or delete services and service components, or
to exit the program.
c. Table tab - Contains Detail, List, Column, Link, and Key sheets.
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.
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.
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.
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.
8. On the List table step, accept the default settings and click Next.
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.
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.
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.
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.
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.
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.
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.
7. Now enter a Description that briefly describes the purpose of the new layer.
You can now customize the user interface for the UD service.
1. The Application Map displays three items. There is a Landing Page, a Base Entry card, and
a Details page.
3. The Details page displays an entry field for Key1 in the Detail card.
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.
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.
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.
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 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.
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.
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.