User Guide Cancel

cfwindow

Last updated on May 30, 2024 | Also applies to ColdFusion

ColdFusion

Open app

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Description

Creates a pop-up window in the browser. Does not create a separate browser pop-up instance.

Syntax

<cfwindow 
bodyStyle = "CSS style specification" 
center="true|false" 
closable="true|false" 
destroyOnClose ="true|false" 
draggable="true|false" 
headerStyle = "CSS style specification" 
height="number of pixels" 
initShow="false|true" 
minHeight="number of pixels" 
minWidth="number of pixels" 
modal="true|false" 
name="string" 
onBindError = "JavaScript function name" 
refreshOnShow = "false|true" 
resizable="true|false" 
source="path" 
title="string" 
width="number of pixels" 
x="numeric pixel coordinate" 
y="numeric pixel coordinate"> 

window contents 

</cfwindow>

If you use the source attribute, ColdFusion ignores any tag body contents. If you do not have a tag body and omit the </window> end tag, close the cfwindow tag with the /> character combination.

Note:

You can specify this tag's attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute name as structure key.

History

ColdFusion 8: Added this tag.

Attributes

Attribute	Req/Opt	Default	Description
bodyStyle	Optional		A CSS style specification for the window body. As a general rule, use this attribute to set color and font styles. Using this attribute to set the height and width, for example, can result in distorted output.
center	Optional	false	A Boolean value that specifies whether to center the window over the browser window. If true, ColdFusion ignores the x and y attribute values. If false, and you do not specify x and y attributes, ColdFusion centers the window.
closable	Optional	true	A Boolean value that specifies whether the user can close the window. If true, the window has an X close icon.
destroyOnClose	Optional	false	If true, destroys the window when it is closed.
draggable	Optional	true	A Boolean value that specifies whether the user can drag the window. To drag the window, click the mouse on the title bar and hold the button down while dragging. If the window does not have a title, users cannot drag it.
headerStyle	Optional		A CSS style specification for the window header. As a general rule, use this attribute to set color and font styles. Using this attribute to set the height and width, for example, can result in distorted output.
height	Optional	300	Height of the window in pixels. If you specify a value greater than the available space, the window occupies the available space and the resize handles do not appear.
initShow	Optional	false	A Boolean value that specifies whether to display the window when the containing page first appears. If this value is false, use the ColdFusion.Window.show JavaScript function to display the window.
minHeight	Optional	0	The minimum height, in pixels, to which users can resize the window.
minWidth	Optional	0	The minimum width, in pixels, to which users can resize the window.
modal	Optional	false	A Boolean value that specifies whether the window is modal, that is, whether the user can interact with the main window while this window is displayed. If true, the user cannot interact with the main window.
name	Optional		The name of the window. Must be unique on the pages. This attribute is required to interact with the window, including to dynamically show or hide it.
onBindError	Optional	see Description	The name of a JavaScript function to execute if evaluating a bind expression results in an error. The function must take two attributes: an HTTP status code and a message. If you omit this attribute, and specified a global error handler (by using the ColdFusion.setGlobalErrorHandler function), it displays the error message; otherwise a default error pop-up appears.

refreshOnShow	Optional	false	true-Refresh the contents of the window by running the source bind expression whenever the window shows (for example, by calling the ColdFusion.Window.show JavaScript function), in addition to when bind events occur false- Refresh the window only when the bind expression is triggered by its bind event. To use this attribute, you must also specify a source attribute.
resizable	Optional	true	A Boolean value specifying whether the user can resize the window.
source	Optional		A URL that returns the window contents. This attribute can use URL parameters to pass data to the page. ColdFusion uses standard page path resolution rules to locate the page. You can use a bind expression in this attribute; for more information see Usage. Note: If a CFML page specified in this attribute contains tags that use Ajax features, such as cfform, cfgrid, and cfpod, you must use a cfajaximport tag on the page with the cfwindow tag. For more information, see cfajaximport.
title	Optional		The text to display in the window's title bar. You can use HTML mark-up to control the title appearance; for example, to show the text in red italic font.
width	Optional	500	Width of the window in pixels. If you specify a value greater than the available space, the window occupies the available space and the resize handles do not appear.
x	Optional		The X (horizontal) coordinate of the upper-left corner of the window, relative to the browser window. ColdFusion ignores this attribute if the center attribute value is true and if you do not set the y attribute value.
y	Optional		The Y (vertical) coordinate of the upper-left corner of the window, relative to the browser window.ColdFusion ignores this attribute if the center attribute value is true and if you do not set the x attribute value.

Usage

You cannot use this tag in a form or as a child of a cflayout, or cflayoutarea tag.Define the cfwindow tag on the page that displays it (or a page that is included by using the cfinclude tag). So, you cannot use the cfwindow tag on a page that is specified by a cfmenuitem tag http attribute, cfdiv tag bind attribute, or cflayoutarea or cfpod tag source attribute. Instead, for example, you can display a window when a user clicks a menu item by defining the window on the same page as your menu and using a JavaScript function in the cfmenuitem tag http attribute to call the window's show function. The cfwindow tag uses its source attribute to get its contents from another page.
You can use a source attribute or a tag body to specify the window contents; if you specify both, ColdFusion uses the contents specified by the source attribute and ignores the tag body. If you use a source attribute, an animated icon and the text "Loading..." appears while the contents is being fetched.
If the source attribute specifies a page that defines JavaScript functions, the function definitions on that page must have the following format:

functionName = function(arguments) {function body}

Function definitions that use the following format may not work:

function functionName (arguments) {function body}

However, Adobe recommends that you include all custom JavaScript in external JavaScript files and import them on the application's main page, and not write them inline in code that you get by using the source attribute. Imported pages do not have this function definition format restriction.
If you use the source attribute, you can use a bind expression to include form field values or other form control attributes as part of the source specification. You can bind to HTML format form controls only. For detailed information on using bind expressions, see Binding data to form fields in the Developing ColdFusion Applications.

JavaScript functions

You can use the following JavaScript functions to manage an HTML format window:

Function	Description
ColdFusion.Window.create	Creates a window without using a cfwindow tag.
ColdFusion.Window.getWindowObject	Gets the underlying Ext JS - JavaScript Library object for the specified HTML format cfwindow control.
ColdFusion.Window.hide	Closes a window.
ColdFusion.Window.onHide	Specifies a function to run each time a specific window closes.
ColdFusion.Window.onShow	Specifies a function to run each time a specific window opens.
ColdFusion.Window.show	Opens a window.

Example

The following example shows several features of the cfwindow tag and dynamic binding of the cfwindow tag source attribute to form controls. It shows how you can use x and y attributes to position the windows and how several attributes, such as closable and resizable affect the window appearance. It also shows how you can use bind expressions to dynamically update window contents when form control values change, including different ways to trigger updating the window contents.

<head>
</head>

<body>
<cfform name="myform">
<cfinput type="hidden" name="hiddentext"
value="This is hidden text from the main page">

Click the mouse on the control to show its text in window 1.
<cfinput name="text1"><br />

Click the button to show the input control text in window 2.
<cfinput name="text2">
<cfinput type="button" name="mybutton" value="Show Text"
onclick="javascript:ColdFusion.Window.show('mywindow2')"><br />

Click the Checkbox to change and show its status in window 3
<cfinput name="check1" type="checkbox"><br />

Click the button to open a window containing the page
specified by the input control.
<cfinput name="text3" value="windowsource.cfm">
<cfinput type="button" name="mybutton3" value="Open Window"
onclick="javascript:ColdFusion.Window.show('mywindow4')">
</cfform>

<!--- This window shows initially and cannot be closed, dragged, or resized.
The value of the text URL parameter, and therefore, the contents of the
text displayed in the window changes each time the user clicks the
mouse over the text1 control. --->
<cfwindow x="0" y="100" width="200" height="150"
name="mywindow" title="My First Window"
closable="false" draggable="false" resizable="false" initshow="true"
source="windowsource.cfm?text={myform:text1@mousedown}" />

<!--- This window shows initially and cannot be dragged, or resized, but can
be closed.
The text URL parameter represents the text2 input control value. --->
<cfwindow x="0" y="250" width="200" height="150"
name="mywindow2" title="My Second Window"
initshow="true" draggable="false" resizable="false"
source="windowsource.cfm?text={myform:text2}" />

<!--- This window shows initially and cannot be resized, but can be dragged
or closed.
The value of the text URL parameter, and therefore, Boolean value
displayed in the window changes each time the user clicks the mouse
in the check1 control to change the check box status.
The bind expression binds to the check box checked attribute;
it specifies a click event because Internet Explorer does not
generate a change event when the user clicks the box.--->
<cfwindow x="0" y="400" width="200" height="150"
name="mywindow3" title="My Third Window"
initshow="true" resizable="false"
source="windowsource.cfm?text=<b>Checkbox: </b>{myform:check1.checked@click}" />

<!--- This window does not display initially.
The Open Window button control opens it.
It can be closed, dragged, and resized.
The value text URL parameter represents the value of a hidden text
field. --->
<cfwindow x="210" y="100" width="500" height="480" name="mywindow4"
minHeight="400" minWidth="400"
title="My Fourth Window" initshow="false"
source="{myform:text3}?text={myform:hiddentext}" />
</body>
</html>

The windowsource.cfm page that the cfwindow tag source attributes specify to display in the windows contains the following code:

<h3>Main page input:</h3>
<cfoutput>
#url.text#
</cfoutput>

Get help faster and easier

New user?