My First Layer in
Application Studio
Hands On Exercises
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 © 2022 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.
My First Layer in Application Studio
Table of Contents
My First Layer in Application Studio 4
Introduction 4
Learning Objectives 4
Prerequisites 4
Tips and Tricks 4
Environment Setup 5
Accessing Kinetic 5
Logging in 6
Refreshing the database 6
Exercise 1: Modifying Landing Page 7
Exploring landing page 7
Exploring dataviews using developer tools 9
Adjusting landing page grid 12
Exercise 2: Using Data Rules 14
Creating data rule 14
Exercise 3: Modifying Page Layout 16
Hiding components 16
Adding components 16
Removing components 17
Exercise 4: Adding a Grid 19
Adding grid component 19
Modifying grid properties 20
Exercise 5: Deploying Layer 23
Publishing a layer 23
Adding the layer to the Menu 23
Summary 25
3 November, 2022
My First Layer in Application Studio
My First Layer in Application Studio
Introduction
Application Studio is a design environment where Kinetic power users, business analysts and others can
customize applications and processes to fit their organization or business. Application Studio provides a
low code/no code environment to tailor the system for your needs.
Well-designed customization can significantly enhance your company’s use of the original program. It
can also save you time and money by creating modifications to match the applications to your business
needs directly.
Let's have some fun with Application Studio!
Learning Objectives
After completing this course, you will be able to:
l Adjust your initial application experience by modifying the Landing Page
l Understand basic concepts of application debugging
l Create a data rule to highlight grid rows conditionally
l Add, modify and delete components in your layout
l Use Business Activity Query (BAQ) to populate a grid
l Make modified applications available to users
Remember! What you see, you remember, but what you do, you understand.
Prerequisites
l Product version 2022.2.
l Your user account must have Security Manager rights to add new menus for applications.
l Your user account must have Customize Privileges enabled.
l We recommend reading the Application Studio > Getting Started help section prior to
completing this course.
Tips and Tricks
4 November, 2022
My First Layer in Application Studio
Whether you are a new user or you have been using Kinetic (Epicor ERP) for years, you might benefit
from using the following tips and tricks as you go through the course:
l If you are interested in a particular field, check box, or program, use the Application Help that
you launch from within Kinetic.
l Work with fully expanded programs. This enhances visual experience and prevents incorrect
selections.
l Properly read the workshop descriptions so you know what follows.
l Take your time and do not rush.
Environment Setup
Accessing Kinetic
While using a web (browser) or smart (desktop) client to access Kinetic interchangeably, some system
management programs are only available in Classic UI. The course instructions will guide you to launch
the desktop client whenever you need to use such program.
In all other cases, for the best user experience, we recommend using a Kinetic browser client. Choose
any of the two options below to open Kinetic in a browser:
l In the smart (desktop) client from the Home Page, go to the User menu and select the Open
Kinetic in Browser option.
The system automatically launches the Home Page in your web browser. Note that you may be
required to re-enter your user password to log in.
l In the web browser, directly enter the URL of your Home Page using the following format:
https://[ServerName]/[KineticInstance]/apps/erp/home/ - for example, https://sfo-
euvm.local/Kinetic2022_2/apps/erp/home/.
On the Kinetic login page that displays, enter your credentials.
Supported browsers
5 November, 2022
My First Layer in Application Studio
Make sure you use the latest version of any browser from the list below:
l Microsoft Edge®
l Mozilla Firefox®
l Apple Safari ® (for Mac OS ®)
l Google™ Chrome
Logging in
l Log in to the training environment using the epicor/epicor credentials.
l Make sure you are logged into the Epicor Education Company/Main Plant.
l If you are a cloud-based Kinetic customer, then note the following about your Epicor-hosted
education company. All logins referenced in the course (such as manager or epicor) should be
prefixed with the <site ID>-. For example, if your site ID is 98315, then wherever you are
instructed to use the login epicor, instead use 98315-epicor. The password is 'Train18!'.
Refreshing the database
l We recommend refreshing the database before starting the course.
6 November, 2022
My First Layer in Application Studio
Exercise 1: Modifying Landing Page
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 a specific record.
In this exercise, explore some of the ways you can use to enhance the initial application experience.
Exploring landing page
We will start our journey by inspecting the landing page and understanding how data gets populated on
the application start.
1. Launch Kinetic using a browser and open Order Entry.
2. Press Ctrl+Alt + H (or Cmd+H for Mac) to launch the hotkeys panel. Review the list of global
shortcuts available in Kinetic.
In this exercise, we will use the following shortcuts:
l Ctrl + Alt + D to launch Application Studio.
l Ctrl + Alt + 8 to access the Debugging mode using Developer Tools.
l Ctrl + Alt + v to load all application dataviews in the Developer Tools console.
3. Collapse the shortcuts panel by clicking anywhere outside the panel. Launch Application Studio
by pressing Ctrl + Alt + D. Alternatively, from the Overflow menu , select Application Studio.
Application Studio opens with the Application Map tab in focus, displaying the application's
hierarchy in a map-like structure.
7 November, 2022
My First Layer in Application Studio
4. Select the Sales Orders landing page element and press Edit. This is the root element in the
Sales Order Entry application.
5. You are now presented with the landing page layout. Click anywhere inside the grid and select
the Properties tab on the right.
6. We will now explore how the grid gets populated with data. Expand Data > Grid Model and take
note of the Ep Binding field value - LandingPage.
LandingPage is the name of the dataview that gets populated at application
run-time. Dataviews contain a set of information for display; each dataview is a
representation of data in the underlying dataset table (data table). Each
application comes with a series of dataviews required to perform its standard
functionality. Are you creating a new order line or saving an order? Your actions
are always reflected in an underlying dataview and sent to the database.
7. Let's now take a closer look at what populates the dataview. Select Provider Model and review
the following:
Field Value
Svc Erp.BO.SalesOrderSvc
Svc Path GetRowsAuthorizedTerritories
Rest Params { "whereClause": "BY OrderNum DESC" }
How does this work?
The application makes a REST (Representational State Transfer) call to the Sales Order service
(Svc), calls the GetRowsAuthorizedTerritories method (SvcPath), and provides input parameters
(RestParams). The Sales Order service provides results, and the columns selected for display
populate in the grid. In this example, call results are sorted by order number in the descending
order.
For more information on using REST services, see REST Kinetic API Interactive
Help topics in Application Help.
8 November, 2022
My First Layer in Application Studio
8. We will save our layer at this stage. Press Save All and specify the below:
l Layout - XXXModifiedSalesOrder (where XXX are your initials)
l Description - Sales Order customization
9. Select Save Layer.
Exploring dataviews using developer tools
In this task, we will use Developer Tools - powerful instruments to test and debug execution of Kinetic
forms. Imagine you want to extend a grid by adding another dataview column. One of the ways to
accomplish this is to turn on the debugging feature and explore the contents of a dataview.
1. Press Preview.
The Landing Page populates with records. We will inspect this action using the browser's
development tools.
The browser developer tools are included in most modern browsers for easy
debugging and development. The following steps apply to Google Chrome. If
you are using a different browser, please review your browser's documentation
on launching and using developer tools.
2. To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-
hand corner and select More Tools > Developer Tools. Alternatively, press Ctrl + Shift + I on
your keyboard.
3. Select the Network tab and press Clear.
9 November, 2022
My First Layer in Application Studio
4. From the Sales Order Entry overflow menu, select Refresh and observe the application
performing the REST service call we identified in the previous task.
5. We will now inspect the LandingPage dataview. In Developer Tools, select the Console tab and
press Clear Console.
6. Click anywhere in the Sales Order Entry and press Ctrl + Alt + 8 on your keyboard. You should
see the following message in the Console.
7. On your keyboard, press Ctrl + Alt + v to dump all dataviews. Note there are two categories:
l System Dataviews - hold system information such as CallContext BPM data, constants,
search results and so on.
l Application Dataviews - hold values that you see on the application screen, such as order
header (OrderHed), order detail (OrderDtl) and so on.
10 November, 2022
My First Layer in Application Studio
8. Assume we want to add a column displaying the total order amount. In Application Dataviews,
expand the LandingPage dataview. Notice the dataview is loaded with sales order records. Scroll
to the bottom and expand the first entry (0) in the Array list.
9. Locate the dataview column to be included in the grid, in our example - DocOrderAmt.
11 November, 2022
My First Layer in Application Studio
10. Close Developer Tools.
l Typical use cases of using Developer Tools include analysis of events, data
rules and dataviews you need to work with.
l Want to learn more about Data Views? See the Working with Data Views
in Application Studio course found in Epicor Learning Center.
11. Close the Preview and return back to Application Studio.
Adjusting landing page grid
We are now ready to modify the grid.
1. Verify the Sales Orders landing page is selected. Click anywhere inside the grid and select the
Properties tab.
2. On the Properties tab, select metafx-panel-card-grid to display the list of grid properties.
3. Go to Data > Grid Model > Columns.
4. We will first remove a couple of columns we no longer want to display. From the columns drop-
down list (below the Search field), select BTCustNumName and press Delete.
5. Repeat the previous step to remove the PONum column.
6. Now add a new column displaying the total order amount. Press Add Column and enter the
below properties.
Field Value
Field DocOrderAmt
Title Order Amount
7. Invoke the list of columns again and take note of the OpenOrder column. This column defines an
order status that is either open or closed. We will build a data rule against this column in the next
exercise.
8. Save the layer and preview it. The grid now displays the newly added column.
12 November, 2022
My First Layer in Application Studio
9. Close the Preview and return back to Application Studio.
13 November, 2022
My First Layer in Application Studio
Exercise 2: Using Data Rules
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'll keep this simple and highlight all open orders on the Landing Page grid so they are easily
identified.
Creating data rule
1. From the Sidebar, select Data Rules and press Add New.
2. In the New Rule, enter or select the following in the Header section:
Field Value
Name LandingPage
Description Highlight Open Orders
Action Data View LandingPage
Row Rule Criteria Conditions
3. Press Select Condition > Condition and specify the following:
Field Value
DataView LandingPage
Field OpenOrder (type this value)
Operator Equal
Value/Field Value
Value true
4. Now create an Action. Press Select Action > Setting Style and specify the below parameters:
Field Value
Actions SettingStyle.RowStatus
Status Highlight
14 November, 2022
My First Layer in Application Studio
5. Save the layer and preview it. Open orders are now highlighted.
Interested in seeing other examples of using Data Rules? See the Using Data
Rules in Application Studio Hands-on course in Epicor Learning Center.
6. Close the Preview mode. We're done with the Landing Page modification.
15 November, 2022
My First Layer in Application Studio
Exercise 3: Modifying Page Layout
We will now make a few modifications to the Details page. We will hide a component, add a new
component, set up its properties, and bind it to a data view column. Lastly, we will remove a
component from the layout.
Hiding components
First, assume we do not need the Counter Sale options in our layout.
1. On the Application Map tab, select the Details page icon and press Edit.
2. Select the Counter Sale column component and navigate to Properties.
3. Expand the State category and select the Hidden check box.
The component disappeared; however, it was not removed. You can hide a
component from other users while keeping it in the application's layout.
4. If you want to compare how the layout looks with and without this component, use the Unhide
button.
The hidden component appears back in the layout and is grayed out.
5. Press Unhide again to keep the component hidden.
Adding components
16 November, 2022
My First Layer in Application Studio
Let us now add a couple of components.
1. Select the Toolbox tab, search for and select 1Column.
2. Place the 1Column component below the Dates column exactly where the Counter Sale used to
be.
3. We will now add another component inside. In the Toolbox, search for the Text Area component
and place it inside the newly added column.
4. Select the Text Area component and navigate to Properties.
5. For Label Text, enter Order Comments.
6. We will now bind this field to a data view column. For simplicity, we will use an existing column.
Expand the Data category and in the EpBinding field, enter OrderHed.OrderComment.
In a real customization scenario, you would bind this field to, for example, a
user-defined column such as OrderHed.MyNewColumn_c.
7. Assume you want to allow users to personalize and customize this field. Expand the State
category and select both Personalizable and Customizable options.
8. Finally, let's make more room for order comments. Expand the Advanced category and for
Default Rows to Display, enter 7.
9. Save the layer and preview it.
10. Select any Open order.
11. On the Order Detail page, enter a new Sales Order comment, such as Weekday delivery
preferred.
12. Now scroll down and expand the Comments card. Since we bound the field to an existing order
comments data view column, your comment also displays here. Assume you don't require
various comment types, so let's remove this card.
Removing components
1. Close the Preview and return to Application Studio.
2. On the Details tab, scroll down and select the Comments card.
17 November, 2022
My First Layer in Application Studio
3. Press Delete to remove the card and Save the layer.
18 November, 2022
My First Layer in Application Studio
Exercise 4: Adding a Grid
In this exercise, assume you want to extend Sales Order Entry to see all invoices and sales orders for a
part used on the current sales order. To achieve this, we will add a grid component to our layer and use
a Business Activity Query (BAQ) to populate the grid results.
Adding grid component
1. With the Details page open for editing, scroll down to see the Lines panel card.
2. Select Toolbox > Components and search for Grid.
Notice two grid-related items - Grid and PanelCard Grid. Here's the difference
between them:
l Panel Card Grid - A composite component that combines a standard
Panel Card container-type component and a single grid. You cannot add
other grids or components to the body of a Panel Card Grid. Use this
component to display standalone grids.
l Grid - If you need to group several grids and probably other UI controls,
like buttons, text boxes, etc., under one container component, take a
standard Panel Card and add anything you need to its body. Use the Grid
component as a 'building block' to construct component groupings - for
example, in Panel Cards.
3. In this example, place the Panel Card Grid component below the Lines panel card.
4. Select the newly added component and go to Properties.
5. Expand the Basic category and for Title, enter Part Invoices and Sales Orders.
6. Select Data > Grid Model > Provider Model.
7. We will use an existing BAQ created in the Demonstration database for this exercise. For BAQ ID,
enter ARInvLn01.
8. Save the layer and preview it.
9. Select any order. On the Details page, verify the newly added Invoices and Sales Orders grid
displays below the Lines grid.
Observe the grid displays all invoices for the company as no filter is applied on it. In the next
step, we will define columns to be displayed and apply a filter to only display the information for
19 November, 2022
My First Layer in Application Studio
a part of the currently selected sales order line.
10. Close the preview and return to Application Studio.
Modifying grid properties
1. On the Details page, scroll down and select the Part Invoices and Sales Orders grid panel.
We will first add a Where clause to filter the grid results.
2. In Properties, expand Data > Grid Model > Provider Model > Baq Options.
3. Enter the below expression in the Where field:
InvcDtl_PartNum = '??{OrderDtl.PartNum}'
In this example, the InvcDtl_PartNum column provided by the BAQ is mapped to the
{OrderDtl.PartNum} data binding on the sales order side.
Note on 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 to
execute a BAQ will go through only if the value is NOT empty or null. For
example, OrderNum = ?{OrderHed.OrderNum}.
20 November, 2022
My First Layer in Application Studio
A double question mark prefixing the field value means that a REST request to
execute a BAQ 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}'.
4. Now we will define the list of columns to be displayed. Navigate to metafx-panel-card-grid >
Grid Model.
5. Select Columns, press Add Column and add the below properties:
l Field - InvcDtl_PartNum
l Title - Part
6. Repeat the previous step to add the remaining columns:
Field Title
InvcDtl_InvoiceNum Invoice Number
InvcDtl_InvoiceLine Invoice Line
InvcDtl_OrderNum Sales Order Number
7. Save the layer and preview it.
8. In order to test, select an order with a part that has invoice records in the system. For example,
sales order 5351 shows invoices and sales order for the part Server.
Looks much better, right? Interested in exploring other powerful grid features?
21 November, 2022
My First Layer in Application Studio
Check out the Using Grids in Application Studio course in Epicor Learning
Center.
9. Close the preview.
22 November, 2022
My First Layer in Application Studio
Exercise 5: Deploying Layer
After you finish a layer in the Application Studio and publish it, you can add it to the menu in Menu
Maintenance, making it available for other users within your company.
The changes you make within Menu Maintenance display on the workstations and mobile devices that
run the Epicor ERP application within your environment. For Menu programs, you add or update a Menu
item and then select the customization layer you want to display.
Publishing a layer
1. From the Overflow menu, select Publish.
2. Publishing a layer creates a new record in the history log with a User and Date time-stamp. From
the sidebar, select Publish History and review the information.
We're done in Application Studio!
3. From the Overflow menu, select Exit.
Adding the layer to the Menu
In this example, we will create a new menu and apply our customization.
1. In Kinetic, go to Menu Maintenance.
Menu Path: System Setup > Security Maintenance > Menu Maintenance
2. On the landing page, select MainMenu.
3. In the Nav Tree, navigate to Sales Management > Order Management > General Operations.
23 November, 2022
My First Layer in Application Studio
4. In the Menu Items grid, select New.
The Details card now displays for data entry.
5. Enter the Menu ID. Be sure to enter the prefix "UD" to indicate this is a user-defined menu item.
For this example, enter UDXXX (where XXX are your initials).
6. Enter the Name you want to display on the interface. For this example, enter Modified Order
Entry.
7. In the Module field, select UD.
8. Enter the Order Sequence value you need. This positions the custom program icon within the
current menu items; placing a 0 (zero) value puts the icon at the top of the list.
9. For the Program Type, verify Kinetic App displays.
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.
10. In the Kinetic Application field, enter or select Erp.UI.SalesOrderEntry.
11. Now, in the Kinetic Customization field, select Search. Your XXX-ModifiedSalesOrder
customization displays on the list.
12. Select your customization and press Apply.
Did you know? You can apply several customization layers at the same time. The
order of the layers specifies the order in which the system will apply the changes
to the application UI. For more information, see Application Studio Help.
13. You now need to refresh the interface. Close Kinetic and re-open it.
Congratulations! Your customized Sales Order Entry is now available to users!
24 November, 2022
My First Layer in Application Studio
Summary
In this course, you learned how to:
l Modify an existing grid by adding or removing columns
l Add new grid to a page layout and set up its properties
l Filter results using a grid view
l Construct a data rule to perform an action
l Work with layout components and setup their primary properties
l Publish and deploy your customization to users
We love feedback! Once you have closed this course and you are back on the Course Details page,
please use the Feedback button to let us know how well this course met your needs and
expectations. Thank you.
25 November, 2022
