date: 2019-10-18 09:10:00

updated: 2019-10-18 15:18:00

1.插件

1.1 获取数据方式

理论上 Engine 所有的方法都应该有对应的 Capability API 方法，但是在开发者文档里的 API 有时候并不全，在获取数据的时候，可以去参考一下 Engine API 方法，在调用函数的时候使用 app.model.enigmaModel.api 的方式来获取数据

// 获取当前 app 下所有的字段
// 在返回的 data 中会有字段名称以及其所属于的数据表名
app.model.enigmaModel.getFieldList().then(function(data){
    ...
}

1.2 组装数据

如果数据是一个数组，那么可以使用 map 方法来返回一个结果体

var fieldMap = fields.map(function(field){
    return {
        "qDef": {
            "qFieldDefs": [
                field
            ]
        }
    }
});

1.3 同步和异步

在调用 API 方法来访问 Sense 获取数据时，返回的方式都是异步的，所以需要转换成同步操作。

return new qlik.Promise(function(resolve, reject){
    // 这里面处理异步函数
    // 第一个函数是 resolve 的，第二个函数是 reject 的
    app.model.enigmaModel.getFieldList().then(function(data){
        // app.model.enigmaModel.getFieldList() 方法是异步的，所以用 then(function(){}) 来保证同步
        ... // 此处的代码和上面的 `then` 是同步的
        app.visualization.create('table',fieldArr).then(function(vis){
            ...
            resolve() // 这个函数一定要写在最后面，但是如果最后是一个异步的函数的话，就需要写在异步函数的最后面
        });
    }, function(error){
        // 这里是失败时所做的操作
        reject(error)
    });
});

1.4 使用 Leonardo 组件

JavaScript：

define( [
    'text!./template.ng.html',
    'text!./dialog-template.ng.html'
],
function ( template, dialogTemplate ) {
    return {
        support: {
            export: false,
            exportData: false,
            snapshot: false
        },
        template: template,
        controller: ['$scope', 'luiDialog', function ( $scope, luiDialog ) {
            // 这里需要引用 luiDialog 的页面，相当于单独打开了一个页面
            $scope.openDialog = function() {
                luiDialog.show({
                    template: dialogTemplate,
                    // 这里必须是 input 的形式，相当于主页面给次页面的一个输入值，输入的是主页面的变量
                    input: {
                        name: $scope.name
                    },
                    controller: ['$scope', function( $scope2 ) {
                        // 此处是 $scope2 是指 luiDialog 的
                        $scope2.text = 'Use the dialog to display important messages or use it for actions requiring a lot of space, ' +
                            'like entering information into a form.'
                    }]
                });
            };
        }]
    };
});

dialog-template.ng.html：

<lui-dialog style="max-width: 450px;">
  <lui-dialog-header>
    <lui-dialog-title>My dialog</lui-dialog-title>
  </lui-dialog-header>
  <lui-dialog-body>
    Hello, <i>{{input.name || "Missing name"}}</i>!

    <div style="margin-top: 10px">
      <b>Tip</b>
    </div>
    <div style="margin-top: 5px">
      {{text}}
    </div>
  </lui-dialog-body>
  <lui-dialog-footer>
    <button class="lui-button  lui-dialog__footer-button" ng-click="close();">Close</button>
  </lui-dialog-footer>
</lui-dialog>