topic Re: How to create a two column user input modal window where the second column is populated based on single input on first column? in Discussions

How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Mon, 09 Oct 2023 14:32:14 GMT

I would like to create a two column user input modal window where the user input goes into the first column (single input box) for a "parent part ID", based on which adjacent second column window entries (child part IDs) get populated.

The entries in the second column come from a database query (for which I already have a script). A "parent part ID" can have one or more than one "child part IDs"
This query script needs to run upon a checkbox being checked adjacent to the parent part ID input box after the input.
Once one or more than one child part IDs (as the case may be) are selected in the second column (again using checkbox), press of the OK button at the bottom of the modal window is to make the selected entries in second column available (as a list) for a follow on script to use.
A select all option for the entries in the second column would be an added advantage.

I would appreciate if I can get some ideas on how to proceed with this in JSL?

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Mon, 09 Oct 2023 17:25:32 GMT

Could you create some sort of mock-up of the UI and provide some example data?

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Mon, 09 Oct 2023 21:18:49 GMT

@jthi Please see attached. User enters e.g. 9098 and checks the box (red tick, does not need to red colour btw) under Parent Part ID. Checking this box runs a script in the background which generates a single column data table or a list (I have this script so can do either as needed). The row values of this single column table or list values populate the rows on the right side of the user input window, under Child Part ID. User then selects the Chart Part IDs as desired using the check box ("select all" and "uncheck all" options would be great to have).

Upon pressing Fetch, the Parent Part ID and Child Part IDs are to be made available as two separate lists for a follow on script to use.

Hope I have been able to explain clearly enough.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 05:24:13 GMT

Ok. Few suggestions I would replace check boxes with buttons. For Parent Part ID it could be something like "Get Child Part IDs" and for Child Part ID buttons for "Select All" an "Unselect All". User can perform their selections in the list box.

This might give you some ideas what you could do

Names Default To Here(1);

aa_parents = ["123" => {"111", "222", "333"}, "345" => {"555", "777", "999"}];
aa_parents << Set Default Value({});

get_childids = function({this}, {Default Local},
	new_childids = aa_parents[(this << prev sib) << get text];
	lb_child << Set items(new_childids);
);

nw = New Window("", /*<< modal*/
	H List Box(
		Panel Box("Parent ID",
			Lineup Box(N Col(2),
				Text Edit Box("", << Set Width(150)),
				Button Box("Get Child Ids", << set function(function({this},
					get_childids(this);
				)))
			)
		),
		Panel Box("Child ID",
			H List Box(
				lb_child = List Box({}),
				Lineup Box(N Col(1),
					Button Box("Select All", 
						For Each({item, idx}, lb_child << get items,
							lb_child << Set Selected(idx);
						);
						wait(0);
					),
					Button Box("Unselect All",
						lb_child << Clear selection;
					),
				)
			)
		),
		Panel Box("Actions",
			Lineup Box(N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 09:43:40 GMT

@jthi Thanks. This should do the job. Buttons in place of check box is fine. I have changed your script to a function but struggling to place get selected () correctly to get the selected values as list (e.g. my commented Return statement at the bottom of the function) when user clicks OK. Please could I get some pointers on where to place get selected () correctly?

Names Default To Here (1);

getUserInput  = Function ({aa_parent}, {return_selectionAslist},

aa_parents << Set Default Value({});

get_childids = function({this}, {Default Local},
	new_childids = aa_parents[(this << prev sib) << get text];
	lb_child << Set items(new_childids);
		
	);

nw = New Window("", 
	H List Box(
		Panel Box("[1] Enter Parent ID",
			Lineup Box(N Col(2),
				Text Edit Box("", << Set Width(150)),
				Button Box("Get Child Ids", << set function(function({this},
					get_childids(this);
				)))
			)
		),
		Panel Box("[2] Select Child ID",
			H List Box(
				lb_child = List Box({}),
				Lineup Box(N Col(1),
					Button Box("Select All", 
						For Each({item, idx}, lb_child << get items,
							lb_child << Set Selected(idx);
						);
						wait(0);
					),
					Button Box("Unselect All",
						lb_child << Clear selection;
					),
				)
			)
		),
		Panel Box("[3] Fetch Test Data",
			Lineup Box(N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

// return_selectionAslist = As List [Parent ID, selected_Child_ID(s) ];
Return (return_selectionAslist); 
);

//Test
clear log ();
aa_parent_1 = ["123" => {"111", "222", "333"}]; aa_parent_2 = ["345" => {"555", "777", "999"}]; 
myList= getUserInput (aa_parent_1);

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 09:53:37 GMT

Put it inside OK button so it will be executed when user presses that button.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 10:00:51 GMT

@jthi Thanks. Just realized that a key part which is missing in the function above is that a script (which I have) needs to run (in the background) when the user clicks "Get Child IDs" which will generate the child IDs based on the parent ID entered. These child IDs get displayed in the second panel. User then chooses one or more of the Child IDs.

In the example discussed here, the Parent IDs and Child IDs are already available which is not how it would be in the real case.

How to get a script to run when the user clicks on "Get Child IDs" the output of which populates the Child IDs?

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 10:14:31 GMT

I did provide you with an idea on how to handle that with get_childids, replace it with your own function which gets the data and then sets the values (aa_parents is just "simulating" the database in this case).

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 11:01:35 GMT

@jthi Yes thanks. I need help on how to run a script (actually a function with Parent ID as input) when the Get Child IDs button is clicked.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 11:10:13 GMT

Example is already there. Is there something you cannot convert to work with your script? this maybe, which can be confusing even though it is just a name for argument/parameter which refers to the element which calls the function?

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 11:24:28 GMT

@jthi My JMP skills are not good yet (I have been a Matlab user so far) so still struggle with the JMP way of thinking. I am trying this side but so far no success. Never used this before.

What I was trying was use Get Selected Indices (), something I have used before, to capture user click on Get Child IDs, based on which get the function call to fire and get the Child IDs. Again no success so far.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 12:38:50 GMT

@jthi . I seem to have made some progress, but still need help.

I have moved back to script (in place of function in post 5 in this thread).

Below is partly working script. I am struggling to input the Parent ID (e.g. "715" below) from users Parent ID input in my fetchChildIds function. Need help here.

I basically need to get the input to the text edit box into my function argument to replace "715".

Names Default To Here (1);
clear log ();
include ("_fetchChildIds.jsl");
//aa_parents << Set Default Value({});

get_childids = function({this}, {Default Local},
	//new_childids = aa_parents[(this << prev sib) << get text];
	
	new_childids = fetchChildIds ("715");
	lb_child << Set items(new_childids);
	);
	
nw = New Window("", 
	H List Box(
		Panel Box("[1] Enter Parent ID", //sets outside panel
			Lineup Box(N Col(2),
			pid = Text Edit Box("", << Set Width(150)),
				Button Box("Get Child ID(s)", << set function(function({this},
					get_childids(this);
				)))
			)
		),
		Panel Box("[2] Select Child ID",
			H List Box(
				lb_child = List Box({}),
				Lineup Box(N Col(1),
					Button Box("Select All", 
						For Each({item, idx}, lb_child << get items,
							lb_child << Set Selected(idx);
						);
						wait(0);
					),
					Button Box("Unselect All",
						lb_child << Clear selection;
					),
				)
			)
		),
		Panel Box("[3] Fetch Test Data",
			Lineup Box(N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 13:19:20 GMT

@jthi

Why does this not show the user entered parent ID. It proceeds with 715. An updated value is not taken/used. Am I placing in the wrong place i.e. under the Text Edit Box?

pid = Text Edit Box("715", << Set Width(150)),	
			ParentID = nw["pid" ];	show (ParentID);

the user updated ParentID is available outside the New Window (), but iI think I need it when the Button Box is pressed.

Button Box("Get Child ID(s)", << set function(function({this},
					get_childids(this);

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 13:32:38 GMT

You need to use << Get Text to get the value from Text Edit Box

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 13:49:06 GMT

@jthi yes, tried << Get Text. I can get the value out ouside the new window()

I think my issue is correct placement of the Get Text.

I cannot get the Parent ID from user input to pass on correctly when "Get Child ID" button is placed.

Pressing "Get Child ID" should run my fetch Child ID function with the Parent ID from user input.

Would appreciate some help here.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 14:08:24 GMT

You are using hard-coded input value of "715" and not the user's input

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 14:16:53 GMT

@jthi

>>You are using hard-coded input value of "715" and not the user's input

This was just to show what I am doing. I want to replace "715" with user input.

The Parent ID needs to pass to the function argument when the Get Child IDs botton is pressed.

fetchChildIds ()

The hard coded case works as expected, but I cannot get the user input in as an argument to my above mentioned function.

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 14:39:58 GMT

The script has no indications of you using for example

pid  << get text

my method of using of using this to travel display boxes is more complicated (but sometimes might be more robust), just using reference should be enough.

Also start with very simple script and get it working first. Start with scripting index example:

Names Default To Here(1);
win = New Window("Example", fontobj = text = Text Edit Box("Example Text"));
Print(text << Get Text());

modify it to have button box

Names Default To Here(1);
win = New Window("Example", 
	teb = Text Edit Box("Example Text"),
	Button Box("Get Text")
);

add function/expression to the button

Names Default To Here(1);
win = New Window("Example", 
	teb = Text Edit Box("Example Text"),
	Button Box("Get Text",
		show(teb << get text)
	);
);

move the function/expression out of button box

Names Default To Here(1);

get_my_text = function({}, {Default Local},
	show(teb << get text)
);

win = New Window("Example", 
	teb = Text Edit Box("Example Text"),
	Button Box("Get Text",
		get_my_text();
	);
);

make the function return something

Names Default To Here(1);

get_my_text = function({}, {Default Local},
	teb_txt = teb << get text;
	return(teb_txt);
);

win = New Window("Example", 
	teb = Text Edit Box("Example Text"),
	Button Box("Get Text",
		user_txt = get_my_text();
		show(user_txt);
	);
);

and so on. It is very difficult to try and get the whole script working on one go, so work on much smaller problems one at the time

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

Neo — Tue, 10 Oct 2023 15:08:40 GMT

@jthi Many thanks for your inputs. I have now made the script much smaller which I hope will help highlight the issue I am having.

My comment in capital case below (adjacent to returnedPid = pid << get text; show (returnedPid)) is where I need help.

The user input on Parent ID is not getting passed onto get_childids function call. Is my <<get text misplaced (it is reporting the default value "" and not the user updated value)?

Names Default To Here (1);
// function inclusion to fetch child IDs from data base for a given Parent ID.
include ("_fetchChildIds.jsl"); // function called below.

get_childids = function({this}, {Default Local},
	new_childids = fetchChildIds (returnedPid);
	//lb_child << Set items(new_childids);
	);
	
nw = New Window("FetchData ", //<< Modal, <<Return Result,
	H List Box(
		Panel Box("[1] Enter Parent ID", //sets outside panel
			Lineup Box(N Col(2),
			pid = Text Edit Box("", << Set Width(150)),	// defines the user input box
			returnedPid = pid << get text;	show (returnedPid); //DOES NOT GET/SHOW USER INPUT 
				Button Box("Get Child ID(s)", << set function(function({this},
					get_childids(this); 
				)))
			)
		),
		Panel Box("Fetch Test Data",
			Lineup Box(N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

Re: How to create a two column user input modal window where the second column is populated based on single input on first column?

jthi — Tue, 10 Oct 2023 15:14:45 GMT

It should be inside the button box, not somewhere in between text edit box and button box.

Names Default To Here(1);

nw = New Window("FetchData ",
	H List Box(
		Panel Box("[1] Enter Parent ID", 
			Lineup Box(N Col(2),
				pid = Text Edit Box("", <<Set Width(150)),
				Button Box("Get Child ID(s)",
					returnedPid = pid << get text;
					Show(returnedPid); // does get user input
				)
			)
		),
		Panel Box("Fetch Test Data", 
			Lineup Box(N Col(1), 
				Button Box("OK"), 
				Button Box("Cancel")
			)
		)
	)
);