API-Banking: Wertpapiersuche

Home API-Banking API-Banking: Wertpapieroptimierung API-Banking: Wertpapiersuche
Description
Integration Method 1
Integration Method 2
Complete example
API Documentation

Description

You can use the component „Wertpapiersuche“ to search for stocks by name, wkn (securities identification numbers) and isin.

For those who are using GoogleChrome we offer search by speech. Just click the microphone icon and talk. Further browsers will be support soon.

Requirements

To use the component, you will need these third-party libraries:
• JQuery
• Tinycolor
• Bootstrap
• Handlebars
• DSER Services / components

Integration Method 1

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running.

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/wertpapier-suche.css">

Create a container:

Create a new <div> container for the component inside your <body> tag.

<div id="wertpapier-suche-container" ></div>

Asynchronous loading of required files with RequireJS

Include the required script files to your page:

• Advantage: You only need to import a few files, all required script will get loaded asynchronously through RequireJS
• Disadvantage: If you already have a script file which defines an anonoymous AMD module, then sadly this method won’t work for you.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>

Setup and initialize the component:

Add this block right after the included script files. 

<script type="text/javascript">
    require(['dser.wertpapierSuche'], function () {
        $("#wertpapier-suche-container").wertpapierSuche({
            token: '<your-custom-api-token>'
        });
    });
</script>
✕

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Integration Method 2

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running.

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/wertpapier-suche.css">

Create a container:

Create a new <div> container for the component inside your <body> tag.

<div id="wertpapier-suche-container" ></div>

Regular loading of script files, without RequireJS

Include the required script files to your page:

• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/bloodhound.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/color/ColorService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/StockService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/browser/BrowserUtils.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/speech/SpeechRecognition.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/wertpapier-suche/jquery.wertpapierSuche.js"></script>

Setup and initialize the component:

Add this block right after the included script files. 

<script type="text/javascript">
   $(function () {
      $("#wertpapier-suche-container").wertpapierSuche({
         token: '<your-custom-api-token>'
      });
   });
</script>
✕

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Complete example

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://api.niiio.me/public/common/default-theme.css">
        <link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
    </head>
    <body>

    <div class="container">
        <div class="row">
            <div class="col-xs-8 col-xs-offset-2">
                <div id="wertpapier-suche-container"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
    <script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>

    <script type="text/javascript">
        require(['dser.wertpapierSuche'], function () {
            $("#wertpapier-suche-container").wertpapierSuche({
                token: '<your-custom-api-token>',
                onStockSelected: function(stock) {
                    console.log("selected stock", stock);
                }
            });
        });
    </script>
    </body>
</html>

The example above displays the selected stock in the browser console.

API Documentation

Initialize

Please provide your custom API token and your desired email address for notifications on initialization, otherwise the plugin won’t work.

$("#wertpapier-suche-container").wertpapierSuche({
    token: '<your-custom-api-token>',
    onStockSelected: function(stock) {
        console.log("selected stock", stock);
    }
});

Required configuration options
Key Description
token The security-token to check if your connection is valid.

Extended and optional configuration options
Key Description Default
baseUrl url to DSER API services https://api.niiio.me
onStockSelected(stock) callback function to attach further processes, e.g. add selected stock to our "Effizienter Rand" component.

Stock: {
wkn, isin, name
}

Weiterführende Links

Social Media

DSER GmbH

Elisabethstr. 42/43, 02826 Görlitz
03581 - 37 4 99 - 0
03581 - 37 4 99 - 99
info@dser.de