Set text-box from specific selection-list dataview/dataset property

James_Morris · June 8, 2022, 2:27pm

I am using this excellent tutorial by @hmwillett to get familiar with Kinetic. What I am trying to figure out now is it possible to bind to a text box value to a selection-list “Selected” property other than the one that is displayed in the selection-list? I am loading data into a view from a rest call. That data contains an array of objects each with a “Display”, “Name” and a “Time” property. I created an event to react when the view changes. That event sets the text-box property and displays a toast message that is supposed to display the “Time” property value. I would like the user to be shown the “Display” value in the selection list but upon making a selection show the “Time” property value in the text box below. Currently the text box is being set to the “Display” value even though in the row-update and toast widgets I use "{III_SelCustomEngView.Time}". See below.

Screen Cast
screenCast

Selection List

Event → trigger

Event → row-update

Event → toast message

Data returned to be used in binding

Loading the dataview from a rest call

James_Morris · June 8, 2022, 4:32pm

After further debugging, by writing to the console the contents of the “III_SelCustomEngView” view, I see that the first object in the array’s “Time” property is holding the tilde separated value consisting of the selected items. I added another property called “Results” as to not overwrite the first “Time” property value. Not sure why the view holding the selected items needs all the data of the available items just to use the first object in the array to store the results. I obviously don’t understand how all of this works. My overall goal here is to load this data into memory, as to limit my trips to the server, and as the items are selected calculate the total time using the values stored in the “Time” property. The next step was to capture the values for calculation.

Before adding Results property

 [
		{
			"Name": "MD_WARNING",
			"Display": "Maryland Warning",
			"Time": "Man and Flame~Appendix H"
		},
		{
			"Name": "VA_WARNING",
			"Display": "Va Warning",
			"Time": "120"
		},
		{
			"Name": "IN_CASE_OF_FIRE",
			"Display": "In Case Of Fire",
			"Time": "17"
		},
		{
			"Name": "INITIAL_TIME",
			"Display": "Initial Time",
			"Time": "5"
		},
		{
			"Name": "APPENDIX_H",
			"Display": "Appendix H",
			"Time": "17"
		},
		{
			"Name": "DC_ALL_ACCIDENT",
			"Display": "DC All accident",
			"Time": "35"
		},
		{
			"Name": "MASS_INCASE",
			"Display": "Mass In Case Of Fire",
			"Time": "15"
		},
		{
			"Name": "MAN_FLAME",
			"Display": "Man and Flame",
			"Time": "10"
		},
		{
			"Name": "PHASE_2",
			"Display": "Phase II",
			"Time": "45"
		},
		{
			"Name": "CERT_INSP",
			"Display": "Certificate Of Inspection",
			"Time": "6"
		},
		{
			"Name": "MD_NO_SMOKING",
			"Display": "Maryland No Smoking",
			"Time": "36"
		},
		{
			"Name": "STRIP_SWITCH",
			"Display": "Strip Switch",
			"Time": "5"
		},
		{
			"Name": "CA_NO_SMOKING",
			"Display": "California No Smoking",
			"Time": "36"
		},
		{
			"Name": "DC_WARNING",
			"Display": "DC Warning",
			"Time": "23"
		},
		{
			"Name": "ELEV_NO",
			"Display": "Elevator #",
			"Time": "6"
		},
		{
			"Name": "MORE_MISC_ENGRAVE",
			"Display": "More Misc Engraving",
			"Time": "30"
		},
		{
			"Name": "RATH",
			"Display": "Rath",
			"Time": "15"
		},
		{
			"Name": "CAPACITY",
			"Display": "Capacity",
			"Time": "6"
		},
		{
			"Name": "PHASE_1",
			"Display": "PHASE I",
			"Time": "25"
		},
		{
			"Name": "NO_SMOKING",
			"Display": "No Smoking",
			"Time": "10"
		},
		{
			"Name": "DC_NO_SMOKING",
			"Display": "DC No smoking",
			"Time": "17"
		},
		{
			"Name": "MISC_ENGRAVE",
			"Display": "Misc Engraving",
			"Time": "30"
		},
		{
			"Name": "SELECTOR_SWITCH",
			"Display": "Selector Switch",
			"Time": "5"
		},
		{
			"Name": "FLOOR_MAP",
			"Display": "Floor Map",
			"Time": "60"
		},
		{
			"Name": "LOGO",
			"Display": "Logo",
			"Time": "11"
		},
		{
			"Name": "WURTEC_PHONE",
			"Display": "Wurtec Phone",
			"Time": "15"
		},
		{
			"Name": "VA_NO_SMOKING",
			"Display": "Va No Smoking",
			"Time": "120"
		}
	]

After adding Results property

 [
		{
			"Name": "MD_WARNING",
			"Display": "Maryland Warning",
			"Time": "30",
			"Results": "Va Warning~Maryland Warning"
		},
		{
			"Name": "VA_WARNING",
			"Display": "Va Warning",
			"Time": "120",
			"Results": null
		},
		{
			"Name": "IN_CASE_OF_FIRE",
			"Display": "In Case Of Fire",
			"Time": "17",
			"Results": null
		},
		{
			"Name": "INITIAL_TIME",
			"Display": "Initial Time",
			"Time": "5",
			"Results": null
		},
		{
			"Name": "APPENDIX_H",
			"Display": "Appendix H",
			"Time": "17",
			"Results": null
		},
		{
			"Name": "DC_ALL_ACCIDENT",
			"Display": "DC All accident",
			"Time": "35",
			"Results": null
		},
		{
			"Name": "MASS_INCASE",
			"Display": "Mass In Case Of Fire",
			"Time": "15",
			"Results": null
		},
		{
			"Name": "MAN_FLAME",
			"Display": "Man and Flame",
			"Time": "10",
			"Results": null
		},
		{
			"Name": "PHASE_2",
			"Display": "Phase II",
			"Time": "45",
			"Results": null
		},
		{
			"Name": "CERT_INSP",
			"Display": "Certificate Of Inspection",
			"Time": "6",
			"Results": null
		},
		{
			"Name": "MD_NO_SMOKING",
			"Display": "Maryland No Smoking",
			"Time": "36",
			"Results": null
		},
		{
			"Name": "STRIP_SWITCH",
			"Display": "Strip Switch",
			"Time": "5",
			"Results": null
		},
		{
			"Name": "CA_NO_SMOKING",
			"Display": "California No Smoking",
			"Time": "36",
			"Results": null
		},
		{
			"Name": "DC_WARNING",
			"Display": "DC Warning",
			"Time": "23",
			"Results": null
		},
		{
			"Name": "ELEV_NO",
			"Display": "Elevator #",
			"Time": "6",
			"Results": null
		},
		{
			"Name": "MORE_MISC_ENGRAVE",
			"Display": "More Misc Engraving",
			"Time": "30",
			"Results": null
		},
		{
			"Name": "RATH",
			"Display": "Rath",
			"Time": "15",
			"Results": null
		},
		{
			"Name": "CAPACITY",
			"Display": "Capacity",
			"Time": "6",
			"Results": null
		},
		{
			"Name": "PHASE_1",
			"Display": "PHASE I",
			"Time": "25",
			"Results": null
		},
		{
			"Name": "NO_SMOKING",
			"Display": "No Smoking",
			"Time": "10",
			"Results": null
		},
		{
			"Name": "DC_NO_SMOKING",
			"Display": "DC No smoking",
			"Time": "17",
			"Results": null
		},
		{
			"Name": "MISC_ENGRAVE",
			"Display": "Misc Engraving",
			"Time": "30",
			"Results": null
		},
		{
			"Name": "SELECTOR_SWITCH",
			"Display": "Selector Switch",
			"Time": "5",
			"Results": null
		},
		{
			"Name": "FLOOR_MAP",
			"Display": "Floor Map",
			"Time": "60",
			"Results": null
		},
		{
			"Name": "LOGO",
			"Display": "Logo",
			"Time": "11",
			"Results": null
		},
		{
			"Name": "WURTEC_PHONE",
			"Display": "Wurtec Phone",
			"Time": "15",
			"Results": null
		},
		{
			"Name": "VA_NO_SMOKING",
			"Display": "Va No Smoking",
			"Time": "120",
			"Results": null
		}
	]

James_Morris · June 8, 2022, 6:33pm

I see why this was happening. During the rest call in the “Response Parameters” I was loading the results into the “III_AvailCustomEngView” along with the “III_SelCustomEngView” view. I am now initializing that dataview with an empty Dataset. It now just contains the selected values when I log to console. This still does not get me where I want to go but at least this makes sense.

[{"Results":"In Case Of Fire~Va Warning"}]

hmwillett · June 8, 2022, 6:44pm

Yeah–that post is a bit dated and could use some updating. It can definitely and should be loaded into an empty dataset. No reason to load the full thing as I had initially thought.

Regarding your original question, if you’re just trying to use the selected values, use your event that you created and do a row-update to a TransView field. You can roll the sum that way. The selected grid really doesn’t offer a good way to hold onto multiple columns.
The struggle is real. AppStudio

Okay–so this might be janky, but theoretically thinking here… Use the DataTable.ColumnChanged event for the selected list. Grab the value, pass it to a function that does a lookup to the original table to grab the time value. Return that and aggregate it to a TransView field for your calculation. ¯\_(ツ)_/¯

James_Morris · June 8, 2022, 8:51pm

Can I access the data pulled into my “III_AvailCustomEngView” or do I need to make a call the server to get the time value? Thanks.

data2

hmwillett · June 9, 2022, 1:51pm

I’m not aware of a way to do a lookup to another dataview in App Studio. I can poke around, but I’m not gonna hold my breath, honestly.

James_Morris · June 9, 2022, 2:34pm

That’s what I was afraid of. Thanks for checking.

hmwillett · June 10, 2022, 1:48pm

Granted–I didn’t look too hard, but I didn’t come across a way to do this.
I’d probably end up defaulting to using the function. ¯\_(ツ)_/¯

James_Morris · June 13, 2022, 8:13pm

This works using JavaScript but you have to make it a one liner. Its faster than making a call to the server ever time a selection is made to look up the time. You would think there would be a widget or something in the toolbox to execute JavaScript. If anyone has a better way to do this fell free to comment.

screenCast2

"#_trans.dataView('III_SelCustomEngView').viewData.map(fm => fm.Results)[0].split('~').map(sv => +trans.dataView('III_AvailCustomEngView').viewData.find(av => av.Display === sv)?.Time).filter(sv => sv).reduce((partialSum, a) => partialSum + a, 0)_#"

hmwillett · June 13, 2022, 8:17pm

Love it!
From my understanding, they’re not giving us a JS widget due to security issues or something.
I typically do what you did.