Actions

Difference between revisions of "Note form field type"

From Joomla! Documentation

(Add in note form field information)
 
(Title and or Description)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This adds a form field which you can use in the xml files for extensions. This form field makes it possible to create titles, texts, descriptions and even alert boxes. It alos allows you to bring order in the settings for extensions, by separating them with useful titles. Or adding descriptions for certain settings (without having to rely on the tooltips). Or adding any other text you want.
+
{{version|3.1}}
 +
This form field makes it possible to create titles, texts, descriptions and even alert boxes. It also allows you to bring order in the settings for extensions, by separating them with useful titles. Or adding descriptions for certain settings (without having to rely on the tooltips). Or adding any other text you want.
  
 
The syntax is pretty straight-forward:
 
The syntax is pretty straight-forward:
Line 7: Line 8:
  
 
==Attributes==
 
==Attributes==
''Name:'' contains the name of the field (like with any other field tag)
+
*''Name:'' contains the name of the field (like with any other field tag)
''Type:'' the type of the field, which is: note
+
*''Type:'' the type of the field, which is: note
''Label:'' the title of the note (uses JText) (optional if using description)
+
*''Label:'' the title of the note (uses JText) (optional if using description)
''Description:'' the description/text of the note (uses JText) (optional if using label)
+
*''Description:'' the description/text of the note (uses JText) (optional if using label)
''Heading:'' the type of heading element to use for the label (optional) (default: h4)
+
*''Heading:'' the type of heading element to use for the label (optional) (default: h4)
''Class:'' a class name (or class names), like alert (see further for examples) (optional)
+
*''Class:'' a class name (or class names), like alert (see further for examples) (optional)
''Close:'' a value of 'true' (for alerts) or the value for the data-dismiss of the bootstrap close icon (optional)
+
*''Close:'' a value of 'true' (for alerts) or the value for the data-dismiss of the bootstrap close icon (optional)
  
 
==Title and or Description==
 
==Title and or Description==
 +
In the following code examples we will use these example language strings:
 +
<source>
 +
LOREMIPSUM="Lorem ipsum dolor sit amet"
 +
LOREMIPSUM_DESC="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
 +
</source>
 +
 
So with this note field you can either use the title or the description or both.
 
So with this note field you can either use the title or the description or both.
  
 
<source lang="php">
 
<source lang="php">
 
<field name="opt10" type="text" label="Some Other Option" />
 
<field name="opt10" type="text" label="Some Other Option" />
<field name="note11" type="note" label="Lorem ipsum dolor sit amet" />
+
<field name="note11" type="note" label="LOREMIPSUM" />
 
<field name="opt11" type="text" label="Some Other Option" />
 
<field name="opt11" type="text" label="Some Other Option" />
<field name="note12" type="note" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note12" type="note" description="LOREMIPSUM_DESC" />
 
<field name="opt12" type="text" label="Some Other Option" />
 
<field name="opt12" type="text" label="Some Other Option" />
<field name="note13" type="note" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note13" type="note" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt13" type="text" label="Some Other Option" />
 
<field name="opt13" type="text" label="Some Other Option" />
 
</source>
 
</source>
Line 35: Line 42:
 
<source lang="php">
 
<source lang="php">
 
<field name="opt20" type="text" label="Some Other Option" />
 
<field name="opt20" type="text" label="Some Other Option" />
<field name="note21" type="note" class="alert" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note21" type="note" class="alert" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt21" type="text" label="Some Other Option" />
 
<field name="opt21" type="text" label="Some Other Option" />
<field name="note22" type="note" class="alert alert-info" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note22" type="note" class="alert alert-info" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt22" type="text" label="Some Other Option" />
 
<field name="opt22" type="text" label="Some Other Option" />
<field name="note23" type="note" class="alert alert-success" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note23" type="note" class="alert alert-success" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt23" type="text" label="Some Other Option" />
 
<field name="opt23" type="text" label="Some Other Option" />
<field name="note24" type="note" class="alert alert-error" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note24" type="note" class="alert alert-error" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt24" type="text" label="Some Other Option" />
 
<field name="opt24" type="text" label="Some Other Option" />
 
</source>
 
</source>
Line 48: Line 55:
  
 
==Close button==
 
==Close button==
You can add a close button to the alerts by adding the close="true" attribute to the tag.
+
A close button can be added to the alerts by adding the close="true" attribute to the tag. If you use a different class than the alert, use the required value for the data-dismiss of the bootstrap close icon instead of the value "true". But here is the code to test the close icon on an alert.
If you use a different class than the alert, use the required value for the data-dismiss of the bootstrap close icon instead of the value "true".
+
But here is the code to test the close icon on an alert.
+
  
 
<source lang="php">
 
<source lang="php">
 
<field name="opt30" type="text" label="Some Other Option" />
 
<field name="opt30" type="text" label="Some Other Option" />
<field name="note31" type="note" class="alert" close="true" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
+
<field name="note31" type="note" class="alert" close="true" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
 
<field name="opt31" type="text" label="Some Other Option" />
 
<field name="opt31" type="text" label="Some Other Option" />
 
</source>
 
</source>
  
 
[[Image:Help25-note-form-field-close-screenshot.png]]
 
[[Image:Help25-note-form-field-close-screenshot.png]]
 +
 +
<noinclude>
 +
 +
== See also ==
 +
* [[Standard form field types|List of standard form field types]]
 +
[[Category:Standard form field types]]</noinclude>

Latest revision as of 09:16, 22 April 2013

This form field makes it possible to create titles, texts, descriptions and even alert boxes. It also allows you to bring order in the settings for extensions, by separating them with useful titles. Or adding descriptions for certain settings (without having to rely on the tooltips). Or adding any other text you want.

The syntax is pretty straight-forward:

<field name="..." type="note" label="..." description="..." class="..." close="..." />

Contents

Attributes

  • Name: contains the name of the field (like with any other field tag)
  • Type: the type of the field, which is: note
  • Label: the title of the note (uses JText) (optional if using description)
  • Description: the description/text of the note (uses JText) (optional if using label)
  • Heading: the type of heading element to use for the label (optional) (default: h4)
  • Class: a class name (or class names), like alert (see further for examples) (optional)
  • Close: a value of 'true' (for alerts) or the value for the data-dismiss of the bootstrap close icon (optional)

Title and or Description

In the following code examples we will use these example language strings:

LOREMIPSUM="Lorem ipsum dolor sit amet"
LOREMIPSUM_DESC="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."

So with this note field you can either use the title or the description or both.

<field name="opt10" type="text" label="Some Other Option" />
<field name="note11" type="note" label="LOREMIPSUM" />
<field name="opt11" type="text" label="Some Other Option" />
<field name="note12" type="note" description="LOREMIPSUM_DESC" />
<field name="opt12" type="text" label="Some Other Option" />
<field name="note13" type="note" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt13" type="text" label="Some Other Option" />

Help25-note-form-field-title-screenshot.png

Classes (Alerts)

You can add classes to the note. This way you can make (bootstrap) alerts very easily. But also any other styling via class names you want (like a 'well').

<field name="opt20" type="text" label="Some Other Option" />
<field name="note21" type="note" class="alert" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt21" type="text" label="Some Other Option" />
<field name="note22" type="note" class="alert alert-info" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt22" type="text" label="Some Other Option" />
<field name="note23" type="note" class="alert alert-success" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt23" type="text" label="Some Other Option" />
<field name="note24" type="note" class="alert alert-error" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt24" type="text" label="Some Other Option" />

Help25-note-form-field-classes-screenshot.png

Close button

A close button can be added to the alerts by adding the close="true" attribute to the tag. If you use a different class than the alert, use the required value for the data-dismiss of the bootstrap close icon instead of the value "true". But here is the code to test the close icon on an alert.

<field name="opt30" type="text" label="Some Other Option" />
<field name="note31" type="note" class="alert" close="true" label="LOREMIPSUM" description="LOREMIPSUM_DESC" />
<field name="opt31" type="text" label="Some Other Option" />

Help25-note-form-field-close-screenshot.png


See also