# Widgets

RHCore provides a collection of widgets that can be added to a page whenever you need them. Widgets are designed to work with few preconditions, which makes them easy to use without having to write code in various locations. In fact, the only precondition to a widget is the initial data and two lines in the header of the template:

{% include "rhcore/macros.html" %}
{% usemacro load_base true %}

The first line loads the macro library included with RHCore. Once these are loaded you can call and render a widget without any extra JavaScript, CSS, or OScript.

Widgets come in different flavours. The most common are form field widgets, which are rendered in RHTemplate using the formfield filter with the following syntax:

{{ initialValue|formfield:"<fieldType>":"<fieldName>" }}

# Date Picker Widget

A date picker widget makes it easy to select a date with a popup calendar. This can be generated with RHTemplate as follows:

{{ "2015-01-01"|formfield:"date":"startDate" }}

This creates a date picker form field that looks like this:

Behind the scenes the widget:

• parses of the initial value (e.g., 2015-01-01) into a date (other formats are supported);
• adds a "Clear" button to clear out the value;
• displays the chosen date in the format defined in the system configuration; and
• synchronizes the selected date to a hidden form field named startDate, which can be consumed by Content Server in a POST request (e.g., D/2015/1/1:0:0:0).

A date time picker is also available:

{{ "2015-01-01"|formfield:"datetime":"startDate" }}

The result:

# User Picker Widget

The standard Content Server user picker is a form field with a user icon. Clicking the icon presents a search page where search criteria can be input to find a user. Once the user is found a select link can be clicked to update the field with the selected user:

This style of "classic" user picker can be rendered with RHCore (say, with "Admin" being the initial value):

{{ "Admin"|formfield:"userclassic":"selectedUser" }}

An alternative widget, which requires fewer mouse clicks, is also available:

{{ "Admin"|formfield:"user":"selectedUser" }}

This renders an "autocomplete" field, where typing part of the user's log-in name, first name, last name, or e-mail address displays a list of matched suggestions from which the user can be selected:

The widget automatically:

• manages the AJAX request that applies the criteria;
• synchronizes the ID of the chosen user to a hidden field (named selectedUser); and
• formats the display names according to the format configured in the admin pages.

A similar widget also exists for groups.

# Tabs

Tabs are commonly used in applications to group related views. For example, a Content Server document has tabs named General, Audit, Categories, Versions, etc. that all relate to the document. Tabs allow a user to visualize what's available and navigate among the different views.

For example:

{% tabs %}
	{% tab "Tab 1" %}
		This is the content of tab 1.
	{% endtab %}

	{% tab "Tab 2" %}
		This is the content of tab 2.
	{% endtab %}
	
	{% tab "Tab 3" %}
		This is the content of tab 3.
	{% endtab %}				
{% endtabs %}

This renders as follows:

Only the contents of the active tab is rendered and displayed. The framework manages the URL for each tab, which is just the current URL with a different &tab parameter. For example, clicking on "Tab 2" reloads the page but with &tab=2 in the URL.

The individual {% tab %} tags also accept a parameter to control whether a tab should be displayed. For example, say you have a tab that should only be visibile if the current user has system administrator rights:

{% tab "Admin Tab" user.isAdmin %}
	Content that only administrators should see.
{% endtab %}

# Other Widgets

Other widgets include:

• standard form fields (input, textarea, checkbox, password, select, etc.);
• node picker;
• category/attribute picker;
• generic multi ordered select;
• sort headers (with up/down arrows);
• function menus;
• breadcrumb trails;
• user info link (that pops up the user information); and
• pagination (see Paging, Sorting, & Filtering in OpenText Content Server for more information).