Working with Grids
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.
Working with Grids in Application Studio
Table of Contents
Using Grids 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
Creating new grids 7
Selecting appropriate grid component 7
Defining grid properties 7
Defining provider model (data source) 8
Exercise 1: Adding a Dashboard to Customer Shipment Entry 9
Creating Sample Data 9
Creating a query 10
Adding a grid to a layer 13
Adding View Options 18
Exercise 2: Facilitating Shipment Entry for Ready to Ship Orders 22
Creating a data view to hold zOrdersToShip BAQ results 22
Binding 'Orders to Ship' grid to a data view 23
Adding a grid action to create a new pack 25
Designing an event to generate a new pack record with order info 26
Testing your modification 34
Exercise 3: Displaying Additional Part Info for Sales Order Lines 36
Creating a data view for additional part details 36
Creating an event to load data into the new data view 37
Adding Load_PartDetailsView to the system orderDtlRowChanged event 39
Adding a sliding panel to display part details 40
Adding an Action Data to show the slider 42
Adding events to open and close the slider 43
Testing your modification 45
Summary 47
3 August, 2022
Working with Grids in Application Studio
Using Grids in Application Studio
Introduction
In Kinetic applications, grids are used extensively. Learn more about them in the Working with Kinetic
Grids section of the Kinetic Application Help. This course contains a series of learning exercises that will
help you use grids more effectively in your individual configurations.
Learning Objectives
After completing this course, you will be able to:
l Add a grid to a page layout and set up its properties
l Select an appropriate data provider model/datasource: BAQ or Service Method
l Filter grid data on the client side by setting up View Options
l Add static and dynamic parameters to a server request to execute a BAQ
l Add Action Data (grid actions)
l Map BAQ Results/method dataset to a data view
l Add grid triggers to events
Prerequisites
l Product version 2022.1.
l Make sure you have Customize Privileges enabled for your user account to access Application
Studio.
l Use Business Activity Query Designer for this course in smart client. This app is now also
available in Kinetic 2022.1, but only in Preview mode.
Tips and Tricks
Whether you are a new user or you have been using Kinetic 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 the visual experience and helps prevents
incorrect selections.
4 August, 2022
Working with Grids in Application Studio
l Properly read the workshop descriptions so you know what follows.
l Take your time and do not rush.
Environment Setup
Accessing Kinetic
While you can use 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/Kinetic2021_2/apps/erp/home/.
On the Kinetic login page that displays, enter your credentials.
Supported browsers
Make sure you use the latest version of any browser from the list below:
l Microsoft Edge®
l Mozilla Firefox®
5 August, 2022
Working with Grids in Application Studio
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 August, 2022
Working with Grids in Application Studio
Creating new grids
As you tailor a Kinetic app to your business needs, you may want to add some Epicor data to a page
and display it in a grid. There are well-known reasons for using grids on an application layout, but
primarily, grids help you present data in a concise and organized manner. Besides that, Kinetic grids
provide additional functionality such as custom 'quick filters' (View Options) or grid actions (Action
Data) that trigger events based on grid context - for example, you can set up an action that will call an
Epicor Function, using grid data as input parameter(s).
Selecting appropriate grid component
You add grids to a page layout in Application Studio. As you browse the available components on the
Toolbox > Components tab, you'll notice two grid-related items - Grid and PanelCard Grid:
Here's the difference:
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 just add anything you need
to its body. Use the Grid component as a 'building block' to construct component groupings - for
example, in Panel Cards.
Defining grid properties
Grids are versatile components with a variety of settings. Depending on what you need to achieve, you
can use some and ignore the others. When you add a Panel Card Grid, the Grid ID property is blank.
Add an ID if you plan to reference the grid in an event or rule. You can find the full list of grid properties
in the Components Reference article in the Application Studio Help. Here, we will mention a few key
fields that impact the look and behavior of grids, and we will use them in these learning exercises:
l Basic > Title - a caption that appears at the top of the grid.
l Data > Grid Model > Ep Binding - is where you bind a grid to a data view.
l Data > Grid Model > Columns - use this section to add columns to your grid.
l Data > Grid Model > Provider Model fields are used to specify the properties and input
parameters of the service method or BAQ that provides data to the grid.
7 August, 2022
Working with Grids in Application Studio
l Advanced > Action Data - use this section to add tool actions to your grid. These can be items in
the grid overflow menu or action icons in the grid's toolbar next to the overflow menu. These tool
actions can trigger events.
l Advanced > View Options - use these to create preset data representations in your grid - for
example, you can setup a view that will display all parts and another view to display only
approved parts.
Defining provider model (data source)
What data sources can you use to populate your grids? Well, there are choices depending on how you
plan to use this data in the application.
l Business Activity Query - use this data provider if you just want to display data in read-only
format. To do this, in grid properties, simply specify an ID of a standard or custom BAQ. The
system calls the Epicor ERP REST API to run this BAQ with specified parameters (if any) and
fetches the results. All BAQ result fields are automatically mapped to the grid. By adding
columns, you can then define what BAQ result fields you want to display in your app.
l Updatable Business Activity Query - use this data provider if you want to be able to update the
database from the grid. Note that to enable field updates you have to map BAQ results dataset to
a data view.
l Data View - you can use any fields from a standard or custom data view in your grid. Also, if you
want to use data from a dataset returned by an Epicor Function in a grid, you will first need to
bind this dataset to a data view.
l Service Method - use this data provider if you want your grid to display data from a single
service. You can also update this data if you add the service method dataset to a data view. This
provider is used to populate combo box lists or some system grids.
Now, let's do some exercises!
8 August, 2022
Working with Grids in Application Studio
Exercise 1: Adding a Dashboard to Customer
Shipment Entry
In this exercise, let's add a grid to the landing page of the Customer Shipment Entry application that
will display a list of orders that need to be shipped within a week or two weeks. The grid will contain
data provided by a custom query and will also show the customer name and some order line details.
We will start by creating a sample data and a Business Activity Query (BAQ) to bring in the data we
need. Next, we will add a customization layer to Customer Shipment Entry that will host a panel card
grid. We will bind the query results to this grid. After that, we will create two grid views based on two
different filters applied to the same query.
Creating Sample Data
Enter a sales order that has multiple detail lines.
1. Launch Sales Order Entry. Go to Sales Management > General Operations > Order Entry.
2. Create a new sales order for ADDISON with part DSS-1010.
9 August, 2022
Working with Grids in Application Studio
3. Enter these detail lines:
Ship By
Line Quantity
Date
1 10 (Middle
of Last
Month)
2 20 (First
Week of
the
Current
Month)
3 30 (Middle
of
Current
Week)
4 40 (Middle
of Next
Week)
5 50 (First
Week of
Next
Month)
4. Save the order.
Creating a query
In this step, use the BAQ Designer program to build the query. We will pull data from four different
database tables - Customer, OrderHed, OrderRel, OrderDtl to display a list of all open orders marked
as 'Ready To Process' (ReadyToCalc field set to true).
The following steps are performed in Business Activity Query Designer launched from
within the Kinetic smart client.
10 August, 2022
Working with Grids in Application Studio
1. In the smart client, use the Browse field on the Home Page Menu to open Business Activity
Query Designer.
Menu Path: System Management > Business Activity Queries > Business Activity Query (BAQ).
2. In the Main Toolbar, select New to add a new query.
The General tab displays for editing.
3. Type in zOrdersToShip for the Query ID.
4. Add a Description, for example, Mini dashboard for outstanding shipments.
5. Select the Shared and All Companies check boxes.
6. On the Query Builder > Phrase Build tab, add the following tables to the canvas:
Erp.OrderHed, Erp.OrderDtl, Erp,OrderRel and Erp.Customer.
Note that relations between these tables are created automatically.
7. Now select the Erp.OrderHed table widget on the canvas. Then, on the bottom panel, press New
to add lines for two table criteria:
Filter
Field Operation
Value
OpenOrder = true
constant
ReadyToCalc = true
constant
11 August, 2022
Working with Grids in Application Studio
8. Move to the Display Fields tab and select the following fields to display: OrderRel.ReqDate,
OrderRel.NeedByDate, Customer.Name, OrderHed.OrderNum, OrderDtl.PartNum,
OrderDtl.LineDesc, OrderDtl.OrderQty.
12 August, 2022
Working with Grids in Application Studio
9. Test the query to make sure it works as designed.
10. Save the query.
Adding a grid to a layer
In this step, we will create a new layer for the Customer Shipment Entry app, and add a grid that will
display the query results.
1. Using the Kinetic web client, search for and open Customer Shipment Entry.
2. Launch Application Studio.
3. Select the <NewLayer> link in the top-right corner of the screen and create a new layer.
For the Layer Name, enter OrdersToShipXXX, where XXX are your initials. For the Description,
enter Orders to ship info on the landing page.
13 August, 2022
Working with Grids in Application Studio
4. Select Save Layer.
5. On the Application Map, select the landing page (Customer Shipment Entry) and click Edit.
The page layout displays.
6. On the Toolbox > Components tab, search for Panel Card Grid and drag it to add it to the very
top of the page above the main grid.
14 August, 2022
Working with Grids in Application Studio
You can expand and collapse a panel card grid, and also add additional grid-
specific controls - fields and tool actions. You can only have one grid in this
component.
7. Select the newly-added component on the page layout and edit its properties:
l Expand the Basic property group and set Title to Orders to ship
l Open Data > Grid Model and set ID to OrdersToShipGrid
l Now, go to Data > Grid Model > Provider Model and set Baq ID to zOrdersToShip
15 August, 2022
Working with Grids in Application Studio
When you specify a BAQ ID, the query results automatically get wired to the grid. You won't see
grid data in the Application Studio design mode. Select Preview to see your changes:
Note that date formatting and column names aren't pretty at this stage (column
names are the table field aliases used by the BAQ engine). Let's generate some
friendly labels by adding columns to the grid. By the way, you do not have to
create a column for each query result field (there can be dozens), just for the
ones you need to display in your app. This is especially relevant when you use
standard system BAQs.
8. Close the preview window. In the Data > Grid Model section, expand Columns. Then press New
to add a column:
16 August, 2022
Working with Grids in Application Studio
Field: OrderRel_ReqDate - in this field, use the field aliases from the query.
Title: Ship By - here, specify the label that will display in the grid.
Erp Editor: Datetime - the Editor corresponds to the field data type. This property is used to set
data formatting in a column.
9. Press to add more columns with the following properties:
Field Title Erp Editor
OrderRel_NeedByDate Need By Datetime
Customer_Name Customer Text
OrderHed_OrderNum Order # Number
OrderDtl_PartNum Part # Text
OrderDtl_LineDesc Part Description Text
OrderDtl_OrderQty Quantity Number
Note the new columns appear in the grid as you add them.
10. Now preview the app and see that the grid looks much cleaner:
17 August, 2022
Working with Grids in Application Studio
11. Close the preview and save the layer.
Adding View Options
In this step, we will create different representations of the data returned by the query. Users will be able
to quickly switch between them using a combo box selector in the grid header.
1. Select the Orders to ship panel card grid and go to its properties. Expand the Advanced
property group and locate the View Options node.
2. Expand View Options and select to add a new grid view:
l Description - All.
l Baq ID - zOrdersToShip. Specify the same BAQ ID that you used in the main grid
properties.
l Expand Baq Options. Then in the Where field, enter: OrderRel_ReqDate>'1900-01-01'
In this field, you can enter Where clauses for the query. It is recommended to set query
filters on the server, that's why we are adding these to the requests sent by the client app
to the server.
Note on Where clause syntax:
18 August, 2022
Working with Grids in Application Studio
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}.
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}'.
If the query for your grid view has multiple Where clauses, instead of putting them all in
one line in the Baq Options > Where field, you can specify them using the Where List
property. Let's use it for the next view options.
3. Go back up to the View Options level, and select to add another view:
l Description - Last Month. This view will display orders from the last month.
l Baq Id - zOrdersToShip.
l Select Set Default. This sets it up as the default view.
l
Go to Baq Options > Where List and press to add a clause.
l In the Column field, enter the name of the field from the query results - OrderRel_
ReqDate.
l Enter >= for the Condition.
l For Value, type in '??{Constant.FirstDayOfPrevMonth}'.
l
Press again and add another clause: OrderRel_ReqDate <= '??
{Constant.LastDayOfPrevMonth}'.
19 August, 2022
Working with Grids in Application Studio
You should have these two Where List items for the Last Month view option:
4. Go back up to the View Options level, and add the third view option - Current month:
Setting/View Next Week
Description Current Month
Set Default (Not selected)
Baq Id zOrdersToShip
Baq Options > Where OrderRel_ReqDate >= '??{Constant.FirstDayOfMonth}' and
(or as separate OrderRel_ReqDate <= '??{Constant.LastDayOfMonth}'
clauses using Where
List)
5. Now add a final view option that shows the data for the Next month.
Setting/View Next Week
Description Next Month
Set Default (Not selected)
Baq Id zOrdersToShip
Baq Options > Where OrderRel_ReqDate >= '??{Constant.FirstDayOfNextMonth}'
(or as separate and OrderRel_ReqDate <= '??
clauses using Where {Constant.LastDayOfNextMonth}'
List)
20 August, 2022
Working with Grids in Application Studio
6. Preview the grid and verify the view options work as designed:
All done here. Keep Application Studio open and move to the next exercise.
21 August, 2022
Working with Grids in Application Studio
Exercise 2: Facilitating Shipment Entry for Ready to
Ship Orders
In this exercise, you will learn about contextual actions you can add to your grids. We will continue
working with the example from the first exercise to enhance our mini dashboard by adding custom logic
that automates creation of a new pack for an order from the grid. Users will be able to select a row for
the order they wish to ship, press a toolbar icon to create a new pack, and the application will open the
shipment details page with pre-filled information for the selected order.
Creating a data view to hold zOrdersToShip BAQ results
To be able to pass a grid column value as a parameter to a REST call action or a child data view, or
update this value directly in the grid, you need to create a data view for your BAQ results data. In this
step, you will create a data view for the zOrdersToShip query we created in Exercise 1 of this course.
This query returns a list of open orders that are ready to be shipped. The list is initially sorted by Ship
By date.
1. In Application Studio, make sure you are in your OrdersToShipXXX layer of Customer Shipment
Entry.
2. Select Data Views on the menu bar. Then, on the Data Views panel, select Add New.
Data view properties display for editing.
22 August, 2022
Working with Grids in Application Studio
3. Set up the view like this:
l For Data View ID, enter OrdersToShipView.
l In the Server Schema field, select BAQ.
l From the BAQ ID drop-down, pick the zOrdersToShip query. If you start typing it, you'll
find it quicker.
The BAQ display fields are pulled into the data view Columns grid.
4. Save the layer.
Binding 'Orders to Ship' grid to a data view
In this step, we will specify the data view in the Grid Model > EpBinding property field. This will bind
our grid that gets data from the zOrderToShip query (this is set up in the grid's Provider Model) to the
OrdersToShipView data view. In this case, we do not need a separate load event to populate the view.
Instead, whatever the query brings into the grid will automatically load into the bound view. You will
then be able to use the grid data in events and rules.
23 August, 2022
Working with Grids in Application Studio
We will also bind each grid View Option - all, current month, last month and next month - to the
OrdersToShipView, so that each time you select a grid view and the underlying query executes, the data
view contents are updated.
As our view is based on a query, the fields for the data view columns appear in the same format as the
Display Field aliases in the BAQ. For example, the OrderHed_OrderNum data view column name is the
same as the BAQ field we originally specified for a grid column.
1. Go to the Application Map, select the landing page (the root element of the tree), and select Edit.
2. On the page layout, select the Orders to ship panel card grid and open its Properties.
3. On the Properties tab, go to Data > Grid Model. In the Ep Binding field, enter
OrdersToShipView - this is the name of the data view:
4. Now, go back to the metafx-panel-grid-card level, expand the Advanced > View Options group
and set the Ep Binding field in each view option to OrdersToShipView:
24 August, 2022
Working with Grids in Application Studio
5. Save your changes.
Adding a grid action to create a new pack
In this step we will add an icon to the grid's toolbar that will trigger an action to create a new pack for
the selected order.
1. In the Orders to ship grid properties, expand Advanced > Action Data.
2. Press to add a new tool action.
3. In the ID field, type in toolCreateNewPack. Take note of this value; we will use it to define the
event trigger.
4. Enter a Description, for example, New Pack. This will show up in the tool tip.
5. Kinetic UX Platform supports the full set of Material Design Icons (v3.9.97, see full list here), you
can use any of them in your applications. You specify icon code in the following format : mdi
mdi-[IconID]. For this example, we will use the van-utility mdi icon, so in the Icon field, type in
mdi mdi-van-utility.
6. Select Add to Primary Toolbar to place the icon into the toolbar next to the grid overflow menu.
25 August, 2022
Working with Grids in Application Studio
7. Save your changes.
Designing an event to generate a new pack record with order
info
In this step, we will build an event that will create a new shipment header for us. To create this custom
logic, we will use an adjusted sequence of system events. We will also copy and slightly tweak the
CallGetHeadOrderInfo event to auto inject the order number into the shipment header.
1. On the menu bar, select Events.
2. On the Events panel, press to add a new event.
After the Event Designer launches with a new empty event, edit its main properties:
26 August, 2022
Working with Grids in Application Studio
3. Select the NewEvent text in the header,
4. On the Properties tab, in the Id field, enter OnClick_toolCreateNewPack.
5. Add a Description, for example, Creates new pack from Orders to Ship grid.
6. Select the No Trigger starting widget and edit its properties:
l From the Type drop-down, select Control.
l From the Hook drop-down, select On Click.
27 August, 2022
Working with Grids in Application Studio
l In the Target field, specify the Description of the previously created grid Action Data - New
Pack.
7. As we continue developing our custom logic for this page, we must set the data view expected by
the application. And that is the ShipHead view. On the Toolbox > Actions tab, expand Dataview
Actions and locate the dataview-set-current action, and add it to the canvas.
8. Drag the dataview set current action to the design canvas.
9. Select the dataview-set current action and go to the Properties tab and the Basic node.
10. In the Value field, enter ShipHead. Expand Behavior and select the OnSuccess node.
28 August, 2022
Working with Grids in Application Studio
11. Now, let's add an action that will redirect us to the shipment Details page. In the Actions tab, go
to the Search field and enter page.
12. Drag the page-navigate-to action to the design canvas.
13. Select the newly added action. In its properties, expand Basic > Parameters.
14. In the Page field, enter Main. This is a typical ID for the main details page in entry apps.
15. So far this event moves the user interface to the Shipment Details page. Now to enhance this
action to create a new record, add logic that links it to the data view Customer Shipment Entry
uses to add records. This is the ShipHead data view. Add the standard GetNewShipHead action to
the event workflow. On the Toolbox > User Defined tab, locate GetNewShipHead and drag it
onto the canvas.
16. Now, copy the event that pulls in the shipment header information. On the Events sidebar panel,
expand the User Defined Actions node and locate CallGetHeadOrderInfo. Right-click on it and
select Copy.
29 August, 2022
Working with Grids in Application Studio
A copy of the system event is created with a Copy_Of_ prefix. Adjust the event ID as needed. In
this example, click on the event name and change the default prefix to - XXX-
CallGetHeadOrderInfo where XXX are your initials.
17. On the design canvas, select the No Trigger widget and set it up like this:
l Type - Event
l Hook - Before
l Target - CallGetHeadOrderInfo
30 August, 2022
Working with Grids in Application Studio
This event will automatically run before the base CallGetHeadOrderInfo event.
18. Select the rest-erp widget on the canvas and go to its properties. In there, we will set this
method's input parameter to the OrderHed_OrderNum column of the OrdersToShipView.
19. Drill down to Advanced > Rest Services > Method Parameters and change the Field Value of
the OrderNum parameter to: {OrdersToShipView.OrderHed_OrderNum}
31 August, 2022
Working with Grids in Application Studio
20. This method also saves the OrderNum value to TransView for subsequent methods to use. Other
methods use this value, so update the TransView to call the OrdersToShipView data view. Go to
the design canvas and select the row-update icon.
21. Go to the Properties tab and expand the Parameters node. Add a new column to the parameter.
Select the Columns node.
22. Add a column. Click the Add New (+) icon.
23. Go to the Ep Binding field and enter TransView.OrderNum.
24. In the Value field, click the Edit (pencil) icon.
32 August, 2022
Working with Grids in Application Studio
25. Enter code that updates the OrdersToShipView data view. Specify the value like this: "
{OrdersToShipView.OrderHed_OrderNum}".
26. Finally, let us end each of the event branches with an Exit action. Before we do that, remove the
event-cancel action at the end of the Error branch.
27. Go to Toolbox > Actions and expand Event Actions. Drag exit onto the canvas, at the end of
each event branch.
The exit action cancels the subsequent event flow. So once the adjusted copy of the base
CallGetHeadOrderInfo event completes, the base event will not run. Your XXX-
CallGetHeadOrderInfo event workflow should look like this:
33 August, 2022
Working with Grids in Application Studio
28. Go back to the OnClick_toolCreateNewPack event and select the GetNewShipHead event.
29. Go to the Properties tab and expand the Behavior node.
30. Select the OnSuccess node. Search for the event-next action and drag it to the canvas.
31. Select the event-next action. For Event Id, enter XXX-CallGetHeadOrderInfo (where XXX is your
initals).
32. Save your changes.
Testing your modification
1. Launch Preview.
2. Select an order from the Order to ship grid and press the van icon.
34 August, 2022
Working with Grids in Application Studio
3. The selected sales order displays in the Order Number field. The app displays the new pack
details including the order number taken from the selected grid line.
4. Save the packer.
5. You can now create detail lines for this packer. Go to the Shipment Lines grid and click the Add
icon.
6. The sales order number displays in the Order column. Enter the Order Line and information from
the sales order populates the shipment detail line.
7. Close the preview and exit Application Studio.
Two down, one to go.
35 August, 2022
Working with Grids in Application Studio
Exercise 3: Displaying Additional Part Info for Sales
Order Lines
In this exercise, we will modify Order Entry to show additional part information that is not present in
the base application. We will create a sliding panel that will display part details for a selected line. The
sliding panel will be launched from the PartNum's context menu. We will fetch the data using an event
that will make a REST call to the Part service, while the part number (PartNum) from the selected line
will be a request parameter. We will load the data into a new data view (PartDetailsView). Finally, we
will bind the fields on the slider to the PartDetailsView columns. In this example, we will make part
detail fields read-only. These fields can be editable. However, updating child views is beyond the scope
of this course.
Alternately, you can use a Business Activity Query (BAQ) to populate the data view.
When you don't need the whole dataset, but just a couple of fields, a BAQ is a preferred
option that will reduce payload from the server.
Creating a data view for additional part details
Let's create a data view that will provide part data to the slider panel.
1. Open Order Entry and launch Application Studio.
2. Create a new layer and call it PartDetailsXXX where XXX are your initials.
3. Add a Description - for example, Display additional part info for sales order lines.
4. From the sidebar menu, open Data Views and press Add New to add a new data view.
5. For Data View ID, type in PartDetailsView.
Now specify server settings first. These define the data source for your view.
6. From the Server Schema drop-down, select ERP because we are going to use the product service
(Erp.BO.PartSvc).
7. In the Server Table, enter Part. This is the main table in the Part service tableset.
8. In the Server Dataset ID, type in Part as well. This time it's the name of the service tableset as in
Erp.Tablesets.PartTableset.
9. In the Data Table and Dataset ID fields, also enter Part to match the Server Table and Server
Dataset ID values respectively. We recommend using matching names here for consistency and
clarity as to what data is provided by the data view.
36 August, 2022
Working with Grids in Application Studio
Note that as you enter a Data Table ID, the Columns grid gets populated with
column data from the specified server dataset.
10. Select Save. You can now use this data view.
Creating an event to load data into the new data view
A data view is just a container for the actual data. You use a REST call event to get the data from a
service or a BAQ. In this example, let's populate the PartDetailsView with data returned by the
Part.GetById method.
We will set this event to run automatically after the two system events - AfterGetById and
orderDtlRowChanged.
1. From the sidebar menu, open Events and press Add New.
2. For Id, enter Load_PartDetailsView.
3. Add a Description - for example, Load data into the Part Details view.
4. Select the No Trigger widget on the canvas and set it up like this:
l Type - Event.
l Hook - After.
37 August, 2022
Working with Grids in Application Studio
l Target - AfterGetByID.
In this case, the Load_PartDetailsView event will run immediately after the system AfterGetById
event completes.
5. Now go to the Toolbox > Actions tab and use search to locate the rest-erp action.
6. Drag the rest-erp action to the design canvas.
7. Select the rest-erp action widget, then on the Properties tab, drill down to Advanced > Rest
Services. Create the following setup:
l Service Name - select Erp.BO.PartSvc from drop-down. This drop-down contains all
services exposed in the Epicor Kinetic REST API.
l Service Operation - select GetByID. This drop-down contains the list of all methods for
the selected service.
8. Expand Method Parameters. This section contains all required input parameters for the selected
method. The GetByID method expects a PartNum as a parameter.
9. For Field Value, enter OrderDtl.PartNum:
The system will take the PartNum value from the current row in the Lines grid on Order Detail.
38 August, 2022
Working with Grids in Application Studio
10. Next, navigate to the ERP Rest Arguments > Response Parameters section. Press Add New
to set up a new parameter mapping.
11. For the Parameter Name, enter Part. This value corresponds to the Server Table ID you
specified on the data view.
12. In the View Name field, type in PartDetailsView. This is the name of the data view to which you
are mapping the service method dataset.
13. In the Parse from Response Path field, enter returnObj. This default entity contains the
returned data.
14. Save the event.
Adding Load_PartDetailsView to the system
orderDtlRowChanged event
In Kinetic applications, when you first open a page that contains a grid, the first line is always in focus.
By populating the view right after the AfterGetById event we make sure that unless you select a
different line, the sliding panel will show information for the part in that first line. We will create a copy
of the Load_PartDetailsView event to reload data into the view whenever the orderDtlRowChanged
system event is executed (toggling between lines) based on the selected line context (PartNum).
1. On the Events sidebar panel, locate and right-click on the Load_PartDetailsView event.
The Copy_Of_Load_PartDetailsView event opens for editing.
39 August, 2022
Working with Grids in Application Studio
2. Change its ID to something more meaningful - for example, RowChanged_Load_
PartDetailsView.
3. Select the No Trigger widget on the canvas and set it up like this:
l Type - Event.
l Hook - After.
l Target - orderDtlRowChanged.
In this case, the RowChanged_Load_PartDetailsView event will run immediately after the
system orderDtlRowChange event completes.
4. Make sure the rest-erp action is set up as in the original Load_PartDetailsView event.
5. Save the layer.
Adding a sliding panel to display part details
In this step, let's create s sliding panel that will show the additional part information. Please refer to the
Working with Sliding Panels section of the Application Studio help for a detailed description of this
functionality. In this example, we will add just a couple of fields to the slider not to over-complicate it:
1. Go to Application Map.
2. Select the root element of the tree - Sales Orders - and press Add New.
An empty box appears on the App Map. It is connected to the root element.
3. On the right-side Details panel, edit the following properties:
l Name - PartDetailsPanel. Take note of this ID, you will need to specify it in the action that
will open the slider at runtime.
l Caption - Part Details. We''ll keep it simple.
l From the Page Type drop-down, select SlidingPanel.
40 August, 2022
Working with Grids in Application Studio
Once you select this option, the page gets disconnected from the root element and moves
to the Slide Out Panels area on the App Map. Continue editing page properties.
l Select the Show Buttons option. This will enable any buttons you specify, like OK, Yes,
No, or Cancel to always appear on the slider layout.
l Expand the drop-down just above the Add Buttons button and define the single button for
your slider:
l For ID, enter BtnPartDetailsOK. Remember this ID as well. This will be a trigger for the
event that will close the slider.
l Set the Label Text to OK.
4. Select Save
5. Back on the Application Map, select the Part Details sliding panel and press Edit.
The page layout displays.
6. On the layout, select the Part Details caption, then on the Properties tab, select the Tiny width
type.
7. Now move to the Toolbox > Components tab, select the GroupBox component. Drag and drop it
onto the canvas.
41 August, 2022
Working with Grids in Application Studio
8. In the GroupBox properties, remove Label Text; set the Layout > Flex Direction property to
Column. This way, the fields that you add will stack one on top of the other.
9. Add a Text Box component to the group box and edit its properties like this:
l Set Label Text to Part;
l Set Data > EpBinding to PartDetailsView.PartNum. Note that we bind this field to a
column from the PartDetails view that we created in Step 1 of this exercise. We are adding
PartNum here for testing purposes, just to verify that the slider displays data for the right
part.
l In the State property group, select Read Only.
10. Add another text box right below the first one and edit its properties:
l Set Label Text to Class;
l Set Data > EpBinding to PartDetailsView.ClassID.
l The layout of your sliding panel should look similar to this:
11. Save your changes.
Adding an Action Data to show the slider
In this step, we will add an action item to the grid overflow menu. By selecting this action, users will
launch the Part Details sliding panel.
1. On the Application Map, select the Details page and press Edit.
The page layout displays
2. Scroll down to the Lines panel card and select the Lines grid.
3. In the grid properties, expand the Advanced property group and select Action Data.
42 August, 2022
Working with Grids in Application Studio
4. Press Add New to create a new grid action:
5. For ID, enter ToolPartDetails. Again, remember this ID, it will trigger slider launch.
6. In the Description field, type in Show Part Details. In this example, we are not going to add an
icon for this action and just make this Action Data an menu option.
7. Select Save.
Adding events to open and close the slider
In this step, add two events that will open and close the slider.
1. On the Events panel, press Add New to add a new event.
l On the Properties tab, change the default NewEvent ID for OnClick_BtnShowPartDetails.
l Add a Description - for example, Show Part Details panel.
2. Select the No Trigger widget and edit its properties:
l Type - Control.
l Hook - On Click.
l Target - ToolPartDetails.
43 August, 2022
Working with Grids in Application Studio
This means that the event action executes when the Show Part Details grid menu item is
selected.
3. From the Toolbox > Actions tab, select the slider-open action and add it to the flow.
4. Edit action properties:
l In the Parameters > Page field, enter the sliding panel name - PartDetailsPanel.This is all
you need to specify for this action:
5. Save this event and add a new one - OnClick_BtnPartDetailsOK.
6. Configure the trigger:
l Type - Control.
l Hook - On Click.
l Target - BtnPartDetailsOK.
Pressing the OK button on the slider will make the panel collapse.
7. From the Toolbox > Actions tab, select the slider-close action and add it to the flow:
44 August, 2022
Working with Grids in Application Studio
You don't need to specify anything for this action, it just closes the currently opened slider.
Testing your modification
Let's see how it all works now:
1. In Application Studio, press Preview.
2. Open an order. For example, 5313 or 5399 from the Demo DB: they both have 2 lines.
3. On the Details page, scroll down to the Lines panel card grid and select Part Details in the grid
overflow menu:
45 August, 2022
Working with Grids in Application Studio
The Part Details panel slides on. It contains information for the part from the first line.
4. Close the sliding panel.
5. Move to another line in the grid and select the Part Details overflow menu item again.
The slider now displays information for the part from the second line.
You have completed all exercises!
46 August, 2022
Working with Grids in Application Studio
Summary
In this course, you learned how to:
l Add a grid to a page layout and set up its properties
l Select an appropriate data provider model: BAQ or Service Method
l Filter grid data on the client side by setting up View Options
l Add static and dynamic parameters to the REST request to execute a BAQ
l Add Action Data (grid actions)
l Map BAQ Results/method dataset to a data view
l Add grid triggers to events
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.
47 August, 2022
