nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic Dialog box for selecting different observations

Rajat

I have the following data. I want to create a dialog box which will show different type of games available in game column and it will give option to user to select the tyoe of each game. Once user has selected type for each game and click ok then it should update the orignal table with new column added having game type for each game. Also, if possible game that user has selected for a particular game type, that game should hide from the list of games in the dialog box, to avoid duplication.

Below is my orginal and final table. Interactive dialog box should look like as in attached image where user can drag and drop the game choices available to the respective game type. Ok button should only activate once all the games are selected.

Please help me create .jsl script for the same.

orignal Table:

Name	Game
A	Football
A	chess
A	Badminton
B	Football
C	Chess
B	Table Tennis
D	Nothing

Final Table:

Name	Game	Game Type
A	Football	outdoor
A	Chess	indoor
A	Badminton	indoor
B	Football	outdoor
C	Chess	indoor
B	Table Tennis	indoor
D	nothing	Not Applicable

Thanks

Dialog_Box.jpeg

Accepted answers

gzmorgan0

@Rajat,

Most of the JMP Scripting Language, JSL, objects and functions for building custom dialogs target table columns. Consider the JMP built-in dialog windows are requesting columns. There are objects that can be used for custom selection, but these "values" objects typically require more programming. For example, a ColListBox object has a builtin drag and drop interface: a column name can be dragged to another ColListBox, and the column names will be unique.

JSL does provide ListBox() objects, however, it is now the scripters job to ensure uniqueness. For example, depending upon how you code the task, you have to manage that Football has just one classification and that te name is used once.

One method is to not use a dialog, but create a table summary of unique games and the Game Type, have the user update this shortened table then update the source table. This method is similar to older database update interfaces.

I have attached a very simple and not so elegant (repeated, brute force code) script to complete the described task. I kept it simple since you have not read the book. The script interface includes a remove button, in case a game was accidentally selected for an incorrect type. Instead of creating a union function, so the list of games have no duplicates, and functions to ensure a game is not classified as both indoor and outdoor, I built the code to remove the game from the source list once a category has been selected.

You should read about the Associative Array, a keyed list, ListBox, ButtonBox and Set Function().

Below is a screen shot of the dialog and the dialog portion of the script. The full script is attached. Note this could be done with a DataFilterBox, but the ListBox() is easier to use. BTW this was tested on JMP13 and 14.

//--Dialog
usr = New Window("Using List Boxes", <<Modal,
	HListBox(
		PanelBox("Source Values",
		 slb = ListBox(wkList)
		),
		PanelBox("Cast Type",
			lineupBox(ncol(2),
				bb1 = ButtonBox("Indoor", <<setFunction(gSelect) ),
				lb1 = ListBox(idList),
				bb2 = ButtonBox("Outdoor", <<setFunction(gSelect) ),
				lb2 = ListBox(odList),
				bb3 = ButtonBox("Nothing", <<setFunction(gSelect) ),
				lb3 = ListBox(noList)
			)
		),
		PanelBox("Action",
		   LineupBox(ncol(1),
		   bbok = ButtonBox("OK", onOK),
		   bbup = ButtonBox("Remove", onRmv) 
		))
	)
);

Cat_Items.jsl

gzmorgan0

@Rajat,

Attached is a modified script. Items to note:

Uses a ComboBox for the list of Category options, set by a list internal to the script.
Assigments are made by selections from the source list, the current category in the ComboBox and pressing the Assign button
The assignment is listed as Game name > Category
An Update button was added so that the table can be updated incrementally
The source list is created only for Games that have not been assigned a Game Type
The actions for remove and writing to the table had to be changed. Now the items in lb1, the assigment ListBox, have 2 pieces of information in a singe string. The Word(n,string,delimiter) function is used to exatract the pertinent information.

The screenshot displays that one assignment has been made. For this view, if the user presses assign, Badminton and Football will be assigned as Outdoor.

This interface reduces the number of variables for display boxes. Creating a useful interface requires understanding the application, needs and usage, knowing some basics or finding example code that is close to what you want and understanding that. Note that there are many alternatives to this script. Good luck!

JSL for the dialog layout. Full script is attached.

//--Dialog
usr = New Window("Using List Boxes", <<Modal,
	HListBox(
		PanelBox("Source Values",
		 slb = ListBox(wkList)
		),
		PanelBox("Cast Type",
		 LineUpBox(ncol(1),
		    cb = ComboBox(catOpt, <<set width(300), _currCat = cb << GetSelected() ),
			lineupBox(ncol(2),
				bb1 = ButtonBox("Assign", <<setFunction(gSelect) ),
				lb1 = ListBox(catList, nlines(nl) )
			)
		 )
		),
		PanelBox("Action",
		   LineupBox(ncol(1),
		   bbok  = ButtonBox("OK", onOK),
		   bbupd = ButtonBox("Update", onUpd),
		   bbrmv = ButtonBox("Remove", onRmv) 
		))
	)
);

Cat_Items_ComboSelect.jsl

All comments

pmroz

Here's a solution that uses a table box with a col box. Adjust for your game types.

dt = New Table( "Games", Add Rows( 7 ),
	New Column( "Name", Character, "Nominal",
		Set Values( {"A", "A", "A", "B", "C", "B", "D"} ) ),
	New Column( "Game", Character( 16 ), "Nominal", Set Values(
		{"Football", "chess", "Badminton", "Football", "Chess", "Table Tennis", "Nothing"} ) ),
	new column("Game Type", Character, "Nominal")
);

game_list = dt:game << get values;
ngames    = nitems(game_list);

selected_type = {};


type_list = {"No choice made", "Outdoor", "Indoor", "Nothing"};
game_type_cb = {};
game_type_colb = col box("Game Type");

for (i = 1, i <= ngames, i++,
	selected_type[i] = "No choice made";
	game_type_cb[i] = combo box(type_list);
	game_type_colb << append(game_type_cb[i]);
);

nw = new window("Game Type Setting",
	panel box("Select game type for each game",
		tb = table box(
			string col box("Game", game_list),
			game_type_colb
		),
	),
	panel box("Actions",
		hlistbox(
			okb = button box("OK",
				for (i = 1, i <= ngames, i++,
					selected_type[i] = game_type_cb[i] << get selected();
					dt:game type[i] = selected_type[i];
				);
				show(selected_type);
				nw << close window;
			),
			canb = button box("Cancel", 
				nw << close window;
			),
		)
	)
);

Rajat

Hi @pmroz
Thanks for replying.
In my actual dataset I have 1000 games with 25 unique games and also I have only three categories 1.Indoor 2.Outdoor 3.Not Applicable. With this approach I have to select game type for each 1000 games. I tried with unique game also but it didn't work.
Can we have a window which only shows unique values of games? Also, it should allow multiple selection of game and then select game type for all multiple selection of games because selection of game type for each unique value of game is tedious if count of unique game increases.

gzmorgan0

@Rajat,

You should read about the Associative Array, a keyed list, ListBox, ButtonBox and Set Function().

//--Dialog
usr = New Window("Using List Boxes", <<Modal,
	HListBox(
		PanelBox("Source Values",
		 slb = ListBox(wkList)
		),
		PanelBox("Cast Type",
			lineupBox(ncol(2),
				bb1 = ButtonBox("Indoor", <<setFunction(gSelect) ),
				lb1 = ListBox(idList),
				bb2 = ButtonBox("Outdoor", <<setFunction(gSelect) ),
				lb2 = ListBox(odList),
				bb3 = ButtonBox("Nothing", <<setFunction(gSelect) ),
				lb3 = ListBox(noList)
			)
		),
		PanelBox("Action",
		   LineupBox(ncol(1),
		   bbok = ButtonBox("OK", onOK),
		   bbup = ButtonBox("Remove", onRmv) 
		))
	)
);

Cat_Items.jsl

Rajat

Thanks @gzmorgan0
I am looking for this solution only.

I am trying to understand the code. Looks like we have to create so many variables. Can you please suggest me any good video tutorial series (preferably) or any book which I can refer to learn creating interactive dialog boxes using jsl. I am at very beginning of creating these dialog boxes.

Thanks