springfox
[Question] How can you modify page title or header title of the swagger-ui page
Please take the time to search the repository, if your question has already been asked or answered.
- What version of the library are you using? 2.6.1
What kind of issue is this?
- [ X] Question.
I can't find how to replace the title of the HTML page (which is "Swagger UI") nor the title in the header which is "Swagger".
I'm definiting my swagger properties through the ApiInfo bean
` Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage(MyApiImpl.class.getPackage().getName())) .paths(PathSelectors.any()) .build() // To Hide some path from SwaggerUi, add the ApiIgnore annotation. .ignoredParameterTypes(ApiIgnore.class) .apiInfo(getApiInfo()); }
private ApiInfo getApiInfo() {
return new ApiInfo(
applicationName,
applicationDescription,
applicationVersion,
null,
new Contact(company, infoUrl, contactMail), null, null);
}`
Title is displayed under the header fine but I want to remove the "swagger", the one in the logo__title span in the header and can't find how to do it.
Thanks for your help
I built a small js-Code to achieve this:
function updateTitle()
{
var elements = document.getElementsByClassName('title');
if(elements.length > 0)
{
var content = elements[0].textContent;
document.title = content;
}
else
{
setTimeout(updateTitle, 1000);
}
}
updateTitle();
You just have to add this line in the swagger ui index.html file:
<script src="pathToJs.js"></script>
I know, its not a perfect solution and not really good programming, but it works for me and the users of my api so i'm fine with it.
I'd like this feature aswell.
ApiInfoBuilder().title("MY REST API").description("MY REST API")
Using this changes title of the page, but I'd also like it to change title of the tab inside web browser
I can implement this feature in my spare time if you give me some directions
I will just add one more argument to this thread: In a world of microservices i have 3 or 4 Swagger UI opened in my browser. And all of them are titled the same.
Actually, if you're using express, you can change the title by going to nodes-modules/swagger-ui-express/index.js , and modifying this section :
customSiteTitle = customSiteTitle || 'Swagger UI'
customeSiteTitle
@Mehdi-111 Thank you for the tip but it is customSiteTitle not customeSiteTitle.
We had a Flask application where we ran into this same exact problem. The workaround is to copy the template here, into a top-level directory called templates/, and then change the <title> HTML to what you wish. You also need to update the Flask core configuration to specify that templates directory, something like this:
app = Flask(__name__, \
template_folder='./templates', \
static_folder='./static',
static_url_path='/flask-apispec/static'
)
Hope this helps anyone using Flask-APISpec!
Was the solution to this ever solved? I'm attempting to add a custom logo to Swagger UI but no luck as of yet!
You can add a function to swaggerOptions that modifies the DOM after the swagger UI loads.
https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/#:~:text=oncomplete
for now try this extension in the browser https://chrome.google.com/webstore/detail/change-page-title/ebbfpplpmnoblfmdkbicmakmbbjijdpg
till we find swagger solution
I have been using the swagger-ui docker container in order to update the UI elements using changes to the index.html (CSS and custom client-side scripts) and the swagger-initlializer.js in order to get a custom plugin added into the UI for a menu to choose from the various service JSON files served from a shared NFS drive mounted into the container.
The custom files are added to the docker container (using the swaggerapi/swagger-ui as the base container). Then the reference to the CSS file(s) are added to the index.html file in order to ensure that they are loaded with the page.
There is some $0.02 worth of insight that I had found to solve this particular issue. I would have opted for the Express route since it already supports the implementations that I really needed but the container is far easier to manage for the purpose we have for it.
Setting value to DocumentTitle property changes the web page title.
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "API V1");
c.RoutePrefix = "Swagger";
c.DocumentTitle = "My API Help";
});
Any idea how to do this with springdoc-openapi-starter-webmvc-ui 2.2.0's OpenAPIDefinition v3?
Currently using (this does NOT update DocumentTitle):
@OpenAPIDefinition(info = @Info(title = "...", version = "1.0", description = "...")})
Thanks in advance
