JSON

Description

Specify the menu choices for an ExpandingMenu control using JSON.

The ExpandingMenu control can be populated using a JSON object.

Example JSON Menu Definition

The example JSON shown below defines an ExpandingMenu tree with multiple nested menu options. You can insert this example into an ExpandingMenu using the Insert sample JSON link in the Expanding Menu - JSON Definition dialog.

{
	items:[
		{
			html: 'Category 1', 
			value: 'category1',
			icon: 'svgIcon=#alpha-icon-addCircleBorder:icon,24',
			action: '',
			children: [
				{
					html: 'Action 1', 
					value: 'action1',
					action: 'action:1',
					icon: 'svgIcon=#alpha-icon-bandAidCrossed:icon,24'
				},
				{
					html: 'Action 2', 
					value: 'action2',
					action: 'action:2',
					icon: 'svgIcon=#alpha-icon-bellRing:icon,24'
				},
				{
					html: 'Action 3', 
					value: 'action3',
					action: 'action:3',
					icon: 'svgIcon=#alpha-icon-bookOpen:icon,24'
				}
			]
		},
		{
			html: 'Category 2',
			value: 'category2',
			action: '',
			icon: 'svgIcon=#alpha-icon-heartSolid:icon,24',
			children: [
				{
					html: 'Action 4', 
					value: 'action4',
					action: '',
					icon: 'svgIcon=#alpha-icon-map:icon,24',
					children: [
						{
							html: 'Action 4a', 
							value: 'action4a',
							action: 'action:4a',
							icon: 'svgIcon=#alpha-icon-trendingDown:icon,24'
						},
						{
							html: 'Action 4b', 
							value: 'action4b',
							action: 'action:4b',
							icon: 'svgIcon=#alpha-icon-trendingDown:icon,24'
						}
					]
				},
				{
					html: 'Action 5', 
					value: 'action5',
					action: 'action:5',
					icon: 'svgIcon=#alpha-icon-trendingDown:icon,24'
				},
				{
					html: 'Action 6', 
					value: 'action6',
					action: 'action:6',
					icon: 'svgIcon=#alpha-icon-starHalfSolid:icon,24'
				}
			]
		},
		{
			html: 'Category 3', 
			value: 'category3',
			action: '',
			icon: 'svgIcon=#alpha-icon-shield:icon,24',
			children: [
				{
					html: 'Action 7', 
					value: 'action7',
					action: 'action:7',
					icon: 'svgIcon=#alpha-icon-shuffle:icon,24'
				},
				{
					html: 'Action 8', 
					value: 'action8',
					action: 'action:8',
					icon: 'svgIcon=#alpha-icon-penFountain:icon,24'
				}
			]
		},
		{
			html: 'Action 9', 
			value: 'action9',
			action: 'action:9',
			icon: 'svgIcon=#alpha-icon-wrench:icon,24'
		},
		{
			html: 'Action 10', 
			value: 'action10',
			action: 'action:10',
			icon: 'svgIcon=#alpha-icon-rwJump:icon,24'
		}
		
	],
	actions: {
		action: function(arg){
			alert('Action' + arg);
		}
	},
	settings: {
		item: {
			className: 'item',
			opened: {
				className: 'branchItemOpened',
				icon: 'svgIcon=#alpha-icon-chevronUp:icon'
			},
			closed: {
				className: 'branchItemClosed',
				icon: 'svgIcon=#alpha-icon-chevronRight:icon'
			}
		},
		branch:{
			className: 'branch'
		}
	}
}