public class  XXXProvider extends AbstractCustomWidgetProvider {
    /**
     * 自定义组件名称或国际化key
     */
    @Override
    public String getName() {
        return "自定义组件demo";
    }

    /**
     * 自定义组件类型
     */
    @Override
    public String getType() {
        return "demo";
    }

    /**
     * 自定义组件 icon
     */
    @Override
    public String getIcon() {
        return "http://webapi.amap.com/theme/v1.3/mapinfo_05.png";
    }

    /**
     * 自定义选项 xtype
     */
    @Override
    public String getCustomTool() {
        return "bi.plugin.testwidget";
    }

	// 下面的接口再下方介绍
    ......
}

public class XXXProvider extends  AbstractCustomWidgetProvider {
 
 	@Override
	// 组件编辑界面的html，不写默认取预览
   public String getEditPageHTML(XXContext context) {
        return `<div id="container"></div>`;
    }
 
    @Override
	public Atom editClient() {
		return XXXComponent.KEY;
	}
 
    @Override
	// 组件预览界面的html
    public String getPreviewPageHTML(XXContext context) {
        return `<div id="container"></div>`;
    }
 
    @Override
	public Atom previewClient() {
		return XXXComponent.KEY;
	}
}

// data：过滤信息，包括 控件过滤（controlFilterParamsMap） 及 自定义联动过滤（linkageParamsMap ）
// config：配置信息，包括 自定义保存配置（customWidgetConfig）及 自定义选项保存配置（customWidgetToolConfig）
// closeSessionCallback：调用该接口会结束当前页面会话，把主动权交给BI
// saveSessionCallback(json: Object): Promise保存回调函数，入参为保存的json对象，返回值为Promise对象，返回保存成功或失败状态，比如： saveSessionCallback({ renderTimes: renderTimes + 1 })
// extensionCallBack：回调函数，用于刷新：extensionCallBack('refresh')
function render (data, config, closeSessionCallback, saveSessionCallback, extensionCallBack) {
     
}
new BIPlugin().init(render)

const widget = BI.inherit(BI.Widget, {
    ......
    render: function () {
		// 自定义选项保存配置及保存方法，saveCustomWidgetToolConfig({...})
        const {
            customWidgetToolConfig = {},
            saveCustomWidgetToolConfig
        } = this.options;
        ......
    }
});
BI.shortcut('bi.plugin.testwidget', widget);