请参考SAPUI5 SDK上的样本部分。 在这里，您将找到所有SAPUI5控件的用法示例，并可以查看为示例中显示的每个控件实现的源代码。

示例：带有输入的标签。

这是非常基本的 问题，您将在Google上找到大量有关如何实现此目标的信息。

您是否已选中此选项- SAPUI5 SDK ？

嗨， Shivani Nagula ，

尝试使用此模型，从后端使用您的odata

<！DOCTYPE HTML>

 
 <头>
 
 

 
 <！-仅加载移动库" sap.m"和" sap_bluecrystal"主题->

 <脚本>
   sap.ui.localResources（" demotable"）;
   var app = new sap.m.App（{
     initialPage：" iddemoTable1"
   }）;
   var page = sap.ui.view（{
     id：" iddemoTable1"，
     viewName：" demotable.demoTable"，
     类型：sap.ui.core.mvc.ViewType.JS
   }）;
   app.addPage（page）;
   app.placeAt（" content"）;
 

 
 
  
 
 
  

现在双击demoTable.view.js在View中创建并添加Table。 所有UI元素控件都应放置在视图的CreateContent（）方法中。 添加以下代码以在视图中创建表和表的列。

 var oTable = new sap.m.Table（" idPrdList"，{
       插图：是的，
       headerText："产品列表"，
       headerDesign：sap.m.ListHeaderDesign.Standard，
       模式：sap.m.ListMode.None，
       includeItemInSelection：false，
     }）;
    
     var col1 = new sap.m.Column（" col1"，{header：new sap.m.Label（{text：" Product Name"}）}））;
     oTable.addColumn（col1）;
    
     var col2 = new sap.m.Column（" col2"，{header：new sap.m.Label（{text：" Description"}}}））;
     oTable.addColumn（col2）;
    
     var col3 = new sap.m.Column（" col3"，{header：new sap.m.Label（{text：" Price"}）}））;
     oTable.addColumn（col3）;
 

在上面的步骤中，我们实例化了Table并将表的属性设置为" headerText"。 之后，我们在表格中添加了3列产品名称，说明和价格。

添加列之后，我们需要具有" ColumnListItem"作为聚合来保存数据，即表中的不同行。 因此，创建ColumnListItem并将聚合绑定到表。 编写以下代码。

 var colItems = new sap.m.ColumnListItem（" colItems"，{type：" Active"}）;
 oTable.bindAggregation（" items"，"/img/value"，colItems）; 

添加ColumnListItem之后，我们需要定义单元格。 每个单元格都可以来自sap.m库中的任何基本值持有者。 在这里，我使用sap.m.Text将Table中的数据显示为简单的Text。将以下代码添加到现有代码中。

 var txtNAME = new sap.m.Text（" txtNAME"，{text：" {ProductID}"}）;
 colItems.addCell（txtNAME）;
    
 var txtNAME2 = new sap.m.Text（" txtNAME2"，{text：" {ProductName}"}））;
 colItems.addCell（txtNAME2）;
   
 var txtNAME3 = new sap.m.Text（" txtNAME3"，{text：" {UnitsInStock}"}）;
 colItems.addCell（txtNAME3）; 

现在，我们创建了一个包含3列的表，并且ColumnListItem作为聚合来容纳多行。 我们需要将表添加到视图中以便能够在UI中看到。 因此，如下所示，将Table的实例添加到Page的内容中。

返回新的sap.m.Page（{
 标题："标题"，
 内容：[
 表
 ]
 }）; 

到此，我们对表的设计完成了。 让我们测试应用程序，并检查我们是否能够在UI中看到表格。 您应该看到如下表。

现在表为空，我们的下一步是向该表提供数据。 为了将数据提供给表，我们需要创建JSON Model来将数据设置为模型。 因此，导航至控制器demoTable.comtroller.js并将以下代码写入Init（）方法中。

 onInit：function（）{
 var sUrl =" http：//来自后端odata的路径";
 var oModel = sap.ui.model.json.JSONModel（sUrl）;
 sap.ui.getCore（）。setModel（oModel）;
 } 

我们在上述步骤中所做的。 声明一个JSON模型，并通过传递产品列表的后端OData服务url将数据设置为该模型。 接下来，我们将模型设置为核心，以在应用程序中进行全局访问。 您可以通过编写this.getView（）。setModel（oModel）将模型设置为"视图"。

保存项目以测试应用程序是否运行index.html文件。 右键单击index.html→运行方式→Web App预览。 您应该看到带有产品数据的表。

Hii，

请帮助我在ui5中创建标签和文本字段（输入字段）。

此致

Shivani。

在问这样的问题之前，请从：入门：设置和教程