Instructions for Dynamic Dialog Creation using JSON Code

[[Mi...]]

I'm going to share some code for anyone interested in creating your own dialog boxes using JSON code. It was a pain to figure out how to do this  as I had little go off in the forums, but I did find some useful posts on how to build dialog boxes using XML code.

Please sign in to view this username.

 also pointed me in the right direction with some code that they shared.

I hope this is useful for others!

----

Useful Links:

https://qualityforum.zeiss.com/topic/4324-create-a-dialog-box-of-x-columns-and-y-rows-based-on-delimited-values-in-a-script/
https://qualityforum.zeiss.com/topic/1217-selection-element-list-user-defined-script-function/#comment-3959
https://qualityforum.zeiss.com/topic/1484-create-a-dynamic-dialog/#comment-4940

-----

Some things to know (I don't know that these statements are true for certain, however they seem to hold true for the testing I've done)

* The GUI builder does not allow for subsequent rows and columns to have any gaps between widgets. That is to say if you have a widget in position (x,y) = (0,0), your next widget cannot be located any greater than (x,y) = (1, 1). If you try to place it any further away, then bad things may happen!

1) Your first row of widgets will determine the number of columns that each subsequent row should account for.

        - The example code I have below has code for how a column separator can be inserted. It can be found in the 'buildwidgetList' method.

1) For any given row of widgets, you begin the top left corner and work your way to the right. Remember that you should also be accounting for columns as you work left-to-right (and you may have to even enter empty column separators. My continuous text widget example code demonstrates how/where you can use column separators).

2) For any widget(s) you wish to add, first determine the columns it will span.

        - If you wish to add just one widget for that given row, simply add the one widget. The next widget or widget(s) will be in the next row down.

        - If you wish to add multiple widgets to the same row, you need to build a list of the widgets that belong in that row. The next widget or widget(s) will be in the next row down.

 

import gom

def addContinuousText(numCols, numRows, widgetName, formattedText, instance = ''):			
	widget = [
		{
			"columns": numCols,
			"default_font_family": "",
			"default_font_size": 0,
			"name": widgetName + str(instance),
			"rows": numRows,
			"text": {
				"id": "",
				"text": formattedText,
				"translatable": True
			},
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "display::text",
			"wordwrap": False
		}
	]
			
	return widget

def addInputField(numCols, numRows, widgetName, inputText, instance = ''):
	widget = [
		{
			"columns": numCols,
			"name": widgetName + str(instance),
			"password": False,
			"read_only": False,
			"rows": numRows,
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "input::string",
			"value": inputText
		}
	]
			
	return widget

def addCheckbox(numCols, numRows, widgetName, labelName, instance = ''):			
	widget = [
		{
			"columns": numCols,
			"name": widgetName + str(instance),
			"rows": numRows,
			"title": {
				"id": "",
				"text": labelName,
				"translatable": True
			},
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "input::checkbox",
			"value": False
		}
	]

	return widget			

def addVerticalSpace(numCols, numRows, widgetName, distance, instance = ''):
	widget = [
		{
			"columns": numCols,
			"maximum_size": -1,
			"minimum_size": distance,
			"name": widgetName + str(instance),
			"rows": numRows,
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "spacer::vertical"
		}
	]
				
	return widget

def addHorizontalSpace(numCols, numRows, widgetName, distance, instance = ''):
	widget = [
		{
			"columns": numCols,
			"maximum_size": -1,
			"minimum_size": distance,
			"name": widgetName + str(instance),
			"rows": numRows,
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "spacer::horizontal"
		}
	]
				
	return widget

def addSingleButton(numCols, numRows, widgetName, buttonType, buttonText, iconType, instance = ''):
	widget = [
		{
			"button_type": buttonType,
			"columns": numCols,
			"icon": "AAAAAA==",
			"icon_file_name": "",
			"icon_size": {
				"value": "icon"
			},
			"icon_system_size": {
				"value": "extra_large"
			},
			"icon_system_type": {
				"value": iconType
			},
			"icon_type": {
				"value": "system"
			},
			"name": widgetName + str(instance),
			"rows": numRows,
			"text": {
				"id": "",
				"text": buttonText,
				"translatable": True
			},
			"tooltip": {
				"id": "",
				"text": "",
				"translatable": True
			},
			"type": "button::pushbutton"
		}
	]
		
	return widget

def buildwidgetList(widgetList, widget):
		
	widgetList.append(widget[0])
	#widgetList.append('{},') #Column seperator. I recommend commenting and uncommenting this bit of code to see affects widget placement. I believe that is only useful when you want widgets in a specific column.
	
	return widgetList


#MAIN CODE:

#A dialog box is a (List) of (Dictionary) widgets.
blankForm = []
blankForm.append(addContinuousText(2, 1, 'cText_', '<html><p align=\"center\"><span style=\"font-weight:600;\">Example Text</span></p><p align=\"center\"><span style=\"font-weight:600;\"></html>'))
blankForm.append(addInputField(2, 1, 'scannerInput', 'test text'))
blankForm.append(addCheckbox(2, 1, 'checkbox_', 'checkbox_whatever', 1))
blankForm.append(addVerticalSpace(2, 1, 'vSpace', 20))

#How to build a row of widgets using a for loop. Try commenting out the two column seperator lines in the 'buildwidgetList' funtion and see what happens. 
widgetList1 = []
for i in range(5):
	index = i	
	buttonWidgets = buildwidgetList(widgetList1, addSingleButton(1, 1, 'button_', 'push', '', 'ok', index))
blankForm.append(buttonWidgets)

#How to build a row of widgets using single entries.  Try commenting out the two column seperator lines in the 'buildwidgetList' funtion and see what happens. 
widgetList2 = []
buttonWidget1 = buildwidgetList(widgetList2, addSingleButton(1, 1, 'button_', 'push', '', 'ok', 14))
buttonWidget2 = buildwidgetList(widgetList2, addSingleButton(1, 1, 'button_', 'push', '', 'cancel', 15))
blankForm.append(buttonWidget2)	

DIALOG=gom.script.sys.create_user_defined_dialog (dialog=
{
	"content": blankForm,
	"control": {
					"id": "OkCancel"
	},
	"embedding": "always_toplevel",
	"position": "automatic",
	"size": {
					"height": 500,
					"width": 500
	},
	"sizemode": "automatic",
	"style": "",
	"title": {
					"id": "",
					"text": "Dialog Title",
					"translatable": True
	}
})

def dialog_event_handler(widget):
	pass
					
DIALOG.handler = dialog_event_handler
RESULT=gom.script.sys.show_user_defined_dialog (dialog=DIALOG)


"""
Note: You can double-click anywhere in the code below to open the GUI editor and see the intended layout of the widget locations

To understand how the row and column numbers affect widget placement:

1) Re-arrange my widgets (or make a layout of your own). I recommend using continuous text widgets like I did and naming them in a sequential order. When you resize the window, the contininuous widgets will resize accordingly and make for a good visual queue.
2) Next, review the code below and pay attention to the order the widgets were written out. 
3) By looking at the placement of square [] and sguigly {} brackets, you can ascertain how column and row numbering will influence your widget loccations.
"""

DIALOG=gom.script.sys.create_user_defined_dialog (dialog={
"content": [
[ 
	{
		"columns": 2,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 1</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{  
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_1",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 2</span></p></html>",
		"translatable": True
	},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
	"type": "display::text",
	"wordwrap": False
	}
],     
[
	{
		"columns": 3,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_2",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 3</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
		{
		},
		{
		}
],
[
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_3",
		"rows": 3,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 4</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_4",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 5</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_6",
		"rows": 2,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 6</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	}
],
[
	{
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_5",
		"rows": 2,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 7</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
	}
],
[
	{
	},
	{
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_7",
		"rows": 3,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 8</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	}
],
[
	{
		"columns": 2,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_10",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 9</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
	},
	{
	}
],
[
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_8",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 10</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
		"columns": 1,
		"default_font_family": "",
		"default_font_size": 0,
		"name": "text_9",
		"rows": 1,
		"text": {
		"id": "",
		"text": "<html><p align=\"center\"><span style=\"font-weight:600;\">Widget 11</span></p></html>",
		"translatable": True
		},
		"tooltip": {
		"id": "",
		"text": "",
		"translatable": True
		},
		"type": "display::text",
		"wordwrap": False
	},
	{
	}
]
],
	"control": {
	"id": "OkCancel"
	},
	"embedding": "always_toplevel",
	"position": "automatic",
	"size": {
	"height": 545,
	"width": 539
	},
	"sizemode": "automatic",
	"style": "",
	"title": {
	"id": "",
	"text": "Dialog Title",
	"translatable": True
}
})

#
# Event handler function called if anything happens inside of the dialog
#
def dialog_event_handler (widget):
	pass

DIALOG.handler = dialog_event_handler

RESULT=gom.script.sys.show_user_defined_dialog (dialog=DIALOG)