FrançaisEnglish

Widgets

  1. Default widgets
  2. Available widgets
    1. Textarea
    2. Small richtext
    3. HTML richtext
    4. Multiselection widget
    5. Sitemap widget
    6. Current sitemap widget
    7. Tags widget
    8. Content tags widget
    9. Page tags widget
    10. Tags Categories
    11. User widget
    12. External file widget
    13. External image widget
    14. External multimedia widget
    15. External or resource file widget
    16. External or resource image widget
    17. External or resource multimedia widget
    18. Select a content
  3. Use a widget in service parameters or content metadata
  4. Create a new widget
    1. Create a widget
    2. Register the widget

The widgets are enriched form fields.

Default widgets

All types have a default widget that is simple.
E.g. a text field for a string.

Sometimes, you use a string to store something hard to enter (a page reference for exemple) so you want to use an apropriate widget. You can use one of the followings or create your own.

Note, that some plugins bring their own widgets that are not listed here. e.g. The newsletter plugin provides a widget to select a category of newsletter.

Available widgets

Textarea

Widget id

textarea

JS class

org.ametys.widgets.TextareaWidget

Type

STRING

Use this widget to enter a string in a textarea

Small richtext

Widget id

small-richtext

JS class

org.ametys.widgets.SmallRichText

Type

RICH-TEXT

Use this widget when you want a rich text smaller (in height) than the default one

HTML richtext

Widget id

html-richtext

JS class

org.ametys.widgets.AllTagsRichText

Type

RICH-TEXT

Use this widget when you want a rich text editor that does not valid the html inside.
The default widget does send only validated tags and attributes (depending on the plugins)n this one will send everything.

For exemple, if a copy-paste insert this in the rich-text

<p class="unknownclass"><unknowntag/></p>

The default widget will send this

<p></p>

Whereas the html rich text will end it as it is.

This widget is so dangerous, and might only be used when the content storage is directly HTML.
It should not be used on docbook contents.

Multiselection widget

Widget id

multiselect

JS class

org.ametys.widgets.MultiSelectWidget

Type

STRING

Use this widget to allow multiselection. The availables values will be display in a combo box with multi-selection

Sitemap widget

Widget id

sitemap

JS class

org.ametys.cms.widgets.SitemapWidget

Type

STRING

This widget allows to choose one or several pages in sitemap by choosing the site and language (in combo boxes).

The field value is the id(s) of selected page(s).

Configuration options:

  • siteName : the site name to restrict page selection or null for all available sites
  • lang : the language or null for all available languages
  • multiple : true to allow multiple selection. Defaults to false.

Current sitemap widget

Widget id

current-sitemap

JS class

org.ametys.cms.widgets.CurrentSitemapWidget

Type

STRING

This widget is an implementation of the Sitemap widget, restricted to the current site.

The field value is the id(s) of selected tag(s).

Configuration options:

  • multiple : true to allow multiple selection

Tags widget

Widget id

tags

JS class

org.ametys.web.widget.TagsWidget

Type

STRING

This widget allows to choose content or page tags

Configuration options:

  • siteName : the site name. Defaults it's the current site name
  • multiple : true to allow multiple selection. Defaults to false.
  • targetType : 'CONTENT' to restrict selection to content tags or 'PAGE' to restrict' selection to page tags

Content tags widget

Widget id

content-tags

JS class

org.ametys.web.widget.ContentTagsWidget

Type

STRING

This widget is an implementation of the Tags widget, restricted to content tags.

Configuration options:

  • siteName : the site name. Defaults it's the current site name
  • multiple : true to allow multiple selection. Defaults to false.

Page tags widget

Widget id

page-tags

JS class

org.ametys.web.widget.ContentTagsWidget

Type

STRING

This widget is an implementation of the Tags widget, restricted to page tags.

Configuration options:

  • siteName : the site name. Defaults it's the current site name
  • multiple : true to allow multiple selection. Defaults to false.

Tags Categories

Widget id

tag-categories

JS class

org.ametys.web.widget.TagCategoriesWidget t

Type

STRING

This widget allows the user to select a category of tag.

User widget

Widget id

user

JS class

org.ametys.cms.widgets.UserSelectorWidget

Type

USER

This widget allows to choose one or more users (among the users handled by the user manager)

The field value is the login(s) of selected user(s).

External file widget

Widget id

external-file

JS class

org.ametys.cms.widgets.ExternalFilesWidget

Type

BINARY

This widget allows the user to upload a file from his hard drive

The widget displays the name, the length and the thumbnail of the file and allows to download the uploaded file.

External image widget

Widget id

external-image

JS class

org.ametys.cms.widgets.ExternalFilesWidget

Type

BINARY

This widget allows the user to upload an image (.png, .jpg, .jpep, .gif) from his hard drive. The file extension is checked.

The widget displays the name, the length and the thumbnail of the image and allows to download the uploaded image.

External multimedia widget

Widget id

external-multimedia

JS class

org.ametys.cms.widgets.ExternalMultimediaWidget

Type

BINARY

This widget allows the user to upload a media file(.swf, .flv, .mp3) from his hard drive. The file extension is checked.

The widget displays the name, the length and the thumbnail of the media and allows to download the uploaded media file.

External or resource file widget

Widget id

external-or-resource-file

JS class

org.ametys.web.widgets.ExternalOrResourceFilesWidget

Type

FILE

This widget allows the user to upload a file from his hard drive or to select a file in resource explorer.

The widget displays the name, the length and the thumbnail of the file and allows to download it.

External or resource image widget

Widget id

external-or-resource-image

JS class

org.ametys.web.widgets.ExternalOrResourceImagesWidget

Type

FILE

This widget allows the user to upload an image (.png, .jpg, .jpep, .gif) from his hard drive or to select an image in resource explorer.

The widget displays the name, the length and the thumbnail of the image and allows to download it.

External or resource multimedia widget

Widget id

external-or-resource-multimedia

JS class

org.ametys.web.widgets.ExternalOrResourceMultimediaWidget

Type

FILE

This widget allows the user to upload a media file (.swf, .flv, .mp3) from his hard drive or to select a media file in resource explorer.

The widget displays the name, the length and the thumbnail of the file and allows to download it.

Select a content

Widget id

pick-content

JS class

org.ametys.cms.widgets.SelectContentWidget t

Type

STRING

This widget allows the user to select a content attached to a page.

Use a widget in service parameters or content metadata

Sample of metadata declaration using the external or resourec image widget

<cms:metadata name="image" type="file">
     <label i18n="true">CONTENT_ARTICLE_IMAGE</label>
     <description i18n="true">CONTENT_ARTICLE_IMAGE_DESC</description>
      <widget>external-or-resource-image</widget>
</cms:metadata>

Sample of service parameter using the current sitemap widget (with multiple selection)

<parameter name="pages" type="string" multiple="true">
     <label i18n="true">PLUGINS_WEB_SERVICE_FRONT_SEARCH_BY_SECTION</label>
     <description i18n="true">PLUGINS_WEB_SERVICE_FRONT_SEARCH_BY_SECTION_DESC</description>
     <widget>current-sitemap</widget>
</parameter>

Create a new widget

Create a widget

A widget is an element of a form. You must write your own JS object which necessary extends a form field (TextField, NumberField, ComboBox, ...).

org.ametys.myplugin.widgets.MyWidget = function(config)
{
     org.ametys.myplugin.widgets.MyWidget.superclass.constructor.call(this, config);
};

Ext.extend(org.ametys.myplugin.widgets.MyWidget, Ext.form.TextField, {

    // The configuration options of the widget

    buttonIcon : getPluginResourceUrl('myplugin') + '/img/widget/btn.png',

    multiple: false,

    // etc, ...
}

org.ametys.myplugin.widgets.MyWidget.prototype.onRender = function(ct, position)
{
    org.ametys.myplugin.widgets.MyWidget.superclass.onRender.call(this, ct, position);

    // Override the onRender function to give the widget its own look (add a button, an image, a hidden field, ...)
}

org.ametys.cms.widgets.SitemapWidget.prototype.setValue = function (values)
{
    // Override the setValue function if necessary
}

Register the widget

To be used, a widget must be registered as an available widget for a given type as following

org.ametys.utils.Widgets.registerWidget (type, widgetId, jsClass');

  • type : the type among string | double | long | binary | file | user | rich-text
  • widgetId : the widget unique (ex: my-widget)
  • jsClass : The JS class defines the widget

Samples :

org.ametys.utils.Widgets.registerWidget ('binary', 'external-image', 'org.ametys.cms.widgets.ExternalImagesWidget');
org.ametys.utils.Widgets.registerWidget ('string', 'sitemap', 'org.ametys.cms.widgets.SitemapWidget');
org.ametys.utils.Widgets.registerWidget ('string', 'my-widget', 'org.ametys.myplugin.widgets.MyWidget');
Back to top

Development