{"id":952,"date":"2024-06-06T15:15:52","date_gmt":"2024-06-06T15:15:52","guid":{"rendered":"https:\/\/codenerix.com\/?p=952\/"},"modified":"2025-02-10T05:16:33","modified_gmt":"2025-02-10T05:16:33","slug":"customizing-genlist-with-custom-partials-controllers-filters-and-so-on","status":"publish","type":"post","link":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/","title":{"rendered":"Customizing GenList with custom partials, controllers, filters and so on"},"content":{"rendered":"\n<p>You can customize many details of <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> by telling the software to behave one way or the other. In this tutorial, you will learn how to customize GenList results to get improved listing. This is quite common when you want to do new things, like adding buttons to your lists or showing elements in one way or the other. With a lot of tunning, your website can look like this example:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e08c624bc23&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e08c624bc23\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"229\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_complex_genlist-1024x229.png\" alt=\"\" class=\"wp-image-953\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_complex_genlist-980x219.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_complex_genlist-480x107.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let&#8217;s explain the parts<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><span style=\"text-decoration: underline;\">Partials<\/span><\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>What are they?<\/strong> Partials are essentially snippets of HTML code. They represent reusable chunks of your user interface (UI). Think of them as building blocks for your views.<\/li>\n\n\n\n<li><strong>Why use them?<\/strong> Partials promote modularity and maintainability. They help avoid repeating HTML code and make your codebase more organized.<\/li>\n\n\n\n<li><strong>How they work:<\/strong> You typically load partials into your main view using AngularJS directives like ng-include or through routing mechanisms.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">Controllers<\/span><\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>What are they?<\/strong> Controllers are JavaScript functions that govern the behaviour and data of a specific portion of your AngularJS application (often associated with a particular partial).<\/li>\n\n\n\n<li><strong>Why use them?<\/strong> Controllers provide the logic for interacting with your data, handling user input, and updating the view accordingly.<\/li>\n\n\n\n<li><strong>How they work:<\/strong> Controllers are linked to parts of your view using the <strong>ng-controller<\/strong> d-rective. They have access to a special <strong>$scope<\/strong> object, which bridges the controller&#8217;s data and the view.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">The AngularJS App (Module)<\/span><\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>What is it?<\/strong> The AngularJS app, often called a module, is the container that holds all the pieces of your application together. It defines the dependencies (other modules your app needs) and sets up the overall structure.<\/li>\n\n\n\n<li><strong>Why use it?<\/strong> The app module is essential for organizing and bootstrapping your AngularJS application. It provides a way to declare components like controllers, directives, filters, and services.<\/li>\n\n\n\n<li><strong>How it works:<\/strong> You create an AngularJS app using the angular.module function. You then use this module to register various components of your application.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">Filters<\/span><\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>What are they?<\/strong> Filters are functions that transform or format data before it&#8217;s displayed in the view.<\/li>\n\n\n\n<li><strong>Why use them?<\/strong> Filters provide a convenient way to make data more readable or visually appealing. For example, you can use filters to format dates, currency, or uppercase text.<\/li>\n\n\n\n<li><strong>How they work:<\/strong> You can use filters directly in your templates with the pipe (<strong>|<\/strong>) symbol or apply them within controllers or services.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\">Illustrative Example:<\/span><\/strong> let&#8217;s imagine a simple product listing application.\n<ul class=\"wp-block-list\">\n<li><strong>Partial:<\/strong> A <strong>product.html<\/strong> partial would contain the <strong><span style=\"text-decoration: underline;\">HTML<\/span><\/strong> for displaying a single product&#8217;s details (name, image, price).<\/li>\n\n\n\n<li><strong>Controller:<\/strong> A <strong>ProductController<\/strong> would fetch product data from a service and make it available to the product.html partial. It might also<strong> handle actions<\/strong> like adding a product to a shopping cart.<\/li>\n\n\n\n<li><strong>App:<\/strong> The <strong>myApp<\/strong> module would bring the partial, controller, and any necessary services together.<\/li>\n\n\n\n<li><strong>Filter:<\/strong> A currency filter might format the product&#8217;s price into a user-friendly format (e.g., &#8220;19.99\u20ac&#8221;).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Quick HOWTO<\/h2>\n\n\n\n<p>Adding a custom partials, controllers and filters to a GenList is quite straight forward since <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> already manage custom files for you. Let&#8217;s watch a quick guide and then we will talk in detail:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Let&#8217;s imagine that you are working on a &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">shop<\/mark><\/strong>&#8221; Django project with a &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">book<\/mark><\/strong>&#8221; app\/module which has a model named &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">page<\/mark><\/strong>&#8221; which contains four fields: &#8220;title&#8221;, &#8220;subtitle&#8221;, &#8220;isbn&#8221; and &#8220;qrcode&#8221;.<\/li>\n\n\n\n<li>Inside your &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">book<\/mark><\/strong>&#8221; module folder create a &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">static\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">book\/<\/mark><\/strong>&#8221; folder that will hold all statics for this module in place. The full path would be &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">shop\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">book\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">static\/<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">book\/<\/mark><\/strong>&#8220;.<\/li>\n\n\n\n<li>Inside <span style=\"text-decoration: underline;\">the newly created folder<\/span> edit a new file named &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">page<\/mark>s_rows.html<\/strong>&#8220;.<\/li>\n\n\n\n<li>Inside &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">page<\/mark>s_rows.html<\/strong>&#8221; write your AngularJS Partial&#8217;s code thinking that your <strong>$scope<\/strong> contains a &#8220;<strong>row<\/strong>&#8221; element that has all the elements you wrote down in your <strong>__fields__() <\/strong>method in your <strong>GenList<\/strong> or <strong>GenModel<\/strong>, so the file would look like:<br><strong>&lt;td>{{row.title|codenerix}}&lt;\/td><br>&lt;td>{{row.subtitle|codenerix}}&lt;\/td><br>&lt;td>{{row.isbn|codenerix}}&lt;\/td><br>&lt;td>{{row.qrcode|qr}}&lt;\/td><\/strong><\/li>\n\n\n\n<li>And you are all set. Everytime that you visit this PageListView(GenList) <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> will render it using your custom &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">page<\/mark>s_rows.html<\/strong>&#8221; so every row will have 4 columns.<\/li>\n\n\n\n<li>Watch out your <strong>__fields__()<\/strong> methods, because if you add or reduce the number of fields then you will have to update also your partials files, &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">page<\/mark>s_rows.html<\/strong>&#8221; in this example. <\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Filters in partials<\/h2>\n\n\n\n<p>In the example before we used &#8220;<strong>codenerix<\/strong>&#8221; and &#8220;<strong>qr<\/strong>&#8221; predefined filters to produce a result like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_example_genlist_qr-1024x499.png\" alt=\"\" class=\"wp-image-960\" style=\"width:502px;height:auto\" srcset=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_example_genlist_qr-1024x499.png 1024w, https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_example_genlist_qr-980x477.png 980w, https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/codenerix_example_genlist_qr-480x234.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p><strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> already bring some ready to use filters that make life easier, they can be used in <strong>__fields__()<\/strong> methods, example:<\/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=\"\">def __fields__(self, info):\n    fields = []\n    fields.append((\"title\", _(\"Title\"))\n    fields.append((\"subtitle\", _(\"Subtitle\"))\n    fields.append((\"isbn\", _(\"ISBN\"))\n    fields.append((\"qrcode\", _(\"QR\"), 100, None, \"qr:100\"))\n    return fields<\/pre>\n\n\n\n<p>This will render inside the partial as: &#8220;<strong>&lt;td&gt;{{row.qrcode|<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">codenerix:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">qr:100<\/mark>}}&lt;\/td&gt;<\/strong>&#8221; showing an image with a <strong>QR<\/strong> in your <strong>GenList<\/strong>. Keep an eye on the just inserted &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">|codenerix<\/mark><\/strong>&#8221; filter to your elements specified in your <strong>__fields__()<\/strong> method; this is done automatically; for your custom partials, you will have to add &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">|codenerix<\/mark><\/strong>&#8221; yourself if desired or any other filter at your will.<\/p>\n\n\n\n<p>Some of the most common filters that you can use inside <strong>__fields__() <\/strong>(<span style=\"text-decoration: underline;\">remember to remove the &#8220;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:<\/mark><\/strong>&#8221; <strong>prefix<\/strong><\/span>) method or inside your <strong>custom partials<\/strong> are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix<\/mark><\/strong>: this is the most important one since it will try to do the most basic job for you, like:\n<ul class=\"wp-block-list\">\n<li>Render a &#8216;<strong>&#8211;<\/strong>&#8216; if the content of the field is equal to &#8220;<strong>null<\/strong>&#8220;, &#8220;<strong>undefined<\/strong>&#8220;, or <strong>empty string<\/strong>.<\/li>\n\n\n\n<li>Render as a \u2714 or \u274c for fields that are equal to the string &#8220;<strong>True<\/strong>&#8221; \/ &#8220;<strong>False<\/strong>&#8221; or &#8220;<strong>true<\/strong>&#8221; \/ &#8220;<strong>false<\/strong>&#8220;.<\/li>\n\n\n\n<li>It also has arguments like:\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:bool<\/mark><\/strong>: will render all results as booleans, \u2714 or \u274c if the object evaluates to false or is equal to &#8220;<strong>null<\/strong>&#8220;, &#8220;<strong>undefined<\/strong>&#8220;, or <strong>empty string<\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:skype<\/mark><\/strong>: it will render a &#8220;<strong>tel:<\/strong>&#8221; link so the user can click on it to make a call.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:qr<\/mark><\/strong>: it will render the string as an image of a QR code that it may render disabled if the object is &#8220;null&#8221;, &#8220;undefined&#8221;, or empty string. This filter also accepts the following parameters:\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:qr:100<\/mark><\/strong>: being 100, the size of the <strong>QR<\/strong> code generated in pixels. At the moment of writing this guide, the filter renders by default using 200px.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link<\/mark><\/strong>: it will render as a &lt;a&gt; link; by default, it will render the text wrapped by &lt;a&gt; tags linking to the provided text in the object. For example, for &#8220;<strong>hello\/world<\/strong>&#8221; it will render as: <strong>&lt;a href=&#8221;hello\/world&#8221;&gt;hello\/world&lt;\/a&gt;<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:blank<\/mark><\/strong>: it will add a <strong>target=&#8221;_blank&#8221;<\/strong> to the render result.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:icon<\/mark><\/strong>: it will add a link icon before the text (deprecated).<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:link<\/mark><\/strong>: it will add a link icon before the text.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:download<\/mark><\/strong>: it will add a download icon before the text.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:onlyicon<\/mark><\/strong>: it will render only the icon without the text.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:download:blank:onlyicon<\/mark><\/strong>: it will render as a download only without text and with <strong>target=&#8221;_blank&#8221;<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:copytoclipboard<\/mark><\/strong>: it will copy the text to the clipboard when clicked, it support arguments:\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:copytoclipboard:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">text<\/mark><\/strong>: it will show a modal window with the provided <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">text<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:copytoclipboard:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">title<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">text<\/mark><\/strong>: itit will show a modal window with the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">title<\/mark><\/strong> as a <strong>title<\/strong> and the provided <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">text<\/mark><\/strong> as a <strong>body<\/strong>.<\/li>\n\n\n\n<li>When using the modal window, it will<strong> close after 2 seconds<\/strong> automatically.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:image<\/mark><\/strong>: it will render as a<strong> &lt;img&gt; <\/strong>tag using the input as the path for the image.\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:link:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">styletext<\/mark><\/strong>: it will render as a <strong>&lt;img&gt; <\/strong>tag and add a &#8220;<strong>style=<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">styletext<\/mark><\/strong>&#8221; with the provided text.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:round<\/mark><\/strong>: it will round numbers using Math.round()\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:round:decimals<\/mark><\/strong>: it will round to a number of provided decimals.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:money:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">currency<\/mark><\/strong>: it will add a suffix or prefix to your number; by default, it will add a &#8220;<strong>?<\/strong>&#8221; at the end if no currency is provided. Available currencies are: &#8220;<strong>euro<\/strong>&#8220;, &#8220;<strong>dollar<\/strong>&#8220;, &#8220;<strong>pound<\/strong>&#8220;, &#8220;<strong>yuan<\/strong>&#8221; and &#8220;<strong>bitcoin<\/strong>&#8220;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">abs<\/mark><\/strong>: executes <strong>Math.abs()<\/strong> before returning the value.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">base64_encode<\/mark><\/strong>: encodes the provided text as a Base 64<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">base64_decode<\/mark><\/strong>: decodes the provided Base64 string<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">choice_match:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">needle<\/mark><\/strong>: visits all the elements from a list of tuples\/lists, checking the <strong><span style=\"text-decoration: underline;\">first<\/span><\/strong> element from each element (tuple\/list) and checking if it matches the provided <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">needle<\/mark><\/strong>. It will return the second element from the selected tuple\/list, or if not found, it will return the original input with an added character &#8216;<strong>*<\/strong>&#8216; at the end.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">cut:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">wordwise<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">max<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">tail<\/mark><\/strong>: it cuts the string and adds &#8220;<strong>&#8230;<\/strong>&#8221; at the end. It cuts at <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">max<\/mark><\/strong> (returning a sublist of <strong>string[0:<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">max<\/mark>]<\/strong>). The argument <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">wordwise<\/mark><\/strong> may be null or empty and won&#8217;t have any effect, but if it is evaluable to <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">true<\/mark><\/strong> it will cut the string at the last space found so the final string may be shorter than <strong>string[0:<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">max<\/mark>]<\/strong>. If <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">tail<\/mark><\/strong> is defined, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">tail<\/mark><\/strong> will be used instead of &#8220;<strong>&#8230;<\/strong>&#8220;.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">default:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">value<\/mark><\/strong>: returns the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">value<\/mark><\/strong> when the input evaluates to &#8220;<strong>undefined<\/strong>&#8220;, &#8220;<strong>null<\/strong>&#8221; or <strong>empty string<\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">highlightRow:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">search<\/mark><\/strong>: it highlights the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">searched<\/mark><\/strong> string using <strong>&lt;mark&gt;<\/strong> tags around the found text.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">highlightSelect:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">search<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">query<\/mark><\/strong>: it highlights the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">searched<\/mark><\/strong> string using <strong>&lt;span class=&#8221;ui-select-highlight&#8221;&gt;<\/strong> tags around the found text if <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">query<\/mark><\/strong> evaluates to <strong>true<\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">htmlToPlaintext<\/mark><\/strong>: convert any string to a text (usually used to display HTML code)<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">length<\/mark><\/strong>: returns the number of elements that have a dictionary (Strings and Lists already implement lengths)<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">nicenull<\/mark><\/strong>: it will return &#8220;<strong>&#8212;<\/strong>&#8221; if the object evaluates to false otherwise it will return the object.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">round:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">decimals<\/mark><\/strong>: it execute <strong>Math.round() <\/strong>on the given number with a precision of <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">decimals<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">split:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">splitchar<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">splitindex<\/mark><\/strong>: split the string using the <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">splitchar<\/mark><\/strong> and select from the splitted result the element <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">splitindex<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">strReplace:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">search<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">final<\/mark><\/strong>: find and replace <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">search<\/mark><\/strong> in the string with <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">final<\/mark><\/strong>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">weekday<\/mark><\/strong>: given a day of the week it converts to the day of the week word in <span style=\"text-decoration: underline;\">English<\/span> (Example: 1 is converted to <strong>Monday<\/strong> and 7 to <strong>Sunday<\/strong>)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u26a0 Remember to remove the &#8220;<\/mark><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">codenerix:<\/mark><\/strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&#8221; <strong>prefix<\/strong> on <strong>__fields__() <\/strong>methods. \u26a0<\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Autodiscover for statics<\/h2>\n\n\n\n<p> <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> comes with an Autodiscover system for static files that support languages and user profiles. For the example before, <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> will try to find (in this order) the static files it needs to render the website (and it will choose over the existing one before falling to the default ones inside  <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong>). The best way is to learn how this work by example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><u>Partials:<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_rows.username.es.html<\/li>\n\n\n\n<li>book\/pages_rows.username.html<\/li>\n\n\n\n<li>book\/pages_rows.admin.es.html<\/li>\n\n\n\n<li>book\/pages_rows.admin.html<\/li>\n\n\n\n<li>book\/pages_rows.administrator.es.html<\/li>\n\n\n\n<li>book\/pages_rows.administrator.html<\/li>\n\n\n\n<li>book\/pages_rows.es.html<\/li>\n\n\n\n<li>book\/pages_rows.html<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><u>Partials (headers):<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_header.username.es.html<\/li>\n\n\n\n<li>book\/pages_header.username.html<\/li>\n\n\n\n<li>book\/pages_header.admin.es.html<\/li>\n\n\n\n<li>book\/pages_header.admin.html<\/li>\n\n\n\n<li>book\/pages_header.administrator.es.html<\/li>\n\n\n\n<li>book\/pages_header.administrator.html<\/li>\n\n\n\n<li>book\/pages_header.es.html<\/li>\n\n\n\n<li>book\/pages_header.html<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><u>Summary (footer):<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_summary.username.es.html<\/li>\n\n\n\n<li>book\/pages_summary.username.html<\/li>\n\n\n\n<li>book\/pages_summary.admin.es.html<\/li>\n\n\n\n<li>book\/pages_summary.admin.html<\/li>\n\n\n\n<li>book\/pages_summary.administrator.es.html<\/li>\n\n\n\n<li>book\/pages_summary.administrator.html<\/li>\n\n\n\n<li>book\/pages_summary.es.html<\/li>\n\n\n\n<li>book\/pages_summary.html<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><u>Angular APP definition:<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_app.username.es.js<\/li>\n\n\n\n<li>book\/pages_app.username.js<\/li>\n\n\n\n<li>book\/pages_app.admin.es.js<\/li>\n\n\n\n<li>book\/pages_app.admin.js<\/li>\n\n\n\n<li>book\/pages_app.administrator.es.js<\/li>\n\n\n\n<li>book\/pages_app.administrator.js<\/li>\n\n\n\n<li>book\/pages_app.es.js<\/li>\n\n\n\n<li>book\/pages_app.js<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><u>Angular Controllers definition:<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_controllers.username.es.js<\/li>\n\n\n\n<li>book\/pages_controllers.username.js<\/li>\n\n\n\n<li>book\/pages_controllers.admin.es.js<\/li>\n\n\n\n<li>book\/pages_controllers.admin.js<\/li>\n\n\n\n<li>book\/pages_controllers.administrator.es.js<\/li>\n\n\n\n<li>book\/pages_controllers.administrator.js<\/li>\n\n\n\n<li>book\/pages_controllers.es.js<\/li>\n\n\n\n<li>book\/pages_controllers.js<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><u>Angular Filters definitions:<\/u><\/strong>\n<ol class=\"wp-block-list\">\n<li>book\/pages_filters.username.es.js<\/li>\n\n\n\n<li>book\/pages_filters.username.js<\/li>\n\n\n\n<li>book\/pages_filters.admin.es.js<\/li>\n\n\n\n<li>book\/pages_filters.admin.js<\/li>\n\n\n\n<li>book\/pages_filters.administrator.es.js<\/li>\n\n\n\n<li>book\/pages_filters.administrator.js<\/li>\n\n\n\n<li>book\/pages_filters.es.js<\/li>\n\n\n\n<li>book\/pages_filters.js<\/li>\n\n\n\n<li>&lt; <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> <strong>default<\/strong> &gt;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\ud83d\udc30<strong><span style=\"text-decoration: underline;\">Easter egg:<\/span><\/strong> The same thing also works on <strong><span style=\"color: #343433;\"><strong><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/strong><\/span><\/strong> <strong>Django templates<\/strong>. \ud83d\ude09<\/mark><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can customize many details of CODENERIX by telling the software to behave one way or the other. In this tutorial, you will learn how to customize GenList results to get improved listing. This is quite common when you want to do new things, like adding buttons to your lists or showing elements in one [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":955,"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-952","post","type-post","status-publish","format-standard","has-post-thumbnail","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>Customizing GenList with custom partials, controllers, filters and so on - 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\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing GenList with custom partials, controllers, filters and so on - Codenerix\" \/>\n<meta property=\"og:description\" content=\"You can customize many details of CODENERIX by telling the software to behave one way or the other. In this tutorial, you will learn how to customize GenList results to get improved listing. This is quite common when you want to do new things, like adding buttons to your lists or showing elements in one [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\" \/>\n<meta property=\"og:site_name\" content=\"Codenerix\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-06T15:15:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-10T05:16:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1320\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\"},\"author\":{\"name\":\"Codenerix\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"headline\":\"Customizing GenList with custom partials, controllers, filters and so on\",\"datePublished\":\"2024-06-06T15:15:52+00:00\",\"dateModified\":\"2025-02-10T05:16:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\"},\"wordCount\":2034,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png\",\"articleSection\":[\"Howto\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\",\"url\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\",\"name\":\"Customizing GenList with custom partials, controllers, filters and so on - Codenerix\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png\",\"datePublished\":\"2024-06-06T15:15:52+00:00\",\"dateModified\":\"2025-02-10T05:16:33+00:00\",\"author\":{\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"breadcrumb\":{\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage\",\"url\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png\",\"contentUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png\",\"width\":1320,\"height\":620},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codenerix.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing GenList with custom partials, controllers, filters and so on\"}]},{\"@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":"Customizing GenList with custom partials, controllers, filters and so on - 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\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/","og_locale":"en_US","og_type":"article","og_title":"Customizing GenList with custom partials, controllers, filters and so on - Codenerix","og_description":"You can customize many details of CODENERIX by telling the software to behave one way or the other. In this tutorial, you will learn how to customize GenList results to get improved listing. This is quite common when you want to do new things, like adding buttons to your lists or showing elements in one [&hellip;]","og_url":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/","og_site_name":"Codenerix","article_published_time":"2024-06-06T15:15:52+00:00","article_modified_time":"2025-02-10T05:16:33+00:00","og_image":[{"width":1320,"height":620,"url":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png","type":"image\/png"}],"author":"Codenerix","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Codenerix","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#article","isPartOf":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/"},"author":{"name":"Codenerix","@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"headline":"Customizing GenList with custom partials, controllers, filters and so on","datePublished":"2024-06-06T15:15:52+00:00","dateModified":"2025-02-10T05:16:33+00:00","mainEntityOfPage":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/"},"wordCount":2034,"commentCount":0,"image":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png","articleSection":["Howto"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/","url":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/","name":"Customizing GenList with custom partials, controllers, filters and so on - Codenerix","isPartOf":{"@id":"https:\/\/codenerix.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage"},"image":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png","datePublished":"2024-06-06T15:15:52+00:00","dateModified":"2025-02-10T05:16:33+00:00","author":{"@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"breadcrumb":{"@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#primaryimage","url":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png","contentUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/06\/angular_codenerix.png","width":1320,"height":620},{"@type":"BreadcrumbList","@id":"https:\/\/codenerix.com\/en\/customizing-genlist-with-custom-partials-controllers-filters-and-so-on\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codenerix.com\/en\/"},{"@type":"ListItem","position":2,"name":"Customizing GenList with custom partials, controllers, filters and so on"}]},{"@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\/952","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=952"}],"version-history":[{"count":14,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/952\/revisions"}],"predecessor-version":[{"id":973,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/952\/revisions\/973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/media\/955"}],"wp:attachment":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/media?parent=952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/categories?post=952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/tags?post=952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}