Answers.Body: <ol>
  <li>Use <a href="https://plugins.craftcms.com/kint" rel="nofollow noreferrer">the Kint plugin</a> to spit out the current tab to the JS debug console:</li>
  </ol>
  <pre><code>{% for tab in layout.tabs %}
      {% if tab.name == &quot;Detaljer&quot; %}
  
          {{ j(tab) }}
  
          {% for field in tab.getFields %}
  </code></pre>
  <p>You will see that the structure of the <code>tab</code>-object actually contains the UI-elements as well:</p>
  <p><a href="https://i.sstatic.net/ZfzPv.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZfzPv.png" alt="debug output from Kint's j() method displaying headers and fields of the current entry, which is a product" /></a></p>
  <ol start="2">
  <li>Instead of looping <code>tab.getFields</code>, loop <code>tab.elements</code>:</li>
  </ol>
  <pre><code>{% set layout = product.getFieldLayout() %}
  {% for tab in layout.tabs %}
      {% if tab.name == &quot;Detaljer&quot; %}
  
          {% for element in tab.elements %}
              {% switch element.className() %}
  
              {% case &quot;craft\\fieldlayoutelements\\Heading&quot; %}
                  &lt;tr&gt;
                      &lt;th class=&quot;field-category&quot; colspan=&quot;2&quot;&gt;&lt;h5&gt;{{ element.heading }}&lt;/h5&gt;&lt;/th&gt;
                  &lt;/tr&gt; 
  
              {% case &quot;craft\\fieldlayoutelements\\CustomField&quot; %}
      
                  {% set field = element.getField() %}           
                  {% if not product.getFieldValue(field.handle) is empty %}
  
                      {% switch field.className() %}
                          {% case &quot;craft\\fields\\PlainText&quot; %}
                              &lt;tr&gt;
                                  &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;{{ product.getFieldValue(field.handle )}}&lt;/td&gt;
                              &lt;/tr&gt; 
                          {% case &quot;craft\\fields\\Categories&quot; %}
                              &lt;tr&gt;
                                  &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;
                                      {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                                  &lt;/td&gt;
                              &lt;/tr&gt; 
                          {% case &quot;craft\\fields\\Dropdown&quot; %}
                              &lt;tr&gt;
                                  &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;{{ product.getFieldValue(field.handle).label}}&lt;/td&gt;
                              &lt;/tr&gt;           
                          {% case &quot;craft\\fields\\Lightswitch&quot; %}
                              &lt;tr&gt;
                                  &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}&lt;/td&gt;
                              &lt;/tr&gt;         
                          {% case &quot;craft\\fields\\Number&quot; %}
                              &lt;tr&gt;
                                  &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;{{ product.getFieldValue(field.handle) }} {{ field.suffix }}&lt;/td&gt;
                              &lt;/tr&gt;                                                                                                        
                          {% default %}
                              &lt;tr&gt;
                                  &lt;th scope=&quot;col&quot; itemprop=&quot;name&quot;&gt;{{ field.name|t }}&lt;/th&gt;
                                  &lt;td&gt;{{ field.className() }}&lt;/td&gt;
                              &lt;/tr&gt;
  
                              {# todo: other non implemented fields #}
                      {% endswitch %}
                  {% endif %}
  
              {% endswitch %}
          {% endfor %}
  
      {% endif %}
  {% endfor %}   
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-09-15T11:41:22.137Z
Answers.LastActivityDate: 2020-09-15T11:41:22.137Z
Answers.UserDisplayName: nitech
Body: <p>Is is possible to get UI-elements of Craft 3.5 in the front end? Specifically wanting to get hold of the headers I use to separate fields of products.</p>
  <p>This is my current code:</p>
  <pre><code>{% set layout = product.getFieldLayout() %}
  {% for tab in layout.tabs %}
      {% if tab.name == &quot;Detaljer&quot; %}
          {% for field in tab.getFields %}
              {% if not product.getFieldValue(field.handle) is empty %}
                  {% switch field.className() %}
  
                      {# Can I get UI header out of the tab.getFields method? #}
                      {% case &quot;craft\\fields\\UI-header-element&quot; %}
                          {# Do stuff #}
                      {% case &quot;craft\\fields\\PlainText&quot; %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td itemprop=&quot;value&quot;&gt;{{ product.getFieldValue(field.handle )}}&lt;/td&gt;
                          &lt;/tr&gt; 
                      {% case &quot;craft\\fields\\Categories&quot; %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td&gt;
                                  {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                              &lt;/td&gt;
                          &lt;/tr&gt; 
                      {% case &quot;craft\\fields\\Dropdown&quot; %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td&gt;{{ product.getFieldValue(field.handle).label}}&lt;/td&gt;
                          &lt;/tr&gt;           
                      {% case &quot;craft\\fields\\Lightswitch&quot; %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td&gt;{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}&lt;/td&gt;
                          &lt;/tr&gt;         
                      {% case &quot;craft\\fields\\Number&quot; %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td&gt;{{ product.getFieldValue(field.handle) }} {{ field.suffix }}&lt;/td&gt;
                          &lt;/tr&gt;                                                                                                        
                      {% default %}
                          &lt;tr&gt;
                              &lt;th&gt;{{ field.name|t }}&lt;/th&gt;
                              &lt;td&gt;{{ field.className() }}&lt;/td&gt;
                          &lt;/tr&gt;
  
                          {# todo: other non implemented fields #}
                  {% endswitch %}
              {% endif %}
          {% endfor %}
      {% endif %}
  {% endfor %}   
  </code></pre>
  
Tags: <craft3><plugin-craftcommerce><frontend><products>
Title: Get UI elements of entry in front end
ThreadText: # Get UI elements of entry in front end
  
  (Asked by: username_0 on 2020-09-15)
  
  Is is possible to get UI-elements of Craft 3.5 in the front end? Specifically wanting to get hold of the headers I use to separate fields of products.
  
  This is my current code:
  
  ```
  {% set layout = product.getFieldLayout() %}
  {% for tab in layout.tabs %}
      {% if tab.name == "Detaljer" %}
          {% for field in tab.getFields %}
              {% if not product.getFieldValue(field.handle) is empty %}
                  {% switch field.className() %}
  
                      {# Can I get UI header out of the tab.getFields method? #}
                      {% case "craft\\fields\\UI-header-element" %}
                          {# Do stuff #}
                      {% case "craft\\fields\\PlainText" %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td itemprop="value">{{ product.getFieldValue(field.handle )}}</td>
                          </tr> 
                      {% case "craft\\fields\\Categories" %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td>
                                  {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                              </td>
                          </tr> 
                      {% case "craft\\fields\\Dropdown" %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td>{{ product.getFieldValue(field.handle).label}}</td>
                          </tr>           
                      {% case "craft\\fields\\Lightswitch" %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td>{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}</td>
                          </tr>         
                      {% case "craft\\fields\\Number" %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td>{{ product.getFieldValue(field.handle) }} {{ field.suffix }}</td>
                          </tr>                                                                                                        
                      {% default %}
                          <tr>
                              <th>{{ field.name|t }}</th>
                              <td>{{ field.className() }}</td>
                          </tr>
  
                          {# todo: other non implemented fields #}
                  {% endswitch %}
              {% endif %}
          {% endfor %}
      {% endif %}
  {% endfor %}   
  
  ```
  
  **Tags:** craft3, plugin-craftcommerce, frontend, products
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-09-15. Score: 1
  
  1. Use [the Kint plugin](https://plugins.craftcms.com/kint) to spit out the current tab to the JS debug console:
  
  ```
  {% for tab in layout.tabs %}
      {% if tab.name == "Detaljer" %}
  
          {{ j(tab) }}
  
          {% for field in tab.getFields %}
  
  ```
  
  You will see that the structure of the `tab`-object actually contains the UI-elements as well:
  
  [![debug output from Kint's j() method displaying headers and fields of the current entry, which is a product](https://i.sstatic.net/ZfzPv.png)](https://i.sstatic.net/ZfzPv.png)
  
  2. Instead of looping `tab.getFields`, loop `tab.elements`:
  
  ```
  {% set layout = product.getFieldLayout() %}
  {% for tab in layout.tabs %}
      {% if tab.name == "Detaljer" %}
  
          {% for element in tab.elements %}
              {% switch element.className() %}
  
              {% case "craft\\fieldlayoutelements\\Heading" %}
                  <tr>
                      <th class="field-category" colspan="2"><h5>{{ element.heading }}</h5></th>
                  </tr> 
  
              {% case "craft\\fieldlayoutelements\\CustomField" %}
      
                  {% set field = element.getField() %}           
                  {% if not product.getFieldValue(field.handle) is empty %}
  
                      {% switch field.className() %}
                          {% case "craft\\fields\\PlainText" %}
                              <tr>
                                  <th>{{ field.name|t }}</th>
                                  <td>{{ product.getFieldValue(field.handle )}}</td>
                              </tr> 
                          {% case "craft\\fields\\Categories" %}
                              <tr>
                                  <th>{{ field.name|t }}</th>
                                  <td>
                                      {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                                  </td>
                              </tr> 
                          {% case "craft\\fields\\Dropdown" %}
                              <tr>
                                  <th>{{ field.name|t }}</th>
                                  <td>{{ product.getFieldValue(field.handle).label}}</td>
                              </tr>           
                          {% case "craft\\fields\\Lightswitch" %}
                              <tr>
                                  <th>{{ field.name|t }}</th>
                                  <td>{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}</td>
                              </tr>         
                          {% case "craft\\fields\\Number" %}
                              <tr>
                                  <th>{{ field.name|t }}</th>
                                  <td>{{ product.getFieldValue(field.handle) }} {{ field.suffix }}</td>
                              </tr>                                                                                                        
                          {% default %}
                              <tr>
                                  <th scope="col" itemprop="name">{{ field.name|t }}</th>
                                  <td>{{ field.className() }}</td>
                              </tr>
  
                              {# todo: other non implemented fields #}
                      {% endswitch %}
                  {% endif %}
  
              {% endswitch %}
          {% endfor %}
  
      {% endif %}
  {% endfor %}   
  
  ```
  
  
  ---
  
  