Dialogs are groovy templates that generate forms by mixing static HTML fragments and groovy calls to the components responsible for building the UI at runtime. The result is a simple but powerful syntax.

h1. Common parameters {anchor:id=common-params}

These following parameters are common and can be used for every input fields.
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *jcrPath* | {{String}} | [image:check.gif] | relative path inside the current node | {{jcrPath=/node/exo:title }} |
| *mixintype* | {{String}} with comma {{,}} character | [image:error.gif] | List of the mixin types you want to initialize when creating the content | {example}{{mixintype=mix:i18n}}{example} {example}{{mixintype=mix:votable,mix:commentable,mix:i18n}}{example} |
| *validate* | {{String}} with comma {{,}} character | [image:error.gif] | List of the validators you want to apply to the input. Possible values are : {{name}}, {{email}}, {{number}}, {{empty}}, {{null}}, {{datetime}}, {{length}} OR validator classes | {example}{{validate=empty}}{example} {example}{{validate=empty,name}}{example} {example}{{validate=org.exoplatform.webui.form.validator.StringLengthValidator}}{example} |
| *editable* | {{String}} | [image:error.gif] | The input will be editable only if the value of this parameter is {{if-null}} and the value of this input is null or blank | {{editable=if-null}} |
| *multiValues* | {{Boolean}} | [image:error.gif] | Show a multi values component if true. Must be used only with corresponding multi-values properties. The default value of this parameter is {{false}} | {{multiValues=true}} |
| *visible* | {{Boolean}} | [image:error.gif] | The input is visible if this value is {{true}} | {{visible=true}} |

See also:
* [Text field|#text-field]
* [Hidden field|#hidden-field]
* [Text area field|#textarea-field]
* [Rich text field|#richtext-field]
* [Calendar field|#calendar-field]
* [Upload field|#upload-field]
* [Radio field|#radio-field]
* [Select box field|#selectbox-field]
* [Checkbox field|#checkbox-field]
* [Mixin field|#mixin-field]
* [Action field|#action-field]

{warning}
Note that {{mixintype}} can be used only in the root node  field (commonly known as the name field)
{warning}

h1. Text Field {anchor:id=text-field}

h2. Addition parameters
_None_

See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
  String[] fieldTitle = ["jcrPath=/node/exo:title", "validate=empty"] ;
  uicomponent.addTextField("title", fieldTitle) ;
%>
{code}

h1. Hidden Field {anchor:id=hidden-field}

h2. Addition parameters
_None_

See also: [Common parameters|#common-params]

h2. Example

h1. Text Area Field {anchor:id=textarea-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *rows* | {{Number}} | [image:error.gif] | The initial textarea's number of rows. The value is {{10}} by default | {{rows=20}} |
| *cols* | {{Number}} | [image:error.gif] | The initial textarea's number of cols. The value is {{30}} by default | {{cols=50}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldDescription = ["jcrPath=/node/exo:description", "validate=empty"] ;
	uicomponent.addTextAreaField("description", fieldDescription)
%>
{code}

h1. Rich Text Field {anchor:id=richtext-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *options* | {{String}} with semicolon {{;}} character | [image:error.gif] | Some options for CKEditor field: toolbar, width and height | {{options=CompleteWCM;width:'100%';height:'200px';}} |

|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *toolbar* | {{String}} | [image:error.gif] | The pre-define toolbar for CKEditor. The value can be: {{Default}}, {{Basic}}, {{CompleteWCM}}, {{BasicWCM}}, {{SuperBasicWCM}} | {{options=CompleteWCM}} |
| *width* | {{String}} | [image:error.gif] | The width of CKEditor. The value can be the percent of pixel | {{options=width:'100%'}} |
| *height* | {{String}} | [image:error.gif] | The height of CKEditor. The value can be the percent of pixel | {{options=height:'200px'}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldSummary = ["jcrPath=/node/exo:summary", "options=toolbar:CompleteWCM,width:'100%',height:'200px'", "validate=empty"] ;
	uicomponent.addRichtextField("summary", fieldSummary) ;
%>
{code}

h1. Calendar Field {anchor:id=calendar-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *options* | {{String}} | [image:error.gif] | An option for calendar field: Display time | {{options=displaytime}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldPublishedDate = ["jcrPath=/node/exo:publishedDate", "options=displaytime", "validate=datetime", "visible=true"] ;
	uicomponent.addCalendarField("publishedDate", fieldPublishedDate) ;
%>
{code}

h1. Upload Field {anchor:id=upload-field}

h2. Addition parameters
_None_

See also: [Common parameters|#common-params]

h2. Example
There are 2 main cases when create an upload form: You want to store the image as a property OR as a node.
* If you want to use property so you can do as follow:
{code:language=java}
<%
	String[] fieldMedia = ["jcrPath=/node/exo:image"] ;
	uicomponent.addUploadField("media", fieldMedia) ;		
%>
{code}

* If you want to use node so you can do as follow:
{code:language=java}
<%
	String[] hiddenField1 = ["jcrPath=/node/exo:image", "nodetype=nt:resource", "visible=false"] ; 
	String[] hiddenField2 = ["jcrPath=/node/exo:image/jcr:encoding", "visible=false", "UTF-8"] ;
	String[] hiddenField3 = ["jcrPath=/node/exo:image/jcr:lastModified", "visible=false"] ;
	uicomponent.addHiddenField("hiddenInput1", hiddenField1) ;
	uicomponent.addHiddenField("hiddenInput2", hiddenField2) ;
	uicomponent.addHiddenField("hiddenInput3", hiddenField3) ;

	String[] fieldMedia = ["jcrPath=/node/exo:image"] ;
	uicomponent.addUploadField("media", fieldMedia) ;		
%>
{code}

* But, this code is not complete. If you want to display the *upload* field, the image must be blank, otherwise you can display the image and an action enables you to remove it. You can do as follows:

{code:language=java}
<%
	def image = "image";
	// If you're trying to edit the document
	if(uicomponent.isEditing()) { 
		def curNode = uicomponent.getNode();
		// If the image existed
		if (curNode.hasNode("exo:image")) {
			def imageNode = curNode.getNode("exo:image") ;
			// If the image existed and available
			if (imageNode.getProperty("jcr:data").getStream().available() > 0 && (uicomponent.findComponentById(image) == null)) {
				def imgSrc = uicomponent.getImage(curNode, "exo:image");
				def actionLink = uicomponent.event("RemoveData", "/exo:image");
				%>		
					<div>
						<img src="$imgSrc" width="100px" height="80px"/>
						<a href="$actionLink">
							<img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" alt="" class="ActionIcon Remove16x16Icon"/>
						</a>
					</div>
				<%
			} else {
				String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
				uicomponent.addUploadField(image, fieldImage) ;								
			}
		} else {
				String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
				uicomponent.addUploadField(image, fieldImage) ;								
		}
	}  else if(uicomponent.dataRemoved()) {
		String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
		uicomponent.addUploadField(image, fieldImage) ;
	} else {
		String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
		uicomponent.addUploadField(image, fieldImage) ;
	}
%>
{code}

h1. Radio Field {anchor:id=radio-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *options* | {{String}} with comma {{,}} characters | [image:error.gif] | Some radio values | {{options=radio1,radio2,radio3}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldDeep = ["jcrPath=/node/exo:isDeep", "defaultValues=true", "options=radio1,radio2,radio3"];		 
	uicomponent.addRadioBoxField("isDeep", fieldDeep);
%>
{code}

h1. SelectBox Field {anchor:id=selectbox-field}
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *options* | {{String}} with comma {{,}} characters | [image:error.gif] | Some option values | {{options=option1,option2,option3}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldDeep = ["jcrPath=/node/exo:isDeep", "defaultValues=true", "options=checkbox1,checkbox2,checkbox3"];
	uicomponent.addCheckBoxField("isDeep", fieldDeep);
%>
{code}

h1. CheckBox Field {anchor:id=checkbox-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *options* | {{String}} with comma {{,}} characters | [image:error.gif] | Some checkbox values | {{options=checkbox1,checkbox2,checkbox3}} |
See also: [Common parameters|#common-params]

h2. Example
{code:language=java}
<%
	String[] fieldDeep = ["jcrPath=/node/exo:isDeep", "defaultValues=true", "options=checkbox1,checkbox2,checkbox3"];
	uicomponent.addCheckBoxField("isDeep", fieldDeep);
%>
{code}
  
h1. Mixin Field {anchor:id=mixin-field}

h2. Addition parameters
_None_

See also: [Common parameters|#common-params]

h2. Example 
{code:language=java}
<%
	String[] fieldId = ["jcrPath=/node", "editable=false", "visible=if-not-null"] ;
	uicomponent.addMixinField("id", fieldId) ; 
%>
{code}

h1. Action Field {anchor:id=action-field}

h2. Addition parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *selectorClass* | {{String}} | [image:check.gif] | The component to display | {{selectorClass=org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector}} |
| *selectorIcon* | {{String}} | [image:check.gif] | The action icon | {{selectorIcon=SelectPath24x24Icon}} |

Depends on the {{selectorClass}}, some other parameters can be added
For example 
The component {{org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector}} need these parameters
|| *Parameter* || *Type* || *Required* || *Description* || *Example* ||
| *workspaceField* | {{String}} | [image:error.gif] | The field which allow to select a workspace | {{workspaceField=targetWorkspace}} |

The component {{org.exoplatform.ecm.webui.selector.UIPermissionSelector}} does not need any special parameters.

See also: [Common parameters|#common-params]

h2. Example 
{code:language=java}
<% 
	String[] fieldPath = ["jcrPath=/node/exo:targetPath", "selectorClass=org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector", "workspaceField=targetWorkspace", "selectorIcon=SelectPath24x24Icon"] ;
	uicomponent.addActionField("targetPath", fieldPath)  ;
%>
{code}

h1. Interceptors
To add an intercepter into a dialog, we can use this method {{*uicomponent.addInterceptor(String scriptPath, String type)*}}
|| || || *Parameters* ||
| *scriptPath* | {{String}} | The relative path to the script file |
| *type* | {{String}} | The type of intercepter: {{prev}} or {{post}} |

h2. Example
{code:language=java}
<%
	uicomponent.addInterceptor("ecm-explorer/interceptor/PreNodeSaveInterceptor.groovy", "prev");
%>
{code}

h1. How to add new ECM template with tabs.

To avoid refreshing the first tab for every action execution, we add a new private function to the template with tabs.
In the template, we must insert new piece of code like the following:
{code:lang=java}private String getDisplayTab(String selectedTab) {
	if ((uicomponent.getSelectedTab() == null && selectedTab.equals("mainWebcontent"))
			|| selectedTab.equals(uicomponent.getSelectedTab())) {
		return "display:block";
	}
	return "display:none";
}

private String getSelectedTab(String selectedTab) {
	if (getDisplayTab(selectedTab).equals("display:block")) {
		return "SelectedTab";
	}
	return "NormalTab";
}
{code}Changing in every event of onclick is have to be done like this :
{code:lang=html}        <div class="UITab NormalTabStyle">
		<div class="<%=getSelectedTab("mainWebcontent")%>">
			<div class="LeftTab">
				<div class="RightTab">
					<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "mainWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></div>
				</div>
			</div>
		</div>
	</div>

	<div class="UITab NormalTabStyle">
		<div class="<%=getSelectedTab("illustrationWebcontent")%>">
			<div class="LeftTab">
				<div class="RightTab">
					<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "illustrationWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></div>
				</div>
			</div>
		</div>
	</div>

	<div class="UITab NormalTabStyle">
		<div class="<%= getSelectedTab("contentCSSWebcontent")%>">
			<div class="LeftTab">
				<div class="RightTab">
					<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "contentCSSWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></div>
				</div>
			</div>
		</div>
	</div>{code}

Finally, to display the selected tab, we will add it into the style of UITabContent class.

{code:lang=html}
<div class="UITabContent" style="<%=getDisplayTab("mainWebcontent")%>">
{code}
