{"id":882,"date":"2023-04-08T15:59:13","date_gmt":"2023-04-08T15:59:13","guid":{"rendered":"https:\/\/codenerix.com\/?p=882\/"},"modified":"2024-03-25T13:43:51","modified_gmt":"2024-03-25T13:43:51","slug":"genform-with-autofill","status":"publish","type":"post","link":"https:\/\/codenerix.com\/en\/genform-with-autofill\/","title":{"rendered":"GenForm with Autofill"},"content":{"rendered":"\n<p>In this post, we will share with you how to use the <strong><span style=\"text-decoration: underline;\">autofill<\/span><\/strong> feature from<strong>&nbsp;<strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong>&nbsp;GenForm<\/strong> and <strong>GenModelForm<\/strong>. If you want to visit the general documentation, please follow <strong><a href=\"http:\/\/doc.codenerix.com\/forms\/genform.html#autofill\">this link<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What does the autofill feature?<\/h2>\n\n\n\n<p>This feature <span style=\"text-decoration: underline;\">helps the developer to interconnect several fields into a dynamic field,<\/span> giving the user a better experience while using the ERP.<\/p>\n\n\n\n<p>Imagine that you have &#8220;<strong>Country<\/strong>&#8220;, &#8220;<strong>Region<\/strong>&#8220;, and &#8220;<strong>City<\/strong>&#8221; selectors, and you need to <span style=\"text-decoration: underline;\">filter one field with the other<\/span> so the user can choose data from the filtered results of the previous field. It is easier to see it with an example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Let&#8217;s say the user selects &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Spain<\/mark><\/strong>&#8221; as a &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Country<\/mark><\/strong>&#8220;.<\/li>\n\n\n\n<li>In the &#8220;<strong>Region<\/strong>&#8221; selector, the user should be able to choose <strong><span style=\"text-decoration: underline;\">only Spanish Regions<\/span><\/strong> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">not any region from any other country<\/mark>.<\/li>\n\n\n\n<li>The user chooses &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Andalusia<\/mark><\/strong>&#8221; from all the <strong>Spanish Regions<\/strong>.<\/li>\n\n\n\n<li>In the &#8220;<strong>City<\/strong>&#8221; selector again, the user should see only <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Andalusian cities<\/mark><\/strong> and <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">not Madrid or Valencia<\/mark><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>The same example can be shown with &#8220;<strong>Family<\/strong>&#8220;, &#8220;<strong>Category<\/strong>&#8220;, and &#8220;<strong>Subcategory<\/strong>&#8220;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3639\" height=\"169\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\" alt=\"\" class=\"wp-image-884\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png 3639w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields-1280x59.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields-980x46.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields-480x22.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3639px, 100vw\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Let&#8217;s see what we should expect from the browser:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"3786\" height=\"1497\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill1.png\" alt=\"\" class=\"wp-image-891\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill1.png 3786w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill1-1280x506.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill1-980x387.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill1-480x190.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3786px, 100vw\" \/><figcaption class=\"wp-element-caption\">&#8220;<strong>Family<\/strong>&#8221; (Familia) is a static selector. We choose &#8220;<strong>Ordenadores (23)<\/strong>&#8220;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3792\" height=\"1578\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill2.png\" alt=\"\" class=\"wp-image-892\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill2.png 3792w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill2-1280x533.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill2-980x408.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill2-480x200.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3792px, 100vw\" \/><figcaption class=\"wp-element-caption\">We click on the dynamic select for &#8220;<strong>Category<\/strong>&#8221; (Categor\u00eda), and an <strong>XHR<\/strong> request happens<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3799\" height=\"1595\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill3.png\" alt=\"\" class=\"wp-image-887\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill3.png 3799w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill3-1280x537.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill3-980x411.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill3-480x202.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3799px, 100vw\" \/><figcaption class=\"wp-element-caption\">The <strong>XHR<\/strong> request included the selected <strong>ID<\/strong> from &#8220;<strong>Family<\/strong>&#8221; (Familia), so &#8220;<strong>Categories<\/strong>&#8221; are filtered with this &#8220;<strong>Family<\/strong>&#8220;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3789\" height=\"1758\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill4.png\" alt=\"\" class=\"wp-image-885\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill4.png 3789w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill4-1280x594.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill4-980x455.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill4-480x223.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3789px, 100vw\" \/><figcaption class=\"wp-element-caption\">In the answer, the information for this selector is coming (including &#8220;<strong>id<\/strong>&#8221; and &#8220;<strong>label<\/strong>&#8220;)<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3785\" height=\"1659\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill5.png\" alt=\"\" class=\"wp-image-886\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill5.png 3785w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill5-1280x561.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill5-980x430.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill5-480x210.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3785px, 100vw\" \/><figcaption class=\"wp-element-caption\">We choose &#8220;<strong>Port\u00e1tiles (LAPTOPS)<\/strong>&#8221; from the Dynamic Select, and another <strong>XHR<\/strong> request happens to refresh data in the selector.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3778\" height=\"1602\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill6.png\" alt=\"\" class=\"wp-image-888\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill6.png 3778w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill6-1280x543.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill6-980x416.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill6-480x204.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3778px, 100vw\" \/><figcaption class=\"wp-element-caption\">We click on the dynamic select for &#8220;<strong>Subcategory<\/strong>&#8221; (Subcategor\u00eda), and an <strong>XHR<\/strong> request happens.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3784\" height=\"1755\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill7.png\" alt=\"\" class=\"wp-image-889\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill7.png 3784w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill7-1280x594.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill7-980x455.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill7-480x223.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3784px, 100vw\" \/><figcaption class=\"wp-element-caption\">The <strong>XHR<\/strong> request included the selected <strong>ID<\/strong> from &#8220;<strong>Category<\/strong>&#8221; (Category); again, several elements came from the server.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3782\" height=\"1649\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill8.png\" alt=\"\" class=\"wp-image-890\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill8.png 3782w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill8-1280x558.png 1280w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill8-980x427.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill8-480x209.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 3782px, 100vw\" \/><figcaption class=\"wp-element-caption\">We click on the dynamic select for &#8220;<strong>Subcategory<\/strong>&#8221; (Subcategor\u00eda), and an <strong>XHR<\/strong> request happens.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>We can see in the public ERP example that the autofill feature is cool and can lead to smaller selectors. We actually encourage the usage of Dynamic Selectors over Static Selectors because they can be tuned in a very granular way and lead to smaller answers from the server, reducing the overhead also on the database.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let&#8217;s see how this was configured in CODENERIX<\/h2>\n\n\n\n<p>To use the autofill feature, you have to add a &#8220;<strong>Meta<\/strong>&#8221; class to your <strong>GenForm<\/strong> or <strong>GenModelForm<\/strong> class and declare inside the <strong>Meta<\/strong> class a new attribute named &#8220;<strong>autofill&#8221;,<\/strong> and it should look similar to:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">autofill = {\n    # Search of attr3 based in attr2\n    \"attr3\": [\"select\", 3, \"related_name_foreignkey_url\", \"attr2\"],\n    # Search based in its own pk\n    \"attr5\": [\"select\", 3, \"related_name_foreignkey_url\", \"__pk__\"],\n    # Search based in his own pk and attr2.\n    \"attr4\": [\"select\", 3, \"related_name_foreignkey_url\", \"__pk__\", \"attr2\"],\n}<\/pre>\n\n\n\n<p><strong>Autofill<\/strong> is an attribute designed to fill foreign key attributes with <strong>data based on a textbox<\/strong>, <strong>any other information from the form<\/strong> or <strong>an AngularJS function<\/strong>. The structure is a dictionary with the attribute name as a key and a list as a value which will contain elements using the next format:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><span style=\"text-decoration: underline;\">position[0]:<\/span><\/strong> Type of the selector that you need to create:\n<ul class=\"wp-block-list\">\n<li><strong>select:<\/strong> shows a box that takes a single choice.<\/li>\n\n\n\n<li><strong>multiselect:<\/strong> shows a box which lets you select multiple choices.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">position[1]:<\/span><\/strong> minimum number of letters required in the textbox to start the execution of a search. When this number of chars is reached, the field will start an XHR request to the server querying for data to fill the field. To request all records to choose from, you should write \u2018*\u2019.<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">position[2]:<\/span><\/strong> Related name of the URL for the <strong><a href=\"http:\/\/doc.codenerix.com\/views\/genforeignkey.html\" target=\"_blank\" rel=\"noreferrer noopener\">GenForeignKey<\/a><\/strong> class that will attend the request to fetch the field&#8217;s data.<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">position[3-n]:<\/span><\/strong> (<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Optional fields<\/mark><\/strong>) The rest of the fields are filters used to send the <strong>pk<\/strong> (primary key) of a selected attribute. Usually is used to take the value of an attribute and perform the search using it. There are two options for using these filters:\n<ul class=\"wp-block-list\">\n<li><strong>attrName:<\/strong> sends the current value, if it exists, from a selected attribute.<\/li>\n\n\n\n<li><strong>pk:<\/strong> send the <strong>pk<\/strong> (primary key) of the own object.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>In our previous examples, the <strong>request<\/strong> looked like this:<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\">Request:<\/span> https:\/\/erp.codenerix.com<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\/products\/categorys\/foreign\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">*<\/mark><\/strong>?def=1&amp;filter=<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">{&#8220;FeatureForm_family&#8221;:&#8221;1&#8243;}<\/mark><\/strong><\/p>\n\n\n\n<p>and the <strong>autofill<\/strong> field was filled as follows:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class Meta:\n\tautofill = {\n\t\t\"FeatureForm_category\": [\n\t\t\t\"select\",\n\t\t\t3,\n\t\t\t\"CDNX_products_categorys_foreign\",\n\t\t\t\"FeatureForm_family\"\n\t\t]\n\t}<\/pre>\n\n\n\n<p>In action:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The software built the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">URL<\/mark><\/strong> using the related URL name &#8220;<strong>CDNX_products_categorys_foreign<\/strong>&#8220;.<\/li>\n\n\n\n<li>It searched on the click for every register &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">*<\/mark><\/strong>&#8220;.<\/li>\n\n\n\n<li>If we wrote in the search box, the string would be sent if it had <span style=\"text-decoration: underline;\">3 characters<\/span> or more.<\/li>\n\n\n\n<li>Example URL for the search &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">hola<\/mark><\/strong>&#8221; would be: <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\/products\/categorys\/foreign\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">hola<\/mark><\/strong>?def=1&amp;filter=<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">{&#8220;FeatureForm_family&#8221;:&#8221;1&#8243;}<\/mark><\/strong><\/li>\n\n\n\n<li>It sent the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">ID<\/mark><\/strong> from the selected element in the &#8220;<strong>Family&#8221;<\/strong> selector, which would actually be the pk &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">1<\/mark><\/strong>&#8220;.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let&#8217;s see how does it look the GenForeignKey class<\/h2>\n\n\n\n<p>Following the example before, here is the resulting <strong><a href=\"http:\/\/doc.codenerix.com\/views\/genforeignkey.html\" target=\"_blank\" rel=\"noreferrer noopener\">GenForeignKey<\/a><\/strong> class that would answer any request to this field. This is actually one of the most complex <strong><a href=\"http:\/\/doc.codenerix.com\/views\/genforeignkey.html\" target=\"_blank\" rel=\"noreferrer noopener\">GenForeignKey<\/a><\/strong> you may build. Under this one, <span style=\"text-decoration: underline;\">there is a simpler example<\/span>:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class CategoryForeign(GenCategoryUrl, GenForeignKey):\n    model = Category\n    label = \"{&lt;LANGUAGE_CODE>__name} ({code})\"\n\n    def get_foreign(self, queryset, search, filters):\n        # Filter with search string\n        query = [Q(code__icontains=search), ]\n        for lang in settings.LANGUAGES_DATABASES:\n            query.append(Q(**{\"{}__name__icontains\".format(lang.lower()): search}))\n\n        qs = queryset.filter(\n            reduce(operator.or_, query)\n        )\n        family = filters.get('FeatureForm_family', None)\n        if family is None:\n            family = filters.get('AttributeForm_family', None)\n        if family is None:\n            family = filters.get('FeatureSpecialForm_family', None)\n        if family is None:\n            family = filters.get('ProductForm_family', None)\n        if family is None:\n            family = filters.get('ProductFormCreate_family', None)\n        if family is None:\n            family = filters.get('ProductFormCreateCustom_family', None)\n\n        if family:\n            qs = qs.filter(family__pk=family)\n\n        return qs[:settings.LIMIT_FOREIGNKEY]<\/pre>\n\n\n\n<p>This is actually one of the most complex <strong><a href=\"http:\/\/doc.codenerix.com\/views\/genforeignkey.html\" target=\"_blank\" rel=\"noreferrer noopener\">GenForeignKey<\/a><\/strong> you may build.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class ProductForeign(GenForeignKey):\n    model = Product\n    label = \"{name}\"\n    public = True\n\n    def get_foreign(self, queryset, search, filters):\n        qsobject = Q(name__icontains=search)\n        qs = queryset.filter(qsobject).order_by(\"name\")\n        return qs[: settings.LIMIT_FOREIGNKEY]\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<p>The examples shown in this post were taken from &#8220;<strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix-products\" target=\"_blank\" rel=\"noreferrer noopener\">django-codenerix-products<\/a><\/strong>&#8221; package reading from <strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix-products\/blob\/master\/codenerix_products\/forms.py\" target=\"_blank\" rel=\"noreferrer noopener\">forms.py<\/a><\/strong> and <strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix-products\/blob\/master\/codenerix_products\/views.py\" target=\"_blank\" rel=\"noreferrer noopener\">views.py<\/a><\/strong><\/p>\n\n\n\n<p>Remember to visit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"http:\/\/doc.codenerix.com\/forms\/genform.html#autofill\">Autofill documentation<\/a><\/strong><\/li>\n\n\n\n<li><a href=\"http:\/\/doc.codenerix.com\/views\/genforeignkey.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>GenForeignKey documentation<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we will share with you how to use the autofill feature from&nbsp;CODENERIX&nbsp;GenForm and GenModelForm. If you want to visit the general documentation, please follow this link. What does the autofill feature? This feature helps the developer to interconnect several fields into a dynamic field, giving the user a better experience while using [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-882","post","type-post","status-publish","format-standard","hentry","category-howto"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>GenForm with Autofill - Codenerix<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GenForm with Autofill - Codenerix\" \/>\n<meta property=\"og:description\" content=\"In this post, we will share with you how to use the autofill feature from&nbsp;CODENERIX&nbsp;GenForm and GenModelForm. If you want to visit the general documentation, please follow this link. What does the autofill feature? This feature helps the developer to interconnect several fields into a dynamic field, giving the user a better experience while using [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\" \/>\n<meta property=\"og:site_name\" content=\"Codenerix\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-08T15:59:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-25T13:43:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\" \/>\n<meta name=\"author\" content=\"Codenerix\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codenerix\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\"},\"author\":{\"name\":\"Codenerix\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"headline\":\"GenForm with Autofill\",\"datePublished\":\"2023-04-08T15:59:13+00:00\",\"dateModified\":\"2024-03-25T13:43:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\"},\"wordCount\":821,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\",\"articleSection\":[\"Howto\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\",\"url\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\",\"name\":\"GenForm with Autofill - Codenerix\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\",\"datePublished\":\"2023-04-08T15:59:13+00:00\",\"dateModified\":\"2024-03-25T13:43:51+00:00\",\"author\":{\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"breadcrumb\":{\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage\",\"url\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\",\"contentUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codenerix.com\/en\/genform-with-autofill\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codenerix.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GenForm with Autofill\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codenerix.com\/#website\",\"url\":\"https:\/\/codenerix.com\/\",\"name\":\"Codenerix\",\"description\":\"Framework libre Open Source\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codenerix.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\",\"name\":\"Codenerix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g\",\"caption\":\"Codenerix\"},\"url\":\"https:\/\/codenerix.com\/en\/author\/codenerix\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GenForm with Autofill - Codenerix","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codenerix.com\/en\/genform-with-autofill\/","og_locale":"en_US","og_type":"article","og_title":"GenForm with Autofill - Codenerix","og_description":"In this post, we will share with you how to use the autofill feature from&nbsp;CODENERIX&nbsp;GenForm and GenModelForm. If you want to visit the general documentation, please follow this link. What does the autofill feature? This feature helps the developer to interconnect several fields into a dynamic field, giving the user a better experience while using [&hellip;]","og_url":"https:\/\/codenerix.com\/en\/genform-with-autofill\/","og_site_name":"Codenerix","article_published_time":"2023-04-08T15:59:13+00:00","article_modified_time":"2024-03-25T13:43:51+00:00","og_image":[{"url":"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png","type":"","width":"","height":""}],"author":"Codenerix","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Codenerix","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#article","isPartOf":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/"},"author":{"name":"Codenerix","@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"headline":"GenForm with Autofill","datePublished":"2023-04-08T15:59:13+00:00","dateModified":"2024-03-25T13:43:51+00:00","mainEntityOfPage":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/"},"wordCount":821,"commentCount":0,"image":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png","articleSection":["Howto"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codenerix.com\/en\/genform-with-autofill\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/","url":"https:\/\/codenerix.com\/en\/genform-with-autofill\/","name":"GenForm with Autofill - Codenerix","isPartOf":{"@id":"https:\/\/codenerix.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage"},"image":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png","datePublished":"2023-04-08T15:59:13+00:00","dateModified":"2024-03-25T13:43:51+00:00","author":{"@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"breadcrumb":{"@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codenerix.com\/en\/genform-with-autofill\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#primaryimage","url":"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png","contentUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2023\/04\/autofill_linked_fields.png"},{"@type":"BreadcrumbList","@id":"https:\/\/codenerix.com\/en\/genform-with-autofill\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codenerix.com\/en\/"},{"@type":"ListItem","position":2,"name":"GenForm with Autofill"}]},{"@type":"WebSite","@id":"https:\/\/codenerix.com\/#website","url":"https:\/\/codenerix.com\/","name":"Codenerix","description":"Framework libre Open Source","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codenerix.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af","name":"Codenerix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codenerix.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g","caption":"Codenerix"},"url":"https:\/\/codenerix.com\/en\/author\/codenerix\/"}]}},"_links":{"self":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/comments?post=882"}],"version-history":[{"count":10,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/882\/revisions"}],"predecessor-version":[{"id":911,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/882\/revisions\/911"}],"wp:attachment":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/media?parent=882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/categories?post=882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/tags?post=882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}