New to Version 4.0
The panel tag is a container tag that holds other tags and HTML. It is used to show/hide parts of the form based on what role the current user is in. So, for instance, you can include controls that will only be available to administrators or editors or registered users, etc.
NOTE: The panel tag is intended for use ONLY in custom HTML-based forms. It may be possible to use it in standard (auto-layout) forms as well. However, the HTML that will be rendered at run-time may conflict with the layout HTML that XMod generates for the form, resulting in invalid HTML that may not display correctly.
|
accesskey |
In browsers that support it, this property can be set to a character on the keyboard that can be used to set focus to the control. For instance, setting the value to F allows the user to access the control by pressing Alt+F on their keyboard (for Windows machines) |
|
Color of the background of the control. |
|
|
backimageurl |
A URL to an image file that will serve as the background image for the panel. |
|
Color of the border around the control |
|
|
Style of the border around the control. |
|
|
borderwidth |
Width of the border around the control specified in units |
|
enabled |
Whether the control accepts input. May not work in older browsers. Valid values are true and false. The default value is true. |
|
A series of attributes such as font-bold, font-size, etc. that allow you to control how the text in the control is displayed. Click the link for more for the list of properties and their description. |
|
|
Color of the text within the control. |
|
|
height |
The height of the control, specified in units |
|
The horizontal alignment of the control's content. |
|
|
onclick |
Allows you to assign Javascript that will be executed when the control is clicked. |
|
showroles |
A comma-delimited list of role names. If the current user belongs to one of the roles in the list, the contents of the panel will be visible. Otherwise, the contents will be hidden. If showroles is empty or not specified, the contents of the panel will be visible. |
|
The tab order of the control. |
|
|
tooltip |
In those browsers that support it, this attribute specifies the text displayed in the tooltip when the mouse is over the control. |
|
width |
The width of the control, specified in units. |
|
Javascript can be attached to certain events raised by this control. Click the link for more information. |
This example will only show the "Editors Only" portion of the form if the current user is an Editor. If we wanted both Editors and Administrators to see that portion, we would use a tag like:
<panel showroles="Editors,Administrators">
The example below highlights one possible usage of the <panel> tag. In this example, we have a simple form for adding a new article. It includes a field to enter the article's title and the body of the article. Here we're using the <panel> tag to give our Editors the ability to add a synopsis, or article summary to the record. This field is only visible to Editors and not article authors as seen in the screen shots below
Article authors will see this:
While users in the Editors role will see this:
The form definition to generate the above samples is below. The <panel> is highlighted in red. Additionally, to make it easier to distinguish form control definitions from the HTML layout code, all the HTML code (which is enclosed in <literal> tags) is in gray:
<form format="custom">
<controls><literal><div align="left"></literal>
<panel showroles="Editors" backcolor="#FFFFCC" font-names="Arial" borderstyle="solid" bordercolor="maroon" borderwidth="2px" width="500px">
<literal>
<table class="Normal">
<tr><td style="font-size:14px;font-weight:bold;">Editors Only</td></tr>
<tr><td><b>Article <u>S</u>ummary</b></td></tr>
<tr><td></literal>
<textarea ref="Summary" cols="50" rows="3" tabindex="3" accesskey="S">
<label>Summary</label>
</textarea><literal></td></tr></table></literal>
</panel><literal></div><div align="left">
<table class="Normal">
<tr>
<td>
<b><u>T</u>itle</b>
</td>
<td></literal>
<input ref="Title" class="NormalTextBox" width="250px" tabindex="1" accesskey="T">
<label>Title</label>
</input><literal>
</td>
</tr>
<tr>
<td valign="top">
<b><u>A</u>rticle</b>
</td>
<td></literal>
<textarea ref="Article" class="NormalTextBox" cols="65" rows="8" tabindex="2" accesskey="A">
<label>Article</label>
</textarea><literal>
</td>
</tr>
<tr>
<td colspan="2"></literal>
<addbutton text="Add Article" class="NormalBold"/><updatebutton text="Update Article" class="NormalBold"/><literal> </literal><cancelbutton text="Cancel Changes" class="NormalBold"/><literal>
</td>
</tr>
</table></div></literal>
</controls>
</form>