Package: django-ui-widgets
django-ui-widgetsThis is an add-on for django, consisting of improved widgets and fields with an expanded viewing interface and advanced features. Django widgets are taken as a basis.Package containsDynamicMultiSelectDynamicSelectDynamicModelFieldCustomImageFieldAutoUrlInputJSONViewWidgetDateWidgetDivHyperModelFormDynamicMultiSelectThis is a replacement forSelectMultiple. In fact, it is an analog of django-autocomplete without using jquery. Usage:fromui.widgetsimportDynamicMultiSelectclassProfileUpdateForm(ModelForm):labels=ModelMultipleChoiceField(queryset=SkillLabel.objects.all(),widget=DynamicMultiSelect(reverse_lazy('tag_filter')))classMeta:model=Profiledef__init__(self,*args,**kwargs):super().__init__('submit',*args,**kwargs)if'data'notinkwargs:self.fields['labels'].queryset=SkillLabel.objects.filter(profile=self.instance)self.fields['labels'].widget.choices=ModelChoiceIterator(self.fields['labels'])In the example above,tag_filteris a name of view url, that consists of filter returningJsonResponseobject with a list ofdicts containedidandnamekeys:deftag_filter(request:HttpRequest):pattern=request.GET.get('query','')result=SkillLabel.objects\.filter(name__startswith=pattern)\.extra(select={'hint':'name'})\.values('id','name')ifpatternelse()returnJsonResponse(list(result),safe=False)You can also use.annotate(value=F('name')instead ofextrafor receiving proper namenamefor view in template.Also pay attention to the choice assignment when transmitting data. This is necessary for correct form validation when checking primary keysDynamicSelectLikeDynamicMultiSelectDynamicSelectis replacement standartSelectdjango widget forForeignKeymodel fields with asynchronius autofillng from specified url. Works without jquery. Using likeDynamicMultiSelector throughDynamicModelField(recomended):DynamicModelFieldDynamicModelFieldis field usingDynamicSelectwidget.The simplest usage example:form.fields['type']=DynamicModelField(reverse('tag_filter'),SkillLabel.objects.filter(id=form.instance.type_id),'Field Placeholder',)In constructor you also can specifyclass_nameand optionalattrsfor DynamicSelect widget:form.fields['type']=DynamicModelField(reverse('tag_filter'),SkillLabel.objects.filter(id=form.instance.type_id),placeholder='Placeholder',class_name='my_class',attrs={'style':'margin-bottom:0'})you can use several of these fields on the same page and in the same formCustomImageFieldA field that hides input with the file type and allows you to set the css class for the label pointing to it.
This is a common (and almost default) practice of decorating 'input[type=file]' in classic frontend development, which requires a lot of actions.
With this component, you can do it in one line. Recommended usage:image=CustomImageField(label_css_class='image_icon',back_image='photo_up.jpg')In above sample by default inside CustomImageField is usedImageWidget. You can override this widget if you want.
However, this is not recommended, since in this case you will need to manually implement the display of the image when it is updatedAutoUrlInputReplacement for URLInput. Adds an automatic 'https://' extension at the beginning of the line if the address is invalidAttention!for this widget to work correctly, you must explicitly specify links to media resources in the template after the form, such as:{{ form.media }}DateWidgetCustomizedDateInputwidget:JSONViewWidgetJSONViewWidget- widget for displaying the content ofmodel.JSONField(a field officially added in django 3.1). Designed specifically for use in the admin interface. Usage example:classSkillAdmin(admin.ModelAdmin):formfield_overrides={models.JSONField:{'widget':JSONViewWidget()},}JSONViewWidgetinspired bySplitJSONWidget. But it has the following features that are missing inSplitJSONWidget, currently:adding and removing notes of the tree first levelediting for array entries of the tree first levelview, editing and deleting for the notes of embedded levelsformsDivHyperModelFormcustom ModelForm with two new methods:as_ht()- works likeas_pin template, but it already contains all the necessary content of the form tag. It means, small calling{{form.as_p}}by rendering
deploys to following code:<formmethod="post"{{cssclass}}>{% csrf_token %}
    {{form.as_p}}<inputtype="submit"value="{{submit}}"></form>as_div- works likeas_ht, but instaed ofptag to display each item of the form fields it takesdivOptional attributes:action- specifyactionattribute for the<form>tagcss_class- specifyclassattribute for the<form>tagsubmit- specifyvalueattribute for<submit>tag inside tag formUsage:classProfileUpdateForm(DivHyperModelForm):classMeta:model=Profileexclude=('user',)def__init__(self,*args,**kwargs):super().__init__('submit','form_class',*args,**kwargs)self.action=reverse('some_next_page')orclassProfileUpdateForm(DivHyperModelForm):action='/'submit='ok'css_class='form_class'classMeta:model=Profileexclude=('user',)Create instance and pass to template:context={'form':ProfileUpdateForm(submit='ok',request=request)}render('template_name.html',context,request)in template:<!DOCTYPE html><htmllang="ru"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body>{{form.as_div}}
	{{form.media}}</body>in above sample usage{{form.media}}is optionally like standart formInstallation:There are two steps:First step: install throughpiputility from one of the following sources:pypipip install django-ui-widgetsgithub(latest version) (recomended)pip install git+http://github.com/Sanshain/django-ui-widgetsSecond step: add"ui"app toINSTALLED_APPSinsidesettings.pyof your project:INSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles',#...'ui',#...]Finish