MagicDraw offers a selection of basic and also complex widgets and user interface objects which cover most of any screen design needs. As a matter of fact, not all MagicDraw UI elements can be used for designing screens that work with xUML service UIs.

As a reference the following catalog will describe and at the same time indicate that they can be used.

Supported UI Elements

Table Filter

hideControls	true
inverse	,,
sparkName	Sparkline
column	Type,Name
disableSave	true
separator	Point (.)
labels	‚‚
default	,,
isFirstTimeEnter	true
cell-width	,,
datepattern	dd M yy
globalFilter	true
id	1604323798756_-273568464
worklog	365\|5\|8\|y w d h m\|y w d h m
isOR	AND
order	0,1,2

Type	Name	Element	Description
Container	Panel	Image Added	The Panel container (Image Added) is the most basic container and is the base for any screen modeling.
	Frame	Image Added	The Frame container (Image Added) is used for modal dialogs and screens that open within the same browser window (e.g. detail view or table records). A Frame has by default a close button in the window title bar. It is important to know, that despite of the creating a web application, the Frame container does not represent the HTML frames.
	Tabbed Pane	Image Added	The Tabbed Pane container (Image Added) is an ideal way to consolidate multiple screens on little space. Refer to Tabs for more information.
	Group Box	Image Added	The Group Box container (Image Added) is ideal for grouping UI elements into different groups belonging together.
UI Element	Label	Image Added	The Label element (Image Added) is for placing static text on a Panel container.
	Text Field	Image Added	The Text Field element (Image Added) is used to give the user the possibility to input text to the application. If a text field is bound to a data attribute having a UI Date type, it a Date Chooser is available automatically. A text field can be extended by an autocompletion widget as described on Auto complete. A text field can be made required by setting the multiplicity: required: multiplicity undefined or 1 not required: multiplicity 0..1
	Password Field	Image Added	The Password Field element (Image Added) is a Text Field with the difference, that the input is not shown in plain text but each character is replaced and hidden with the * symbol.
	Checkbox	Image Added	The Checkbox element (Image Added) is used to indicate a on or off state. Refer to Checkbox for more information.
	Radio Button	Image Added	The Radio Button element (Image Added) is used in a similar way as the Check Box element but with the difference, that only one option within a group of options can be selected. Refer to Radio Button Group for more information.
	Combo Box	Image Added	The Combo Box element (Image Added) allows to select one option of a list that opens up when clicking with the cursor onto the element. Refer to Combo Box for more information. With some additional changes to the tagged values the Combo Box element can change to a Multiselect List. How to implement this is described in the following chapters. Refer to Multi-select Lists for more information.
	Table	Image Added	The Table element (Image Added) is used to render data within a table grid.
	Tree	Image Added	The Tree element (Image Added) can be used to display hierarchical trees like folder structures or catalog indices.
	List	Image Added	The List element (Image Added) enables to select one or more options from a list.
	Separator	Image Added	The Separator element (Image Added) can be used to visually separate one area of a screen with another one.
	Button	Image Added	The Button element (Image Added) is used to submit an action by the application user e.g. send a form or open a dialog window.
	File Selector	Image Added	The File Selector, used for selecting files to bind them to an file upload form consists of a normal button element (Image Added) element with the open icon applied to it. The open icon is specified in the buttons specifications. The file selector will be displayed as follows: Image Added