Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

• JQuery
• Tinycolor
• Bootstrap
• Handlebars
• DSER Services / components

Vollständiges Beispiel

<!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-public.niiio.me/public/common/default-theme.css" >
   <link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">
</head>
<body>

<div class="container">
   <div class="row">
      <div class="col-xs-2"></div>
      <div class="col-xs-4">
      </div>
      <div class="col-xs-6">
         <div id="wertpapier-allokation-container"></div>
      </div>
   </div>
</div>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.number-1.2.min.js" ></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/ColorService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/number/NumberFormatter.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>

<script type="text/javascript">
   $(function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({
         stocks: [{
            wkn: "710000",
            isin: '08154711',
            name: "Daimler 1",
            share: "71,00"
         }, {
            wkn: "710001",
            isin: '08154712',
            name: "Daimler 2",
            share: "81,00"
         }, {
            wkn: "710002",
            isin: '08154713',
            name: "Daimler 3",
            share: "91,00"
         }],
         onStockRemoved: function (stock) {
            console.log("stock removed", stock)
         }
      });
   });
</script>

</body>
</html>

Dieses Beispiel zeigt das entfernte Wertpapier in der Browser Konsole.

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.

$(function () {
   $("#wertpapier-allokation-container").wertpapierAllokation({
      stocks: [{
         wkn: "710000",
         isin: '08154711',
         name: "Daimler 1",
         share: "100,00"
      }],
      onStockRemoved: function (stock) {
         console.log("stock removed", stock)
      }
   });
});

Erforderliche Konfigurationsoptionen

Keine Konfigurationsoptionen notwendig.

Erweiterte und optionale Konfigurationsmöglichkeiten.

Key Description Default
baseUrl url to DSER API services https://api-public.niiio.me
onStockRemoved (stock) Object containing the removed stock.

Stock: {
wkn, isin, name, share
}

stocks Array of stocks to be displayed.

Stock: {
wkn, isin, name, share
}

Integration

Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.

Fügen Sie die Stylesheets in Ihre Seite ein

Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich.

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

Erstellen eines Containers

Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich.

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

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

<script type="text/javascript">
   require(['dser.wertpapierAllokation'], function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({});
   });
</script>

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.number-1.2.min.js" ></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/ColorService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/number/NumberFormatter.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

<script type="text/javascript">
   $(function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({});
   });
</script>

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen