diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js
index a4a832ab73d7..a539f6b8d3df 100644
--- a/packages/fiori/src/FlexibleColumnLayout.js
+++ b/packages/fiori/src/FlexibleColumnLayout.js
@@ -112,6 +112,18 @@ const metadata = {
type: Integer,
defaultValue: 0,
},
+
+ /**
+ * Allows the user to replace the whole layouts configuration
+ *
+ * @type {Object}
+ * @private
+ * @sap-restricted
+ */
+ _layoutsConfiguration: {
+ type: Object,
+ defaultValue: undefined,
+ },
},
slots: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ {
/**
@@ -383,7 +395,7 @@ class FlexibleColumnLayout extends UI5Element {
}
nextColumnLayout(layout) {
- return getLayoutsByMedia()[this.media][layout].layout;
+ return this._effectiveLayoutsByMedia[this.media][layout].layout;
}
calcVisibleColumns(colLayot) {
@@ -559,7 +571,7 @@ class FlexibleColumnLayout extends UI5Element {
}
get effectiveArrowsInfo() {
- return getLayoutsByMedia()[this.media][this.layout].arrows;
+ return this._effectiveLayoutsByMedia[this.media][this.layout].arrows;
}
get media() {
@@ -601,6 +613,10 @@ class FlexibleColumnLayout extends UI5Element {
get accEndColumnText() {
return this.i18nBundle.getText(FCL_END_COLUMN_TXT);
}
+
+ get _effectiveLayoutsByMedia() {
+ return this._layoutsConfiguration || getLayoutsByMedia();
+ }
}
FlexibleColumnLayout.define();
diff --git a/packages/fiori/test/pages/FCLCustom.html b/packages/fiori/test/pages/FCLCustom.html
new file mode 100644
index 000000000000..1b5bca1b8951
--- /dev/null
+++ b/packages/fiori/test/pages/FCLCustom.html
@@ -0,0 +1,328 @@
+
+
+
+
+
+
+
+ Flexible Column Layout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 1
+
+
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+
+
+
+ Column 2
+
+
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+ Hello worild!
+
+
+
+ Column 3
+
+
+
+ Hello worild!
+ Hello worild!
+ Hello worild!
+
+