Update modal title and size from micro frontend (SAP#2322)

y-kkamil · Oct 18, 2021 · 1dcb3c4 · 1dcb3c4
1 parent 4ee7caf
commit 1dcb3c4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/client/src/linkManager.js b/client/src/linkManager.js
@@ -134,6 +134,23 @@ export class linkManager extends LuigiClientBase {
     this.navigate(path, 0, true, modalSettings);
   }
 
+  /**
+   * Update current title and size of a modal.
+   * @memberof linkManager
+   * @param {Object} updatedModalSettings possibility to update the active modal.
+   * @param {Object} updatedModalSettings.title update the `title` of the active modal.
+   * @param {Object} updatedModalSettings.size update the `size` of the active modal.
+   * @example
+   * LuigiClient.linkManager().updateModalSettings({title:'LuigiModal', size:'l'});
+   */
+  updateModalSettings(updatedModalSettings = {}) {
+    const message = {
+      msg: 'luigi.navigation.updateModalSettings',
+      updatedModalSettings
+    };
+    helpers.sendPostMessageToLuigiCore(message);
+  }
+
   /**
    * Opens a view in a split view. You can specify the split view's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the split view is `40`, which means 40% height of the split view.
    * @memberof linkManager

diff --git a/core/src/Modal.html b/core/src/Modal.html
@@ -259,6 +259,16 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
     if ('luigi.close-modal' === e.data.msg) {
       dispatch('close', { type: 'modal' });
     }
+
+    if ('luigi.navigation.updateModalSettings' === e.data.msg) {
+      if (e.data.updatedModalSettings.title || e.data.updatedModalSettings.title === '') {
+        settings.title = e.data.updatedModalSettings.title;
+      }
+      if (e.data.updatedModalSettings.size) {
+        settings.size = e.data.updatedModalSettings.size;
+        await setModalSize();
+      }
+    }
   };
 
   const backdropStateChanged = event => {

diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
@@ -498,6 +498,22 @@ Opens a view in a modal. You can specify the modal's title and size. If you don'
 LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
 ```
 
+#### updateModalSettings
+
+Update current title and size of a modal.
+
+##### Parameters
+
+-   `updatedModalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** possibility to update the active modal. (optional, default `{}`)
+    -   `updatedModalSettings.title` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** update the `title` of the active modal.
+    -   `updatedModalSettings.size` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** update the `size` of the active modal.
+
+##### Examples
+
+```javascript
+LuigiClient.linkManager().updateModalSettings({title:'LuigiModal', size:'l'});
+```
+
 #### openAsSplitView
 
 -   **See: [splitView](#splitview) for further documentation about the returned instance**