由于在webdynproforabap（WDA）中引入了HTML岛，因此可以或多或少地集成任何基于Web的内容。由于FPM是基于WDA的，这也适用于FPM中的自由风格UIBBs（例如，请参阅blog
如何在Floorplan Manager应用程序中使用Java脚本图表库）。这也适用于基于UI5的内容。在这个博客中，我想演示如何将UI5控件集成到FPM中。我选择timeline控件作为示例，爱回扣返现网，因为WDA不提供这样的控件。通过这个例子，你应该能够集成任何其他UI5控件以及。
要做到这一点，淘客采集，我们将：
要了解这个博客的一些基本知识，在Web Dynpro的ABAP编程和FPM配置是必需的。这是一个非常详细的一步一步描述如何创建这个自由式UIBB。我还将解释必要的JavaScript编码，这样您就不需要JavaScript知识了。
本博客基于Netweaver 7.40提供的功能。
首先我们需要创建新的UIBB。为此，我们转到事务SE80并创建一个新的webdynpro组件。名称是任意的-我将使用ZSCN\u TIMELINE\u UIBB，并使用W\u TIMELINE作为窗口，V\u TIMELINE作为视图名称。我还将使用一个名为ZCL\u TIMELINE\u ASSIST的辅助类，并实现UIBB接口，如果在这个组件上构建块
最后组件结构应该是这样的：
要嵌入和交互UI5控件，我们需要添加一个HTML岛来查看V\u TIMELINE并分配""作为属性"staticHtml"的值。
要使UI5 timeline控件可用于此HTML岛，我们必须添加必要的脚本访问：为此
这将确保在运行时加载UI5和所需的库。
您的视图现在应如下所示：
不要忘记保存和激活你做的一切！
尽管我们的UIBB目前还不能显示任何东西，现在是创建一个测试应用程序的时候了，我们可以在其中查看和测试我们的工作进度。
由于我们没有向Html孤岛添加任何内容（除了一个空的DIV标记），所以时间线面板中只有一个空的空间。
现在我们必须添加必要的客户端代码来创建时间线控件并将其放入Html中小岛。为此，创建一个简单的文本文件，将以下代码添加到该文件并保存（最好使用扩展名".js"）。
让我简短地解释一下这段代码：我们正在客户端上创建一个object MY_TIMELINE实例。这个对象有3个成员：
现在我们必须将这个代码作为MIME对象上传到我们的新组件。启动SE80并导航到我们的UIBB组件。通过组件上的上下文菜单将javascript文件作为Mime对象导入。
现在将此脚本作为附加脚本添加到Html岛
在运行时将加载脚本，Html岛可以访问该脚本。但是，要创建和定位timeline控件，必须调用init方法。因此，我们需要将此方法的调用添加到我们的Html岛，这是通过将以下ABAP代码添加到视图的wdomodifyview方法来完成的：
我们只需将脚本调用对象添加到我们的Html岛。脚本调用正在调用（object）变量myu TIMELINE上的init函数，并向脚本调用添加一个参数–回调API。这个JavaScript函数现在将在客户端上调用。如果运行测试应用程序，您只能在UI上看到一个小的更改，即一个过滤器图标。不过，此过滤器图标属于UI5 timeline控件–我们现在已成功实例化UI5控件并将其嵌入到我们的FPM应用程序中。
没有任何数据的timeline控件不是很令人兴奋，因此让它显示一些后端数据。首先让我们创建一些时间线数据。我们将在我们的帮助课程中这样做：
注意名称属性。它们用于访问JavaScript代码中的数据。我选择了"内容"、"日期时间"、"用户名"、"标题"、"文本"和"图标"。如果使用其他名称，则必须相应地调整脚本。
为了将数据传递给控件，我在脚本中添加了setContent函数。此方法将获取时间线数据作为数组参数，并为每个数组条目创建时间线项。
现在一切都应该完成，测试应用程序应该显示一些数据（如果不工作，则必须清除浏览器缓存）：
到目前为止，我们将UI5控件嵌入到FPM应用程序中，并用ABAP后端的数据填充它。缺少的是另一个方向：将数据从控件发送到后端。
这是通过从客户端JavaScript代码引发Web Dynpro操作来完成的。
唯一的更改是第8-12行：在这里，我们将一个新函数附加到控件的Select事件。在这个函数中，我们使用已经存储在脚本第一个版本中的回调api将这个客户端事件转发到后端，然后在后端引发视图的SELECT操作。作为事件参数，我们将所选项目的标题传递给后端。
现在如果再次运行测试应用程序并单击任何项目，我们将得到一条（错误）消息，该项目的标题为文本：
虽然这个博客很长，但是集成UI5控件并不费多少力气。集成控件是Html岛。通过标准WD Abap方法（如上下文绑定），应用程序数据被传递到Html岛。控件的呈现、放置以及从Html岛到控件的数据传输都是通过附加到Html岛的JavaScript编码完成的。向后的方向是通过JavaScript编码提升HtmlEvents，然后触发Web Dynpro操作来完成的。
