Advanced Usage¶
Inline Templates¶
from django_webix.formsets import WebixTabularInlineFormSet, WebixStackedInlineFormSet
from django_webix.views import WebixCreateWithInlinesUnmergedView, WebixUpdateWithInlinesUnmergedView
from <app_name>.forms import MyModelForm
from <app_name>.models import MyModel, InlineModel
class InlineModelInline(WebixStackedInlineFormSet):
model = InlineModel
fields = '__all__'
class MyModelCreateView(WebixCreateWithInlinesUnmergedView):
model = MyModel
inlines = [InlineModelInline]
form_class = MyModelForm
class MyModelUpdateView(WebixUpdateWithInlinesUnmergedView):
model = MyModel
inlines = [InlineModelInline]
form_class = MyModelForm
Inline QuerySet¶
from django_webix.formsets import WebixStackedInlineFormSet
from django_webix.views import WebixCreateWithInlinesView, WebixUpdateWithInlinesView, WebixDeleteView
from <app_name>.models import InlineModel
class InlineModelInline(WebixStackedInlineFormSet):
model = InlineModel
fields = '__all__'
def get_queryset(self):
return self.inline_model.objects.filter(**filters)
Custom FormSet Class¶
from django_webix.formsets import BaseWebixInlineFormSet
class CustomInlineFormSet(BaseWebixInlineFormSet):
# ...
class InlineModelInline(WebixStackedInlineFormSet):
# ...
custom_formset_class = CustomInlineFormSet
# ...
Add custom action with user input request¶
Write custom ui to django-webix acton with input parametrs asked to users.
Python view¶
In python view write the action as usual with @action_config
@action_config(action_key='my_action_name',
response_type='json',
short_description=_("Action title"),
allowed_permissions=[])
def my_action(self, request, qs):
_elements_count = int(qs.count())
# ...
return JsonResponse({
"status": True,
"message": _("{elements_count} elements succesfully updated").format(
elements_count=_elements_count
),
"redirect_url": self.get_url_list(),
})
Javascript template¶
In javascript list template overwrite the toolbar_list_actions block
First of all write a new function with the action user interface definition, usually with some user input widgets (choices, text)
- This function show the user input widgets windows, and then, on confirm callback, runs the action_execute function with the input params as last optional argument (all the other arguments are not changed)
- The input params shoud be an object like: {‘my_choice’: ‘choice_value’}
var my_custom_action_ui = function (action, ids, all, response_type, short_description, modal_title, modal_ok, modal_cancel) { webix.ui({ view: "window", width: 300, modal: true, position: "center", head: { view: "label", label: short_description, align: "center", }, body: { view: "form", rules: { "my_choices_name": webix.rules.isNotEmpty, }, elements: [ // INPUT TITLE {template: "Select the desired value", borderless: true, css: {"text-align": "center"}, autoheight: true}, // INPUT WIDGETS { cols: [ {}, { view: "richselect", label: "Choices label", labelWidth: 100, width: 250, name: 'my_choices_name', // name serve per rules, validate e get form elements invalidMessage: "Required to select a value", options: [ {id: 'option_1', value: "Option 1"}, {id: 'option_2', value: "Option 2"} ] }, {} ] }, {height: 5}, // FOOTER WITH CENETERD BUTTONS: | Cancel | Send | { margin: 5, cols: [ {}, { view: "button", width: 100, value: modal_cancel, click: function () { // returns the top parent view, for element in window: window this.getTopParentView().hide(); } }, { view: "button", width: 100, value: modal_ok, css: "webix_primary", click: function () { if (this.getFormView().validate()) { this.getTopParentView().hide(); var params = {'my_choice': this.getFormView().elements["my_choices_name"].getValue()} _{{ view_prefix }}action_execute( action, ids, all, response_type, short_description, modal_title, modal_ok, modal_cancel, params ) } } }, {} ] } ] } }).show(); };
Then overwrite the toolbar_list_actions block to use my_custom_action_ui
{% block toolbar_list_actions %} {% if is_enable_actions %} var {{ view_prefix }}actions_list = [ {% for action_key,action in actions.items %} {id: '{{ action_key }}', value: '{{ action.short_description }}'}{% if not forloop.last %}, {% endif %} {% endfor %} ]; function {{ view_prefix }}actions_execute(action, ids, all) { {% for action_key, action in actions.items %} {% if action_key == 'my_action_name' %} if (action == '{{ action_key }}') { my_custom_action_ui( '{{ action_key }}', ids, all, '{{ action.response_type }}', '{{ action.short_description }}', '{{ action.modal_title }}', '{{ action.modal_ok }}', '{{ action.modal_cancel }}' ) } {% if not forloop.last %} else {% endif %} {% else %} if (action == '{{ action_key }}') { _{{ view_prefix }}action_execute( '{{ action_key }}', ids, all, '{{ action.response_type }}', '{{ action.short_description }}', '{{ action.modal_title }}', '{{ action.modal_ok }}', '{{ action.modal_cancel }}' ) } {% if not forloop.last %} else {% endif %} {% endif %} {% endfor %} } {% else %} var {{ view_prefix }}actions_list = undefined; var {{ view_prefix }}actions_execute = undefined; {% endif %} {% endblock %}
Conclusions¶
Finally you can access the input parametrs as request POST data in the action method my_action(self, request, qs)
params = json.loads(request.POST['params'])
choice_value = params['my_choice']