How To: Kinetic Selectable List

[hmwillett (Hannah Willett)]

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.

Set a page size that’s reasonable for your server.

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.

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.

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

4. 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.

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

Preview your layer and you should get something like this!

Enjoy!

[James_Morris]

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?

[hmwillett (Hannah Willett)]

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

[James_Morris]

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.

[James_Morris]

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

[hmwillett (Hannah Willett)]

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

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

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”!

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.

[James_Morris]

@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.

[hmwillett (Hannah Willett)]

@James_Morris

It did expand and collapse but the list did not refresh. To me that would have been a little cleaner.

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

[victorcarabez (Víctor Cárabez)]

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.

[hmwillett (Hannah Willett)]

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

[victorcarabez (Víctor Cárabez)]

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

[donna.torrice]

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!

[hmwillett (Hannah Willett)]

@donna.torrice

list control, but I must be missing something. Do I need another event to get/set what’s been selected?

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

[donna.torrice]

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.

[Eslam_Mohamed]

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

[klincecum (Kevin Lincecum)]

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

[hmwillett (Hannah Willett)]

@Eslam_Mohamed

but the problem that it’s baq not rest-services

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

@klincecum

Does it still work the same in the newer versions?

Probably? Lol

[Eslam_Mohamed]

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 ?

[hmwillett (Hannah Willett)]

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

[Eslam_Mohamed]

@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?