Create GUI using Application Builder

[#1]

I'm looking for the most efficient workflow to create GUI windows in JSL. I know I can script them manually using New Window() with nested layout boxes (V List Box, H List Box, etc.), but this can be time-consuming and difficult to visualize for more complex dialogs.

I've been exploring the Application Builder, as it allows me to drag and drop controls to visually design the layout, which is fantastic. However, when I save the application, it generates a complete application framework with namespaces.

My specific question is: Is it possible to use the Application Builder (or another tool) to create a window layout and then extract only the JSL code for the New Window object itself?

I'm often just trying to create a single modal dialog or a settings window, and I don't need the entire application structure that comes with it.

[#2]

I don't think there are any ready-made way of doing this and you would have to write your own "parser". This might also be something properly prompted LLM could do, at least for simple cases.

[#3]

Hi @shuey ,

Just to add to @jthi 's comment (as there is no current way to do this) it may help to use the edit > get tree structure and possible the 'get properties' for the components you've built that you could place into an LLM.

I agree it is a nice feature to have, I would recommend adding it to the JMP Wish List.

Thanks,

Ben

[#4 · Accepted solution]

If we consider fairly basic JMP-like platform launcher

 

It will generate following JMP App script

View more...

JMP App(
	Set Name("Application"),
	Set Description(
		"An empty workspace for creating custom applications with one or more windows and scripts"
	),
	Auto Launch(1),
	Snap To Grid(1),
	Show Grid(1),
	Show Properties(1),
	Show Sources(1),
	Group By Category(1),
	Dashboard Mode(0),
	Parameters,
	Tables(
		DataTable1 = GuiTable(
			Set Path(""),
			Set Label("Untitled 2"),
			Location("Current Data Table"),
			Invisible(0)
		)
	),
	Script(JSL Quote(// This script is executed when the application is run.
// Named objects have been created for the application modules
// (for example, "Module1") and the pre-defined object
// "thisApplication" refers to the application object itself.
// Variables and functions declared here are scoped to the
// Application namespace.

)	),
	Allocate(
		Module1 = Plan(
			PreAllocate,
			Script(JSL Quote(// This script is executed when a new module instance is
// created.  The pre-defined object "thisModuleInstance" refers
// to the instance object, but other objects such as boxes and
// scripts have not yet been created.  Variables declared here are
// scoped to the ModuleInstance namespace.

// This special function will receive parameters passed to CreateInstance()
OnModuleLoad({},
);

thisModuleInstance << Create Objects;

// After this point your module instance objects have been created
// and can be referred to by name (for example, "Button1").

)			),
			Allocate(
				List1 = H List Box();
				Panel1 = Panel Box();
				FilterCol1 = Filter Col Selector(Data Table(DataTable1));
				Panel2 = Panel Box();
				Lineup2 = Lineup Box();
				Button3 = Button Box();
				ColList1 = Col List Box(Data Table(DataTable1));
				Text1 = Text Box();
				Combo1 = Combo Box();
				Text2 = Text Box();
				CheckBox1 = Check Box();
				Panel3 = Panel Box();
				Lineup1 = Lineup Box();
				Button1 = Button Box();
				Button2 = Button Box();
			),
			Organize(
				Reparent(Lineup1(Button2));
				Reparent(Lineup1(Button1));
				Reparent(Panel3(Lineup1));
				Reparent(List1(Panel3));
				Reparent(Lineup2(CheckBox1));
				Reparent(Lineup2(Text2));
				Reparent(Lineup2(Combo1));
				Reparent(Lineup2(Text1));
				Reparent(Lineup2(ColList1));
				Reparent(Lineup2(Button3));
				Reparent(Panel2(Lineup2));
				Reparent(List1(Panel2));
				Reparent(Panel1(FilterCol1));
				Reparent(List1(Panel1));
				Relocate(List1(200, 250));
			),
			Initialize(
				List1 << Background Color("None");
				List1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Enabled(1);
				List1 << Horizontal Alignment("Default");
				List1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Text Color("None");
				List1 << UI Only(0);
				List1 << Vertical Alignment("Default");
				List1 << Visibility("Visible");
				List1 << Set Min Size(756, 403);
				List1 << Set Max Size(756, 403);
				List1 << Set Stretch({"Neutral", "Neutral"});
				List1 << set horizontal(1);
				Panel1 << Background Color("None");
				Panel1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Enabled(1);
				Panel1 << Horizontal Alignment("Default");
				Panel1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Text Color("None");
				Panel1 << UI Only(0);
				Panel1 << Vertical Alignment("Default");
				Panel1 << Visibility("Visible");
				Panel1 << Set Min Size(234, 110);
				Panel1 << Set Max Size(234, 110);
				Panel1 << Set Stretch({"Neutral", "Neutral"});
				Panel1 << Set Title("Panel1");
				FilterCol1 << Background Color("None");
				FilterCol1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Enabled(1);
				FilterCol1 << Horizontal Alignment("Default");
				FilterCol1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Text Color("None");
				FilterCol1 << UI Only(0);
				FilterCol1 << User Resizable({1, 1});
				FilterCol1 << Vertical Alignment("Default");
				FilterCol1 << Visibility("Visible");
				FilterCol1 << Set Min Size(194, 52);
				FilterCol1 << Set Max Size(194, 52);
				FilterCol1 << Set Stretch({"Neutral", "Neutral"});
				FilterCol1 << Set Base Font("Text");
				FilterCol1 << Set Font Name("Segoe UI");
				FilterCol1 << Set Font Style("Plain");
				FilterCol1 << Set Font Size(10);
				FilterCol1 << Set Font Scale(1);
				FilterCol1 << Set Max Selected(-1);
				FilterCol1 << Set Size(184, 23);
				FilterCol1 << Set N Lines(1);
				Panel2 << Background Color("None");
				Panel2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Enabled(1);
				Panel2 << Horizontal Alignment("Default");
				Panel2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Text Color("None");
				Panel2 << UI Only(0);
				Panel2 << Vertical Alignment("Default");
				Panel2 << Visibility("Visible");
				Panel2 << Set Min Size(334, 383);
				Panel2 << Set Max Size(334, 383);
				Panel2 << Set Stretch({"Neutral", "Neutral"});
				Panel2 << Set Title("Panel2");
				Lineup2 << N Col(2);
				Lineup2 << Background Color("None");
				Lineup2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Enabled(1);
				Lineup2 << Horizontal Alignment("Default");
				Lineup2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Text Color("None");
				Lineup2 << UI Only(0);
				Lineup2 << Vertical Alignment("Default");
				Lineup2 << Visibility("Visible");
				Lineup2 << Set Min Size(294, 325);
				Lineup2 << Set Max Size(294, 325);
				Lineup2 << Set Stretch({"Neutral", "Neutral"});
				Lineup2 << Spacing(2);
				Button3 << Background Color("None");
				Button3 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button3 << Enabled(1);
				Button3 << Horizontal Alignment("Default");
				Button3 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button3 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button3 << Text Color("None");
				Button3 << UI Only(0);
				Button3 << Vertical Alignment("Default");
				Button3 << Visibility("Visible");
				Button3 << Set Min Size(60, 21);
				Button3 << Set Max Size(60, 21);
				Button3 << Set Stretch({"Neutral", "Neutral"});
				Button3 << Set Button Name("Button3");
				Button3 << Style("Normal");
				Button3 << Set(0);
				Button3 << Set Icon("");
				Button3 << Set Icon Location("Right");
				ColList1 << Background Color("None");
				ColList1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Enabled(1);
				ColList1 << Horizontal Alignment("Default");
				ColList1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Text Color("None");
				ColList1 << UI Only(0);
				ColList1 << User Resizable({1, 1});
				ColList1 << Vertical Alignment("Default");
				ColList1 << Visibility("Visible");
				ColList1 << Set Min Size(184, 194);
				ColList1 << Set Max Size(184, 194);
				ColList1 << Set Stretch({"Neutral", "Neutral"});
				ColList1 << Modeling Type({"Continuous", "Ordinal", "Nominal"});
				ColList1 << Set Data Type("Any");
				ColList1 << Set Min Items(0);
				ColList1 << Set Max Items(-1);
				ColList1 << Set Max Selected(-1);
				ColList1 << Set Size(184, 194);
				ColList1 << Set N Lines(10);
				ColList1 << Set Base Font("Text");
				ColList1 << Set Font Scale(1);
				Text1 << Background Color("None");
				Text1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Enabled(1);
				Text1 << Horizontal Alignment("Default");
				Text1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Text Color("None");
				Text1 << UI Only(0);
				Text1 << Vertical Alignment("Default");
				Text1 << Visibility("Visible");
				Text1 << Set Min Size(64, 19);
				Text1 << Set Max Size(64, 19);
				Text1 << Set Stretch({"Neutral", "Neutral"});
				Text1 << Set Base Font("Text");
				Text1 << Set Font Scale(1);
				Text1 << Set Text("Text1");
				Text1 << Bullet point(0);
				Text1 << Justify Text("Left");
				Text1 << Rotate Text("Horizontal");
				Text1 << Set Width(-1);
				Text1 << Set Wrap(360);
				Text1 << Set Tip("");
				Combo1 << Background Color("None");
				Combo1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Combo1 << Enabled(1);
				Combo1 << Horizontal Alignment("Default");
				Combo1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Combo1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Combo1 << Text Color("None");
				Combo1 << UI Only(0);
				Combo1 << Vertical Alignment("Default");
				Combo1 << Visibility("Visible");
				Combo1 << Set Min Size(180, 23);
				Combo1 << Set Max Size(180, 23);
				Combo1 << Set Stretch({"Neutral", "Neutral"});
				Combo1 << Set Items({"Item1", "Item2"});
				Combo1 << Set(1);
				Text2 << Background Color("None");
				Text2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Enabled(1);
				Text2 << Horizontal Alignment("Default");
				Text2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Text Color("None");
				Text2 << UI Only(0);
				Text2 << Vertical Alignment("Default");
				Text2 << Visibility("Visible");
				Text2 << Set Min Size(64, 19);
				Text2 << Set Max Size(64, 19);
				Text2 << Set Stretch({"Neutral", "Neutral"});
				Text2 << Set Base Font("Text");
				Text2 << Set Font Scale(1);
				Text2 << Set Text("Text2");
				Text2 << Bullet point(0);
				Text2 << Justify Text("Left");
				Text2 << Rotate Text("Horizontal");
				Text2 << Set Width(-1);
				Text2 << Set Wrap(360);
				Text2 << Set Tip("");
				CheckBox1 << Background Color("None");
				CheckBox1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				CheckBox1 << Enabled(1);
				CheckBox1 << Horizontal Alignment("Default");
				CheckBox1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				CheckBox1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				CheckBox1 << Text Color("None");
				CheckBox1 << UI Only(0);
				CheckBox1 << Vertical Alignment("Default");
				CheckBox1 << Visibility("Visible");
				CheckBox1 << Set Min Size(180, 32);
				CheckBox1 << Set Max Size(180, 32);
				CheckBox1 << Set Stretch({"Neutral", "Neutral"});
				CheckBox1 << Set Items({"Item1", "Item2"});
				Panel3 << Background Color("None");
				Panel3 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Enabled(1);
				Panel3 << Horizontal Alignment("Default");
				Panel3 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Text Color("None");
				Panel3 << UI Only(0);
				Panel3 << Vertical Alignment("Default");
				Panel3 << Visibility("Visible");
				Panel3 << Set Min Size(128, 154);
				Panel3 << Set Max Size(128, 154);
				Panel3 << Set Stretch({"Neutral", "Neutral"});
				Panel3 << Set Title("Panel3");
				Lineup1 << N Col(1);
				Lineup1 << Background Color("None");
				Lineup1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Enabled(1);
				Lineup1 << Horizontal Alignment("Default");
				Lineup1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Text Color("None");
				Lineup1 << UI Only(0);
				Lineup1 << Vertical Alignment("Default");
				Lineup1 << Visibility("Visible");
				Lineup1 << Set Min Size(88, 96);
				Lineup1 << Set Max Size(88, 96);
				Lineup1 << Set Stretch({"Neutral", "Neutral"});
				Lineup1 << Spacing(2);
				Button1 << Background Color("None");
				Button1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button1 << Enabled(1);
				Button1 << Horizontal Alignment("Default");
				Button1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button1 << Text Color("None");
				Button1 << UI Only(0);
				Button1 << Vertical Alignment("Default");
				Button1 << Visibility("Visible");
				Button1 << Set Min Size(60, 21);
				Button1 << Set Max Size(60, 21);
				Button1 << Set Stretch({"Neutral", "Neutral"});
				Button1 << Set Button Name("OK");
				Button1 << Style("Normal");
				Button1 << Set(0);
				Button1 << Set Icon("");
				Button1 << Set Icon Location("Right");
				Button2 << Background Color("None");
				Button2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button2 << Enabled(1);
				Button2 << Horizontal Alignment("Default");
				Button2 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button2 << Text Color("None");
				Button2 << UI Only(0);
				Button2 << Vertical Alignment("Default");
				Button2 << Visibility("Visible");
				Button2 << Set Min Size(60, 21);
				Button2 << Set Max Size(60, 21);
				Button2 << Set Stretch({"Neutral", "Neutral"});
				Button2 << Set Button Name("Cancel");
				Button2 << Style("Normal");
				Button2 << Set(0);
				Button2 << Set Icon("");
				Button2 << Set Icon Location("Right");
			)
		)
	),
	Initialize(
		Module1 << Auto Launch(1);
		Module1 << Set Module Type("Report");
		Module1 << Set Window Title("^TABLENAME - ^APPNAME");
	)
);

If I give that script to ChatGPT (I'm not logged in so I think it is using GPT-4o) and ask it to create new window like script, it did provide me with something like below. It does get close enough for it to be useful in my opinion

View more...

New Window("Application",
	H List Box(
		Panel Box("Panel1",
			Filter Col Selector(
				Data Table("DataTable1")
			)
		),
		Panel Box("Panel2",
			Lineup Box(
				N Col(2),
				Text Box("Text1"),
				Text Box("Text2"),
				Combo Box({"Item1", "Item2"}),
				Check Box({"Item1", "Item2"}),
				Col List Box(
					Data Table("DataTable1"),
					Modeling Type({"Continuous", "Ordinal", "Nominal"})
				),
				Button Box("Button3")
			)
		),
		Panel Box("Panel3",
			Lineup Box(
				N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

But it would be useful to have this capability from application builder or maybe even have new "designer" platform which could be used for UI design (I'm already so used to writing new window scripts that I write them much faster than using application builder with my own style).

[#5]

Also, if you are creating "lots" of similar type of UIs you might consider creating your own tooling for that.

I have for example:

• Tool takes in openapi.json from FastAPI to create JMP UI ( Pythonless Python Integration for JMP® (2023-EU-30MP-1265)) 
• Tool utilizes specific type of Pydantic basemodels ( JMPyFacade: Bridging JMP and Python for Seamless Engaging Analysis and Scripters Club Recording: JMPyFacade: Bridging JMP and Python for Seamless Engaging Analysis ) to create dynamic UI
• One tool takes specific type of SQL template to create UI
• Simpler one for setting/configuration files