MindSphere Web Components
入门指南

集成

1. 通过添加 HTML 元素到您的网站/ Web 应用中，集成 MindSphere Web 组件：

   <script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.{region}.{mindsphere-domain}/webcomponents/v1/index.js"></script>
   

   为了在 MindSphere Web 组件加载后接收反馈，您可以选择注册回调 data-onload 并添加一个 JavaScript 代码段：

   ```html tab="HTML"

   ```javascript tab="JavaScript"
   function onMdspWebComponentsLoaded(){
       // MindSphere Web 组件被加载
   }
   

   资源文件

   以下资源文件由 index.js 自动加载：

   文件名称	描述
   native-shim.js	不支持自定义元素的浏览器的填充
   mdsp-common.min.js	MindSphere Web 组件基础库
   mdsp-components.min.js	MindSphere Web 组件库
   mdsp-components-styles.css	MindSphere Web 组件库样式

   此外，字体和帮助图像是从 assets 文件夹加载的。

2. 通过在 index.html 中添加元素选择器来插入 web 组件，例如：对于一个 asset 列表：

   <mdsp-asset-view></mdsp-asset-view>
   

3. 当在 Developer 或者 Operator Cockpit 配置您的 web 应用时添加所需的核心角色。
   例如 asset 视图元素需要 assetmanagement role。

配置

每个 web 组件提供一个属性列表，该列表允许开发者配置组件的外观和行为。

例如 asset 视图组件 可以使用 view-mode 属性设置为不同的样式，或者禁用搜索框并显示错误通知:

```html tab="view-mode Card"

```html tab="disabled search box"
<mdsp-asset-view search-hidden="true" error-notification="true"> </mdsp-asset-view>

事件侦听器

当用户与用户接口互动时 MindSphere Web 组件发布事件。开发者可以使用 JavaScript 侦听器来检测这些事件并且触发更多动作。

示例

以下示例集成了一个 asset 视图和一个文件视图。文件视图显示了文件被分配到所选的 asset。

web 组件的选择器添加在 index.html 中。当改变 asset 选择时，JavaScript 侦听器用于更新文件视图：

```html tab="HTML"

```javascript tab="JavaScript"
// Instantiate the JavaScript objects
const assetViewComp = document.querySelector('mdsp-asset-view');
const fileViewComp = document.querySelector('mdsp-file-view');

// Add a listener for the selectedAssetChanged event
assetViewComp.addEventListener('selectedAssetChanged', function (eventParams) {
    // assign the changed asset id to the file view
    fileViewComp.assetId = eventParams.detail.assetId;
});

软件清理

在应用中使用 MindSphere Web 组件时，请确保在软件清理中列出这些组件。

必须包括 https://static.{region}.{mindsphere-domain}/webcomponents/v1/readme-oss.html 上托管的 readme-oss文件。

还有问题?

向社区提问

除非另行声明，该网站内容遵循MindSphere开发许可协议.