widget - SAPUI5 Web 内容小部件

Question

所以我正在尝试开发一个所谓的“Web 内容小部件”以在 SAP Cloud Portal 中使用，如下所述：https ://help.sap.com/viewer/3ca6847da92847d79b27753d690ac5d5/Cloud/en-US/b3b13c6b75244a18887180353ce49599.html

我正在尝试创建的是一个旁边带有图标的标题。单击该图标应该会打开一个带有一些文本的弹出窗口。标题和弹出框文本应该可以从 Cloud Portal 进行配置。

现在我有一个可配置的标题和可配置的文本，但我如何实现一种机制来打开和关闭该框架中的弹出框？

有没有办法在“Web 内容小部件”中使用事件处理程序？或者也许：有没有办法使用 sap.m.popover？（即在门户小部件中转换 SAPUI5 应用程序并添加选项？但是如何？）

编辑：

文件夹结构如下所示：

• 自定义内容小部件
  • 内容单元
    • popover.json（包含可以在门户中编辑的“设置/配置”）
  • 渲染器
    • popoverRenderer.js
  • 片段
    • popover.html
  • 组件.js
  • 清单.json
• cp.app.descriptor.json

“popoverRenderer.js”和“popover.html”片段：

sap.ui.define([
	"sap/ushell/cpv2/services/control/contentUnit/WebContentRenderer"
], function(WebContentRenderer) {
	"use strict";
	return WebContentRenderer.extend("infoblockpopover.renderers.popoverRenderer", {

		getDefaultSettings: function() {
			var defaultSettings = {
				height: "10rem"
			};
			return defaultSettings;
		},

		onInit: function() {

		},

		onThemeChanged: function() {

		},

		createSettingsEditor: function(propertyEditorManager) {
			var propertyEditor = propertyEditorManager.editor;

			this.addPropertyEditor({
				key: "height",
				category: propertyEditorManager.bundle.getText("WIDGET_CATEGORY_DIMENSIONS"),
				title: propertyEditorManager.bundle.getText("WIDGET_SETTINGS_LABEL_HEIGHT"),
				editor: propertyEditor.Size,
				flags: propertyEditor.Size.AUTO | propertyEditor.Size.UNIT_PX | propertyEditor.Size.UNIT_PT | propertyEditor.Size.UNIT_REM
			});
		},

		renderer: {
			render: function(oRm, oControl) {
				var settings = oControl.getSettings();
				oRm.write("<div");
					oRm.writeClasses();
					oRm.writeControlData(oControl);
				oRm.write(">");
				oRm.write("<div>");
				var uiComps = oControl.getItems();

				jQuery.each(uiComps, function() {
					oRm.write("<div style='position: relative;height:" + settings.height + "'>");
					oRm.renderControl(this);
					oRm.write("<div style='clear: both'></div>");
					oRm.write("</div>");
				});
				oRm.write("</div>");
				oRm.write("</div>");
			}
		}
	});
}, true);

<component>
    <style>
        /* Some style here */
    </style>

    <div class="{$dir} {$device}">
        <div class="zBILink ['{popoverText}'?'':'zBILinkHide']" >
            <span class="icon-wl-icon-question onclick-menu" tabindex="0">
                <div class="onclick-menu-content">{popoverText}</div>
            </span>
        </div>
    </div>
    
</component>

标签： widgetsapui5