N°3520 - Add missing data-role on UIBlocks

2026-02-13 07:24:13 +01:00 · 2021-09-30 22:07:39 +02:00
parent a139dc7e6e
commit ae6f8fba5c
27 changed files with 40 additions and 35 deletions
--- a/templates/base/components/alert/layout.html.twig
+++ b/templates/base/components/alert/layout.html.twig
@@ -1,5 +1,6 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}">
+	 class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
+     data-role="ibo-alert">
 	{% if oUIBlock.IsCollapsible() %}
 		<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--collapse-toggler">
 			<i class="fas fa-caret-down"></i>
--- a/templates/base/components/breadcrumbs/layout.html.twig
+++ b/templates/base/components/breadcrumbs/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-breadcrumbs">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-breadcrumbs" data-role="ibo-breadcrumbs">
    <span class="ibo-breadcrumbs--previous-items-container ibo-is-hidden" data-role="ibo-breadcrumbs--previous-items-container">
        <button class="ibo-breadcrumbs--previous-items-list-toggler ibo-button ibo-is-alternative ibo-is-neutral" data-role="ibo-breadcrumbs--previous-items-list-toggler"
           aria-label="{{ 'UI:Component:Breadcrumbs:PreviousItemsListToggler:Label'|dict_s }}"
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <a id="{{ oUIBlock.GetId() }}"
        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                        data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/collapsible-section/layout.html.twig
+++ b/templates/base/components/collapsible-section/layout.html.twig
@@ -1,14 +1,12 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-collapsible-section {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+	 class="ibo-collapsible-section {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+     data-role="ibo-collapsible-section">
 	<div class="ibo-collapsible-section--header" data-role="ibo-collapsible-section--collapse-toggler">
-		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--maximize-button"><i
-					class="fas fa-caret-down"></i></div>
-		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--minimize-button"><i
-					class="fas fa-caret-up"></i>
-		</div>
+		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--maximize-button"><i class="fas fa-caret-down"></i></div>
+		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--minimize-button"><i class="fas fa-caret-up"></i></div>
 		<div class="ibo-collapsible-section--title">{{ oUIBlock.GetTitle() }}</div>
 	</div>
-	<div class="ibo-collapsible-section--body">
+	<div class="ibo-collapsible-section--body" data-role="ibo-collapsible-section--body">
 		{% block iboPanelBody %}
 			{% for oMainBlock in oUIBlock.GetSubBlocks() %}
 				{{ render_block(oMainBlock, {aPage: aPage}) }}
--- a/templates/base/components/datatable/config/layout.html.twig
+++ b/templates/base/components/datatable/config/layout.html.twig
@@ -5,7 +5,7 @@
            <input id="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}" type="radio" name="settings" {% if (oUIBlock.GetOption("bUseCustomSettings") == false) %} checked {% endif %} value="defaults">
            <label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}">&nbsp;{{ 'UI:UseDefaultSettings'|dict_s }}</label>
        </p>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
            <div class="ibo-panel--header">
                <div class="ibo-panel--header-left">
                    <input id="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}" type="radio" class="specific_settings" name="settings" {% if oUIBlock.GetOption("bUseCustomSettings") %} checked {% endif %} value="specific">
@@ -25,7 +25,7 @@
                <p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
            </div>
        </div>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
            <div class="ibo-panel--header">
                <div class="ibo-panel--header-left">
                    <input id="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}" type="checkbox" {% if oUIBlock.GetOption("sTableId") != null %}checked{% endif %} name="save_settings">
@@ -41,8 +41,8 @@
        </div>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <div class=" ui-dialog-buttonset">
-                <button type="button" class="ibo-button ibo-is-alternative ibo-is-neutral action cancel" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').dialog('close')">&nbsp;{{ 'UI:Button:Cancel'|dict_s }}</button>
-                <button type="submit" class="ibo-button ibo-is-regular ibo-is-primary action" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').DataTableSettings('onDlgOk'); ">&nbsp;{{ 'UI:Button:Ok'|dict_s }}</button>
+                <button type="button" class="ibo-button ibo-is-alternative ibo-is-neutral action cancel" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').dialog('close')">&nbsp;{{ 'UI:Button:Cancel'|dict_s }}</button>
+                <button type="submit" class="ibo-button ibo-is-regular ibo-is-primary action" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').DataTableSettings('onDlgOk'); ">&nbsp;{{ 'UI:Button:Ok'|dict_s }}</button>
            </div>
        </div>
    </form>
--- a/templates/base/components/datatable/layout.html.twig
+++ b/templates/base/components/datatable/layout.html.twig
@@ -12,7 +12,7 @@
    {% endif %}
 {% endif %}

-<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    {% if oUIBlock.GetOption("select_mode") is not empty %}
        <th></th>
--- a/templates/base/components/datatable/static/formtable/layout.html.twig
+++ b/templates/base/components/datatable/static/formtable/layout.html.twig
@@ -4,7 +4,7 @@
 <input type="hidden" name="attr_{{ oUIBlock.GetRef() }}" value="">

 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" >
+<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    <tr>
        {% for column in columns %}
--- a/templates/base/components/datatable/static/layout.html.twig
+++ b/templates/base/components/datatable/static/layout.html.twig
@@ -2,7 +2,7 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    <tr>
        {% for column in columns %}
--- a/templates/base/components/fieldset/layout.html.twig
+++ b/templates/base/components/fieldset/layout.html.twig
@@ -1,5 +1,5 @@
 {% if oUIBlock.GetSubBlocks() %}
-    <fieldset class="ibo-fieldset{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" id="{{ oUIBlock.GetId() }}">
+    <fieldset class="ibo-fieldset {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-fieldset" id="{{ oUIBlock.GetId() }}">
        <legend class="ibo-fieldset-legend">{{ oUIBlock.GetLegend()| raw }}</legend>
        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
            {{ render_block(oSubBlock, {aPage: aPage}) }}
--- a/templates/base/components/form/layout.html.twig
+++ b/templates/base/components/form/layout.html.twig
@@ -1,5 +1,6 @@
 <form method="post" enctype="multipart/form-data" id="{{ oUIBlock.GetId() }}"
-      class="{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+      class="ibo-form {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+      data-role="ibo-form"
        {% if oUIBlock.GetOnSubmitJsCode() %}
            onSubmit="{{ oUIBlock.GetOnSubmitJsCode() }}"
        {% endif %}
--- a/templates/base/components/input/layout.html.twig
+++ b/templates/base/components/input/layout.html.twig
@@ -3,6 +3,7 @@
 {% block iboInput %}
    <input type="{{ oUIBlock.GetType() }}" id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue()|raw }}"
           class="ibo-input {% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}{% if oUIBlock.GetAdditionalCSSClassesAsString() %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}"
+           data-role="ibo-input"
            {% if oUIBlock.IsChecked() %} checked="checked"{% endif %}
            {% if oUIBlock.IsDisabled() %} disabled{% endif %}
            {% if oUIBlock.IsReadonly() %} readonly{% endif %}
--- a/templates/base/components/medallion-icon/layout.html.twig
+++ b/templates/base/components/medallion-icon/layout.html.twig
@@ -1,7 +1,7 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-medallion-icon {{ oUIBlock.GetAdditionalCSSClassesAsString() }}">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-medallion-icon {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-medallion-icon">
    {% if oUIBlock.GetImageUrl() != '' %}
        <img class="ibo-medallion-icon--image" src="{{ oUIBlock.GetImageUrl() }}" />
    {% endif %}
--- a/templates/base/components/popover-menu/item/mode_separator.html.twig
+++ b/templates/base/components/popover-menu/item/mode_separator.html.twig
@@ -1,6 +1,6 @@
 {% extends 'base/components/popover-menu/item/layout.html.twig' %}
 {% block iboPopoverMenuItem %}
-    <hr class="ibo-popover-menu--item ibo-popover-menu--separator"
+    <hr class="ibo-popover-menu--item ibo-popover-menu--separator" data-role="ibo-popover-menu--item ibo-popover-menu--separator"
            {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/spinner/layout.html.twig
+++ b/templates/base/components/spinner/layout.html.twig
@@ -1,5 +1,5 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}" aria-hidden="true"></i>
+    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}" aria-hidden="true"></i>
 {% endapply %}
--- a/templates/base/components/title/layout.html.twig
+++ b/templates/base/components/title/layout.html.twig
@@ -1,5 +1,5 @@
 {% apply spaceless %}
-    <div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+    <div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-title">
        {% if oUIBlock.HasIcon() %}
            <div class="ibo-title--icon">
                <div class="ibo-title--icon-background ibo-title--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
--- a/templates/base/components/toolbar/layout.html.twig
+++ b/templates/base/components/toolbar/layout.html.twig
@@ -3,7 +3,8 @@
 {# Toolbar #}
 {% apply spaceless %}
    <div id="{{ oUIBlock.GetId() }}"
-         class="ibo-toolbar {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+         class="ibo-toolbar {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+         data-role="ibo-toolbar"
    >

        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
--- a/templates/base/layouts/content-block/layout.html.twig
+++ b/templates/base/layouts/content-block/layout.html.twig
@@ -8,7 +8,7 @@
    {% block iboContentBlockContainer %}
        {% if bHasDiv %}
            <div id="{{ oUIBlock.GetId() }}"
-            class="{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+            class="{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
            {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/layouts/dashboard/layout.html.twig
+++ b/templates/base/layouts/dashboard/layout.html.twig
@@ -2,8 +2,8 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {# Dashboard Layout #}
 {% apply spaceless %}
-    <div class="ibo-dashboard--top-bar">
-        <div class="ibo-dashboard--top-bar-title">{{ oUIBlock.GetTitle() }}</div>
+    <div class="ibo-dashboard--top-bar" data-role="ibo-dashboard--top-bar">
+        <div class="ibo-dashboard--top-bar-title" data-role="ibo-dashboard--top-bar-title">{{ oUIBlock.GetTitle() }}</div>
        {{ render_block(oUIBlock.GetToolbar(), {aPage: aPage}) }}
    </div>
    <div class="ibo-dashboard--grid" data-role="ibo-dashboard--grid">
--- a/templates/base/layouts/multi-column/column/layout.html.twig
+++ b/templates/base/layouts/multi-column/column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-column">
+<div class="ibo-column" data-role="ibo-column">
    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
        {{ render_block(oSubBlock, {aPage: aPage}) }}
    {% endfor %}
--- a/templates/base/layouts/multi-column/layout.html.twig
+++ b/templates/base/layouts/multi-column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-multi-column">
+<div class="ibo-multi-column" data-role="ibo-multi-column">
    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
        {{ render_block(oSubBlock, {aPage: aPage}) }}
    {% endfor %}
--- a/templates/base/layouts/page-content/layout.html.twig
+++ b/templates/base/layouts/page-content/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="ibo-center-container" class="ibo-center-container {% block iboPageCenterContainerExtraClasses %}{% endblock %}">
+<div id="ibo-center-container" class="ibo-center-container {% block iboPageCenterContainerExtraClasses %}{% endblock %}" data-role="ibo-center-container">
 	{% block iboPageCenterContainer %}
 		<main id="ibo-main-content">
 			{# Note: The header is inside the main content div to avoid glitches with other layouts (eg. in a side content layout) #}
--- a/templates/base/layouts/page-content/with-side-content.html.twig
+++ b/templates/base/layouts/page-content/with-side-content.html.twig
@@ -7,7 +7,7 @@

 {% block iboPageCenterContainer %}
 	{{ parent() }}
-	<aside id="ibo-side-content">
+	<aside id="ibo-side-content" data-role="ibo-side-content">
 		{% block iboPageSideContent %}
 			{% for oSubBlock in oUIBlock.GetSideBlocks() %}
 				{{ render_block(oSubBlock, {aPage: aPage}) }}
--- a/templates/base/layouts/tab-container/tab/layout.html.twig
+++ b/templates/base/layouts/tab-container/tab/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-tab">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-tab" data-role="ibo-tab">
    {% block iboContentBlockContainer %}
        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
            {{ render_block(oSubBlock, {aPage: aPage}) }}
--- a/templates/base/layouts/top-bar/layout.html.twig
+++ b/templates/base/layouts/top-bar/layout.html.twig
@@ -1,5 +1,5 @@
-<nav id="{{ oUIBlock.GetId() }}" class="ibo-top-bar">
-	<div class="ibo-top-bar--quick-actions">
+<nav id="{{ oUIBlock.GetId() }}" class="ibo-top-bar" data-role="ibo-top-bar">
+	<div class="ibo-top-bar--quick-actions" data-role="ibo-top-bar--quick-actions">
 		{% if oUIBlock.HasQuickCreate() %}
 			{{ render_block(oUIBlock.GetQuickCreate(), {aPage: aPage}) }}
 		{% endif %}
--- a/templates/pages/backoffice/itopwebpage/layout.html.twig
+++ b/templates/pages/backoffice/itopwebpage/layout.html.twig
@@ -3,8 +3,8 @@
 {% extends "pages/backoffice/nicewebpage/layout.html.twig" %}
 {% block iboPageBodyHtml %}
 		{{ render_block(aLayouts.oNavigationMenu, {aPage: aPage}) }}
-		<div id="ibo-page-container">
-			<div id="ibo-top-container">
+		<div id="ibo-page-container" data-role="ibo-page-container">
+			<div id="ibo-top-container" data-role="ibo-top-container">
 				{{ include('pages/backoffice/extension-blocks/banner.html.twig') }}
 				{{ render_block(aLayouts.oTopBar, {aPage: aPage}) }}
 			</div>