<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>

CC BY-SA 4.0
2020-09-15T11:41:22.137Z
2020-09-15T11:41:22.137Z
nitech
<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>

<craft3><plugin-craftcommerce><frontend><products>
Get UI elements of entry in front end
# 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" %}
                        
                            {{ field.name|t }}
                            {{ product.getFieldValue(field.handle )}}
                         
                    {% case "craft\\fields\\Categories" %}
                        
                            {{ field.name|t }}
                            
                                {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                            
                         
                    {% case "craft\\fields\\Dropdown" %}
                        
                            {{ field.name|t }}
                            {{ product.getFieldValue(field.handle).label}}
                                   
                    {% case "craft\\fields\\Lightswitch" %}
                        
                            {{ field.name|t }}
                            {% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}
                                 
                    {% case "craft\\fields\\Number" %}
                        
                            {{ field.name|t }}
                            {{ product.getFieldValue(field.handle) }} {{ field.suffix }}
                                                                                                                                
                    {% default %}
                        
                            {{ field.name|t }}
                            {{ field.className() }}
                        

                        {# 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

Use the Kint plugin 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:


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" %}
                
                    {{ element.heading }}
                 

            {% case "craft\\fieldlayoutelements\\CustomField" %}
    
                {% set field = element.getField() %}           
                {% if not product.getFieldValue(field.handle) is empty %}

                    {% switch field.className() %}
                        {% case "craft\\fields\\PlainText" %}
                            
                                {{ field.name|t }}
                                {{ product.getFieldValue(field.handle )}}
                             
                        {% case "craft\\fields\\Categories" %}
                            
                                {{ field.name|t }}
                                
                                    {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                                
                             
                        {% case "craft\\fields\\Dropdown" %}
                            
                                {{ field.name|t }}
                                {{ product.getFieldValue(field.handle).label}}
                                       
                        {% case "craft\\fields\\Lightswitch" %}
                            
                                {{ field.name|t }}
                                {% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}
                                     
                        {% case "craft\\fields\\Number" %}
                            
                                {{ field.name|t }}
                                {{ product.getFieldValue(field.handle) }} {{ field.suffix }}
                                                                                                                                    
                        {% default %}
                            
                                {{ field.name|t }}
                                {{ field.className() }}
                            

                            {# todo: other non implemented fields #}
                    {% endswitch %}
                {% endif %}

            {% endswitch %}
        {% endfor %}

    {% endif %}
{% endfor %}


---

