How to embed Swagger UI into a webpage? Basically I want an API endpoint test environment to embed into my webpage.
The answer depends on whether you have a plain web page you edit directly, or use a framework like Node.js or React. For simplicity, I'll assume the former.
Download (or clone) the Swagger UI repository. You'll need the following files from the dist folder:
swagger-ui.css
swagger-ui-bundle.js
swagger-ui-standalone-preset.js
In the <head> section of your web page, add:
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
Inside the <body>, add:
<div id="swagger-ui"></div>
<script src="swagger-ui-bundle.js"></script>
<script src="swagger-ui-standalone-preset.js"></script>
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
})
window.ui = ui
}
</script>
<div id="swagger-ui"></div> is the DOM node inside which Swagger UI will be rendered. The SwaggerUIBundle constructor initializes Swagger UI. This is where you specify your spec URL and other parameters.
Related
I want to add some additional option to my ReDoc. For current implementation I am using json file that is generated from Swagger, and this is added in html page. Example how this is done:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
I use this as referent documentation: https://github.com/Rebilly/ReDoc
How can I add option object in tag and not use ReDoc object? And how can I use vendor extension e.g. x-logo?
In documentation this is set via json file, but my json file is auto generate from Swagger.
You just place the options after the spec-url in the redoc tag like this:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json' YOUR_OPTIONS_HERE></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
in this example on ReDoc repository you can verify it (line 22 at this moment):
https://github.com/Rebilly/ReDoc/blob/master/config/docker/index.tpl.html#L22
Important:
Remember to "kebab-casing the ReDoc options", as an example if your options are:
hideDownloadButton noAutoAuth disableSearch
YOUR_OPTIONS_HERE
should be (after kebab-casing them):
hide-download-button no-auto-auth disable-search
Your body with those options becomes like this:
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json' hide-download-button no-auto-auth disable-search></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
Hope it will be usefull to you.
ReDoc has advanced initialization via Redoc.init so you can download the spec manually and add some postprocessing (e.g. add an x-logo).
You can pass ReDoc options as the second argument to Redoc.init:
<body>
<div id="redoc"></div>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
<script>
fetch('http://petstore.swagger.io/v2/swagger.json')
.then(res => res.json())
.then(spec => {
spec.info['x-logo'] = { url: "link/to/image.png" };
Redoc.init(spec, {
// options go here (e.g. pathInMiddlePanel)
}, document.getElementById('redoc'));
});
</body>
NOTE: This requires Fetch API to be available in browsers so it won't work in IE11.
You can place your options next to spec-url.
Be sure that the version of Redoc you are using, have options you want to use, you can check it by going to the specific version. github.com/Redocly/redoc/tree/vx.x.x.
As a side note features lazy-rendering in available till v1.22.3.
https://github.com/Redocly/redoc#redoc-options-object
You can use all of the following options with standalone version on tag by kebab-casing them, e.g. scrollYOffset becomes scroll-y-offset and expandResponses becomes expand-responses.
I need to build a cross platform app with multiple windows. So I would like to know how to use html templates in electron.
Based on a similar question and what I've seen, there's no built in html template language in Electron, which is actually great because it allows you to use any other template language.
I'm currently playing with ejs in Electron.
Below is my index.ejs template file:
<html lang="en">
<head>
<title>The Index Page</title>
</head>
<body>
<h1>Welcome, this is the Index page.</h1>
<% if (user) { %>
<h3>Hello there <%= user.name %></h3>
<% } %>
</body>
</html>
And below is a section of my main.js file where the above template is rendered and loaded onto the BrowserWindow. Note that I've left out most of the boilerplate code:
const ejs = require('ejs');
//... Other code
let win = new BrowserWindow({width: 800, height: 600});
//... Other code
// send the data and options to the ejs template
let data = {user: {name: "Jeff"}};
let options = {root: __dirname};
ejs.renderFile('index.ejs', data, options, function (err, str) {
if (err) {
console.log(err);
}
// Load the rendered HTML to the BrowserWindow.
win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str));
});
I'll give some credit to this gist for helping me find the data:text/html;charset=utf-8 part of the url that can be used to load dynamic content.
UPDATE
I'm actually not using this anymore. It's faster to just load the default html and use the native DOM methods. The Electron Quickstart program shows how to do this nicely.
Another option is to do the templating during your build. Here is a simple example using gulp to add nonces to the CSP meta tag and the inline script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';">
<title>Basic Electron App</title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" nonce=<%= scriptNonce %>>
require('./index.js');
</script>
</body>
</html>
and in gulfile.js add the following to what you already have and make sure this task is included in your pipeline. You can also just update your current html task with the code below.
const template = require('gulp-template');
const uuidv4 = require('uuid/v4');
gulp.task('copy-html', () => {
// Create nonces during the build and pass them to the template for use with inline scripts and styles
const nonceData = {
scriptNonce: new Buffer(uuidv4()).toString('base64'),
styleNonce: new Buffer(uuidv4()).toString('base64')
};
return gulp.src('src/*.html')
.pipe(template(nonceData))
.pipe(gulp.dest('dist/'));
});
This is a very stripped down example. I have a more complete example at https://github.com/NFabrizio/data-entry-electron-app if anyone is interested, though there is still one warning when running the application because one of the packages I am using pulls in react-beautiful-dnd, which adds inline styles but does not currently accept nonces.
I need to initialize the VSS.SDK from a .ts class (outside the html page). I have analyzed some examples from Microsoft and all are initialize under html page.Is it possible to do this outside html page?
You can refer to this link for details: Visual Studio Services Web Extension SDK.
Types
Types of VSS.SDK.js, controls and client services are available in typings/vss.d.ts.
REST Client types for VSTS are available in typings/tfs.d.ts
REST Client and extensibility types for Release Management are available in typings/rmo.d.ts
Using tsd
Although TypeScript declare files do not exist at DefinitelyTyped repo, they can still be used through tsd.
First, make sure that the dependencies are loaded using below
command:
tsd install jquery knockout q --save
Next, run below command to get
vss-web-extension-sdk types added to tsd.d.ts:
tsd link
Finally, add only reference to typings/tsd.d.ts in your
TypeScript files.
Yes, you could to do it outside the html and put it in the JavaScript file or other (e.g. ts), then add the reference to corresponding JS file to the html page.
For example:
VSS.init();
$(document).ready(function () {
VSS.notifyLoadSucceeded();
});
<!DOCTYPE html>
<html>
<head>
<title>Hello word</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script src="Scripts/VSSInit.js"></script>
</head>
<body>
<!--<script type="text/javascript">
VSS.init();
</script>-->
<h1>Hello word</h1>
<!--<script type="text/javascript">
VSS.notifyLoadSucceeded();
</script>-->
</body>
</html>
this is my js function...
var invocationData={
adapter : 'Health_Care',
procedure: 'update',
parameters:[uname,cp,np]
};
WL.Client.invokeProcedure(invocationData,
{
onSuccess: function(){
alert("Password successfully changed");
},
onFailure: function(){
alert("failed");
}
}
);
my adapter is...
var updateStatement = WL.Server.createSQLStatement("UPDATE EMPLOYEE SET PASSWORD=? WHERE UID=? AND PASSWORD=?");
function update(pid,curP,newP) {
return WL.Server.invokeSQLStatement({
preparedStatement : updateStatement,
parameters : [newP,pid,curP]
});
}
my adapter is alone working when i invoke adapter... but with java script i'm getting the above mentioned error for all the pages....
Seems like you're trying to use Worklight features in other HTML pages without having all the required script tags (worklight.js, wlclient.js, etc.). Worklight is geared towards single page applications, if you want multiple HTML files make sure all the right JavaScript is getting loaded (look at the native folder, www/default/[appname].html in the head tag).
Here's an example: native/www/default/wlapp.html
<!-- Static App properties + WL namespace definition -->
<script src="wlclient/js/cordova.js"></script>
<script src="common/js/wljq.js"></script>
<script src="common/js/base.js"></script>
<script src="wlclient/js/messages.js"></script>
<script src="common/js/wlcommon.js"></script>
<script src="wlclient/js/diagnosticDialog.js"></script>
<script src="wlclient/js/deviceAuthentication.js"></script>
<script src="wlclient/js/window.js"></script>
<script src="wlclient/js/worklight.js"></script>
<script src="wlclient/js/wlclient.js"></script>
<!-- More script tags... -->
The JavaScript file that defines WL.Client.invokeProcedure is wlclient/js/wlclient.js.
Ok. I have this code to load my form:
$.ajax({
type: "GET",
url: "/Board/Post/QuickEditPost",
data: dataString,
success: function (data) {
$('#quick-edit-content').html(data);
}
});
$('#quick-edit-dialog').dialog('open');
It's working fine. Form is loaded, I can edit my post and so on.
But to make it fully functional I need:
<script src="#Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/tiny_mce/tiny_mce.js")" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
theme: "advanced",
height: "450",
width: "600",
mode: "textareas"
});
Which is not loaded into jQueryUI dialog.
And my question is why is not loaded and how to overrride this behavior.I tried to put those references in head section, but that's not an real option, I need then in few specific places over entire application. Not to mention it doesn't work either.