Widgets¶
Widgets are used on the dashboard and are rendered with Vue.js component.
-
class
trionyx.widgets.
BaseWidget
[source]¶ Base widget to extend for creating custom widgets. Custom widgets are created in widgets.py in root of app folder.
Example of random widget:
# <app dir>/widgets.py RandomWidget(BaseWidget): code = 'random' name = 'Random widget' description = 'Shows random string' def get_data(self, request, config): return utils.random_string(16)
<!-- template path: widgets/random.html --> <script type="text/x-template" id="widget-random-template"> <div :class="widgetClass"> <div class="box-header with-border"> <!-- Get title from config, your form fields are also available in the config --> <h3 class="box-title">[[widget.config.title]]</h3> </div> <!-- /.box-header --> <div class="box-body"> <!-- vue data property will be filled with the get_data results method ---> [[data]] </div> </div> </script> <script> <!-- The component must be called `widget-<code>` --> Vue.component('widget-random', { mixins: [TxWidgetMixin], template: '#widget-random-template', }); </script>
-
code
= None¶ Code for widget
-
permission
= None¶ Permission to use this widget
-
name
= ''¶ Name for widget is also used as default title
-
description
= ''¶ Short description on what the widget does
-
config_form_class
= None¶ Form class used to change the widget. The form cleaned_data is used as the config
-
default_width
= 4¶ Default width of widget, is based on grid system with max 12 columns
-
default_height
= 20¶ Default height of widget, each step is 10px
-
fixed_width
= None¶ Set a fixed width for widget
-
fixed_height
= None¶ Set a fixed height for widget
-
is_resizable
= None¶ Is widget resizable
-
template
¶ Template path widgets/{code}.html overwrite to set custom path
-
image
¶ Image path img/widgets/{code}.jpg overwrite to set custom path
-
get_data
(request: django.http.request.HttpRequest, config: dict)[source]¶ Get data for widget, function needs te be overwritten on widget implementation
-
config_fields
¶ Get the config field names
-