salesforce_salesforce tableau角度整合-CSDN博客

salesforce

In this tutorial you will learn how to integrate Salesforce Tableau worksheets into your Angular 10 web application.

在本教程中，您将学习如何将Salesforce Tableau工作表集成到Angular 10 Web应用程序中。

Considering, you already know Angular web development, I will not walk you through how to create a Angular web app, directly dive into the recipe to cook Tableau with Angular.

考虑到您已经知道Angular Web开发，我不会逐步指导您如何创建Angular Web应用程序，直接介绍如何使用Angular编写Tableau。

Step 1:Download and add Tableau JS API Library file, into project, angular.json

步骤1：下载Tableau JS API库文件并将其添加到项目angular.json中

https://public.tableau.com/javascripts/api/tableau-2.min.js

Under the hood it actually calls to the latest version of tableau JS Library as below code

实际上，它实际上调用了Tableau JS库的最新版本，如下代码

window.tableau=window.tableau||{}......
.....
.....
.....
window.tableau._apiLoaded||(window.tableau._apiLoaded=!0,t(n("tableau-2.min.js")+"tableau-2.5.0.min.js"))}();

Our angular.json should look like below

我们的angular.json应该如下所示

"build": {
          ...
          "options": {
            ...
            "assets": [
              ...
            ],
            "styles": [
              ...
            ],
            "scripts": ["src/assets/libs/tableau.js"]
          },

Step 2: Create a component and use as below:

第2步：创建组件并按以下方式使用：

Define the tableau object to be used into angular component as below from tableau-2.min.js

定义tableau-2.min.js中要用作角组件的tableau对象，如下所示

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';declare var tableau: any;
// The only compatible way to access tableau object in angular 2+@Component({
....
....

Create a function, define the worksheet url, tableau options, and create an instance of tableau Viz object, as below

创建一个函数，定义工作表URL，Tableau选项，并创建Tableau Viz对象的实例，如下所示

initViz() { 
    const containerDiv = this.vizContainer.nativeElement;
    //Get the reference of DOM element that holds the tableau frame    let url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms"
    let options = {
        hideTabs: true,
        onFirstInteractive: () => { 
        }
    }
    this.viz = new tableau.Viz(containerDiv, url, options)
}

At the end, we call the function initViz() inside lifecycle hook AfterViewInit as below

最后，我们在生命周期挂钩AfterViewInit中调用函数initViz()，如下所示

ngAfterViewInit(): void {
    this.initViz();
}

Download Tableau Angular integration complete working source code from my github repository.

从我的github存储库下载 Tableau Angular集成完整的工作源代码。

翻译自: https://medium.com/@sunilk.work/salesforce-tableau-angular-integration-340a9c7aac19

salesforce