Kinetic AppStudioExtensionsUserGuide

Kinetic Application
Studio Extensions User

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

Add Job Status Check Boxes 11
Add View Options 15
Create Data Rules 19
Test the Results 22
Skip Landing Page 24
Sliding Panels Overview 30
Creating In-App Sliding Panels 31

Creating a sliding panel layout 31
Adding an action button to a panel card 34
Configuring an event to display the sliding panel 35
Testing the layer 37
Creating Reusable Sliding Panels 40
Widgets Overview 42
Adding a Data Discovery Card to a Kinetic App 46
Adding a Data Discovery Chart to a Kinetic App 50
Adding a Website Widget 53
BAQ Reports Overview 56
Modifying the BAQ Report Submission Form 57

Modifying the BAQ Report Application Layout in Application Studio 57
Updating Report Definition 58
Working with Dashboards 59
Converting Dashboards into Kinetic 60

Generating New Kinetic Dashboards 60
Regenerating all Dashboards 61
Modifying Kinetic UX Dashboards 63
Generating Dashboard as a Kinetic UX Application 63
Adding Kinetic Dashboards to the Main Menu 66
Launching the Dashboard in Application Studio 68
Customizing a Dashboard Layout 69
Adding a View Option to a Grid 76
3 January, 2024
Introduction to User-Defined (UD) Forms 81
Scenario Overview 82
Adding Menu Item for the UD05 Entry 83
Modifying Service Agreement Maintenance 85
Deploying SA Maint XXX Layer 89
Adding UD Field to OrderHed Table 90
Regenerating Data Model 93
Defining Extended Properties for the UD Field 95
Adding Service Agreement Records to Database 97
Adding a Combo Box with Service Codes to Order Entry 99
Deploying Layer and Testing Configuration 103
Calling Functions from Kinetic Apps 106
Scenario Overview 107
Defining UD Codes for Part Subtypes 109

Creating User-Defined (UD) Codes for Different Types of Soap 109
Adding a UD Field to the Part Table 111
Add the Part_UD Table to the Data Model 113
Adding a Combo Box to List UD Codes in Part Maintenance 116
Adding a New Component to the Application UI 116
Creating a Menu Item for the Modified Application 120
Defining Subtypes for Parts in the Demo Database 121
Creating an Event That Launches a Website 124
Adding a Button to Trigger an Event 124
Adding an Event to Launch a Website 125
Disabling the Button for Selected Soap Types 128
Previewing the event 129
Adding the Soap Type Field to Part Advisor 130
Adding a Rule to Highlight Fields for the Selected Part Subtype 134
Adding a Panel Card with Additional Part Info 137

Adding a Panel Card Grid Component to the UI 137
Binding the Grid to BAQ and Adding Grid Columns 138
Configuring View Options for the Grid 140
Deploying the Part Advisor Configuration 142
Creating a Menu for the Modified Part Advisor 142
4 January, 2024
Reviewing Part Maintenance and Part Advisor Configurations 143
5 January, 2024
Application Studio Extension Guide
Welcome to the Application Studio Extension Guide

This guide explores the features that add more usability to your customizations. They extend your
customizations. It begins by showing you how to modify landing pages that show more targeted
results. It then examines how to add in application sliding panels and reusable sliding panels.
Widgets display specific sets of data that enhance the information users see on your customizations.
Then this guide shows you how to customize both BAQ Reports and Dashboards. You can add
layers onto these items to further define what information they gather and display.
You add user-defined tables to extend the data each table contains. Use these tables to supplement
existing database tables with additional information for your business area or industry. Functions
give you the ability to define the service, method and parameters you wish to expose dynamically
that you can then run in your custom layers.
The guide ends by walking you through a complex customizations.
6 January, 2024
Simple Landing Page Modification
When you launch an application, you are typically presented with the Landing Page. The records are
either sorted alphabetically (Customer Entry) or by date (Sales Order Entry). You can scroll through
the grid to view important details about each record, select a record to view its details or invoke the
Search panel to look for specific records.
In this example, we will enhance the initial application experience by removing a couple of columns,
adding a new column and creating a data rule to highlights specific records.
We will use Order Entry in this example. Assume you don't require the PO and Bill To Customer
Name columns to appear on the Landing Page grid. Also, you would like add a column displaying
total order amount.
1. From the main menu, go to Sales Management >Order Management > General Operation >
Order Entry.
2. From the Overflow menu , select Application Studio.
7 January, 2024
3. Let's define a new layer first. Press <NewLayer>.
4. Enter a Layer Name, such as LandingPageGrid and press Save Layer.
5. On the Application Map, select the Sales Orders Landing Page and press Edit.
6. Click anywhere inside the grid and select the Properties tab.
7. Select Data > Grid Model > Columns.
8. From the list, select the PO column and press Delete.
9. Repeat step 8 to remove the BTCustNumName column.
10. Now add a new column displaying total order amount. Press Add Column and enter the
below properties:
8 January, 2024
l Field - DocOrderAmt
l Title - Order Amount
11. Save the layer.
Data Rules are simple, yet powerful tools to create data-driven behaviors such as changing a color,
disabling a field, or setting its default value. We will create a data rule to highlight all open orders on
the Landing Page grid, so they are easily identified.
1. From the Sidebar, select Data Rules and press Add New .
2. In the Header section, enter or select the following:
l Name - LandingPage
l Description - Highlight Open Orders
l Action Data View - LandingPage
l Row Rules Criteria - Conditions
3. Press Select Condition > Condition and specify the following:
l Data View - LandingPage
l Field - OpenOrder
l Operator - Equal
l Value/Field - Value
l Value - True
4. Now create an Action. Press Select Action > Setting Style and specify the below parameters:
l Actions - SettingStyle.RowStatus
l Status - Highlight
9 January, 2024
5. Save the layer. Verify the data rule looks as follows:
6. Preview the layer.

The PO and Bill To Customer Name columns no longer display on the grid. Instead, the Order
Amount column showing total amount of each order is now part of the grid. The data rule we
created highlights all open orders in the grid.
At this stage, you are ready to publish this layout and make it available to all users. For more
information, see Adding a Layer to the Menu.
10 January, 2024
Using Quick Filters
In this scenario, we will make changes to the Job Entry Landing Page. By default, the application
enables switching between All, Firm and Unfirm job views. To narrow down search results, users can
launch the Search panel and filter jobs by Type, Status, Project ID and so on.
We will modify the Landing Page experience in a way that users can directly switch between Job
Types (Manufacturing, Project and Service) and Job Statuses (Firm, Engineered, Released,
Completed and Closed). The grid results will automatically respond to the selected criteria.
You can implement this concept in other Kinetic applications as needed. For example,
filter sales orders by Order Type, Sold to Customer and so on.
Add Job Status Check Boxes

We will start by adding check boxes to filter jobs by their status.
1. From the main menu, go to Production Management >Job Management > General
Operation > Job Entry.
11 January, 2024
2. From the Overflow menu , select Application Studio.
3. Let's define a new layer first. Press <NewLayer>.

4. Enter a Layer Name, such as LandingPageFilter and press Save Layer.
5. On the Application Map, select the Jobs Landing Page and press Edit.
The Jobs page layout displays.
12 January, 2024
6. In the Toolbox, search for the Check Box and place it to the right of the Job Num search box.
7. Select the check box and go to Properties. We will add basic identifiers for the check box and
bind it to a TransView column.
TransView is an EpDataView you can use to append columns on the fly as

needed, to store variables which can be used in row rules, accessed in event
conditions or passed as rest call parameters.
Add the below information:
l Id - chb_Firm
l Label Text - Firm
l EpBinding - TransView.Firm
13 January, 2024
8. Repeat steps 6 - 7 to add additional status check boxes.
Id Label Text EpBinding
chb_Engineered Engineered TransView.Engineered
chb_Released Released TransView.Released
chb_Completed Completed TransView.Completed
chb_Closed Closed TransView.Closed
Your layout should look as follows:
14 January, 2024
9. Save the layer.
Add View Options

In this step, we will create four different representations of the data returned by the service call.
Users will be able to quickly switch between them using a combo box selector in the grid header. A
status of each check box will be included in service call input parameters.
1. First, let's take a look how the landing page gets populated with data. Click anywhere in the
grid and select Properties.
2. Select Data > Grid Model > Provider Model.
The application makes a REST (Representational State Transfer) call to the
Erp.BO.JobEntrySvc (Svc), calls the GetList method (SvcPath) and provides input parameters
(RestParams). We will make a call to this service in the views we create.
3. Select metafx-panel-card-grid, scroll down and expand the Advanced category.
15 January, 2024
4. Press View Options and remove all existing views.
5. We will first create a view that displays all jobs regardless of their type. Press and enter the
below:
l Ep Binding - LandingPage
l Description - All
l Svc - Erp.BO.JobEntrySvc
l SvcPath - GetList
6. Now we will add REST call parameters. In the Rest Params property, press Edit to invoke
JSON Editor and enter the below clause:
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobReleased = ??
{TransView.Released} and JobEngineered=??{TransView.Engineered} and JobFirm=??
{TransView.Firm} and JobComplete=??{TransView.Completed} and JobClosed=??
{TransView.Closed} BY JobNum DESC"
}
Notice we are passing EpBinding values of our newly created check boxes to call parameters,
e.g. JobReleased = ??{TransView.Released}.
16 January, 2024
The JSON Editor entry should look as follows:
Note on the where clause syntax:
The where clause functionality in query-based grids supports SQL comparison

operators, like =, <, or >, and BAQ constants, like Today, Tomorrow, or
CurrentCompany, etc. Advanced SQL functions are not supported.
A single question mark prefixing the field value means that a REST request will
go through only if the value is NOT empty or null. For example, OrderNum = ?
{OrderHed.OrderNum}.
A double question mark prefixing the field value means that a REST will go
through even if the value is empty or null. For example, CustNum = ??
{Customer.CustNum}.
Values of string data type (including constants) are put in single quote marks. For
example, CustID = '??{Customer.CustID}' or ReqDate > '??
{Constant.Yesterday}'.
7. Lets' make the All view default, scroll to the bottom and enable the Set Default check box.
8. Press to create a view displaying Manufacturing jobs by including JobType='MFG' in the

rest call parameters.
l Description - Manfucturing
17 January, 2024
l SvcPath - GetList
l Rest Params -
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobType='MFG' and
JobReleased = ??{TransView.Released} and JobEngineered=??{TransView.Engineered}
and JobFirm=??{TransView.Firm} and JobComplete=??{TransView.Completed} and
JobClosed=??{TransView.Closed} BY JobNum DESC"
}
9. Press to create a view displaying Project jobs:

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

l Description - Service
l SvcPath - GetList
l Rest Params -
{
"whereClause": "Plant = '?{Constant.CurrentPlant}' and JobType='SRV' and
}
11. Save your layout.
18 January, 2024
12. Verify the newly created views display on the list.
Do not preview the layer at this stage and proceed to the following task to define the
expected application logic.
Create Data Rules

Lastly, we'll create several data rules to control logic of job status check boxes. For example, we
want to disable selecting closed jobs that were not completed.
1. We will first create a rule to display active jobs by default. We do this by setting Firm,
Engineered and Released check boxes to true and making Completed and Closed check
boxes clear. From the Sidebar, select Data Rules and press Add New .
2. In the Header section, enter or select the following:
l Name - LP_InitFilters
l Description - Initial Filters
l Action Data View - TransView
l Row Rule Criteria - No Condition
19 January, 2024
3. Create an Action. From the Select Action menu, choose Set Value and enter the below:
l Actions - SetColumnValue
l Field - Firm
l Value/Field - Value
l Value - True
4. Repeat step 3 to set default statutes of the remaining check boxes.
Actions Field Value/Field Value
SetColumnValue Engineered Value True
SetColumnValue Released Value True
SetColumnValue Completed Value False
SetColumnValue Closed Value False
5. Additionally, we'll disable the Closed check box. In the next step, we will create another rule to
allow selecting this check box only when certain condition is met. From the Select Action
menu, select Disable and enter the below:
l Actions - DisableColumns
l Column - Closed
6. Save the layout. Your rule should look as follows:
20 January, 2024
7. Now, create a rule to disable selecting Closed jobs, unless there were Completed.
8. Now create a rule to disable selecting Released jobs, unless they are Firm or Engineered. Be
sure to select OR operator between the conditions.
21 January, 2024
9. Lastly, create a rule to disable displaying Completed and Closed jobs, unless their status is
Firm, or either Engineered/Released (group condition).
10. Save the layout.
Test the Results

1. Select Preview.
2. By default, the All view by displays, and you can select different views from the drop-down list.
3. Notice you are presented with active jobs by default. Select different views and job statuses
and observe how results change.
22 January, 2024
At this stage, you are ready to publish this layout and make it available to all users. For more
information, see Adding a Layer to the Menu.
23 January, 2024
Skip Landing Page
When you launch an application, you are first presented with the Landing page which populates the
grid with records, such sales orders, quotes or parts.
In some cases, you may want to you may want to modify this user experience. For example, when
your company maintains thousands of part records, you may want to skip the Landing page. Instead,
you want to present users directly with the Details tab, where they can create or select an existing
part they need to work with.
In this example, we will use Part.
1. From the main menu, go to Production Management > Job Management > Setup > Part.
2. From the Overflow menu , select Application Studio:
Alternatively, you can press Ctrl + Alt + D.
3. We will start by creating a new layer. Press <NewLayer>.
24 January, 2024
4. Enter a Layer Name, such as SkipLanding and press Save Layer.
5. On the Application Map, select the Part Maintenance Landing Page and press Edit.
The Part Maintenance page layout displays.
6. Click anywhere inside the grid and select Properties.

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

l Description - Empty
l Client Filter - 1=0
25 January, 2024
Using the clause "1=0" ensures no data is sent back to minimize the response
payload.
9. We want this view to automatically load on application start. Select the Set Default option at
the bottom.
10. Now that we created a new view option for the grid, we need to modify the existing one. From
the View Options drop-down, select All.
11. Scroll to the bottom and clear the Set Default option.
12. We will now create an event to open the Main page (shown in step 5). It will run right after the
system Form_OnLoad event. From the sidebar menu, open Events and press to add
a new event and configure it like this:
26 January, 2024
l Rename the event to NavigateToMain.
l Select the No Trigger widget on the design canvas and edit its properties:
o For Type, select Event.
o For Hook, select After.
o In the Target field, choose Form_OnLoad. This event will run immediately after
the system Form_Onload event.
l From Toolbox, select the page-navigate-to action and add it to the workflow.
l Select the action widget to open its Properties. Press Parameters and in the Page
parameter, enter Main.
13. Save the layer and from the Overflow menu, press Publish. Exit Application Studio and Part.
14. Now we need to deploy the layer to other users in the company. In the smart client, go to
System Setup > Security Maintenance > Menu Maintenance.
Note the following about deploying Kinetic customizations:
l Kinetic customizations can be attached to Kinetic application menus only.

l For new Kinetic customers, Kinetic forms (menus) are enabled by default.
l For on-premise customers upgraded/migrated from previous releases of
ERP to Kinetic, usage of Kinetic forms is optional.
If you were to apply Kinetic customization to an existing menu which is not
Kinetic App type, you need to create a new menu instead.
15. In the tree view, expand Production Management >Job Management > Setup and select
Part.
27 January, 2024
16. Press Customization. Select the layer you created earlier and move it to the Selected
customizations column by using the Right Arrow button.
17. Save the record and exit Menu Maintenance.
28 January, 2024
18. We are now ready to test the behavior. Launch Part, observe the Landing Page is skipped and
you are taken to the Details tab.
29 January, 2024
Sliding Panels Overview
Slide-out panels are typically used for showing info, warning, or error messages to a user in a dialog
format. They can also be used to display additional context-specific information.
Sliding panels can be of two different types:
l In-App
In-App sliding panels are created in an application as standalone pages that you invoke at
runtime by triggering an event. They are specific to that application and cannot be run from
other applications.
l Reusable
Reusable sliding panels are standalone applications which are referenced and run from within
other applications to provide common functionality across multiple applications. Sliding panels
of this type are designed independently from other applications, then referenced and used.
You can create, edit, and add layers on reusable sliding panel applications in Application
Studio to enable code reuse of common dialog-like behavior and other forms across
applications.
30 January, 2024
Creating In-App Sliding Panels
In this example, let us add a sliding panel to the Customer Shipment Entry application. It will be
triggered by a button click and will display the Ship To location on the embedded Google map.
You can design the sliding panel layout using any available or user-defined components, and
widgets. In this example, we are going to add a Website Widget to the slider. We will inject the value
of the ShipHead.ShipTo AddressFormatted field as a query string into the Google Maps search
URL. Google Maps displays an embedded map only if it finds a complete match for the search string,
meaning this scenario will work for real customers, and most likely not for sample ones shipped with
the educational DB - for example, Addison, Dalton, etc.
Creating a sliding panel layout

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

l In the Caption field, enter Ship To Location.
l Finally, from the Page Type drop-down, select SlidingPanel.
When you select the SlidingPanel page type, the page disconnects from
the navigation tree and moves to the separate Slide Out Panels container.
l Scroll down and select the CollapseOnOutSideClick check box to make your panel
collapse when you click anywhere on the screen outside the panel.
31 January, 2024
5. Select the Ship To Location page in the Slide Out Panels section and click Edit .
The page layout displays.
6. You can use the Width Types field in the page caption properties to set the default width for
the panel. For this example, let's keep it Small.
7. On the Toolbar > Components tab, select the GroupBox component and drag it to onto the
canvas.
You can add the following container-type components to the sliding panel layout:
Panel Card, Panel Card Grid, or GroupBox.
8. In the GroupBox properties, remove the default Label Text and keep this field blank.
9. Now, go to the Widgets tab. Add a Website widget into the GroupBox.
32 January, 2024
10. Select the widget on the sliding panel layout and open its properties.
11. Change the default title to Map.

12. Insert the following URL into the Url field:
https://maps.google.com/maps?t=&z=13&ie=UTF8&iwloc=&output=embed&q=
{ShipHead.ShipToAddressFormatted}
33 January, 2024
You use curly brackets to inject EpiBinding value into a URL. In this example, we
use the current data view field value for a Google search query parameter. The
first part of the URL up to the q parameter is standard Google Maps boilerplate
for search.
13. Set Width to something like 550.

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

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

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

4. Add a Description - for example, Show the ship to location map on tool icon click.
35 January, 2024
5. Select the No Trigger widget on the design canvas and configure it like this:
l From the Type drop-down, select Control.

l For Hook, select On Click.
l In the Target field, type in the Action ID - ToolShowMap.
6. Go to the Toolbox > Actions tab and select the slider-open action..
The trigger automatically connects to the newly added slider-open widget.
36 January, 2024
7. Select the slider-open widget and edit its properties.
8. Expand the Basic property group and open Parameters section,; then in the Page field, enter
the sliding panel ID - ShipToLocationPanel.
9. Save the layer.
Testing the layer

You can test your new slider in the Preview Mode of Application Studio, or by your layer to the menu.
37 January, 2024
1. Select a Pack ID whose status is Open.
2. In the Details panel card, select Show on Map in the overflow menu.
When you select the Show on Map icon in the overflow menu, the Ship To location is
displayed on the embedded Google map.
38 January, 2024
39 January, 2024
Creating Reusable Sliding Panels
Reusable sliding panels are separate applications that can be added as a child view to another
parent application. To create a reusable panel, you can use an existing application or create a new
one.
Creating new applications requires an SDK license.
These are the basic steps for setting up a reusable sliding panel in an application:
1. Create a new application or use an existing one. Note its application ID. It consists of a
standard prefix - for example, Erp.UI., and a unique ID - for example, Erp.Ui.PartInfoLookUp.
2. In the parent application - for example, Sales Order Entry, create a new event triggered, for
example, by a button click. The button can be something like Show Part Info.
3. In the Event Editor, go to Toolbox > Components and add an app-open action to the event
workflow.
4. Set up Param properties for the app-open action:
l In the View field, type in the child's application view ID - for example,
Epr.UI.PartInfoLookUp.
l Use the Layer field to specify any modifications you want to apply against this child
view.
l Select the SlideOut option to make the child application slide out and not open in a new
window.
l The next eight fields - OnOk, OnCancel, etc. are used for processing data returned from
the child app. You will get back to them after you set up the closing event in the child
application.
l Use the ValueIn field to specify input parameters you want to pass into the child app. In
the JSON EDITOR, use this syntax to specify a dynamic parameter you are passing: {"
[ParamName]" : "{[DataView.Column]}. For example, {"Filter1" : "
{JobHead.PartNum}"}.
5. If you are passing data from the parent app, in the child app, add an event with an row-update
action in the Event Designer (Toolbox > Actions > row-update).
6. In the row-update action properties, map the incoming value to a column in the child
application data view.
7. In the child app, in the root page properties, add a button control - for example, an OK button,
that will trigger an event that collapses the sliding panel.
40 January, 2024
At runtime, when you invoke a child app, it always launches at the landing (root)
page. Any buttons you add to the root page properties panel will always appear at
the bottom of the application screen if it is launched as a sliding panel. However,
they will not be displayed if the app is launched in a standard window.
8. In the child application's Event Designer, add an event that contains a app-close action
(Toolbox > Actions > app-close).
9. In the app-close action properties:
l Enter a value into the required Result field - for example, OK.
This field can take any available enumerated type values: Ok, Cancel,
None, Abort, Retry, Ignore, Yes, No.
l If the child app returns data into the parent app, use the Dataviews field to specify the
source (child app) and destination (parent) data views.
l Again, if you return any data from the child app, use the ValueOut field to specify
outbound parameters.
You can have multiple events with a app-close action tied to controls in your child application.
For example, you can have OK and Cancel or Yes and No buttons that trigger different view
closing events.
10. Back in the parent application, in the event you used to launch the child app as a slider, bring
up the properties of the app-open action again.
l Select the field that corresponds to the Result specified in the child application - for
example, OnOk.
l Press the Edit button to launch the JSON Editor and add code for processing the
response from the child app.
If you have several possible results in the child app, configure them in corresponding app-
open property fields the same way.
You can set up another application - for example, Customer Shipment Entry, to show the
Erp.UI.PartInfoLookUp application on a slide-out panel.
41 January, 2024
Widgets Overview
Data Discovery widgets are self-contained wizard-based user interface (UI) components that
visualize data provided by the embedded business intelligence system on the Kinetic Home Page.
You can use some of these widgets - Data Discovery Card, Data Discovery Chart, as well as other
Home Page widgets like Website Widget - in your new or modified applications. In the Data
Discovery Card and Chart widgets, you can use the publish and subscribe functionality to set them
up for displaying the data specific to your application context.
In Application Studio, all available widgets display on the Toolbox > Widgets tab of the Layout
Designer.
Widgets appear on this tab only if the Data Discovery extension is installed.
In the three examples below we will add a widget of each available type to the Customer Shipment
Entry application. Follow these steps to create a new layer for this application first:
1. From the main menu, navigate to Material Management > Shipping/Receiving > General
Operations > Customer Shipment Entry.
2. In the Overflow menu , select Application Studio.
The Application Studio launches and displays the Application Map.
3. Let us first save the layer. In the top right corner of the screen, press the New Layer link.
The Layer Selection panel slides on.
42 January, 2024
4. For the Layer Name, type in Widgets.
5. Add a Description - for example, Widgets Demo.
6. In the Layer Selection window, press Save Layer.
7. On the Application Map, select the Details page and click Edit .
The Details page layout displays.
8. From the Toolbox > Components tab, select Panel Card and drag it onto the page layout.
43 January, 2024
9. Select the newly added panel card and edit its properties and expand the Basic group:
l Change the default ID to MetricsPanel.

l Change the Title to Customer Metrics.
10. Now define some structure for the Customer Metrics panel card by adding a Column
component to it. This creates a page-wide container for other components you can add to the
panel card.
Go to Toolbox > Components, select 1 Column and add it to the panel card.
11. Select the Column component on the layout and go to the Properties list.
12. Expand the Advanced property group and change Orientation to horizontal to stack inside
components side by side instead of one on top of the other (default vertical orientation):
44 January, 2024
Stay in the Application Studio and move on to the first example - Adding a Data Discovery Card to a
Kinetic App.
45 January, 2024
Adding a Data Discovery Card to a Kinetic App
Data Discovery Card is a widget that provides a summary of data in just one number - for example,
the sum of all open orders value for customers, which you can build into your Kinetic application as is
or, if necessary, filtered by the current customer using the publish and subscribe functionality. In this
example, let us do something similar.
1. Go to the Toolbox > Widgets tab.

2. Select the Data Discovery Card widget from the list and drag it onto the empty column you
just added to the Customer Metrics panel.
The Widget Setup dialog slides on.
3. From the Data Discovery View drop-down, select one of the preset views - for this example,
Customer Past Due Balance.
The widget title is populated automatically. You can change it to your own any
time. The widget preview also displays. It shows the past due balance for all and
each customer as you click through the slider.
4. On the Widget Setup slider, press Ok.
46 January, 2024
5. Let us now make the widget display a value relevant to a specific customer who the current
shipment record belongs to.
This setup is optional.
Select the widget on the layout and open its properties.
6. On the Properties panel, click the Pub Sub Setup button.
The Subscriber Setup panel displays.
47 January, 2024
7. Click the New icon in the top right corner of the panel.
A new line is added to the grid.
8. From the Subscriber drop-down that lists fields exposed by the selected view, choose
Customer, which is a customer name.
9. Keep the = (equals) condition.
10. In the Publisher field, select ShipHead.CustomerName column that stores the current
customer name. Then click OK.
11. Launch application preview.
12. On the Customer Shipment Entry landing page, select any record from the grid.
13. Note that the Customer Past Due Balance widget displays the value for the current customer
- in this case, Dalton Manufacturing:
48 January, 2024
Move to the next example - Adding a Data Discovery Chart to a Kinetic App.
49 January, 2024
Adding a Data Discovery Chart to a Kinetic App
In this example, you will add one of the system chart views provided by Data Discovery to the Kinetic
Customer Shipment Entry.
If necessary, you can configure Data Discovery Chart to be context-specific by using

the available publish and subscribe functionality. Please refer to the Pub Sub Setup
instructions provided in the previous example (Adding a Data Discovery Card) for
details.
1. Go to the Toolbar > Widgets tab, select the Data Discovery Chart widget and drag it to the
Customer Metrics panel next to the Customer Past Due Balance widget.
The Widget Setup panel slides on.
2. For Data Discovery View, select Sales Orders - Value by Month and click OK.
The widget on the layout displays the chart based on the system BAQ used for this view.
3. You can adjust widget height and width by specifying the number of pixels in the Height and
Width property fields respectively. Set the width of the widget to 300.
4. You can further tune the data displayed by the widget by using the publish and subscribe
functionality (Pub Sub Setup). For example, if you create your own chart view based on a
50 January, 2024
custom BAQ, and display it in your Kinetic application, you can link the displayed data to
current customer, part, etc.
5. You can change the view any time by clicking the Guided Setup button in its properties.
6. Launch Preview and open a shipment record.
Note the newly added Sales Orders - Value by Month widget displays a chart.
51 January, 2024
You can now move on to the third example - Adding a Website Widget.
52 January, 2024
Adding a Website Widget
In this example, we will use a simple demo to step through a typical Website widget setup. This
example is revisited and enhanced in the Working with Sliding Panels section of the Application
Studio help.
1. On the Toolbar > Widgets panel, select the Website widget and drag it onto the canvas next
to the Data Discovery widgets.
2. Select the Website widget on the layout and modify its properties:
l For Title, type in Customer Location.

Paste this Google Maps URL into the Url field:
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26371661.85956456!2d-
113.72360706725829!3d36.21040627051876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!
3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!
3m2!1sen!2sru!4v1600081621641!5m2!1sen!2sru
You can specify both static or dynamic URLs. Dynamic URLs contain context-
specific parameter(s) taken from the dataview - for example, some field value. To
pass a field value into the Website widget URL, enter its Ep Binding value in curly
brackets - {}. For example, {Customer.CustID}.
l Set the widget Width to 300.
53 January, 2024
3. Optionally, you can select:
l the Token check box to configure the Website widget to use authenticated visitors.
l the User Context check box if you need to pass the current Kinetic user information to
the web resource.
4. Launch the preview and drill into one of the records on the Customer Shipment Entry landing
page.
Note the website widget displays the embedded map from the Google Maps website.
54 January, 2024
55 January, 2024
BAQ Reports Overview
Everything is data-driven now. However, data provides value only if users can easily access and
report on it in an automated fashion and in real time. In the Kinetic, you can create your own
Business Activity Queries to pull in a specific set of information from your database and convert them
into custom SQL Server Reporting Services (SSRS) Reports.
You create custom queries through the Business Activity Query Designer program. You then use
the BAQ Report Designer to select this BAQ as the base for a report - and also define the option
fields, filters, and sort by options that will appear on the report interface. The reports you create
through this tool are flat reports; they are restricted to only pull data from the table defined on their
selected BAQs.
You can also use one or more of your queries as data sources for more complex reports you create
in the Report Data Definition program. When you set up a report definition based on multiple BAQs,
you can also define standard report criteria and filters as well as the parent-child relationship for the
source BAQs.
56 January, 2024
Modifying the BAQ Report Submission Form
Conversion program 180 that automatically runs during system upgrades does not
convert customization layers for BAQ reports. You need to recreate them using
Application Studio.
If you do not have BAQ reports in Kinetic, first you need to create a BAQ report app in BAQ Report
Designer and add it to your menu.
Modifying the BAQ Report Application Layout in Application

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

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

If you need to modify the report definition - for example, add or remove filters or options, or specify
sorting order, you must do it in BAQ Report Designer. When you complete your updates, regenerate
the application by using the Preview Application action again. If necessary, make additional changes
in the layer applied to the report menu.
58 January, 2024
Working with Dashboards
Dashboards are flexible, powerful tools that provide easy access to critical information in a real-time
environment. In addition to the standard dashboards available in the application, you can also create
custom dashboards that display specific data you need.
Think of a dashboard as your personalized information and command center. Much like your car’s
dashboard gives you current information and controls to run the car, the dashboard displays the
current information and processes you need to more efficiently perform your tasks. The data you
choose to display can be refreshed automatically or manually, so you are able to act on changes as
they immediately occur.
Now you can test, generate, and deploy any dashboard as a Kinetic UX application, and then add it
to the main menu to make it available for other users within your company. And after that, you can
modify your dashboard the way you want it to be using Application Studio.
59 January, 2024
Converting Dashboards into Kinetic
Use Conversion Workbench to both generate new custom dashboards and regenerate existing
custom dashboards for use in Kinetic. Do this by running two conversion programs -
GenerateNewKineticDashboards and GenerateAllKineticDashboards.
During this help article, we explore:
l Generating New Kinetic Dashboards
l Regenerating All Dashboards
Generating New Kinetic Dashboards

Run the GenerateNewKineticDashboards conversion program to generate custom dashboards that
you have not generated yet.
1. From the main menu, navigate to System Management > Upgrade/Mass Regeneration >
Conversion Workbench
2. In the Conversions field select User Run from the drop-down.
3. Select GenerateNewKineticDashboards(conversion program 196) in the Conversion ID

column. The Conversion ID GenerateNewKineticDashboards page is displayed.
4. From the Overflow menu , select Submit.
60 January, 2024
5. Select the Activity tab. The Conversion log displays. Review the list of converted dashboards:
Regenerating all Dashboards

Run the GenerateAllKineticDashboards conversion program to regenerate all custom Kinetic
dashboards and overwrite any changes made to these dashboards in Application Studio.
1. From the main menu, navigate to System Management > Upgrade/Mass Regeneration >
Conversion Workbench.
2. In the Conversions field, select User Run from the drop-down.
3. Select GenerateAllKineticDashboards (conversion program 197) from the Conversion ID

column.
4. The system displays the page for Conversion ID GenerateNewKineticDashboards.
61 January, 2024
5. From the Overflow menu , select Submit.
6. Select the Activity tab. This conversion program regenerates all the custom dashboards,
regardless of whether they were generated before.
To verify that the conversion created the specified dashboards, navigate to the
Application Studio home page and look for the corresponding widgets or links.
62 January, 2024
Modifying Kinetic UX Dashboards
Just like any other application, you can modify your dashboards using Application Studio.
Before you can modify a Kinetic UX dashboard, you need to create a classic dashboard or update an
installed dashboard. Generate it as a Kinetic UX application and add it to the main menu using Menu
Maintenance.
Conversion program 180 that automatically runs during system upgrades does not
convert customization layers for dashboards. You need to recreate them using
Application Studio.
Generating Dashboard as a Kinetic UX Application

You can create a new dashboard or take a classic system dashboard and generate a Kinetic UX for
it. For this example, we will use the Sales Order Backlog Status system dashboard as a base. You
first copy this dashboard and then convert the copy into a Kinetic UX application.
Before you start creating/converting a dashboard, make sure you have Dashboard
Developer rights enabled on your account in User Account Security Maintenance.
1. From the main menu, go to Executive Analysis > Business Activity Management > General
Operation > Dashboard.
This program is available in a smart client only.
2. If necessary, from the Tools menu, select Developer. This ensures that you are working in the
developer mode as you generate the dashboard.
3. Select Definition ID and search for and select SalesOrderBacklogSts.
4. You see a message that system dashboards cannot be modified. Click OK.
5. Copy the dashboard. Go to File > Copy Dashboard.
6. The Copy Dashboard dialog box displays. Enter a Definition ID, such as SOBacklogKinetic
and click the OK button.
7. If your Classic dashboard has a URL/XSLT view, verify that this view points to a HTTPS site.
Kinetic only supports HTTPS sites. If you generate a dashboard to an HTTP or different site,
you will cause an error and the URL/XSLT view may not display site content in your
dashboard.
8. Generate the Kinetic UX version. From the Tools menu, select Deploy Dashboard.
63 January, 2024
9. The Deploy Dashboard window displays. Go to the Application section and select Preview.
10. The dashboard definition builds; the field at the bottom of the window displays its progress.
The dashboard opens as a Kinetic application in a separate window.
11. Test the dashboard to make sure it loads the information you need and displays it in the format
you want.
Dashboard grids converted from ERP Classic to the new UI automatically include
the Full Screen button for displaying additional data.
64 January, 2024
12. Once you are done with testing, exit the dashboard.
You return to the Deploy Dashboard window.
65 January, 2024
13. Select the Generate Application check box.
14. Select Deploy.
This generates the Kinetic dashboard file and uploads it to a folder to the
following directory: Server\Apps\MetaUI. The name of the folder is the name of
the generated Kinetic dashboard application, you can review it in the field at the
bottom of the Deploy Dashboard window. For this dashboard, the name is
Ice.UIDbd.SOBackLogKinetic. Note the name as you will need it in the next
task.
Adding Kinetic Dashboards to the Main Menu

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

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

6. In the Menu ID field, enter UD_KDXXX, where XXX are your initials.
7. In the Name field, enter XXX Kinetic SO Backlog Status Dashboard, where XXX are your
initials. This name will display as the name of your Kinetic dashboard in the main menu.
8. From the Module drop-down list, select UD.
9. Verify Order Sequence is set to 0 so that this menu item remains the first one in the Status
Dashboards folder.
67 January, 2024
10. Go to the Program Type drop-down list and verify Kinetic App displays.
11. Go to the Kinetic Application field. Select the Search icon and find
Ice.UIDbd.SOBackLogKinetic.
The URL field fills in with the dashboard's URL:

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

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

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

Modify the dashboard layout within Application Studio.
Depending on the rights in your user account, you can customize this Kinetic UX
dashboard in a couple ways. If you have Dashboard Developer rights and you
generated the Kinetic UX version, you can make changes to the base dashboard
application. If you have Customization rights, you can also create layers for this
dashboard to design different versions of it. Other users cannot make changes to this
dashboard.
69 January, 2024
1. On the Application Map, select the dashboard page and the Edit icon.
2. Go to its Properties.
3. In the Caption field, enter XXX (where XXX are your initials) before Sales Order Backlog
Status.
4. The page title switches to XXX Sales Order Backlog Status, where XXX are your initials.
5. Select the Sales Order Backlog Status panel grid card and go to the Properties panel.
6. Expand the metafx-panel-card-grid>Basic property group and change the Title field to SO
Backlog Status.
70 January, 2024
You can preview how the dashboard looks and functions any time in the process.
To do that, select the Preview button. If you have customization rights,

Application Studio may prompt you to create a layer. Enter its Layer Name and
Description and select Save Layer.
7. Now expand Data and go to Grid Model > Columns.
71 January, 2024
8. The properties of the first column (Customer_Name) display. The Columns drop-down
contains all columns defined for the grid.
9. Select the OrderHed_PONum column and press Remove. The SO Backlog Status
grid refreshes without this column. This way you can delete any columns that you do not need
in the grid.
10. Return to the metafx-panel-grid properties.
72 January, 2024
11. Expand the Advanced group; scroll down to the Expand at Runtime check box and select it.
This way the panel card will always expand when you run the application.
12. Open View Options. View options represent the filters available in this dashboard for the SO
Backlog Status grid. When you open the dashboard, the records in the grid filter by Open
Releases by default.
View options are created based on the existing BAQs. You will add a new view
option in the next task.
73 January, 2024
13. Note that the drop-down contains these grid views:
l Open Releases
l Late Releases
l This Week's Releases
l Next Week's Releases
l Completed Releases
14. Select the Open Releases view option and clear the Set Default check box.
74 January, 2024
15. Then, select the Completed Releases view option.
16. Set it as default instead.
17. Select Save. Now when you filter or run the dashboard, the grid's filter changes to
Completed Releases. This way the grid will always use this filter when you open the
dashboard.
75 January, 2024
Adding a View Option to a Grid
You can add a simple BAQ-based view option for this dashboard. In this task, use the same BAQ
that is used for the view options in this dashboard.
1. In the Advanced > View Options section, select the Completed Releases view option and
copy its Baq ID. This is the ID of the BAQ you will use as the base for your view option.
76 January, 2024
2. Press to add a new view option. You will add a view option that will filter all records
whose open value is more than 10,000.
77 January, 2024
3. In the Description field, enter Open Value More Than 10,000.
4. In the Baq ID field, paste the value you copied: zSalesOrderBackLog.
78 January, 2024
5. Go to Baq Options.
6. In the Where field, enter the following where clause: Calculated_OpenValue > 10000.00.
Calculated_OpenValue is the ID of the column. This way you create a where

clause that says that if the value of the column for a record is greater than 10,000,
then this record must be included in the results of this filter.
7. Preview the layer.
79 January, 2024
8. From the combo box in the panel card header, select Open Value More Than 10,000.
9. The OpenValue column all shows values greater than 10,000.

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

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

theMissing variable referenceApplication server where you will use the
functionality of theAdministration Console or the Data Model Generator tool to
regenerate the data model with new UD fields
l Customize Privileges enabled for the user account
82 January, 2024
Adding Menu Item for the UD05 Entry
Menu items for the provided UD tables do not show up in the Kinetic menu by default. In this step,
create a menu for the UD05 Entry program so that you can open it and edit in Application Studio.
1. Open Menu Maintenance

Menu Path: System Setup > Security Maintenance > Menu Maintenance.
2. Select the top level menu you want to add the custom program or menu under. In this
scenario, select Main Menu.
3. In the Tree View, navigate to Main Menu > Sales Management > Order Management >
Setup.
4. In the Menu Items card, select New to add the program.
5. For the Menu ID, type in UD05XXX where XXX are your initials.
6. For the Name, type in XXX Service Agreement Maintenance where XXX are your initials.
7. Specify Order Sequence to make sure your new menu item is somewhere at the top of the list.
8. For the Program Type, select Kinetic App.
9. Then in the Kinetic Application field, enter or search for Ice.UI.UD05Entry.
83 January, 2024
This selector displays the list of all Kinetic UIs available to users including the 51
system UD Entry programs.
10. Save the changes and close Menu Maintenance.

11. Close and re-launch Kinetic.
This will reload the menus and make the UD05 Entry form available.
Move on to the next step - Modifying Service Agreement Maintenance.
84 January, 2024
Modifying Service Agreement Maintenance
1. Launch XXX Service Agreement Maintenance.
Menu Path: Sales Management > Order Management > Setup.
Here's the default view of the UD05 Entry:
2. From the Overflow menu in the top right corner of the screen, select Application Studio.
Application Studio launches; the Application Map tab displays.
3. On the map, select the Details page; on its Properties panel, remove the Key1 text from the
Page Caption property so it reads as {UD05.Key1}.
85 January, 2024
4. Then click Edit .
5. Select the (Do not remove) Key1 text box; on the Properties panel, expand the Basic
property group and change Label Text to Service Code.
6. From the Toolbox > Components, select the Numeric Box component and drag it onto the
panel card that contains the default controls - Key1 (Service Code) and Character01
(Description).
7. Select the new component and edit its properties as follows:
a. For Basic > Label Text, type in Coverage Limit.

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

b. For EpBinding, enter UD05.Number02.
10. Save the layer as SA Maint XXX where XXX are your initials. For Description, enter Service
Agreement Maintenance XXX where XXX are also your initials.
86 January, 2024
Now make a few more cosmetic changes to the UI.
11. Go to the Application Map tab and select the UD05 Entry node.
12. On the Details pane, change the Caption to Service Agreement Entry.
13. Now, select the UD05 Maintenance node and change its caption to Service Agreement
Maintenance. Then click Edit .
The Landing Page layout opens for editing.
14. Select the UD Codes; then in its Properties, change the Basic > Title to Service Agreements.
15. Change the Key1 search box Label Text to Code.
16. On the Properties panel, expand the Data property group and go to Grid Model > Columns.
The Key1 column properties display.
17. Select the Key2 column and press to remove it.

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

22. Exit Application Studio and close Service Agreement Maintenance.
Move on to the next step - Deploying SA Maint XXX Layer.
88 January, 2024
Deploying SA Maint XXX Layer
To make your changes available to users, you must apply your layer to the application. You do this in
Menu Maintenance.
1. Launch Menu Maintenance and open the XXX Service Agreement Maintenance menu
where XXX are your initials.
Menu Path: Sales Management > Order Management > Setup > XXX Service Agreement
Maintenance.
2. In the menu properties, enter or search for the customization in the Kinetic Customization
field.
The Kinetic Customization panel slides on.
3. Select the Select check box beside your layer from the list of available customizations.
4. Select Apply.
5. Save the menu and exit Menu Maintenance.

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

3. The Search panel slides out.
4. Enter OrderHed in the Starting At field and select Search.
5. Select the OrderHed table and select OK.
The new OrderHed_UD table is created. The Table not in database shape displays on table details.
90 January, 2024
6. Select Save.
7. Expand the Columns card, and select Add to add new column.
The Column Detail card displays for editing.
8. Add a new column with the following properties:
91 January, 2024
l Column Name - ServiceCode.
When you tab out of this field, a _c postfix is automatically added to the
column name, so the full field name you will use in EpiBinding is
ServiceCode_c.
l Data type - String.

l Format - x(20).
9. Save the table and keep User Defined Column Maintenance open.
Move on to the next step - Regenerating Data Model.
92 January, 2024
Regenerating Data Model
In this step, add your new column to the Data Model so that it becomes available for Order Entry
configuration.
You should regenerate the data model as soon as possible after you add a new user-
defined column. Users should also log out of the Kinetic system as the data model
regenerates. While the system will usually work as expected, some processes may
generate errors when the user-defined metadata does not match the data model.
In this example, regenerate the model from the Administration Console.
For the detailed description of this process, please refer to the help documentation
within the Epicor Administration Console.
1. On the Kinetic application server, launch Administration Console.

2. In the navigation panel on the left, expand the Database Server Management and drill down
to your database node - for example, Kinetic.
3. On the Actions panel on the right, select Regenerate Data Model.
The Generate Data Model dialog pops up.
4. Specify the credentials for database connection and press Generate.
Data Model generation may take a while.
93 January, 2024
5. Once it has been successfully completed, in the navigation, select your Kinetic instance and
click Recycle IIS Application Pool on the right-hand Actions panel.
6. After the application pool has been successfully recycled, back on User Defined Column
Maintenance, click Refresh.
The OrderHed_UD table details now display two green shapes - Table in Sync and Data
Model in sync.
Move on to the next step - Defining Extended Properties for the UD Field.
94 January, 2024
Defining Extended Properties for the UD Field
In this step, we will link the Key1 field of the UD05 table to the ServiceCode_c UD field of the
OrderHed table.
1. From the main menu, navigate to System Setup > System Maintenance > Extended
Properties.
2. Locate the OrderHed_UD table that contains the column you wish to modify by using the Data
Table ID search window above the landing page grid or grid filters.
If you know exactly what table you are looking for, in the grid header, you can
select the System Code, type in the Data Table ID, and press Tab on your
keyboard to go straight to the record.
3. On the Field List card, select the ServiceCode_c column you wish to modify.
4. In the Like Table field, select the UD05 table.

5. From the Like Field field, select Key1.
6. Save the changes and exit Extended Properties Maintenance.
95 January, 2024
Move on to the next step - Adding Service Agreement Records to Database.
96 January, 2024
Adding Service Agreement Records to Database
In this step, let us use the modified UD05 Entry to add several Service Agreement code records:
Service Code Description Coverage Limit Effective Months

SHAKERS Covers things that shake 1500 12
ROCKERS Covers things that rock 3500 24
MOVERS Covers things that move 2200 6
STOPPERS Covers things that stop 1800 9
1. Open Service Agreement Maintenance.
Note the changes in the UI after you applied the SA Maint layer:
2. Press to add a new record.
3. Enter the data for the first agreement code and save it.
97 January, 2024
4. Add the three other records and see that now they all display in the Landing Page grid:
Move on to the next step - Adding a Combo Box with Service Codes to Order Entry.
98 January, 2024
Adding a Combo Box with Service Codes to Order
Entry
In this step, add a new field to Order Entry and bind it to the OrderHed.ServiceCode_c. This will allow
selecting a service agreement code for a sales order record.
1. Launch Order Entry .

Menu Path: Sales Management > Order Management > General Operations > Order Entry.
2. From the Overflow menu in the top right corner of the form, select Application Studio.
Application Studio launches displaying Application Map.
3. Now, on the Application Map, select the Details page and press Edit.
99 January, 2024
4. From the Toolbox > Components, select Combo Box and drag it to the Order Detail panel.
100 January, 2024

5. On the layout, select ComboBox-1 and edit its properties:
l In the Basic > Label Text field, type in Service Code.
l In the Data > EpBinding field, select OrderHed.ServiceCode_c.
6. Expand the Reusable Combo property group and configure the combo like this:
Property Value Explanation

ComboId ServiceCodes Unique identifier for the control
Svc Ice.BO.UD05Svc The Kinetic service you call to retrieve rows from the UD05
table
SvcPath GetRows Service Method
Table UD05 The database table that contains user-defined Service
Name Code records
7. Expand the Advanced field, select DropDown and set up the following properties:
101 January, 2024

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

For the Layer Name and Description, enter Service Codes XXX where XXX are your initials.
11. Publish the layer.
12. Exit the Application Studio and Order Entry.
Move on to the next step - Deploying Layer and Testing Configuration.
102 January, 2024

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

2. Menu Maintenance displays. Select the menu inside which you will add the layer on the
Landing Page, such as MAINMENU.
3. In the tree view, expand Sales Management > Order Management > General Operations
and select Order Entry.
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.
103 January, 2024

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

Congratulations! You have successfully completed this exercise.
105 January, 2024

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

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

For this walkthough, we use the User Defined Codes Maintenance program that provides an
efficient way of creating user defined codes. Instead of modifying a user-defined table to hold
this information, you can create a user defined code type.
l Creating a user-defined (UD) column and binding it to the part subtype (Soap Type)
listSince there's no system field to store part subtypes, you will create a UD field using UD
Column Maintenance.
You will need access to the Administration Console because adding a UD

column to the database requires regeneration of the Data Model. To do this in
cloud-based Kinetic, you must submit an EpicCare ticket with the Cloud
Operations team.
l Modifying Part Maintenance to enable soap type entry for specific parts
You will add a new combo box that will display soap type codes to the Part Maintenance
application. In addition to that, you will add an event that will be triggered by a button click and
will display different websites depending on the current soap type.
l Modifying Part Advisor - Layer I

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

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

To add a new item for the modified Part Advisor to the Main Menu, you will use the Kinetic App
107 January, 2024

program type. In Kinetic, you can apply multiple layers to an application interface. You can
also merge them, although, for this walkthrough we will simply apply both layers to the Part
Advisor UI as they do not overlap.
108 January, 2024

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

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

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

7. Select the User Codes Details option in the tree and add several codes to the PartSType
code type.
Use the data from the table below for code definitions:
Code Description Long Description

BS Beauty Soap Beauty Soap features fragrance and ingredients for different skin
types. They can feature special oil blend or glycerin.
GS Guest Soap Mini soap, generally smaller than the usual soap bar and comes with
various attractive shapes. Designed for guests usage.
KS Kitchen Kitchen soap is a soap intended for use in the kitchen mainly to
Soap serve the purpose of dish washing.
LS Laundry Effective in cleaning solid particles, grease and organic compound in
Soap clothes. Can be quite convenient to wash clothes during travels
because it is easy to carry.
MS Medicated Medicated soap is soap with added antiseptics and disinfectants to
Soap kill bacteria.
NS Novelty Soap that comes in various shapes and colors such as fish, cake,
Soap and mustache. Novelty soap serves more than a cleaning soap. It
provides enjoyment and amusement to the children who use it.
8. Save your changes and exit User Defined Codes Maintenance.
110 January, 2024

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

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

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

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

Keep the program open to verify the result of the next step.
112 January, 2024

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

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

The Generate Data Model window displays.
113 January, 2024

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

7. Close UD Column Maintenance.
Move on to the next step - Adding a Combo Box to List UD Codes in Part Maintenance.
115 January, 2024

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

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

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

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

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

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

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

10. Save the layer.
119 January, 2024

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

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

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

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

2. On the Landing Page, note the following parts: 00C1, 00C1A, 00C2, 00C2A, 00C3, 00C3A.
Define soap type for them.
121 January, 2024

3. Open 00C1; then go to the Attributes page, and from the Soap Type drop-down, select
Beauty Soap.
122 January, 2024

4. Save the changes.
5. Set the Soap Type for the following parts according to the table below:
Part ID Soap Type

00C1A Guest Soap
00C2 Kitchen Soap
00C2A Laundry Soap
00C3 Medicated Soap
00C3A Novelty Soap
6. Keep Part Maintenance open.

Move on to the next step - Creating an Event that Launches a Website.
123 January, 2024

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

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

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

l Enter Launch Google Search for the Basic > Label Text.
l In the Data > EpBinding field, type in PartView.BtnLaunchWebsite.
This binding is optional and does not link the button to any database field, it will be used
in the rule you will create later in this step to disable this button for certain Soap Types.
5. Keep the button properties open and move on to the next sub-step to set up the event.
124 January, 2024

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

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

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

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

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

Previewing the event
1. In the Application Studio, press Preview.
2. Open Part 00C2.
This part has a Kitchen Soap type, and the Launch Google Search button is enabled.
3. Click the Launch Google Search button.
The browser on your computer launching this page -
https://www.google.com/search?q=kitchen+soap+description.
4. Now open Part 00C2A and click the button again to verify it opens this page -
https://www.google.com/search?q=laundry+soap+description.
5. Finally, open Part 00C1.
This part's Soap Type is Beauty Soap, and the Launch Google Search button is disabled.
6. Save the changes, publish the XXX_SubTypes layer (where XXX are your initials), and exit
Application Studio.
Move on to the next step - Adding the Soap Type Field to Part Advisor.
129 January, 2024

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

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

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

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

6. Press Save.
The Layer Selection dialog displays.
7. For both the Layer Name and Description, type in XXX_SoapType where XXX are your
initials.
8. Save the layer.

9. Select Preview to verify your changes.
10. From the grid on the Part Advisor landing page, select part 00C1.
The part details display. Note the new field displays the short description of the part subtype.
132 January, 2024

11. Keep Application Studio open.
Move on to the next step - Adding a Rule for the Kitchen Soap Type.
133 January, 2024

Adding a Rule to Highlight Fields for the Selected
Part Subtype
In this step, further modify the Details page by adding a rule for the Kitchen Soap subtype that will
highlight the Part Description and Product Group fields when this subtype is selected.
1. In Application Studio from the sidebar menu, select Data Rules.
2. Press to add a new rule.

The Data Rule Designer opens a new rule for editing. Edit the Header section first.
3. For the Name, enter KitchenSoapWarn.
4. For the Description, type in Warning for Kitchen Soap.
5. From the Action Data View drop-down, select PartView.
Keep the default Row Rules Criteria (Conditions).
6. In the Conditions section, from the Select Condition drop-down, choose the Condition option.
7. Then select PartView for Data View.

8. In the Field field, type in SubType_c.
9. Set the Operator to Equal.
134 January, 2024

10. In the Value field, type in KS.
11. In the Actions section, from the Actions drop-down, select SettingStyle.Status.
12. In Field, select the PartDescription and ProdCode fields.

13. From the Status drop-down, select Warning.
14. The final rule settings should look like this:
135 January, 2024

15. Save the rule and preview your changes.
Open part 00C2 and note that the two fields are highlighted with warning color:
16. Save and Publish the layer; then exit Application Studio.
Move on to the next step - Adding a Panel Card with Additional Part Info.
136 January, 2024

Adding a Panel Card with Additional Part Info
In this step, use Application Studio to create a new layer for the Activity tab of the Part Advisor
tracker by adding a Panel Card Grid component that will display data from the system
zPartWhereUsed Business Activity Query (BAQ). This grid will provide additional information on
part usage.
Adding a Panel Card Grid Component to the UI

In this sub-step, add a Panel Card Grid component to the Part Advisor UI and set its main properties.
1. Open Part Advisor and launch Application Studio.
2. Select the Activity tab page and press Edit .

3. From the Toolbox > Components tab, select the Panel Card Grid component and drag it to
the top of the page layout.
4. Save the layer as XXX_ WhereUsed where XXX are your initials.
Do not forget to enter a layer description. In this example, make it identical to the
layer name - XXX_WhereUsed where XXX are your initials.
5. Open the component's Properties.
l Expand the Basic property group and for Id, type in whereUsedPart.
l For Title, enter Where Used
137 January, 2024

l Expand the Advanced group and select the Expand at Runtime option.
Binding the Grid to BAQ and Adding Grid Columns

In this sub-step, define the system zPartWhereUsed BAQ as the gird's data provider and add
columns to your grid.
138 January, 2024

1. On the grid's Properties panel, expand the Data group and go to Grid Model > Provider
Model; then in the Baq ID field, type in zPartWhereUsed.
2. Now go to Grid Model > Columns and press to add a new column. We will specify
Field (as it appears in the BAQ's Display Fields), Title (that we want to display), and Erp Editor
(data type):
l For the first column, type in PartMtl_PartNum for Field.

l For Title, enter Parent Part.
l From the Erp Editor, select Text.
3. Add five more columns with the following values:
Field Title Erp Editor

Part_PartDescription Description Text
PartMtl_RevisionNum Rev Text
PartMtl_MtlPartNum Part Text
PartMtl_QtyPer Qty/Parent Number
Calculated_Type Type Text
4. Preview your changes. Your grid should look similar to this:
139 January, 2024

Configuring View Options for the Grid
In this example, we will add two view options for the grid - one will display all parts, the other - only
the ones that are not approved. In addition to that, both views will filter the BAQ results by the current
part ID, so that only the rows relevant to the current part display.
1. In the grid properties, go to the Advanced group again and open View Options.
2. Press to add a new view.
l For Description, type in All.

l In the Baq Id field, enter zPartWhereUsed.
l Select the Set Default check box at the bottom.
l Open Baq Options; then in the Where field, enter this filtering condition:
PartMtl_MtlPartNum = '??{KeyFields.PartNum}'
3. Press again to add another view and configure it as follows:

l For Description, type in Unapproved.
l In the Baq Id field, enter zPartWhereUsed.
l In the Baq Options > Where field, enter this filtering condition:
PartMtl_MtlPartNum = '??{KeyFields.PartNum}' and PartRev_Approved = false
4. Save the layer and preview your changes.

Now, when you open the Activity sheet for a part, it displays the Where Used Panel Card Grid
with information from the zPartWhereUsed BAQ for the current part.
View option: All
140 January, 2024

View Option: Unapproved
5. Save and Publish the layer; then exit Application Studio.
Move on to the final step of the walkthrough - Deploying the Part Advisor Configuration.
141 January, 2024

Deploying the Part Advisor Configuration
In this step, create and deploy a new menu for the modified Part Advisor Tracker.
In this example, we will create a new menu, but you can also apply layers to existing
menus. For example, you can use different Kinetic App menus for Part Advisor for
different user groups, or have just one if you want all users to have access to your
configuration.
Creating a Menu for the Modified Part Advisor

In this sub-step, use the Menu Maintenance program to add a new menu for the modified Part
Advisor Tracker.

3. In the Tree View, navigate to Executive Analysis > Trackers.
4. In the Menu Items card, select New to add the menu.
5. For the Menu ID, type in UDXXKNTC where XX are your initials.
6. Make sure the value of the Module field is set to UD.
7. For the Name, enter XXX Part Advisor where XXX are your initials.
8. Keep the default Order Sequence.
The greater the value, the lower the position of your item in the menu list.
9. For the Program Type, enter or search for Kinetic App.
10. Enter or search for Erp.UI.PartAdvisor in the Kinetic Application field.
11. In the menu properties, enter or search for the customization in the Kinetic Customization
field.
The Kinetic Customization panel slides on.
12. Select the Select check box beside your layers from the list of available customizations.
142 January, 2024

We have created two layers for this tracker. Here you can choose what layers are
relevant and must be applied. Let us apply both layers now. Note that if there are
more than one layer selected, the changes will be applied to the program UI
based on the order of layers in the Order column.
13. Save the menu and restart Kinetic.
Reviewing Part Maintenance and Part Advisor

Configurations
In this sub-step, launch the modified Part Advisor Tracker and verify your changes to the UI.
1. Launch XXX Part Advisor where XXX are your initials.

Menu Path: Executive Analysis > Trackers > XXX Part Advisor.
Verify both layers have been applied.
l Open part 00C1 and note that the part's Soap Type displays.
l Open part 00C2 and note the Description and Product Group fields are highlighted (the
rule is applied).
l Go to the Activity tab and note the Where Used grid displays All and Unapproved
parent parts for the current part.
143 January, 2024

2. Once again launch XXX Part -Subtypes where XXX are your initials.
Menu Path: Material Management > Inventory Management > Setup > XXX Part-Subtypes.
Verify the application works with the applied XXX_SubTypes layer correctly:
l Open part 00C1A and go to the Attributes page. Note the Soap Type combo box and
the disabled Launch Google Search button.
l Open Part 00C2A and on its Attributes page, note the Launch Google Search button is
enabled.
l Press the button to verify it opens the correct search page in the browser.
Congratulations! You have successfully completed this walkthough.
144 January, 2024

Kinetic AppStudioExtensionsUserGuide

Uploaded by

Copyright:

Available Formats

You might also like

Kinetic AppStudioExtensionsUserGuide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kinetic AppStudioExtensionsUserGuide

Uploaded by

Copyright:

Available Formats

Kinetic Application

Studio Extensions User

Copyright © 2023 Epicor Software Corporation Epicor.

Using Quick Filters 11

Sliding Panels Overview 30

Creating In-App Sliding Panels 31

Adding a Data Discovery Card to a Kinetic App 46

Adding a Data Discovery Chart to a Kinetic App 50

Adding a Website Widget 53

BAQ Reports Overview 56

Modifying the BAQ Report Submission Form 57

Converting Dashboards into Kinetic 60

Adding Menu Item for the UD05 Entry 83

Modifying Service Agreement Maintenance 85

Deploying SA Maint XXX Layer 89

Adding UD Field to OrderHed Table 90

Regenerating Data Model 93

Defining Extended Properties for the UD Field 95

Adding Service Agreement Records to Database 97

Adding a Combo Box with Service Codes to Order Entry 99

Deploying Layer and Testing Configuration 103

Calling Functions from Kinetic Apps 106

Scenario Overview 107

Defining UD Codes for Part Subtypes 109

Adding a Panel Card with Additional Part Info 137

Welcome to the Application Studio Extension Guide

The guide ends by walking you through a complex customizations.

2. From the Overflow menu , select Application Studio.

9. Repeat step 8 to remove the BTCustNumName column.

6. Preview the layer.

Add Job Status Check Boxes

3. Let's define a new layer first. Press <NewLayer>.

The Jobs page layout displays.

TransView is an EpDataView you can use to append columns on the fly as

Add the below information:

Your layout should look as follows:

Add View Options

3. Select metafx-panel-card-grid, scroll down and expand the Advanced category.

Note on the where clause syntax:

The where clause functionality in query-based grids supports SQL comparison

8. Press to create a view displaying Manufacturing jobs by including JobType='MFG' in the

9. Press to create a view displaying Project jobs:

10. Lastly, press to create a view displaying Service jobs:

11. Save your layout.

Create Data Rules

10. Save the layout.

Test the Results

In this example, we will use Part.

2. From the Overflow menu , select Application Studio:

Alternatively, you can press Ctrl + Alt + D.

3. We will start by creating a new layer. Press <NewLayer>.

The Part Maintenance page layout displays.

6. Click anywhere inside the grid and select Properties.

8. Expand View Options and press to add a new grid view:

Note the following about deploying Kinetic customizations:

l Kinetic customizations can be attached to Kinetic application menus only.

17. Save the record and exit Menu Maintenance.

Sliding panels can be of two different types:

Creating a sliding panel layout