Widgets are used to provide reusable view parts by means of a view class. Please refer to the Yii-Guide for more information about widgets.
This guide describes the usage of some HumHubs base widget types.
Custom JsWidget are extended from
humhub\widgets\JsWidget and can facilitate the following features:
- Manage your widget initialization through the
- Reloadable widget
- Widget event binding
A very basic JsWidget:
The example above does not overwrite the
humhub\widgets\JsWidget::run() function and therefore uses the default
rendering of the JsWidget class, which can be used for very simple widgets. The default rendering mechanism uses renders
a simple HTML tag defined by
humhub\widgets\JsWidget::content and furthermore
humhub\widgets\JsWidget::getOptions() function for fetching the HTML attributes and widget data-* options.
In the following example we manipulate the default rendering to render a simple list:
This will result in the following output:
Fore more complex cases you may want to use a custom view as follows:
getOptoins()function assembles all html attributes and data-* options of your widget, which always should be added to the root node of your widget.
The initialization is managed by the
humhub\widgets\JsWidget::init field, which either accepts a boolean or array.
When setting your
init field to true or add a value, your widget will be initialized once detected in the frontend,
By providing a non boolean value as
init value you can add serialized data which will be used as first parameter of
Often you want to reload your widget in order to update parts of your view. This can be achieved by implementing the
humhub\widgets\Reloadable]] interface and providing a reload-url in your getReloadUrl()` as in the following example
Now you will be able to reload your widget with
myWidget.reload() or a
reload button action.
HumHub uses Widget-Stacks to assemble multiple entries of a base widget as a naviagation or list.
Stacked widget are derived from
humhub\widgets\BaseStack and will fire an
onRun event by default,
which can be subscribed by other modules to inject widget items. This mechanism can be used for example for sidebars.
Example of stack used as sidebar: