mendix · Karuna-Mendix · Sep 10, 2026
diff --git a/assets/js/expandable-table.js b/assets/js/expandable-table.js
@@ -0,0 +1,46 @@
+(function () {
+  'use strict';
+
+  function init() {
+    document.querySelectorAll('.expandable-table-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var wrap = btn.closest('.expandable-table-wrap');
+        var modal = wrap.nextElementSibling;
+        openModal(wrap, modal);
+      });
+    });
+  }
+
+  function openModal(wrap, modal) {
+    var body = modal.querySelector('.expandable-table-body');
+    body.innerHTML = '';
+    body.appendChild(wrap.querySelector('.expandable-table-inner').cloneNode(true));
+
+    modal.removeAttribute('hidden');
+    document.body.classList.add('expandable-table-open');
+
+    var closeBtn = modal.querySelector('.expandable-table-close');
+    closeBtn.focus();
+
+    function close() {
+      modal.setAttribute('hidden', '');
+      document.body.classList.remove('expandable-table-open');
+      btn.focus();
+      modal.querySelector('.expandable-table-overlay').removeEventListener('click', close);
+      document.removeEventListener('keydown', onKey);
+    }
+
+    var btn = wrap.querySelector('.expandable-table-btn');
+    closeBtn.onclick = close;
+    modal.querySelector('.expandable-table-overlay').addEventListener('click', close);
+
+    function onKey(e) { if (e.key === 'Escape') close(); }
+    document.addEventListener('keydown', onKey);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -688,4 +688,120 @@ img.ToC-icon{
         overflow-y: auto;
         padding-top: 1.25rem;
     }
+}
+
+// Expandable table modal
+
+.expandable-table-wrap {
+    margin-bottom: $spacer;
+
+    .expandable-table-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 0.25rem;
+    }
+
+    .expandable-table-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border: 1px solid $gray-border;
+        color: $link-color;
+        background: transparent;
+        border-radius: 4px;
+        white-space: nowrap;
+
+        &:hover {
+            background: $gray-100;
+            border-color: $link-color;
+        }
+
+        &:focus {
+            outline: 2px solid $link-color;
+            outline-offset: 2px;
+        }
+    }
+
+    .expandable-table-inner {
+        overflow-x: auto;
+        border: 1px solid $gray-border;
+        border-radius: 4px;
+    }
+}
+
+body.expandable-table-open {
+    overflow: hidden;
+}
+
+.expandable-table-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &[hidden] { display: none; }
+
+    .expandable-table-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .expandable-table-dialog {
+        position: relative;
+        z-index: 1;
+        width: 90%;
+        max-width: 1100px;
+        max-height: 85vh;
+        background: white;
+        border-radius: 6px;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .expandable-table-header {
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid $gray-border;
+        background: $gray-100;
+        display: flex;
+        justify-content: flex-end;
+
+        .expandable-table-close {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-size: 0.875rem;
+
+            &:focus {
+                outline: 2px solid $link-color;
+                outline-offset: 2px;
+            }
+        }
+    }
+
+    .expandable-table-body {
+        overflow: auto;
+        padding: 1.25rem;
+
+        .expandable-table-inner {
+            border: none;
+            border-radius: 0;
+            overflow: visible;
+        }
+
+        table { width: 100%; margin-bottom: 0; }
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .expandable-table-modal .expandable-table-dialog {
+        width: 95%;
+        max-height: 90vh;
+    }
 }
diff --git a/content/en/docs/marketplace/platform-supported-content/modules/oidc.md b/content/en/docs/marketplace/platform-supported-content/modules/oidc.md
@@ -201,6 +201,8 @@ If your app is already developed using Mendix 9 or above, but uses the community
 
 This section provides an overview of updates for the OIDC SSO module across different versions. It includes new dependencies, snippet replacements, and microflow renaming to ensure a smooth transition while migrating to higher module versions.
 
+{{% expandable-table %}}
+
 | Mendix Version | OIDC SSO Module Version | Important Migration Changes | Additional Information |
 | --- | --- | --- | --- |
 | 10.24.0 and above | 4.7.0 | - | A new constant (`EnableAudienceValidation`) has been introduced for API security. Because it is enabled by default, you need to configure the **Resource path** and **Expected audience** value. You can disable audience validation, but Mendix does not recommend this. |
@@ -222,6 +224,8 @@ This section provides an overview of updates for the OIDC SSO module across diff
 | 9.24.2 and above | 3.0.0 (migrating to 3.0.0 and above) | Include [UserCommons](https://marketplace.mendix.com/link/component/223053) module as a dependency. | New UserCommons module |
 | | | Set `OIDC.Startup` microflow as part of the after-startup microflow. | Assign UserProvisioning for existing IdP configurations. |
 
+{{% /expandable-table %}}
+
 ## Design-time App Configuration{#app-configuration}
 
 This section shows you how to configure your app to use OIDC for SSO.
@@ -234,11 +238,15 @@ If you are using OIDC module version 3.1.0 and above, you need to configure your
 
 Ensure that you have allocated the following user roles to the OIDC module and UserCommons (in version 3.0.0 and above) roles:
 
+{{% expandable-table %}}
+
 | User Role | OIDC Module Role |
 | --- | --- |
 | Administrator | OIDC.Administrator, UserCommons.Administrator |
 | User | OIDC.User |
 
+{{% /expandable-table %}}
+
 {{< figure src="/attachments/appstore/platform-supported-content/modules/oidc/user-roles.png" alt="User roles tab showing Administrator and User roles with their assigned module roles" >}}
 
 ### End User Login When Using Single or Multiple IdPs
@@ -620,6 +628,8 @@ You can set up custom user provisioning by setting constants when you deploy you
 
 You can set up custom user provisioning by setting the following constants. You can set default values when you build your app, but you can override these in the app's environment.
 
+{{% expandable-table %}}
+
 | Constant | Use | Notes | Example |
 | --- | --- | --- | --- |
 | `CustomUserEntity` | a custom user entity | in the form `modulename.entityname` – a specialization of `System.User` | `Administration.Account` |
@@ -632,6 +642,8 @@ You can set up custom user provisioning by setting the following constants. You
 | `CustomUserProvisioning` | a custom microflow to use for user provisioning | *optional* – in the form `modulename.microflowname` – the microflow name must begin with the string `UC_CustomProvisioning` | `Mymodule.UC_CustomProvisioning` |
 | `DisableMxAdmin` | deactivates Mx admin | *optional* | `True` |
 
+{{% /expandable-table %}}
+
 {{% alert color="info" %}}
 You may have a requirement that users log in to your application only via SSO. However, when you deploy your app on the Mendix Cloud, the platform may still create an MxAdmin user with a local password. From version 2.1.0 of the UserCommons module, if the flag for the `DisableMxAdmin` constant is set to `True`, the MxAdmin user will be deactivated via the startup microflow `ASU_UserCommons_StartUp`.
 {{% /alert %}}
@@ -687,12 +699,16 @@ If the standard configuration meets your needs and your application does not hav
 
 In the default configuration, the custom user entity is set as `Administration.Account`, the principal attribute is set as `Name`, and the default attribute mapping is provided.
 
+{{% expandable-table %}}
+
 |  IdP Attribute       | Configured Entity Attribute |
 | -------------------- | --------------------------- |
 | email                | Email                       |
 | name                 | FullName                    |
 | sub                  | Name                        |
 
+{{% /expandable-table %}}
+
 ##### Modifying Default Attribute Mapping{#modify-default}
 
 You may need a different or custom attribute mapping, for example, if you are configuring OIDC SSO and SCIM together and need a common identifier. For more information, see the [User Identifiers in the OIDC and SCIM Protocols](#user-identifiers-in-the-oidc-and-scim-protocols) section below.
@@ -756,12 +772,16 @@ The section below shows the methods to configure user provisioning when using OI
 
 By default, the `CUSTOM_UserProvisioning` microflow in the **USE_ME** > **1. Configuration** folder of the OIDC module uses the `OIDC_CustomUserParsing_Standard` microflow. This applies to the following mapping:
 
+{{% expandable-table %}}
+
 | ID-token Provided by your IdP | Attribute of `Administration.Account` Object |
 | ----------------------------- | -----------------------------                | 
 | sub                           | Name                                         |
 | name                          | Fullname                                     |
 | email                         | Email                                        |
 
+{{% /expandable-table %}}
+
 {{% alert color="warning" %}}
 Do not change the `UserProvisioning_StandardOIDC` microflow. This may cause problems if you upgrade to a newer version of the OIDC SSO module. Apply customizations to the `CUSTOM_UserProvisioning` microflow only.
 {{% /alert %}}

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -74,8 +74,9 @@
   {{ $jsSearch = resources.Get "js/offline-search.js" -}}
 {{ end -}}
 
-<!--DB: Anchor, LodashDebouncd, Throttle, and ProgressTracking are custom-->
-{{ $jsArray := slice $jsBs $jsBase $jsAnchor $jsLodashDebouncd $jsLodashThrottle $jsProgressTracking $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}}
+{{ $jsExpandableTable := resources.Get "js/expandable-table.js" }}
+<!--DB: Anchor, LodashDebouncd, Throttle, ProgressTracking, and ExpandableTable are custom-->
+{{ $jsArray := slice $jsBs $jsBase $jsAnchor $jsLodashDebouncd $jsLodashThrottle $jsProgressTracking $jsExpandableTable $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}}
 
 {{ if .Page.Store.Get "hasmermaid" -}}
 {{- partial "scripts/mermaid.html" . -}}

diff --git a/layouts/shortcodes/expandable-table.html b/layouts/shortcodes/expandable-table.html
@@ -0,0 +1,27 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+<div class="expandable-table-wrap">
+    <div class="expandable-table-toolbar">
+        <button type="button" class="btn btn-sm expandable-table-btn" aria-label="Expand table">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/></svg>
+            Expand Table
+        </button>
+    </div>
+    <div class="expandable-table-inner">
+        {{ .Inner | markdownify | safeHTML }}
+    </div>
+</div>
+
+<div class="expandable-table-modal" role="dialog" aria-modal="true" aria-label="Expanded table view" hidden>
+    <div class="expandable-table-overlay"></div>
+    <div class="expandable-table-dialog">
+        <div class="expandable-table-header">
+            <button type="button" class="btn btn-sm btn-outline-secondary expandable-table-close" aria-label="Collapse table">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/></svg>
+                Collapse Table
+            </button>
+        </div>
+        <div class="expandable-table-body">
+            {{/* Table content is cloned here by expandable-table.js */}}
+        </div>
+    </div>
+</div>