nautobot 2.1.0b1__py3-none-any.whl → 2.1.1__py3-none-any.whl

nautobot/project-static/docs/development/apps/api/ui-extensions/object-detail-views.html

@@ -14,14 +14,14 @@
         <link rel="prev" href="navigation.html">
       
       
-        <link rel="next" href="tabs.html">
+        <link rel="next" href="../testing.html">
       
       <link rel="icon" href="../../../../assets/favicon.ico">
       <meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.1.21">
     
     
       
-        <title>Object Detail Views - Nautobot Documentation</title>
+        <title>Object Detail Views and Tabs - Nautobot Documentation</title>
       
     
     
@@ -77,7 +77,7 @@
     <div data-md-component="skip">
       
         
-        <a href="#extending-object-detail-views" class="md-skip">
+        <a href="#extending-object-detail-views-and-tabs" class="md-skip">
           Skip to content
         </a>
       
@@ -111,7 +111,7 @@
         <div class="md-header__topic" data-md-component="header-topic">
           <span class="md-ellipsis">
             
-              Object Detail Views
+              Object Detail Views and Tabs
             
           </span>
         </div>
@@ -977,20 +977,6 @@
 
             
           
-            
-              
-  
-  
-  
-    <li class="md-nav__item">
-      <a href="../../../../user-guide/administration/configuration/node-configuration.html" class="md-nav__link">
-        Node.js Configuration
-      </a>
-    </li>
-  
-
-            
-          
         </ul>
       </nav>
     </li>
@@ -1439,34 +1425,6 @@
   
   
   
-    <li class="md-nav__item">
-      <a href="../../../../user-guide/feature-guides/git-data-source.html" class="md-nav__link">
-        Git as a Data Source
-      </a>
-    </li>
-  
-
-            
-          
-            
-              
-  
-  
-  
-    <li class="md-nav__item">
-      <a href="../../../../user-guide/feature-guides/graphql.html" class="md-nav__link">
-        GraphQL
-      </a>
-    </li>
-  
-
-            
-          
-            
-              
-  
-  
-  
     <li class="md-nav__item">
       <a href="../../../../user-guide/feature-guides/relationships.html" class="md-nav__link">
         Relationships
@@ -3556,23 +3514,9 @@
   
   
   
-    <li class="md-nav__item">
-      <a href="../views/view-overrides.html" class="md-nav__link">
-        View Overrides
-      </a>
-    </li>
-  
-
-            
-          
-            
-              
-  
-  
-  
     <li class="md-nav__item">
       <a href="../views/core-view-overrides.html" class="md-nav__link">
-        Legacy View Overrides
+        View Overrides
       </a>
     </li>
   
@@ -3661,7 +3605,7 @@
   
     <li class="md-nav__item">
       <a href="../platform-features/filter-extensions.html" class="md-nav__link">
-        Filter Extentions
+        Filter Extensions
       </a>
     </li>
   
@@ -3879,24 +3823,55 @@
         
       
       
+        <label class="md-nav__link md-nav__link--active" for="__toc">
+          Object Detail Views and Tabs
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
       <a href="object-detail-views.html" class="md-nav__link md-nav__link--active">
-        Object Detail Views
+        Object Detail Views and Tabs
       </a>
       
-    </li>
-  
+        
 
-            
-          
-            
-              
+<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
   
   
   
-    <li class="md-nav__item">
-      <a href="tabs.html" class="md-nav__link">
-        Tabs
-      </a>
+    
+  
+  
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+      
+        <li class="md-nav__item">
+  <a href="#extending-object-detail-views" class="md-nav__link">
+    Extending Object Detail Views
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#adding-detail-tabs" class="md-nav__link">
+    Adding Detail Tabs
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#example-adding-object-details-and-tabs" class="md-nav__link">
+    Example Adding Object Details and Tabs
+  </a>
+  
+</li>
+      
+    </ul>
+  
+</nav>
+      
     </li>
   
 
@@ -4566,6 +4541,20 @@
   
   
   
+    <li class="md-nav__item">
+      <a href="../../../core/bootstrap-ui.html" class="md-nav__link">
+        Bootstrap UI
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
     <li class="md-nav__item">
       <a href="../../../core/best-practices.html" class="md-nav__link">
         Best Practices
@@ -4678,20 +4667,6 @@
   
   
   
-    <li class="md-nav__item">
-      <a href="../../../core/react-ui.html" class="md-nav__link">
-        React UI
-      </a>
-    </li>
-  
-
-            
-          
-            
-              
-  
-  
-  
     <li class="md-nav__item">
       <a href="../../../core/role-internals.html" class="md-nav__link">
         Role Internals
@@ -5187,6 +5162,35 @@
     
   
   
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+      
+        <li class="md-nav__item">
+  <a href="#extending-object-detail-views" class="md-nav__link">
+    Extending Object Detail Views
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#adding-detail-tabs" class="md-nav__link">
+    Adding Detail Tabs
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#example-adding-object-details-and-tabs" class="md-nav__link">
+    Example Adding Object Details and Tabs
+  </a>
+  
+</li>
+      
+    </ul>
+  
 </nav>
                   </div>
                 </div>
@@ -5203,8 +5207,9 @@
   
 
 
-<h1 id="extending-object-detail-views">Extending Object Detail Views<a class="headerlink" href="#extending-object-detail-views" title="Permanent link">&para;</a></h1>
-<p>Apps can inject custom content into certain areas of the detail views of applicable models. This is accomplished by subclassing <code>TemplateExtension</code>, designating a particular Nautobot model, and defining the desired methods to render custom content. Four methods are available:</p>
+<h1 id="extending-object-detail-views-and-tabs">Extending Object Detail Views and Tabs<a class="headerlink" href="#extending-object-detail-views-and-tabs" title="Permanent link">&para;</a></h1>
+<h2 id="extending-object-detail-views">Extending Object Detail Views<a class="headerlink" href="#extending-object-detail-views" title="Permanent link">&para;</a></h2>
+<p>Apps can inject custom content into certain areas of the detail views of applicable models. This is accomplished by subclassing <code>TemplateExtension</code>, designating a particular Nautobot model, and defining the desired methods to render custom content. Five methods are available:</p>
 <ul>
 <li><code>left_page()</code> - Inject content on the left side of the page</li>
 <li><code>right_page()</code> - Inject content on the right side of the page</li>
@@ -5221,56 +5226,120 @@
 <li><code>config</code> - App-specific configuration parameters</li>
 </ul>
 <p>For example, accessing <code>{{ request.user }}</code> within a template will return the current user.</p>
-<p>Declared subclasses should be gathered into a list or tuple for integration with Nautobot. By default, Nautobot looks for an iterable named <code>template_extensions</code> within a <code>template_content.py</code> file. (This can be overridden by setting <code>template_extensions</code> to a custom value on the app's <code>NautobotAppConfig</code>.) An example is below.</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="c1"># template_content.py</span>
-<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">reverse</span>
-<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="kn">from</span> <span class="nn">nautobot.apps.ui</span> <span class="kn">import</span> <span class="n">TemplateExtension</span>
+<p>Declared subclasses should be gathered into a list or tuple for integration with Nautobot. By default, Nautobot looks for an iterable named <code>template_extensions</code> within a <code>template_content.py</code> file. (This can be overridden by setting <code>template_extensions</code> to a custom value on the app's <code>NautobotAppConfig</code>.) An example is <a href="#example-adding-object-details-and-tabs">below</a>.</p>
+<h2 id="adding-detail-tabs">Adding Detail Tabs<a class="headerlink" href="#adding-detail-tabs" title="Permanent link">&para;</a></h2>
+<div class="admonition version-added">
+<p class="admonition-title">Added in version 1.4.0</p>
+</div>
+<p>The <code>TemplateExtension.detail_tabs()</code> method should return a list of dicts, each of which has the keys <code>"title"</code> and <code>"url"</code>. In addition, in order for tabs to work properly:</p>
+<ul>
+<li>The <code>"url"</code> key should typically be a URL that includes <code>self.context["object"].pk</code> in some form (so that the URL may know which object is being referenced)</li>
+<li>The view referenced by the <code>"url"</code> must inherit from the <code>nautobot.apps.views.ObjectView</code> class</li>
+<li>The template rendered by this view must extend the object's detail template</li>
+</ul>
+<p>For example:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="k">class</span> <span class="nc">DeviceExtraTabs</span><span class="p">(</span><span class="n">TemplateExtension</span><span class="p">):</span>
+<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Template extension to add extra tabs to the Device detail view.&quot;&quot;&quot;</span>
+<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>    <span class="n">model</span> <span class="o">=</span> <span class="s1">&#39;dcim.device&#39;</span>
 <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a>
-<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="kn">from</span> <span class="nn">.models</span> <span class="kn">import</span> <span class="n">Animal</span>
-<a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a>
-<a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a>
-<a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="k">class</span> <span class="nc">LocationAnimalCount</span><span class="p">(</span><span class="n">TemplateExtension</span><span class="p">):</span>
-<a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Template extension to display animal count on the right side of the page.&quot;&quot;&quot;</span>
-<a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a>
-<a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a>    <span class="n">model</span> <span class="o">=</span> <span class="s1">&#39;dcim.location&#39;</span>
-<a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a>
-<a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a>    <span class="k">def</span> <span class="nf">right_page</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
-<a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a>        <span class="k">return</span> <span class="bp">self</span><span class="o">.</span><span class="n">render</span><span class="p">(</span><span class="s1">&#39;nautobot_animal_sounds/inc/animal_count.html&#39;</span><span class="p">,</span> <span class="n">extra_context</span><span class="o">=</span><span class="p">{</span>
-<a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a>            <span class="s1">&#39;animal_count&#39;</span><span class="p">:</span> <span class="n">Animal</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">count</span><span class="p">(),</span>
-<a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a>        <span class="p">})</span>
-<a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a>
-<a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a>
-<a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="k">class</span> <span class="nc">DeviceExtraTabs</span><span class="p">(</span><span class="n">TemplateExtension</span><span class="p">):</span>
-<a id="__codelineno-0-20" name="__codelineno-0-20" href="#__codelineno-0-20"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Template extension to add extra tabs to the object detail tabs.&quot;&quot;&quot;</span>
-<a id="__codelineno-0-21" name="__codelineno-0-21" href="#__codelineno-0-21"></a>
-<a id="__codelineno-0-22" name="__codelineno-0-22" href="#__codelineno-0-22"></a>    <span class="n">model</span> <span class="o">=</span> <span class="s1">&#39;dcim.device&#39;</span>
-<a id="__codelineno-0-23" name="__codelineno-0-23" href="#__codelineno-0-23"></a>
-<a id="__codelineno-0-24" name="__codelineno-0-24" href="#__codelineno-0-24"></a>    <span class="k">def</span> <span class="nf">detail_tabs</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
-<a id="__codelineno-0-25" name="__codelineno-0-25" href="#__codelineno-0-25"></a><span class="w">        </span><span class="sd">&quot;&quot;&quot;</span>
-<a id="__codelineno-0-26" name="__codelineno-0-26" href="#__codelineno-0-26"></a><span class="sd">        You may define extra tabs to render on a model&#39;s detail page by utilizing this method.</span>
-<a id="__codelineno-0-27" name="__codelineno-0-27" href="#__codelineno-0-27"></a><span class="sd">        Each tab is defined as a dict in a list of dicts.</span>
-<a id="__codelineno-0-28" name="__codelineno-0-28" href="#__codelineno-0-28"></a>
-<a id="__codelineno-0-29" name="__codelineno-0-29" href="#__codelineno-0-29"></a><span class="sd">        For each of the tabs defined:</span>
-<a id="__codelineno-0-30" name="__codelineno-0-30" href="#__codelineno-0-30"></a><span class="sd">        - The &lt;title&gt; key&#39;s value will become the tab link&#39;s title.</span>
-<a id="__codelineno-0-31" name="__codelineno-0-31" href="#__codelineno-0-31"></a><span class="sd">        - The &lt;url&gt; key&#39;s value is used to render the HTML link for the tab</span>
-<a id="__codelineno-0-32" name="__codelineno-0-32" href="#__codelineno-0-32"></a>
-<a id="__codelineno-0-33" name="__codelineno-0-33" href="#__codelineno-0-33"></a><span class="sd">        These tabs will be visible (in this instance) on the Device model&#39;s detail page as</span>
-<a id="__codelineno-0-34" name="__codelineno-0-34" href="#__codelineno-0-34"></a><span class="sd">        set by the DeviceContent.model attribute &quot;dcim.device&quot;</span>
-<a id="__codelineno-0-35" name="__codelineno-0-35" href="#__codelineno-0-35"></a>
-<a id="__codelineno-0-36" name="__codelineno-0-36" href="#__codelineno-0-36"></a><span class="sd">        This example demonstrates defining two tabs. The tabs will be ordered by their position in list.</span>
-<a id="__codelineno-0-37" name="__codelineno-0-37" href="#__codelineno-0-37"></a><span class="sd">        &quot;&quot;&quot;</span>
-<a id="__codelineno-0-38" name="__codelineno-0-38" href="#__codelineno-0-38"></a>        <span class="k">return</span> <span class="p">[</span>
-<a id="__codelineno-0-39" name="__codelineno-0-39" href="#__codelineno-0-39"></a>            <span class="p">{</span>
-<a id="__codelineno-0-40" name="__codelineno-0-40" href="#__codelineno-0-40"></a>                <span class="s2">&quot;title&quot;</span><span class="p">:</span> <span class="s2">&quot;App Tab 1&quot;</span><span class="p">,</span>
-<a id="__codelineno-0-41" name="__codelineno-0-41" href="#__codelineno-0-41"></a>                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="n">reverse</span><span class="p">(</span><span class="s2">&quot;plugins:example_plugin:device_detail_tab_1&quot;</span><span class="p">,</span> <span class="n">kwargs</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;pk&quot;</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">context</span><span class="p">[</span><span class="s2">&quot;object&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">pk</span><span class="p">}),</span>
-<a id="__codelineno-0-42" name="__codelineno-0-42" href="#__codelineno-0-42"></a>            <span class="p">},</span>
-<a id="__codelineno-0-43" name="__codelineno-0-43" href="#__codelineno-0-43"></a>            <span class="p">{</span>
-<a id="__codelineno-0-44" name="__codelineno-0-44" href="#__codelineno-0-44"></a>                <span class="s2">&quot;title&quot;</span><span class="p">:</span> <span class="s2">&quot;App Tab 2&quot;</span><span class="p">,</span>
-<a id="__codelineno-0-45" name="__codelineno-0-45" href="#__codelineno-0-45"></a>                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="n">reverse</span><span class="p">(</span><span class="s2">&quot;plugins:example_plugin:device_detail_tab_2&quot;</span><span class="p">,</span> <span class="n">kwargs</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;pk&quot;</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">context</span><span class="p">[</span><span class="s2">&quot;object&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">pk</span><span class="p">}),</span>
-<a id="__codelineno-0-46" name="__codelineno-0-46" href="#__codelineno-0-46"></a>            <span class="p">},</span>
-<a id="__codelineno-0-47" name="__codelineno-0-47" href="#__codelineno-0-47"></a>        <span class="p">]</span>
-<a id="__codelineno-0-48" name="__codelineno-0-48" href="#__codelineno-0-48"></a>
-<a id="__codelineno-0-49" name="__codelineno-0-49" href="#__codelineno-0-49"></a><span class="n">template_extensions</span> <span class="o">=</span> <span class="p">[</span><span class="n">DeviceExtraTabs</span><span class="p">,</span> <span class="n">LocationAnimalCount</span><span class="p">]</span>
+<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a>    <span class="k">def</span> <span class="nf">detail_tabs</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
+<a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a>        <span class="k">return</span> <span class="p">[</span>
+<a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a>            <span class="p">{</span>
+<a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>                <span class="s2">&quot;title&quot;</span><span class="p">:</span> <span class="s2">&quot;App Tab 1&quot;</span><span class="p">,</span>
+<a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a>                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="n">reverse</span><span class="p">(</span><span class="s2">&quot;plugins:example_plugin:device_detail_tab_1&quot;</span><span class="p">,</span> <span class="n">kwargs</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;pk&quot;</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">context</span><span class="p">[</span><span class="s2">&quot;object&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">pk</span><span class="p">}),</span>
+<a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a>            <span class="p">},</span>
+<a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a>        <span class="p">]</span>
+</code></pre></div>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="cm">&lt;!-- example_plugin/tab_device_detail_1.html --&gt;</span>
+<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a>{% extends &#39;dcim/device.html&#39; %}
+<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a>
+<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a>{% block content %}
+<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a>    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Device App Tab 1<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
+<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>I am some content for the example plugin&#39;s device ({{ object.pk }}) detail tab 1.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
+<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a>{% endblock %}
+</code></pre></div>
+<p>Here's a basic example of a tab's view</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="c1"># views.py</span>
+<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="kn">from</span> <span class="nn">nautobot.apps.views</span> <span class="kn">import</span> <span class="n">ObjectView</span>
+<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="kn">from</span> <span class="nn">nautobot.dcim.models</span> <span class="kn">import</span> <span class="n">Device</span>
+<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>
+<a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="k">class</span> <span class="nc">DeviceDetailAppTabOne</span><span class="p">(</span><span class="n">ObjectView</span><span class="p">):</span>
+<a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;</span>
+<a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a><span class="sd">    This view&#39;s template extends the device detail template,</span>
+<a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a><span class="sd">    making it suitable to show as a tab on the device detail page.</span>
+<a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a>
+<a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a><span class="sd">    Views that are intended to be for an object detail tab&#39;s content rendering must</span>
+<a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a><span class="sd">    always inherit from nautobot.apps.views.ObjectView.</span>
+<a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a><span class="sd">    &quot;&quot;&quot;</span>
+<a id="__codelineno-2-13" name="__codelineno-2-13" href="#__codelineno-2-13"></a>
+<a id="__codelineno-2-14" name="__codelineno-2-14" href="#__codelineno-2-14"></a>    <span class="n">queryset</span> <span class="o">=</span> <span class="n">Device</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">all</span><span class="p">()</span>
+<a id="__codelineno-2-15" name="__codelineno-2-15" href="#__codelineno-2-15"></a>    <span class="n">template_name</span> <span class="o">=</span> <span class="s2">&quot;example_plugin/tab_device_detail_1.html&quot;</span>
+</code></pre></div>
+<p>You must also add the view to the <code>url_patterns</code> like so (make sure to read the note after this code snippet):</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="c1"># urls.py</span>
+<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">path</span>
+<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a>
+<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="kn">from</span> <span class="nn">example_plugin</span> <span class="kn">import</span> <span class="n">views</span>
+<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a>
+<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="n">urlpatterns</span> <span class="o">=</span> <span class="p">[</span>
+<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a>    <span class="c1"># ... previously defined urls</span>
+<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a>    <span class="n">path</span><span class="p">(</span><span class="s2">&quot;devices/&lt;uuid:pk&gt;/example-plugin-tab-1/&quot;</span><span class="p">,</span> <span class="n">views</span><span class="o">.</span><span class="n">DeviceDetailAppTabOne</span><span class="o">.</span><span class="n">as_view</span><span class="p">(),</span> <span class="n">name</span><span class="o">=</span><span class="s2">&quot;device_detail_tab_1&quot;</span><span class="p">),</span>
+<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="p">]</span>
+</code></pre></div>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>For added tab views, we recommend for consistency that you follow the URL pattern established by the base model detail view and tabs (if any). For example, <code>nautobot/dcim/urls.py</code> references Device tab views with the URL pattern <code>devices/&lt;uuid:pk&gt;/TAB-NAME/</code>, so above we have followed that same pattern.</p>
+</div>
+<h2 id="example-adding-object-details-and-tabs">Example Adding Object Details and Tabs<a class="headerlink" href="#example-adding-object-details-and-tabs" title="Permanent link">&para;</a></h2>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="c1"># template_content.py</span>
+<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">reverse</span>
+<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="kn">from</span> <span class="nn">nautobot.apps.ui</span> <span class="kn">import</span> <span class="n">TemplateExtension</span>
+<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a>
+<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="kn">from</span> <span class="nn">.models</span> <span class="kn">import</span> <span class="n">Animal</span>
+<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a>
+<a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a>
+<a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a><span class="k">class</span> <span class="nc">LocationAnimalCount</span><span class="p">(</span><span class="n">TemplateExtension</span><span class="p">):</span>
+<a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Template extension to display animal count on the right side of the page.&quot;&quot;&quot;</span>
+<a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a>
+<a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a>    <span class="n">model</span> <span class="o">=</span> <span class="s1">&#39;dcim.location&#39;</span>
+<a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a>
+<a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a>    <span class="k">def</span> <span class="nf">right_page</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
+<a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a>        <span class="k">return</span> <span class="bp">self</span><span class="o">.</span><span class="n">render</span><span class="p">(</span><span class="s1">&#39;nautobot_animal_sounds/inc/animal_count.html&#39;</span><span class="p">,</span> <span class="n">extra_context</span><span class="o">=</span><span class="p">{</span>
+<a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a>            <span class="s1">&#39;animal_count&#39;</span><span class="p">:</span> <span class="n">Animal</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">count</span><span class="p">(),</span>
+<a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a>        <span class="p">})</span>
+<a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a>
+<a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a>
+<a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a><span class="k">class</span> <span class="nc">DeviceExtraTabs</span><span class="p">(</span><span class="n">TemplateExtension</span><span class="p">):</span>
+<a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Template extension to add extra tabs to the object detail tabs.&quot;&quot;&quot;</span>
+<a id="__codelineno-4-21" name="__codelineno-4-21" href="#__codelineno-4-21"></a>
+<a id="__codelineno-4-22" name="__codelineno-4-22" href="#__codelineno-4-22"></a>    <span class="n">model</span> <span class="o">=</span> <span class="s1">&#39;dcim.device&#39;</span>
+<a id="__codelineno-4-23" name="__codelineno-4-23" href="#__codelineno-4-23"></a>
+<a id="__codelineno-4-24" name="__codelineno-4-24" href="#__codelineno-4-24"></a>    <span class="k">def</span> <span class="nf">detail_tabs</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
+<a id="__codelineno-4-25" name="__codelineno-4-25" href="#__codelineno-4-25"></a><span class="w">        </span><span class="sd">&quot;&quot;&quot;</span>
+<a id="__codelineno-4-26" name="__codelineno-4-26" href="#__codelineno-4-26"></a><span class="sd">        You may define extra tabs to render on a model&#39;s detail page by utilizing this method.</span>
+<a id="__codelineno-4-27" name="__codelineno-4-27" href="#__codelineno-4-27"></a><span class="sd">        Each tab is defined as a dict in a list of dicts.</span>
+<a id="__codelineno-4-28" name="__codelineno-4-28" href="#__codelineno-4-28"></a>
+<a id="__codelineno-4-29" name="__codelineno-4-29" href="#__codelineno-4-29"></a><span class="sd">        For each of the tabs defined:</span>
+<a id="__codelineno-4-30" name="__codelineno-4-30" href="#__codelineno-4-30"></a><span class="sd">        - The &lt;title&gt; key&#39;s value will become the tab link&#39;s title.</span>
+<a id="__codelineno-4-31" name="__codelineno-4-31" href="#__codelineno-4-31"></a><span class="sd">        - The &lt;url&gt; key&#39;s value is used to render the HTML link for the tab</span>
+<a id="__codelineno-4-32" name="__codelineno-4-32" href="#__codelineno-4-32"></a>
+<a id="__codelineno-4-33" name="__codelineno-4-33" href="#__codelineno-4-33"></a><span class="sd">        These tabs will be visible (in this instance) on the Device model&#39;s detail page as</span>
+<a id="__codelineno-4-34" name="__codelineno-4-34" href="#__codelineno-4-34"></a><span class="sd">        set by the DeviceContent.model attribute &quot;dcim.device&quot;</span>
+<a id="__codelineno-4-35" name="__codelineno-4-35" href="#__codelineno-4-35"></a>
+<a id="__codelineno-4-36" name="__codelineno-4-36" href="#__codelineno-4-36"></a><span class="sd">        This example demonstrates defining two tabs. The tabs will be ordered by their position in list.</span>
+<a id="__codelineno-4-37" name="__codelineno-4-37" href="#__codelineno-4-37"></a><span class="sd">        &quot;&quot;&quot;</span>
+<a id="__codelineno-4-38" name="__codelineno-4-38" href="#__codelineno-4-38"></a>        <span class="k">return</span> <span class="p">[</span>
+<a id="__codelineno-4-39" name="__codelineno-4-39" href="#__codelineno-4-39"></a>            <span class="p">{</span>
+<a id="__codelineno-4-40" name="__codelineno-4-40" href="#__codelineno-4-40"></a>                <span class="s2">&quot;title&quot;</span><span class="p">:</span> <span class="s2">&quot;App Tab 1&quot;</span><span class="p">,</span>
+<a id="__codelineno-4-41" name="__codelineno-4-41" href="#__codelineno-4-41"></a>                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="n">reverse</span><span class="p">(</span><span class="s2">&quot;plugins:example_plugin:device_detail_tab_1&quot;</span><span class="p">,</span> <span class="n">kwargs</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;pk&quot;</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">context</span><span class="p">[</span><span class="s2">&quot;object&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">pk</span><span class="p">}),</span>
+<a id="__codelineno-4-42" name="__codelineno-4-42" href="#__codelineno-4-42"></a>            <span class="p">},</span>
+<a id="__codelineno-4-43" name="__codelineno-4-43" href="#__codelineno-4-43"></a>            <span class="p">{</span>
+<a id="__codelineno-4-44" name="__codelineno-4-44" href="#__codelineno-4-44"></a>                <span class="s2">&quot;title&quot;</span><span class="p">:</span> <span class="s2">&quot;App Tab 2&quot;</span><span class="p">,</span>
+<a id="__codelineno-4-45" name="__codelineno-4-45" href="#__codelineno-4-45"></a>                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="n">reverse</span><span class="p">(</span><span class="s2">&quot;plugins:example_plugin:device_detail_tab_2&quot;</span><span class="p">,</span> <span class="n">kwargs</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;pk&quot;</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">context</span><span class="p">[</span><span class="s2">&quot;object&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">pk</span><span class="p">}),</span>
+<a id="__codelineno-4-46" name="__codelineno-4-46" href="#__codelineno-4-46"></a>            <span class="p">},</span>
+<a id="__codelineno-4-47" name="__codelineno-4-47" href="#__codelineno-4-47"></a>        <span class="p">]</span>
+<a id="__codelineno-4-48" name="__codelineno-4-48" href="#__codelineno-4-48"></a>
+<a id="__codelineno-4-49" name="__codelineno-4-49" href="#__codelineno-4-49"></a><span class="n">template_extensions</span> <span class="o">=</span> <span class="p">[</span><span class="n">DeviceExtraTabs</span><span class="p">,</span> <span class="n">LocationAnimalCount</span><span class="p">]</span>
 </code></pre></div>
 
 
@@ -5309,13 +5378,13 @@
         
         
           
-          <a href="tabs.html" class="md-footer__link md-footer__link--next" aria-label="Next: Tabs" rel="next">
+          <a href="../testing.html" class="md-footer__link md-footer__link--next" aria-label="Next: Testing" rel="next">
             <div class="md-footer__title">
               <span class="md-footer__direction">
                 Next
               </span>
               <div class="md-ellipsis">
-                Tabs
+                Testing
               </div>
             </div>
             <div class="md-footer__button md-icon">