Sort API methods in Swagger-UI

Question

I cannot find any working example, how to achieve the following: I want my API methods in the Swagger-UI sorted either by methods (GET-POST-PUT-DELETE) OR/AND alphabetically.

So far, all methods are displayed in a random order, even not in the order given my source code.

I use Jax-RS + Jersey 1.

Sorting using the position attribute of @ApiOperation is not an option for me, as there are too many methods and the API is still extending, so I would need to update all if there is a new one.

Any hints?

Solution 1

Update for Swagger UI 2.1.0+: The sorter parameter has been split into two parameters, as noted in Fix 1040, Fix 1280:

apisSorter

Apply a sort to the API/tags list. It can be 'alpha' (sort by name) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.

operationsSorter

Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.

So you'll want to update sorter to apisSorter to sort the API list alphabetically, and/or operationsSorter to sort the operations list of each API. The pet shop demo has updated to apisSorter, as shown below:

Example: (working demo, sorted alphabetically)

window.swaggerUi = new SwaggerUi({

...

apisSorter : "alpha"
});

For Swagger UI versions older than 2.1.0:

The sorter parameter is still relevant for older versions of Swagger UI:

You can use the sorter parameter when instantiating SwaggerUi. This happens in the javascript on the Swagger-Ui index.html. From the documentation:

sorter apply a sort to the API list. It can be 'alpha' (sort paths alphanumerically) or 'method' (sort operations by HTTP method). Default is the order returned by the server unchanged.

Example:

window.swaggerUi = new SwaggerUi({

...

sorter : "alpha"
});

Solution 2

The accepted answer is a bit outdated. In newer versions it is done by:

window.swaggerUi = new SwaggerUi({

...

apisSorter: "alpha", // can also be a function
operationsSorter : "method", // can also be 'alpha' or a function
});

Solution 3

I had the same issue and I fixed it like this

window.swaggerUi = new SwaggerUi({
    apisSorter: "alpha", 
    operationsSorter: function (a, b) { 
    var order = { 'get': '0', 'post': '1', 'put': '2', 'delete': '3' }; 
    return order[a.method].localeCompare(order[b.method]);    
  },
});

Solution 4

Update for Swagger 3.18.3

 window.ui = SwaggerUIBundle({
           ...
            operationsSorter: function (a, b) {
                var order = {'get': '0', 'post': '1', 'put': '2', 'delete': '3'};
                return order[a.get("method")].localeCompare(order[b.get("method")]);
            },
           ...
 });

Solution 5

Update for 3.x

As also mentioned in comments previously, apisSorter seems to have been renamed to tagsSorter, see Swagger configuration documentation.

window.ui = SwaggerUIBundle({
  ...
  apisSorter: "alpha", /** Seems to be renamed to tagsSorter */
  tagsSorter: "alpha",
  operationsSorter: "alpha"
  ...
});

View more solutions