diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss
index 513923a5b..90ffc7679 100644
--- a/css/backoffice/pages/_all.scss
+++ b/css/backoffice/pages/_all.scss
@@ -1,25 +1,11 @@
 /*!
- * Copyright (C) 2013-2020 Combodo SARL
- *
- * This file is part of iTop.
- *
- * iTop is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * iTop is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
 @import "base";
 @import "preferences";
 @import "attachments";
-@import "tabularfieldsselector";
 @import "impact-analysis";
 @import "audit";
 @import "data-synchro";
\ No newline at end of file
diff --git a/css/backoffice/pages/_tabularfieldsselector.scss b/css/backoffice/pages/_tabularfieldsselector.scss
deleted file mode 100644
index e550608fa..000000000
--- a/css/backoffice/pages/_tabularfieldsselector.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*!
- * @copyright   Copyright (C) 2010-2021 Combodo SARL
- * @license     http://opensource.org/licenses/AGPL-3.0
- */
-
-.ibo-table-preview {
-  margin-top: 20px;
-
-  th {
-    padding: 5px;
-    border-width: 1px 1px 0;
-    border-style: groove groove none;
-    background: $ibo-body-background-color;
-  }
-
-  td {
-    padding-right: 5px;
-    padding-left: 5px;
-    border-width: 0 1px;
-    border-style: none groove;
-  }
-
-  tr:last-child td {
-    border-bottom-width: 1px;
-    border-bottom-style: groove;
-  }
-}
-
-.ibo-preview-header {
-  margin-bottom: 5px;
-}
-
-#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf {
-  margin-top: $ibo-panel--spacing-top;
-}
diff --git a/js/tabularfieldsselector.js b/js/tabularfieldsselector.js
index 86a6f81cf..7fb2a0894 100644
--- a/js/tabularfieldsselector.js
+++ b/js/tabularfieldsselector.js
@@ -1,68 +1,72 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
 // jQuery UI style "widget" for managing the "xlsx-exporter"
-$(function()
-{
+$(function () {
 	// the widget definition, where "itop" is the namespace,
 	// "tabularfieldsselector" the widget name
-	$.widget( "itop.tabularfieldsselector",
-	{
-		// default options
-		options:
+	$.widget("itop.tabularfieldsselector",
 		{
-			fields: [],
-			value_holder: '#tabular_fields',
-			sample_data: [],
-			total_count: 0,
-			preview_limit: 3,
-			labels: {
-				preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s",
-				empty_preview: "Select the columns to be exported from the list above",
-				columns_order: "Columns order",
-				columns_selection: 'Available columns from %1$s',
-				check_all: 'Check all',
-				uncheck_all: 'Uncheck all',
-				no_field_selected: 'Select at least one column to be exported'
-			}
-		},
+			// default options
+			options:
+				{
+					fields: [],
+					value_holder: '#tabular_fields',
+					sample_data: [],
+					total_count: 0,
+					preview_limit: 3,
+					labels: {
+						preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s",
+						empty_preview: "Select the columns to be exported from the list above",
+						columns_order: "Columns order",
+						columns_selection: 'Available columns from %1$s',
+						check_all: 'Check all',
+						uncheck_all: 'Uncheck all',
+						no_field_selected: 'Select at least one column to be exported'
+					}
+				},
 
-		// the constructor
-		_create: function () {
-			var me = this;
-			this._flatten_fields(this.options.fields);
-			this.sId = this.element.attr('id');
-			this.element.addClass('itop-tabularfieldsselector');
-			this.element.parent().bind('form-part-activate', function () {
-				me._update_from_holder();
-				me._update_preview();
-			});
-			this.element.parent().bind('validate', function () {
-				me.validate();
-			});
+			// the constructor
+			_create: function () {
+				var me = this;
+				this._flatten_fields(this.options.fields);
+				this.sId = this.element.attr('id');
+				this.element.addClass('itop-tabularfieldsselector');
+				this.element.parent().bind('form-part-activate', function () {
+					me._update_from_holder();
+					me._update_preview();
+				});
+				this.element.parent().bind('validate', function () {
+					me.validate();
+				});
 
-			this.aSelected = [];
+				this.aSelected = [];
 
-			for (var i in this.options.fields) {
-				var sContent = `<div class="ibo-panel ibo-is-blue ">
+				for (var i in this.options.fields) {
+					var sContent = `<div class="ibo-panel ibo-is-blue ibo-is-opened">
 				<div class="ibo-panel--header">
 					<div class="ibo-panel--header-left">
 						<div class= "ibo-panel--title" > `+this._format(this.options.labels.columns_selection, i)+`</div>
 					</div>`;
-				sContent += `
+					sContent += `
 					<div className="ibo-panel--header-right">
 						<div className="ibo-panel--toolbar">
 						<button class="check_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.check_all+`</span></button>
 					    <button class="uncheck_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.uncheck_all+`</span></button>
 				</div>
 				</div>`;
-				sContent += `</div>
+					sContent += `</div>
 				<div class="ibo-panel--body">`;
-				for (var j in this.options.fields[i]) {
-					sContent += this._get_field_checkbox(this.options.fields[i][j].code, this.options.fields[i][j].label, (this.options.fields[i][j].subattr.length > 0), false, null);
-				}
-				sContent += `</div>
+					for (var j in this.options.fields[i]) {
+						sContent += this._get_field_checkbox(this.options.fields[i][j].code, this.options.fields[i][j].label, (this.options.fields[i][j].subattr.length > 0), false, null);
+					}
+					sContent += `</div>
 				</div>`;
-				this.element.append(sContent);
-			}
-			sContent = `<div class="ibo-panel ibo-is-blue ">
+					this.element.append(sContent);
+				}
+				sContent = `<div class="ibo-panel ibo-is-blue ibo-is-opened">
 				<div class="ibo-panel--header">
 					<div class="ibo-panel--header-left">
 						<div class="ibo-panel--title">`+this.options.labels.columns_order+`</div>
@@ -71,354 +75,354 @@ $(function()
 				<div class="ibo-panel--body">	`;
 
 
-			sContent += '<div class="ibo-preview-header">'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'</div>';
-			sContent += '<div class="ibo-table-preview"></div>';
-			sContent += '</div></div>';
-			this.element.append(sContent);
+				sContent += '<div class="ibo-preview-header">'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'</div>';
+				sContent += '<div class="ibo-table-preview"></div>';
+				sContent += '</div></div>';
+				this.element.append(sContent);
 
-			this._update_from_holder();
+				this._update_from_holder();
 
-			$('body').on('click change', '.tfs_checkbox', function () {
-				var sInstanceId = $(this).attr('data-instance-id');
-				if (sInstanceId != me.sId) {
-					return;
-				}
-				me._on_click($(this));
-			});
+				$('body').on('click change', '.tfs_checkbox', function () {
+					var sInstanceId = $(this).attr('data-instance-id');
+					if (sInstanceId != me.sId) {
+						return;
+					}
+					me._on_click($(this));
+				});
 
-			var maxWidth = 0;
-			$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
-				maxWidth = Math.max(maxWidth, $(this).parent().width());
-			});
-			$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
-				$(this).parent().parent().width(maxWidth).css({display: 'inline-block'});
-			});
+				var maxWidth = 0;
+				$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
+					maxWidth = Math.max(maxWidth, $(this).parent().width());
+				});
+				$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
+					$(this).parent().parent().width(maxWidth).css({display: 'inline-block'});
+				});
 
-			$('#'+this.sId+' .tfs_checkbox_multi').click(function () {
-				me._on_multi_click($(this).val(), this.checked);
-			});
-			$('#'+this.sId+' .check_all').click(function () {
-				me._on_check_all($(this).closest('.ibo-panel'), true);
-			});
-			$('#'+this.sId+' .uncheck_all').click(function () {
-				me._on_check_all($(this).closest('.ibo-panel'), false);
-			});
+				$('#'+this.sId+' .tfs_checkbox_multi').click(function () {
+					me._on_multi_click($(this).val(), this.checked);
+				});
+				$('#'+this.sId+' .check_all').click(function () {
+					me._on_check_all($(this).closest('.ibo-panel'), true);
+				});
+				$('#'+this.sId+' .uncheck_all').click(function () {
+					me._on_check_all($(this).closest('.ibo-panel'), false);
+				});
 
 
-			this._update_preview();
-			this._make_tooltips();
-		},
-		_on_click: function (jItemClicked) {
+				this._update_preview();
+				this._make_tooltips();
+			},
+			_on_click: function (jItemClicked) {
 
-			var bChecked = jItemClicked.prop('checked');
-			var sValue = jItemClicked.val();
-			this._mark_as_selected(sValue, bChecked);
-			this._update_holder();
-			this._update_preview();
-			var sDataParent = jItemClicked.attr('data-parent');
-			if (sDataParent != '') {
-				this._update_tristate(sDataParent+'_multi');
-			}
-		},
-		_on_multi_click: function (sMultiFieldCode, bChecked) {
-			var oField = this._get_main_field_by_code(sMultiFieldCode);
-			if (oField != null) {
-				var sPrefix = '#tfs_'+this.sId+'_';
-				for (var k in oField.subattr) {
-					this._mark_as_selected(oField.subattr[k].code, bChecked);
-					// In case the tooltip is visible, also update the checkboxes
-					sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
-					$(sElementId).prop('checked', bChecked);
-				}
+				var bChecked = jItemClicked.prop('checked');
+				var sValue = jItemClicked.val();
+				this._mark_as_selected(sValue, bChecked);
 				this._update_holder();
 				this._update_preview();
-			}
-		},
-		_on_check_all: function (jSelector, bChecked) {
-			var me = this;
-			jSelector.find('.tfs_checkbox').each(function () {
-				$(this).prop('checked', bChecked);
-				me._mark_as_selected($(this).val(), bChecked);
-			});
-			jSelector.find('.tfs_checkbox_multi').each(function () {
-				var oField = me._get_main_field_by_code($(this).val());
+				var sDataParent = jItemClicked.attr('data-parent');
+				if (sDataParent != '') {
+					this._update_tristate(sDataParent+'_multi');
+				}
+			},
+			_on_multi_click: function (sMultiFieldCode, bChecked) {
+				var oField = this._get_main_field_by_code(sMultiFieldCode);
 				if (oField != null) {
-					$(this).prop('checked', bChecked);
-					$(this).prop('indeterminate', false);
 					var sPrefix = '#tfs_'+this.sId+'_';
 					for (var k in oField.subattr) {
-						me._mark_as_selected(oField.subattr[k].code, bChecked);
+						this._mark_as_selected(oField.subattr[k].code, bChecked);
 						// In case the tooltip is visible, also update the checkboxes
 						sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
 						$(sElementId).prop('checked', bChecked);
 					}
-				}
-			});
-			this._update_holder();
-			this._update_preview();
-		},
-		_update_tristate: function (sParentId) {
-			// Check if the parent is checked, unchecked or indeterminate
-			var sParentId = sParentId.replace('.', '_');
-			var sAttCode = $('#'+sParentId).val();
-			var oField = this._get_main_field_by_code(sAttCode);
-			if (oField != null) {
-				var iNbChecked = 0;
-				var aDebug = [];
-				for (var j in oField.subattr) {
-					if ($.inArray(oField.subattr[j].code, this.aSelected) != -1) {
-						aDebug.push(oField.subattr[j].code);
-						iNbChecked++;
-					}
-				}
-				if (iNbChecked == oField.subattr.length) {
-					$('#'+sParentId).prop('checked', true);
-					$('#'+sParentId).prop('indeterminate', false);
-				} else if (iNbChecked == 0) {
-					$('#'+sParentId).prop('checked', false);
-					$('#'+sParentId).prop('indeterminate', false);
-				} else {
-					$('#'+sParentId).prop('checked', false);
-					$('#'+sParentId).prop('indeterminate', true);
-				}
-			}
-		},
-		_mark_as_selected: function (sValue, bSelected) {
-			if (bSelected) {
-				if ($.inArray(sValue, this.aSelected) == -1) {
-					this.aSelected.push(sValue);
-				}
-			} else {
-				aSelected = [];
-				for (var k in this.aSelected) {
-					if (this.aSelected[k] != sValue) {
-						aSelected.push(this.aSelected[k]);
-					}
-				}
-				this.aSelected = aSelected;
-			}
-		},
-		_update_holder: function () {
-			$(this.options.value_holder).val(this.aSelected.join(','));
-		},
-		_update_from_holder: function () {
-			var sFields = $(this.options.value_holder).val();
-			var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10);
-
-			if (sFields != '') {
-				this.aSelected = sFields.split(',');
-				var safeSelected = [];
-				var me = this;
-				var bModified = false;
-				for (var k in this.aSelected) {
-					var oField = this._get_field_by_code(this.aSelected[k])
-					if (oField == null) {
-						// Invalid field code supplied, don't copy it
-						bModified = true;
-					} else {
-						safeSelected.push(this.aSelected[k]);
-					}
-				}
-				if (bModified) {
-					this.aSelected = safeSelected;
 					this._update_holder();
+					this._update_preview();
 				}
-				$('#'+this.sId+' .tfs_checkbox').each(function () {
-					if ($.inArray($(this).val(), me.aSelected) != -1) {
-						$(this).prop('checked', true);
-					} else {
-						$(this).prop('checked', false);
+			},
+			_on_check_all: function (jSelector, bChecked) {
+				var me = this;
+				jSelector.find('.tfs_checkbox').each(function () {
+					$(this).prop('checked', bChecked);
+					me._mark_as_selected($(this).val(), bChecked);
+				});
+				jSelector.find('.tfs_checkbox_multi').each(function () {
+					var oField = me._get_main_field_by_code($(this).val());
+					if (oField != null) {
+						$(this).prop('checked', bChecked);
+						$(this).prop('indeterminate', false);
+						var sPrefix = '#tfs_'+this.sId+'_';
+						for (var k in oField.subattr) {
+							me._mark_as_selected(oField.subattr[k].code, bChecked);
+							// In case the tooltip is visible, also update the checkboxes
+							sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
+							$(sElementId).prop('checked', bChecked);
+						}
 					}
 				});
-			}
-			var me = this;
-			$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
-				me._update_tristate($(this).attr('id'));
-			});
-
-		},
-		_update_preview: function () {
-			var sHtml = '';
-			if (this.aSelected.length > 0) {
-				sHtml += '<table><thead><tr>';
-				for (var k in this.aSelected) {
-					var sField = this.aSelected[k];
-					if ($.inArray(sField, this.aSelected) != -1) {
-						var sRemoveBtn = '&nbsp;<span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
-						sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
+				this._update_holder();
+				this._update_preview();
+			},
+			_update_tristate: function (sParentId) {
+				// Check if the parent is checked, unchecked or indeterminate
+				var sParentId = sParentId.replace('.', '_');
+				var sAttCode = $('#'+sParentId).val();
+				var oField = this._get_main_field_by_code(sAttCode);
+				if (oField != null) {
+					var iNbChecked = 0;
+					var aDebug = [];
+					for (var j in oField.subattr) {
+						if ($.inArray(oField.subattr[j].code, this.aSelected) != -1) {
+							aDebug.push(oField.subattr[j].code);
+							iNbChecked++;
+						}
+					}
+					if (iNbChecked == oField.subattr.length) {
+						$('#'+sParentId).prop('checked', true);
+						$('#'+sParentId).prop('indeterminate', false);
+					} else if (iNbChecked == 0) {
+						$('#'+sParentId).prop('checked', false);
+						$('#'+sParentId).prop('indeterminate', false);
+					} else {
+						$('#'+sParentId).prop('checked', false);
+						$('#'+sParentId).prop('indeterminate', true);
 					}
 				}
-				sHtml += '</tr></thead><tbody>';
+			},
+			_mark_as_selected: function (sValue, bSelected) {
+				if (bSelected) {
+					if ($.inArray(sValue, this.aSelected) == -1) {
+						this.aSelected.push(sValue);
+					}
+				} else {
+					aSelected = [];
+					for (var k in this.aSelected) {
+						if (this.aSelected[k] != sValue) {
+							aSelected.push(this.aSelected[k]);
+						}
+					}
+					this.aSelected = aSelected;
+				}
+			},
+			_update_holder: function () {
+				$(this.options.value_holder).val(this.aSelected.join(','));
+			},
+			_update_from_holder: function () {
+				var sFields = $(this.options.value_holder).val();
+				var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10);
 
-				for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) {
-					sHtml += '<tr>';
+				if (sFields != '') {
+					this.aSelected = sFields.split(',');
+					var safeSelected = [];
+					var me = this;
+					var bModified = false;
+					for (var k in this.aSelected) {
+						var oField = this._get_field_by_code(this.aSelected[k])
+						if (oField == null) {
+							// Invalid field code supplied, don't copy it
+							bModified = true;
+						} else {
+							safeSelected.push(this.aSelected[k]);
+						}
+					}
+					if (bModified) {
+						this.aSelected = safeSelected;
+						this._update_holder();
+					}
+					$('#'+this.sId+' .tfs_checkbox').each(function () {
+						if ($.inArray($(this).val(), me.aSelected) != -1) {
+							$(this).prop('checked', true);
+						} else {
+							$(this).prop('checked', false);
+						}
+					});
+				}
+				var me = this;
+				$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
+					me._update_tristate($(this).attr('id'));
+				});
+
+			},
+			_update_preview: function () {
+				var sHtml = '';
+				if (this.aSelected.length > 0) {
+					sHtml += '<table><thead><tr>';
 					for (var k in this.aSelected) {
 						var sField = this.aSelected[k];
-						sHtml += '<td>'+this.options.sample_data[i][sField]+'</td>';
+						if ($.inArray(sField, this.aSelected) != -1) {
+							var sRemoveBtn = '&nbsp;<span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
+							sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
+						}
 					}
-					sHtml += '</tr>';
+					sHtml += '</tr></thead><tbody>';
+
+					for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) {
+						sHtml += '<tr>';
+						for (var k in this.aSelected) {
+							var sField = this.aSelected[k];
+							sHtml += '<td>'+this.options.sample_data[i][sField]+'</td>';
+						}
+						sHtml += '</tr>';
+					}
+
+					sHtml += '</tbody></table>';
+
+					$('#'+this.sId+' .preview_header').show();
+					$('#'+this.sId+' .ibo-table-preview').html(sHtml);
+					var me = this;
+					$('#'+this.sId+' .ibo-table-preview table').dragtable({
+						persistState: function (table) {
+							me._on_drag_columns(table);
+						}, dragHandle: '.drag-handle'
+					});
+					$('#'+this.sId+' .ibo-table-preview table .export-field-close').click(function (event) {
+						me._on_remove_column($(this).attr('data-attcode'));
+						event.preventDefault();
+						return false;
+					});
+				} else {
+					$('#'+this.sId+' .preview_header').hide();
+					$('#'+this.sId+' .ibo-table-preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
 				}
-
-				sHtml += '</tbody></table>';
-
-				$('#'+this.sId+' .preview_header').show();
-				$('#'+this.sId+' .ibo-table-preview').html(sHtml);
+				$('.form_part:visible').trigger('preview_updated');
+			},
+			_get_field_by_code: function (sFieldCode) {
+				for (var k in this.aFieldsByCode) {
+					if (k == sFieldCode) {
+						return this.aFieldsByCode[k];
+					}
+				}
+				return null;
+			},
+			_get_main_field_by_code: function (sFieldCode) {
+				for (var i in this.options.fields) {
+					for (var j in this.options.fields[i]) {
+						if (this.options.fields[i][j].code == sFieldCode) {
+							return this.options.fields[i][j];
+						}
+					}
+				}
+				return null;
+			},
+			_on_drag_columns: function (table) {
 				var me = this;
-				$('#'+this.sId+' .ibo-table-preview table').dragtable({
-					persistState: function (table) {
-						me._on_drag_columns(table);
-					}, dragHandle: '.drag-handle'
+				me.aSelected = [];
+				table.el.find('th').each(function (i) {
+					me.aSelected.push($(this).attr('data-attcode'));
 				});
-				$('#'+this.sId+' .ibo-table-preview table .export-field-close').click(function (event) {
-					me._on_remove_column($(this).attr('data-attcode'));
-					event.preventDefault();
-					return false;
+				this._update_holder();
+			},
+			_on_remove_column: function (sField) {
+				var sElementId = this.sId+'_'+sField;
+				sElementId = '#tfs_'+sElementId.replace('.', '_');
+				$(sElementId).prop('checked', false);
+
+				this._mark_as_selected(sField, false);
+				this._update_holder();
+				this._update_preview();
+				var me = this;
+				$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
+					me._update_tristate($(this).attr('id'));
 				});
-			} else {
-				$('#'+this.sId+' .preview_header').hide();
-				$('#'+this.sId+' .ibo-table-preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
-			}
-			$('.form_part:visible').trigger('preview_updated');
-		},
-		_get_field_by_code: function (sFieldCode) {
-			for (var k in this.aFieldsByCode) {
-				if (k == sFieldCode) {
-					return this.aFieldsByCode[k];
+			},
+			_format: function () {
+				var s = arguments[0];
+				for (var i = 0; i < arguments.length-1; i++) {
+					var reg = new RegExp("%"+(i+1)+"\\$s", "gm");
+					s = s.replace(reg, arguments[i+1]);
 				}
-			}
-			return null;
-		},
-		_get_main_field_by_code: function (sFieldCode) {
-			for (var i in this.options.fields) {
-				for (var j in this.options.fields[i]) {
-					if (this.options.fields[i][j].code == sFieldCode) {
-						return this.options.fields[i][j];
+				return s;
+			},
+			validate: function () {
+				if (this.aSelected.length == 0) {
+					var aMessages = $('#export-form').data('validation_messages');
+					aMessages.push(this.options.labels.no_field_selected);
+					$('#export-form').data('validation_messages', aMessages);
+				}
+			},
+			// events bound via _bind are removed automatically
+			// revert other modifications here
+			destroy: function () {
+				this.element
+					.removeClass('itop-tabularfieldsselector');
+
+				this.element.parent().unbind('activate');
+				this.element.parent().unbind('validate');
+			},
+			// _setOptions is called with a hash of all options that are changing
+			_setOptions: function () {
+				this._superApply(arguments);
+			},
+			// _setOption is called for each individual option that is changing
+			_setOption: function (key, value) {
+				if (key == 'fields') {
+					this._flatten_fields(value);
+				}
+				this._superApply(arguments);
+			},
+			_flatten_fields: function (aFields) {
+				// Update the "flattened" via of the fields
+				this.aFieldsByCode = {}; // Must be an object since indexes are non-numeric
+				for (var k in aFields) {
+					for (var i in aFields[k]) {
+						this.aFieldsByCode[aFields[k][i].code] = aFields[k][i];
+						for (var j in aFields[k][i].subattr) {
+							this.aFieldsByCode[aFields[k][i].subattr[j].code] = aFields[k][i].subattr[j];
+						}
 					}
 				}
-			}
-			return null;
-		},
-		_on_drag_columns: function (table) {
-			var me = this;
-			me.aSelected = [];
-			table.el.find('th').each(function (i) {
-				me.aSelected.push($(this).attr('data-attcode'));
-			});
-			this._update_holder();
-		},
-		_on_remove_column: function (sField) {
-			var sElementId = this.sId+'_'+sField;
-			sElementId = '#tfs_'+sElementId.replace('.', '_');
-			$(sElementId).prop('checked', false);
-
-			this._mark_as_selected(sField, false);
-			this._update_holder();
-			this._update_preview();
-			var me = this;
-			$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
-				me._update_tristate($(this).attr('id'));
-			});
-		},
-		_format: function () {
-			var s = arguments[0];
-			for (var i = 0; i < arguments.length-1; i++) {
-				var reg = new RegExp("%"+(i+1)+"\\$s", "gm");
-				s = s.replace(reg, arguments[i+1]);
-			}
-			return s;
-		},
-		validate: function () {
-			if (this.aSelected.length == 0) {
-				var aMessages = $('#export-form').data('validation_messages');
-				aMessages.push(this.options.labels.no_field_selected);
-				$('#export-form').data('validation_messages', aMessages);
-			}
-		},
-		// events bound via _bind are removed automatically
-		// revert other modifications here
-		destroy: function () {
-			this.element
-				.removeClass('itop-tabularfieldsselector');
-
-			this.element.parent().unbind('activate');
-			this.element.parent().unbind('validate');
-		},
-		// _setOptions is called with a hash of all options that are changing
-		_setOptions: function () {
-			this._superApply(arguments);
-		},
-		// _setOption is called for each individual option that is changing
-		_setOption: function (key, value) {
-			if (key == 'fields') {
-				this._flatten_fields(value);
-			}
-			this._superApply(arguments);
-		},
-		_flatten_fields: function (aFields) {
-			// Update the "flattened" via of the fields
-			this.aFieldsByCode = {}; // Must be an object since indexes are non-numeric
-			for (var k in aFields) {
-				for (var i in aFields[k]) {
-					this.aFieldsByCode[aFields[k][i].code] = aFields[k][i];
-					for (var j in aFields[k][i].subattr) {
-						this.aFieldsByCode[aFields[k][i].subattr[j].code] = aFields[k][i].subattr[j];
-					}
-				}
-			}
-		},
-		_make_tooltips: function () {
-			var me = this;
-			$('#'+this.sId+' .tfs_advanced').each(function (index, elt) {
-				var sDataAttcode = $(elt).attr('data-attcode');
-				var sTooltipContent = me._get_tooltip_content(sDataAttcode);
-				tippy(elt, {
-					'content': sTooltipContent,
-					allowHTML: true,
-					interactive: true,
-					zIndex: 9999,
-					role: 'tooltip',
-					popperOptions: {
-						strategy: 'fixed'
-					}
+			},
+			_make_tooltips: function () {
+				var me = this;
+				$('#'+this.sId+' .tfs_advanced').each(function (index, elt) {
+					var sDataAttcode = $(elt).attr('data-attcode');
+					var sTooltipContent = me._get_tooltip_content(sDataAttcode);
+					tippy(elt, {
+						'content': sTooltipContent,
+						allowHTML: true,
+						interactive: true,
+						zIndex: 9999,
+						role: 'tooltip',
+						popperOptions: {
+							strategy: 'fixed'
+						}
+					});
 				});
-			});
 
-		},
-		_get_tooltip_content: function (sDataAttCode) {
-			var oField = this._get_main_field_by_code(sDataAttCode);
-			var sContent = '';
-			if (oField != null) {
-				sContent += '<div display:block;">'+oField.label+'</div>';
-				for (var k in oField.subattr) {
-					bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1);
-					sContent += this._get_field_checkbox(oField.subattr[k].code, oField.subattr[k].label, false, bChecked, sDataAttCode);
+			},
+			_get_tooltip_content: function (sDataAttCode) {
+				var oField = this._get_main_field_by_code(sDataAttCode);
+				var sContent = '';
+				if (oField != null) {
+					sContent += '<div display:block;">'+oField.label+'</div>';
+					for (var k in oField.subattr) {
+						bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1);
+						sContent += this._get_field_checkbox(oField.subattr[k].code, oField.subattr[k].label, false, bChecked, sDataAttCode);
+					}
 				}
+				return sContent;
+			},
+			_get_field_checkbox: function (sCode, sLabel, bHasTooltip, bChecked, sParentId) {
+				var sPrefix = 'tfs_'+this.sId+'_';
+				sParentId = (sPrefix+sParentId).replace('.', '_');
+				sElementId = (sPrefix+sCode).replace('.', '_');
+				var aClasses = [];
+				if (bHasTooltip) {
+					aClasses.push('tfs_advanced');
+					sLabel += ' [+]';
+				}
+				var sChecked = '';
+				if (bChecked) {
+					sChecked = ' checked ';
+				}
+				var sDataParent = '';
+				if (sParentId != null) {
+					sDataParent = ' data-parent="'+sParentId+'" ';
+				}
+				if (bHasTooltip) {
+					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'">&nbsp;'+sLabel+'</label></div>';
+				} else {
+					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'">&nbsp;'+sLabel+'</label></div>';
+				}
+				return sContent;
 			}
-			return sContent;
-		},
-		_get_field_checkbox: function (sCode, sLabel, bHasTooltip, bChecked, sParentId) {
-			var sPrefix = 'tfs_'+this.sId+'_';
-			sParentId = (sPrefix+sParentId).replace('.', '_');
-			sElementId = (sPrefix+sCode).replace('.', '_');
-			var aClasses = [];
-			if (bHasTooltip) {
-				aClasses.push('tfs_advanced');
-				sLabel += ' [+]';
-			}
-			var sChecked = '';
-			if (bChecked) {
-				sChecked = ' checked ';
-			}
-			var sDataParent = '';
-			if (sParentId != null) {
-				sDataParent = ' data-parent="'+sParentId+'" ';
-			}
-			if (bHasTooltip) {
-				sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'">&nbsp;'+sLabel+'</label></div>';
-			} else {
-				sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'">&nbsp;'+sLabel+'</label></div>';
-			}
-			return sContent;
-		}
-	});
+		});
 });
diff --git a/templates/base/components/datatable/config/layout.html.twig b/templates/base/components/datatable/config/layout.html.twig
index 8c24d447f..3aafabc1d 100644
--- 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">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
             <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">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
             <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">