Web page simple integration example

1. Problem description

Finebi presents data through various styles such as tables and charts for statistical analysis. These data tables or charts can also be programmed by users when developing the system, but the workload is heavy and maintenance is difficult.

2. Implementation ideas

FineBI is a browser/server mode based on B/S architecture. Currently, the system developed by users basically tends to the browser/server mode of B/S architecture. Therefore, some pages can be integrated directly by the simple way of embedded integration of Web pages.

Through integration, users can access FineBI's server from their own system through a link using a browser, so as to call FineBI's Web page in their own system to actually embed integration.

1. Close Security Headers

Due to platform security restrictions, FineBI needs to turn off "security headers" in management system> Security Management> security protection before cross domain integration, as shown in the following figure:

FineBI generally includes two steps in embedded integration: obtaining Token and calling other related API.

2. Get Token

The API needs to obtain the Token information before calling. FineBI obtains cross domain data through JSONP. Tokens can be obtained through the following methods. The code is as follows:

// Get token method
function loginFR(callback) {
    // User name and password input box value on the page
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    // Sign inapi
    jQuery.ajax({
        url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1", // 登录url
        type: "GET",
        dataType:"jsonp",
        timeout:10000,
        success:function(data) {
            alert(JSON.stringify(data));
            if (data.status === "success") {
                alert("successful!");
            } else if (data.status === "fail"){
                alert("login fail!");
            }
            // Get token
            callback && callback(data.accessToken);
        },
        error:function(){
            alert("login error!");
        }
    });
 }

3. Call other related APIs

After obtaining the Token, you can call other APIs, such as obtaining the template list and creating a new dashboard. The code is as follows:

// Get template list method
function GetList(token) {
    var i=0;
    jQuery.ajax({
        url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
        type: "GET",
        timeout: 10000,
        dataType: "jsonp",
        success:function(res) {
            for(;i < res.data.dashboards.length;i++) {login.html
                document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
            }
        },
        error:function(XMLHttpRequest,textStatus,errorThrown){
            alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
        }
    });
 }
// New dashboard method
function NewDemo(token) {
    var name = prompt("name","");
    var id = "";
    var dir = {name: name, catalog: []}
    var flag = 0;
    jQuery.ajax({
       url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
        type: "GET",
        dataType:"jsonp",
        timeout:10000,
        success:function(res) {
            if(name != "") {
                for (var key in res) {
                    if(key=="error") {
                        flag=1;
                    }
                }
                if(flag==0) {
                   window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
                } else {
                    alert("error!");
                }
            } else {
                alert("name is empty");
            }
        },
        error:function(XMLHttpRequest,textStatus,errorThrown){
            //alert(JSON.stringify(data));
            alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);//
        }
    });
}

Note: 1. All requests here need to carry the request type: dataType: "jsonp", otherwise the request cannot be processed.

Note: 2. InFineBI, the URL passes the JSON object. Some servers do not support the URL of the JSON object. Therefore, the URL parameter value of the JSON type needs to be encoded first. For example:

4. HTML document preparation

Write HTML files according to the above implementation ideas, and the code contents are as follows:

<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js">  </script> 
  <script type="text/javascript">
          var url = "http://localhost:37799/webroot/decision";
                  
          function loginFR(callback) {
             var username = document.getElementById("username").value;
             var password = document.getElementById("password").value;
             jQuery.ajax({
                url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1",
                type: "GET",
                dataType:"jsonp",
                timeout:10000,
                success:function(data) {
                   alert(JSON.stringify(data));
                   if (data.status === "success") {
                      alert("successful!");
                   } else if (data.status === "fail"){
                      alert("login fail!");
                   }
                   callback && callback(data.accessToken);
                   },
                   error:function(){
                      alert("login error!");
                 }
             });
           }        
           function GetList(token) {
              var i=0;
              jQuery.ajax({
                 url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
                 type: "GET",
                 timeout: 10000,
                 dataType: "jsonp",
                 success:function(res) {
                    for(;i < res.data.dashboards.length;i++) {
                       document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
                    }
                 },
                 error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
                 }
               });
           }        
           function NewDemo(token) {
              var name = prompt("name","");
              var id = "";
              var dir = {name: name, catalog: []}
              var flag = 0;
              jQuery.ajax({
                 url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
                 type: "GET",
                 dataType:"jsonp",
                 timeout:10000,
                 success:function(res) {
                    if(name != "") {
                       for (var key in res) {
                          if(key=="error") {
                             flag=1;
                          }
                       }
                       if(flag==0) {
                          window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
                       } else {
                           alert("error!");
                       }
                     } else {
                        alert("name is empty");
                     }
                  },
                  error:function(XMLHttpRequest,textStatus,errorThrown){
                     //alert(JSON.stringify(data));
                     alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
                  }
               });
            }
  </script> 
 </head>
 <body> 
  <form id="loginForm" name="loginForm" method="post" action="index.html"> 
   <table> 
    <tbody> 
     <tr class="prop"> 
      <td class="name"><label> Username</label></td> 
      <td class="value"><input id="username" type="text" name="username" value="admin" /></td> 
     </tr> 
     <tr class="prop"> 
      <td class="name"><label> Password</label></td> 
      <td class="value"><input id="password" type="password" name="password" value="1" /></td> 
     </tr> 
     <tr>
      <td><input id="btn1" type="button" name="b1" value="login" onclick="loginFR();" /></td>
     </tr> 
     <tr>
      <td><input id="btn2" type="button" name="b2" value="login &amp; get list" onclick="loginFR(GetList);" /></td>
     </tr> 
     <tr>
      <td><a href="http://localhost:37799/webroot/decision/v5/design/report/f987404aa556460995c4519e470c5836/view"> <input id="btn3" type="button" name="b3" value="open" onclick="loginFR();" /> </a></td>
     </tr> 
     <tr>
      <td><input id="btn4" type="button" name="b4" value="new" onclick="loginFR(NewDemo);" /></td>
     </tr> 
    </tbody> 
   </table> 
   <div class="actionButtons"> 
   </div> 
  </form>  
 </body>
</html>

Note: the URL address in the above file is the initial default address of FineBI: http://localhost:37799/webroot/decision, which can be modified to the address and port of its own project as required.

5. Effect display

The above code effect is shown in the following dynamic diagram: