Get UI elements of entry in front end 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 == &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 %}
Use the Kint plugin to spit out the current tab to the JS debug console:

{% for tab in layout.tabs %}
    {% if tab.name == &quot;Detaljer&quot; %}

        {{ 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 == &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 %}