Skip to main content

Integration to 3rd party

  1. Go to the Settings -> Configuration -> Marketplace
  2. Click checkbox Show Modules
  3. Install Itech dashboard module
  4. Generate a token by visiting the link
https://eu-central-2.finmars.com/{realm_code}/{space_code}/api/v1/auth-tokens/personal-access-token/create-token/
  1. Enter:
    • the name and user_code of the token (at your discretion),
    • set access_level - admin,
    • days to live - at your discretion
  2. Prepare to embed a script with JS code on an external site from the example below:
    • add the token to it
    • change realm_code and space_code in the loadSecureModule function
    • change the values for the variables in realCode and spaceCode
    • change the identifier for the selector from the HTML page where the dashboard element needs to be inserted
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Itech External Dashboard</title>
    <style type="text/css">
      html {
        font-size: 100%;
      }
      
      body {
        font-family: helvetica;
      }

    </style>
</head>
<body>

<h1>Itech</h1>

<div style="display: flex;">

<div style="margin-right: 20px;">
  <div><label>External Date Picker</label></div>
  <input class="date-picker" type="date" name="" value="2024-07-16">
</div>

<div>
  <div><label>External Portfolio Picker</label></div>
  <select class="portfolio-picker">
    <option>IKF1218.001</option>
  </select>
</div>

</div>

<div>

  <div class="finmars-holder" style="padding: 20px;  margin: 20px;">
    
    <div style="margin-bottom: 1rem;">Section for Finmars Dashboard</div>
    

    <div id="dashboardContainer"></div>

  </div>  
</div>




<script>

    var FINMARS_API_KEY = "YOUR_API_KEY"

    function loadSecureModule(url, apiKey) {
        return fetch(url, {
            headers: {
                'Authorization': `Bearer ${apiKey}`
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.text();
        })
        .then(scriptText => {
            const blob = new Blob([scriptText], { type: 'application/javascript' });
            const scriptURL = URL.createObjectURL(blob);
            return import(scriptURL);
        });
    }

    loadSecureModule('https://eu-central-2.finmars.com/realm0sqjq/space00ql8/api/storage/workflows/com/finmars/itech-dashboard/dashboard.js', FINMARS_API_KEY)
        .then(async (module) => {

          const FinmarsDashboard = module.default;

          const dashboard = new FinmarsDashboard({
                apiKey: FINMARS_API_KEY,
                selector: '#dashboardContainer',
                realmCode: "realm00000",
                spaceCode: "space00000",
                domain: "eu-central-2.finmars.com",
            });

          await dashboard.init();

          dashboard.dashboardStore.setDateTo("2024-07-16");
          dashboard.dashboardStore.setPortfolios(["IKF1218.001"]);
          dashboard.renderDashboard();

          document.querySelector('.date-picker').addEventListener("change", function(event) {

            console.log('datePicker.event', event);

            dashboard.dashboardStore.setDateTo(event.target.value);
            dashboard.renderDashboard();


          })

          document.querySelector('.portfolio-picker').addEventListener("change", function(event) {

            console.log('datePicker.event', event);

            dashboard.dashboardStore.setPortfolios([event.target.value]);
            dashboard.renderDashboard();


          })

        })
        .catch(error => console.error('Error loading the script:', error));



</script>

</body>
</html>
  1. Next, you can change the date-picker and portfolio-picker to your own HTML elements
Back to top