Expand all Models at once

[shrirambalaji]

Content & configuration

Swagger-UI configuration options:

    SwaggerUI({
      spec,
      domNode: swaggerRef.current,
      defaultModelsExpandDepth: 10,
      defaultModelExpandDepth: 10,
      docExpansion: 'list',
      plugins: swaggerPlugins,
      showExtensions: true,
    });

Is your feature request related to a problem?

Users have to expand each schema under the "Model" section individually.

Describe the solution you'd like

Having an "Expand All" button to expand all schemas by default.

Describe alternatives you've considered

The defaultModelsExpandDepth seems to only work at the top level to expand the models, and doesn't seem to have any effect on expanding the individual models itself. The only significant change I see is when I set it to 0 the Models section is collapsed, and -1 hides it.

[hkosova]

Workaround (sort of): open the browser console and run:

document.querySelectorAll("#swagger-ui section.models button.model-box-control").forEach(btn => btn.click())

This will "click" all models in the "Models" section to expand them.

[oshliaer]

If I need to open all trees for the default UI

  (() => {
    const i = setInterval(() => {
      [...document.querySelectorAll('[aria-expanded="false"]')].map((el) =>
        el.click()
      ).length || clearInterval(i);
    }, 1000);
  })();

This can expand very deep trees.

[leafOfTree]

Workaround (sort of): open the browser console and run:

document.querySelectorAll("#swagger-ui section.models button.model-box-control").forEach(btn => btn.click())

This will "click" all models in the "Models" section to expand them.

You can put it in onComplete if you want to expand all models when Swagger UI has finished rendering a newly provided definition.

SwaggerUI({
    // ...
    onComplete: () => {
      document.querySelectorAll("#swagger-ui section.models button.model-box-control").forEach(btn => btn.click())
    }

})

[zlr-raja]

Expend all tabs Add the below key: value docExpansion: 'full',

[DarkNami]

I wrote a help function to nested expand schema.

SwaggerUI({
    // ...
    onComplete: () => {
        document.addEventListener('click', (event) => {
            const target = event.target;
            const expandNested = (rootNode) => {
                if (!(rootNode instanceof Element)) return;
                const i = setInterval(() => {
                    const btns = rootNode.querySelectorAll('button.model-box-control[aria-expanded="false"]');
                    if (btns.length) {
                        btns.forEach((el) => el.click());
                    } else {
                        clearInterval(i);
                    }
                }, 50);
            };
            if (event.shiftKey && target.matches('li.tabitem:last-child > button.tablinks')) {
                expandNested(target.closest('div.model-example')?.querySelector('div[data-name="modelPanel"]'));
            }
            if (event.shiftKey && target.matches('span.model-toggle')) {
                if (!target.classList.contains('collapsed')) expandNested(target.closest('span.model'));
            }
        });
        document.querySelectorAll('section.models button.model-box-control').forEach((btn) => btn.click());
    }
});

[raimondsL]

I was trying to create a logic in UI, but f* it. Ended up with a loop to expand sections continuously:

(() => {
  const i = setInterval(() => {
    [...document.querySelectorAll('.opblock.is-open button[aria-expanded="false"]')].map(el => el.click())
  }, 300)
})()

Or add event to F2 key:

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 113) {
        const i = setInterval(() => {
            [...document.querySelectorAll('.opblock.is-open button[aria-expanded="false"]')].map(el => el.click()).length || clearInterval(i)
        }, 100)
    }
})