MicroStrategy ONE

Creating an interactive HTML page

Every custom connector you create needs an HTML page that specifies the Javascript that defines the connector object. This can be an interactive page that lets the user select the data to be imported or it can work in the background.

Sample code for a simple interactive HTML file is provided below. This code has only one interactive button so it requires only one event listener, for the click button event. The sample code is followed by an explanation of important parts of the code.

Copy 
<html>
  <head>
    <title>RawDataFiles</title>
    <meta http-equiv="Cache-Control" content="no-store" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -
    <script src="./mstrgdc-2.0.js" type="text/javascript"></script>
    <script src="RawDataFiles.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container container-table">
      <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4">
          <h2>RawDataFiles</h2>
          <input id="file"/>
          <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">submit</button>
        </div>
      </div>
    </div>
  </body>
</html>
  • mstrgdc-2.0.js is the MicroStrategy Data Connector SDK library. You can download a zipped copy of this file and extract it to the same folder as this HTML file.
  • https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js is the jquery library.
  • RawDataFiles.js is the Javascript code for this connector.
  • The bootstrap.min.css and bootstrap.min.js files are used to simplify styling and formatting.

Once you have created the HTML page, you need to create the Javascript file that defines the connector object and includes one or more event listeners (depending on the number of events available on the HTML page).