Examples sorted by attribute length?

[jaydreyer]

Hi! Is there a way to change how examples appear? For instance, they seem to show up now based on the length of the property name.

We are using the latest version of swagger-ui react component, 4.1, I believe. I assume there's a configuration somewhere but I haven't found it yet. It's interesting, but a strange way to display it.

[hkosova]

Can you please post your current Swagger UI config and your OpenAPI YAML/JSON file (or a minimal example)?

[jaydreyer]

Here's a small sample spec. Not the best example, but it is doing the sorting on response bodies and PUT/POST bodies.

info:
  title: cars-v1
  description: An API to manage a database of Cars and Car Owners.
  version: 1.0.0
servers:
  - url: 'https://server.com/cars/v1'
    description: External - stage

security:
  - query_key: []
  - header_key: []
paths:
  /:
    get:
      tags:
        - Cars
      summary: Get cars
      description: Gets a collection of cars from the server
      parameters:
        - $ref: '#/components/parameters/field_groups'
        - $ref: '#/components/parameters/page'
        - $ref: '#/components/parameters/per_page'
        - $ref: '#/components/parameters/make'
        - $ref: '#/components/parameters/model'
        - $ref: '#/components/parameters/color'
        - $ref: '#/components/parameters/owner_id'
      responses:
        '200':
          description: Success - A collection of cars
          headers:
            Link:
              description: 'Page link values delimited by a comma. Possible rel values are next, last, first, prev.'
              schema:
                type: string
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/car'
              examples:
                example-1:
                  $ref: '#/components/examples/GetCars'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '200'
      x-expected_tps: '100'
      operationId: GetCars
    post:
      tags:
        - Cars
      summary: Create car
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      description: Creates a new car in the collection
      parameters: []
      requestBody:
        description: Fields below are accepted for car creation
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/update_car'
            examples:
              example-1:
                value:
                  owner_ids:
                    - ef7d274e-d5e5-11e7-9296-cec278b6b50a
                  make: Honda
                  model: Civic
                  color: Silver
        required: true
      responses:
        '201':
          description: Successful response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/car'
        '400':
          description: Bad Request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error400'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '201'
      x-expected_tps: '100'
      x-codegen-request-body-name: car
      operationId: CreateCar
    x-data_classification: PUBLIC
  '/{car_id}':
    get:
      tags:
        - Cars
      summary: Get car by ID
      description: Gets a single car from the collection by ID
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      parameters:
        - name: car_id
          in: path
          description: ID for thie car
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Success - An instance of a car
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/car'
        '400':
          description: Bad Request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error400'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '404':
          description: Not Found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error404'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '200'
      x-expected_tps: '100'
      operationId: GetCarByID
    put:
      tags:
        - Cars
      summary: Update car by ID
      description: Updates a single car by ID
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      parameters:
        - name: car_id
          in: path
          description: ID for thie car
          required: true
          schema:
            type: string
      requestBody:
        description: Fields below are mutable
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/update_car'
        required: true
      responses:
        '200':
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/car'
        '400':
          description: Bad Request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error400'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '404':
          description: Not Found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error404'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '200'
      x-expected_tps: '100'
      x-codegen-request-body-name: car
      operationId: UpdateCarByID
    delete:
      tags:
        - Cars
      summary: Delete car by ID
      description: Deletes a car from the collection
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      parameters:
        - name: car_id
          in: path
          description: ID for thie car
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Success - Car deleted
          content: {}
        '400':
          description: Bad Request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error400'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '404':
          description: Not Found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error404'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '204'
      x-expected_tps: '100'
      operationId: DeleteCarByID
    x-data_classification: PUBLIC
  /bulk_car_updates:
    post:
      tags:
        - Cars
      summary: Mass update cars
      description: Updates multiple cars in the collection. The operation returns all attempted transactions listing the status - success or failure.
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      parameters: []
      requestBody:
        description: The fields bellow are mutable (except car_id) for each car in the array
        content:
          application/json:
            schema:
              type: array
              items:
                $ref: '#/components/schemas/car'
        required: true
      responses:
        '201':
          description: Successful response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/mass_update_cars'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '201'
      x-expected_tps: '100'
      x-codegen-request-body-name: car array
      operationId: BulkUpdateCars
    x-data_classification: PUBLIC
  /owners:
    get:
      tags:
        - Owners
      summary: Get owners
      description: |
        Gets a collection of owners from the server.
      parameters:
        - $ref: '#/components/parameters/page'
        - $ref: '#/components/parameters/per_page'
        - $ref: '#/components/parameters/make'
        - $ref: '#/components/parameters/model'
        - $ref: '#/components/parameters/color'
        - name: field_groups
          in: query
          description: The field groups to return
          schema:
            type: string
      responses:
        '200':
          description: Success - A collection of owners of cars
          headers:
            Link:
              description: 'Page link values delimited by a comma. Possible rel values are next, last, first, prev.'
              schema:
                type: string
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/owner'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '200'
      x-expected_tps: '100'
      operationId: GetOwners
    post:
      tags:
        - Owners
      summary: Create owner
      description: Creates a new owner in the collection
      security:
        - bearer_auth: []
          query_key: []
        - bearer_auth: []
          header_key: []
      parameters: []
      requestBody:
        description: Fields below are accepted for owner creation
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/update_owner'
            examples:
              example-1:
                value:
                  first_name: John
                  last_name: Doe
                  address: '33 South 6th St, Minneapolis, MN 55402'
        required: true
      responses:
        '201':
          description: Successful response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/owner'
        '400':
          description: Bad Request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error400'
        '401':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error401'
        '403':
          description: Unauthorized
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error403'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '201'
      x-expected_tps: '100'
      x-codegen-request-body-name: owner
      operationId: CreateOwner
    x-data_classification: PUBLIC
  '/owners/{owner_id}':
    get:
      tags:
        - Owners
      summary: Get owner by ID
      description: Gets a single owner from the collection by ID
      parameters:
        - name: owner_id
          in: path
          description: ID for the owner
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Success - An instance of a owner
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/owner'
        '404':
          description: Not Found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error404'
        '405':
          description: Method Not Allowed
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error405'
        '500':
          description: Internal Server Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error500'
        '503':
          description: Service Unavailable
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error503'
      x-incident_priority: P4
      x-response_time_sla: 500ms
      x-success_http_code: '200'
      x-expected_tps: '100'
      operationId: GetOwnerByID
    x-data_classification: PUBLIC
    parameters:
      - schema:
          type: string
        name: owner_id
        in: path
        required: true
components:
  schemas:
    car:
      type: object
      properties:
        car_id:
          type: string
          description: Unique identifier for the car
          format: uuid
          example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        owner_ids:
          type: array
          description: An array of owner_ids for the car
          items:
            type: string
            description: Unique identifier for the owner of the car
            format: uuid
            example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        make:
          type: string
          description: The manufacturer of the car
          example: Honda
        model:
          type: string
          description: The model of the car
          example: Civic
        color:
          type: string
          description: The color of the car
          example: Silver
      description: A car object
    car_color_only:
      type: object
      properties:
        car_id:
          type: string
          description: Unique identifier for the car
          format: uuid
          example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        color:
          type: string
          description: The color of the car
          example: Silver
      description: A car object with color only
    update_cars:
      type: array
      description: An array of updatable cars
      items:
        $ref: '#/components/schemas/update_car'
    update_car:
      type: object
      properties:
        owner_ids:
          type: array
          description: An array of owner_ids for the car
          items:
            type: string
            description: Unique identifier for the owner of the car
            format: uuid
            example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        make:
          type: string
          description: The manufacturer of the car
          example: Honda
        model:
          type: string
          description: The model of the car
          example: Civic
        color:
          type: string
          description: The color of the car
          example: Silver
      description: The updatable car object fields
    mass_update_cars:
      type: object
      properties:
        transaction_id:
          type: string
          description: uuid v4 guid
          example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        updated_cars:
          type: object
      description: An object containing cars to be mass updated
    bulk_car_response_item:
      type: object
      properties:
        car_id:
          type: string
          description: Unique identifier for the car
          format: uuid
          example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        owner_ids:
          type: array
          description: An array of owner_ids for the car
          items:
            type: string
            description: Unique identifier for the owner of the car
            format: uuid
            example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        make:
          type: string
          description: The manufacturer of the car
          example: Honda
        model:
          type: string
          description: The model of the car
          example: Civic
        color:
          type: string
          description: The color of the car
          example: Silver
        status:
          type: string
          description: Success/fail of the car update
          example: Success
        status_description:
          type: string
          description: The description for the success/fail
          example: Car successfully updated
      description: An object containing the results of the mass update
    owner:
      type: object
      properties:
        owner_id:
          type: string
          description: Unique identifier for the owner of the car
          format: uuid
          example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
        first_name:
          type: string
          description: First name of the owner
          example: John
        last_name:
          type: string
          description: Last name of the owner
          example: Doe
        address:
          type: string
          description: Address of the owner
          example: '33 South 6th St, Minneapolis, MN 55402'
      description: A owner object
    update_owner:
      type: object
      properties:
        first_name:
          type: string
          description: First name of the owner
          example: John
        last_name:
          type: string
          description: Last name of the owner
          example: Doe
        address:
          type: string
          description: Address of the owner
          example: '33 South 6th St, Minneapolis, MN 55402'
      description: A updatable owner object
    Error400:
      type: object
      properties:
        message:
          type: string
          description: Invalid Request
          example: Bad Request
    Error401:
      type: object
      properties:
        message:
          type: string
          description: Authentication credentials were missing or incorrect
          example: Unauthorized
    Error403:
      type: object
      properties:
        message:
          type: string
          description: Valid request that was refused
          example: Forbidden
    Error404:
      type: object
      properties:
        message:
          type: string
          description: URL requested is invalid or the resource requested does not exist
          example: Not Found
    Error405:
      type: object
      properties:
        message:
          type: string
          description: Request made with incorrect method e.g. POST when only GET is allowed
          example: Method Not Allowed
    Error406:
      type: object
      properties:
        message:
          type: string
          description: Returned when the server can only respond with entities that are not acceptable according to the accept headers of the request
          example: Not Acceptable
    Error413:
      type: object
      properties:
        message:
          type: string
          description: The request payload is too large to process
          example: Payload Too Large
    Error415:
      type: object
      properties:
        message:
          type: string
          description: The format of the request (usually a PUT or POST body) is not supported
          example: Unsupported Media Type
    Error422:
      type: object
      properties:
        message:
          type: string
          description: The server understands what you're trying to do; and it understands the data that you're submitting; it simply won't let that data be processed
          example: Unprocessable Entity
    Error500:
      type: object
      properties:
        message:
          type: string
          description: Something went horribly wrong and we were not smart enough to provide more details
          example: Internal Server Error
    Error503:
      type: object
      properties:
        message:
          type: string
          description: Servers are offline for maintenance or went down under load
          example: Service Unavailable
    Error504:
      type: object
      properties:
        message:
          type: string
          description: Connection is throttled to the gateway with tcp connection timeouts
          example: Gateway Timeout
    Error505:
      type: object
      properties:
        message:
          type: string
          description: HTTP when should HTTPS or vice versa
          example: HTTP Version Not Supported
  securitySchemes:
    query_key:
      type: apiKey
      in: query
      name: key
    header_key:
      type: apiKey
      in: header
      name: x-api-key
    bearer_auth:
      type: http
      scheme: bearer
    nuid_oauth:
      type: oauth2
      flows:
        implicit:
          authorizationUrl: 'https://api.pf.com'
          scopes: {}
    openid_2.0_connect_stage:
      type: oauth2
      flows:
        implicit:
          authorizationUrl: 'https://oauth.iam.perf.com/openid/connect/v1/userinfo'
          scopes: {}
    openid_2.0_connect_prod:
      type: oauth2
      flows:
        implicit:
          authorizationUrl: 'https://oauth.iam.com/openid/connect/v1/userinfo'
          scopes: {}
  parameters:
    page:
      name: page
      in: query
      required: false
      schema:
        type: integer
        default: 1
      description: Pagination - Which page of results currently returned
    per_page:
      name: per_page
      in: query
      required: false
      schema:
        type: integer
        default: 10
      description: 'Pagination - How many per page to return (default: 10)'
    make:
      name: make
      in: query
      required: false
      schema:
        type: string
        example: Honda
      description: The make of the car
    model:
      name: model
      in: query
      required: false
      schema:
        type: string
        example: Civic
      description: The model of the car
    color:
      name: color
      in: query
      required: false
      schema:
        type: string
        example: Silver
      description: The color of the car
    key:
      name: key
      in: query
      required: true
      schema:
        type: string
      description: The consumer's valid API key
    owner_id:
      name: owner_id
      in: query
      required: false
      schema:
        type: string
        format: uuid
        example: ef7d274e-d5e5-11e7-9296-cec278b6b50a
      description: The id of the owner of the car
    field_groups:
      name: field_groups
      in: query
      required: false
      schema:
        type: string
        enum:
          - color_only
      description: 'Partial response bodies available for following field_groups:**color_only**: returns car_id & color fields```[  {    "car_id":"ef7d274e-d5e5-11e7-9296-cec278b6b50a",    "color":"silver"  }]'
  examples:
    GetCars:
      value:
        - car_id: d1d3dfe6-5602-4172-b86e-e4771e1efef0
          owner_ids:
            - ef7d274e-d5e5-11e7-9296-cec278b6b50a
          make: Honda
          model: Civic
          color: Silver
tags:
  - name: Cars
    description: All operations related to cars
  - name: Owners
    description: All operations related to car owners

I don't believe we have much of a swaggerUI config, other than what is passed when we call it: <SwaggerUi spec={content} docExpansion="list" />

[jaydreyer]

OK. I think I have figured out enough to determine this is happening on our end when we upload the specs to our DB. For some reason the attributes all get organized this way on conversion, and I have no idea why. But, I can verify that's the way they are downloaded into our app, and thus why they appear the way they do. Closing.