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!

10 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. ¯\_(ツ)_/¯

Nice how to!!

I tried to do the same (2023.1), but using UDCodes instead UD01 Table, the select list always shows the first list-element selected, and never saves the string list in the database. :smiling_face_with_tear:

Ah, yeah.
This changed at some point.
I have to rewrite it when I get some time.

1 Like

My bad at setting the Target View property, it works fine in 2023.1!

Hi and thank you for your great examples!! I am brand new to Kinetic–worked with Epicor for 8 years. I setup the selected list control, but I must be missing something. Do I need another event to get/set what’s been selected? It doesn’t save to my EpiBinding Customer.MessageList_c. Image 1-- But if I manually add my items to a textbox, it does reflect in my “Selected” panel Image 2



. Thank you for any help!

No, it should save whenever you click save on the form, assuming it’s part of the dataview that’s native to the form it’s on. If you added a new dataview that references something de (Like UD10), you will need to do the update event yourself.

You can check here for some extra info if that’s helpful: Kinetic Control Compendium - #79 by hmwillett

Thank you for your response!! My scenario is very similar to your example. I’m adding a Select list using a UD07 table for my list and binding the results to a UD field I added to Customer.

is there any posibles to do it but with BAQ Dataview ? … i’am trying to select user id which i added to baq and pull it from the left side to the right one but the problem that it’s baq not rest-services
image

Cool, I need this! Does it still work the same in the newer versions?

Sure. Just swap out the Rest widget with the BAQ one.

Probably? Lol

Okay I tried the erp-baq but there is no option for response parameters or something like that is there any manual or guide setup for this using baq ?

Search the forums. There’s are plenty of examples of using that widget.

@hmwillett i figured out how to return data using the erp-baq widget but it returns to fields like textbox or like that but with the selection list i can’t … any suggestions?