How To: Kinetic Selectable List

Hey-diddly-ho-neighborino’s! I haven’t done one of these in a while, so I thought I share a How To on how to create a selection list in Kinetic.
You may be familiar with these from various attribute screens within Epicor and equally frustrated at the fact that you have to customize it yourself to get it into classic.

Well, the day has finally come where Epicor has a native control for it now!
In this example, I’m going to show how to select States that are stored in the UD01 table.
Here’s how to wire it up:

  1. Create two new DataViews: one for the Available Choices and one for the Selected Choices.

2). Create an event to populate these views. I hooked into the After Execute_GetByID and made a REST call to UD01Svc to populate the views. ( The blurred widget does something else irrelevant to this topic.)

Populate the whereClause as needed. I wanted to bring back all rows, so I left mine blank.
image

Set a page size that’s reasonable for your server.
image
Set absolutePage which is going to be which page is returned, for example my page size is 100. If the dataset has 500 records, then it will only return the first 100 if I specify 1 or it will only return 200 - 299 if I specify 2. Leave it at 0 for all.
image

In the Response Parameters, you can have 2 datasets to populate both views at the same time.



Parameter Name: This is the name of the table from the JSON (Yellow Highlight Below)
View Name: This is the name of the view you want the results dumped into.
Parse from Response Path: This is typically going to be returnObj (purple highlight below) unless it’s a custom REST call.
image

  1. Go to the Toolbox and add a Selection List to your designer pane.

  1. Configure the Selection List as follows:

Bind it to a text field.

Set the following properties as shown, but relevant for your Views and Columns. Source = Available and Target = Selected.

Select Dual for Mode Types. This will give you the double column list that displays the available and selected. Specify a number of rows to show. Leave the rest as shown.
image

Select the Delimited checkbox and select the delimiter you used in your EpBinding field.
Ours is tilde-based, so Customer.sgcStateTaxCertList_c will look like: AK~WI~IL~OH
image

Preview your layer and you should get something like this!

Enjoy!

6 Likes

Thanks for this example! Is there a way to add to the AvailGrView(Available) section dynamically? I am not wanting to update the UD01 data base. I added an “Add State” button and a “State” text box. I also added a column to the AvailGrView view named the same as the “State” text box. I added an on click event to the button that currently only displays a dialog box showing what’s in the “State” text box. How do I do this?

image

In theory, you should be able to use the row-add widget.
I didn’t test this, so let me know how it goes!

It almost worked. The state gets added but does not show up until I toggle the panel card. It then displays the new row but the name is missing.

@hmwillett This fixed the blank label problem. Is there a way to refresh the list after a row is added?

Okay–with the help of @josecgomez we have come up with the worst solution possible. :slight_smile:

First, you’re going to want to get the GUID of the panel card.

image

Create your event with this structure:

Row Add:

Condition 1 Expression (change the guid to match yours):

document.querySelectorAll('[ep-guid="bb701a9c-ffbd-4a43-86ee-d1559974e4bf"]')[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].click()=='larry'

You may need to change the number of childNodes called depending on how deep your panel is in the UI compared to mine.

Condition 2 Expression (change the guid to match yours):

setTimeout(()=>{document.querySelectorAll('[ep-guid="bb701a9c-ffbd-4a43-86ee-d1559974e4bf"]')[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].click()=='larry'},0)

Throw some console-writes off of the false branches, so it doesn’t crash.

Aaaaaaannnnnnnd “Magic”!

DualListRefresh

In all seriousness–that might be a good thing to submit as a bug or feedback. We shouldn’t have to jump through hacky hoops like that.

1 Like

@hmwillett and @josecgomez thanks, that worked. Although you are correct about that being a lot of code to refresh a list. I tried to just add a couple of “property-set” items to set the value of the panel card “expanded” to “false” and then set it back to “true” after the “row-add”. It did expand and collapse but the list did not refresh. To me that would have been a little cleaner.

1 Like

Yeah–I tried the same route without success. ¯\_(ツ)_/¯