I'm using Swagger UI and want to remove the API definition URL (link to the YAML file) displayed under the title section as highlighted on the picture. Can this be done by customizing the Swagger UI index.html page?
Option 1: Hide using CSS
<!-- index.html -->
<style>
...
.swagger-ui .info hgroup.main a {
display: none
}
</style>
Option 2: Hide using JavaScript (v.3.13.0+)
Swagger UI 3.x uses the plugin system to control the rendering. You can define a custom plugin that disables the InfoUrl component - this will prevent the API definition link from being rendered. This approach works in Swagger UI 3.13.0 and later.
// index.html
window.onload = function() {
// Custom plugin to hide the API definition URL
const HideInfoUrlPartsPlugin = () => {
return {
wrapComponents: {
InfoUrl: () => () => null
}
}
}
// Build a system
const ui = SwaggerUIBundle({
...
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
HideInfoUrlPartsPlugin // <---- Apply the plugin
],
...
})
Source
Related
I would like to disable Try it Out button in the API documentation. I have tried "tryItOut": false in the parameter and the configuration. Furthermore, I'm using swagger 2.0 which has 'Try it out' button is enabled by default and in 3.0 it is disabled by default. So, there should be option to configure it. How to disable Try it out button from the Swagger UI?
Set supportedSubmitMethods to an empty array [] in your Swagger UI configuration. This config option is supported in v. 3.10.0+.
const ui = SwaggerUIBundle({
"dom_id": "#swagger-ui",
url: "https://path/to/your/api.yaml",
...
supportedSubmitMethods: [] // <--------
})
This config can also disable "Try it out" selectively for specific HTTP methods. For example, supportedSubmitMethods: ["get", "head"] keeps "Try it out" only for GET and HEAD, but disables it for POST, PUT, PATCH, DELETE and other methods.
From the GitHub repository comments, the bellow code works to me
const DisableTryItOutPlugin = function() {
return {
statePlugins: {
spec: {
wrapSelectors: {
allowTryItOutFor: () => () => false
}
}
}
}
}
// elsewhere, when you call Swagger-UI...
SwaggerUI({
plugins: [
DisableTryItOutPlugin
]
})
Reference: https://github.com/swagger-api/swagger-ui/issues/3725#issuecomment-334899276
In Swagger UI Options, try this for .NET 6 or 7:
app.UseSwaggerUI(options =>
{
options.SwaggerEndpoint("/swagger/v1/swagger.json", "Nrp API");
options.EnableTryItOutByDefault();
});
My ruby on rails app's CSP was working perfectly until I added webpacker. Now I get this:
Content Security Policy: The page’s settings observed the loading of a resource at inline (“style-src”). A CSP report is being sent. injectStylesIntoStyleTag.js:117
Content Security Policy: The page’s settings observed the loading of a resource at inline (“style-src”). A CSP report is being sent. injectStylesIntoStyleTag.js:190
The code in question looks like this:
function insertStyleElement(options) {
var style = document.createElement('style');
...
if (typeof options.insert === 'function') {
options.insert(style);
} else {
var target = getTarget(options.insert || 'head');
if (!target) {
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
}
target.appendChild(style); //LINE 117//
}
return style;
}
And:
function applyToTag(style, options, obj) {
var css = obj.css;
...
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
while (style.firstChild) {
style.removeChild(style.firstChild);
}
style.appendChild(document.createTextNode(css)); //LINE 190//
}
}
How do I add a nonce? This says to add __webpack_nonce__ = 'random'; to my entry file ( in this case app/javascript/packs/application.js), yet adding that nonce to my csp file has no effect on the style-src violation. Which in this case, looks like this: config.style_src :self, 'https://fonts.googleapis.com', 'nonce-random'
I somehow wasn't able to find the injected styles in source, but the answer was to open the page in Chrome (I was using Firefox) and copy the sha-256 hash from the console log into the app's CSP.
I am trying to run the Saxon CE example on the IBM Developerworks
It raises this error:
SaxonCE.XSLT20Processor 23:04:41.615
SEVERE: XPathException in invokeTransform: Either a source document or an initial template must be specified
http://localhost:8984/static/SaxonceDebug/7FFD07C49946B3F4B1DE49E72F7E85FA.cache.html
Line 876
I can run other Saxon CE examples. Is this some API change?
As the error suggest you need to supply a source document or an initial template.
Something like:
<script>
var onSaxonLoad = function() {
Saxon.run( {
stylesheet: "books.xsl",
source: "books.xml"
});
or
<script type="text/javascript"> var onSaxonLoad = function() { proc = Saxon.run( {
stylesheet: 'scripts/stylesheet.xsl', initialTemplate: 'main' } ); };
</script>
Take a look at:
http://www.saxonica.com/ce/user-doc/1.1/index.html#!starting/running
I am trying to make some useful directives with jQueryUI widgets for my AngularJS base application.
One of them works on "select" element and am ok with directives but only thing do not understand is this one:
When select list is populated from ajax request, how to tell to apply jqueryui widget when data is populated? Suppose it is with $watch but not sure how.
Edit:
In example I am trying to implement directive for the multiselect plugin.
Please note that I am simulating server reponse but putting everything in timeout.
Here is a code on plunker
You need to be $watching changes to the items list, then calling refresh on the multiselect plugin... Here is a plunk that shows the solution
angular.module('myui', [])
.directive('qnMultiselect', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr) {
//set up the plugin.
elem.multiselect({ allowClear: false });
//get the source of the ngOptions
var parts = attr.ngOptions.split(' ');
var source = parts[parts.length - 1];
//watch the options source and refresh the plugin.
scope.$watch(source, function(value) {
elem.multiselect('refresh');
});
}
};
});
In my jQuery Mobile application, I am creating some dynamic pages.Here is the code
function createPages()
{
$header = "<header data-role='header'><h1>Dynamically created pages</h1></header>";
$content = "<div data-role='content' class='content'><p>This is a dynamically generated page</p></div>";
$footer = "<div data-role='footer'><h1>Audimax</h1></footer>";
for($i=1;$i<=5;$i++)
{
$section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>";
$new_page = $($section+$header+$content+$footer+"</section>");
$new_page.appendTo($.mobile.pageContainer);
}
}
The pages are being created properly and being added to the DOM and I can navigate to them. The problem is that I simply can,t attach any event handlers to the dynamic pages.I am using ids of the dynamic pages with jquery "live" but to no avail.Any help is greatly appreciated.
Why not bind the event handlers when you add the new pseudo-page to the DOM?
function pageShowFunction () {
console.log(this.id + ' has triggered the `pageShow` event!');
}
function createPages()
{
$header = "...";
$content = "...";
$footer = "...";
for($i=1;$i<=5;$i++)
{
$section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>";
$new_page = $($section+$header+$content+$footer+"</section>").bind('pageshow', pageShowFunction);
$new_page.appendTo($.mobile.pageContainer);
}
}
It's normally better to bind directly to elements rather than delegating the event handling.
P.S. You didn't post your event binding code so I can't give any specific comments on that code, perhaps you can update your question with that code if this doesn't fix your issue.
Upgrade the jquery core to 1.7.1 from
http://jquery.com/download/
and then
$(selector).live( eventName, function(){} );
Can be replaced with the following on signature
$(document).on( eventName, selector, function(){} );
It then works for dynamic elements.