SAP-Fiori How to generate components dynamically

本文链接：https://blog.youkuaiyun.com/qq_40977705/article/details/126658429

本文介绍如何在UI中使用VBox动态创建组件，如添加SearchField到'box2'容器，并演示了复杂布局的实现，包括搜索框、自定义Label和VerticalLayout的组合。通过实例让你理解如何灵活运用前端框架进行动态内容管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

We should define a container for dynamically generate components(e.g. Vbox ...)

And we will add components into the container named "box2" in this blog

below View code:

	<l:Splitter height="500px" width="100%">
		<VBox id='box1' width="100%">
			<Tree id="Tree" items="{path: '/'}" modeAnimationOn = "true" >
				<headerToolbar>
					<OverflowToolbar>
						<Title text="组织工作进展"/>
						<ToolbarSpacer/>
						<ToggleButton icon="sap-icon://menu" tooltip="Enable / Disable Custom Context Menu" press="onToggleContextMenu"/>
					</OverflowToolbar>
				</headerToolbar>
				<StandardTreeItem title="{text}" icon="{ref}"/>
			</Tree>
			<layoutData>
				<l:SplitterLayoutData id="Con01" size="240px"/>
			</layoutData>
		</VBox>
		<VBox id='box2' width="100%" height = "100%">
			<layoutData>
				<l:SplitterLayoutData id="Con02" size="auto"/>
			</layoutData>
		</VBox>
		<VBox id='box3' width="100%">
			<layoutData>
				<!--<l:SplitterLayoutData id="Con03" size="30%" minSize="200px"/>-->
				<l:SplitterLayoutData id="Con03" size="2%" />
			</layoutData>
		</VBox>
	</l:Splitter>

above all , there is a simple example , we put a SearchField into the container named "box2" ,just do like below js code, and we will see a Search box in our page

			var oSearchField = new sap.m.SearchField({
				placeholder: 'here is test',
				search: function(oEvent){
					that._fnSearchTile(oEvent);
				}
			});
			oSearchField.bindProperty("value", "oViewModel>/SearchField")

		    Hbox.addStyleClass("CustomHbox")
			var Vbox_seach = new sap.m.VBox({
				wrap: "Wrap"
			});
			var Vbox = new sap.m.VBox({
				wrap: "Wrap"
			});
			Vbox_seach.addItem(oSearchField);
			var oContainer = that.getView().byId("box2");
			oContainer.addItem(Vbox_seach);

For another example，here is a little complicated example probably that you need

		_fngeneradynamic:function(){
			var that = this ;
			var oSearchField = new sap.m.SearchField({
				placeholder: 'here is test',
				search: function(oEvent){
					that._fnSearchTile(oEvent);
				}
			});
			oSearchField.bindProperty("value", "oViewModel>/SearchField")
			
			var Hbox = new sap.m.HBox({
				wrap: "Wrap"
			});
			 Hbox.addStyleClass("CustomHbox")
			var Vbox_seach = new sap.m.VBox({
				wrap: "Wrap"
			});
			var Vbox = new sap.m.VBox({
				wrap: "Wrap"
			});
			Vbox_seach.addItem(oSearchField);
			var oContainer = that.getView().byId("box2");
			oContainer.addItem(Vbox_seach);
			
			var oLabel = new sap.m.Label({
				text: "custom Label",
				textAlign: "Center",
				wrapping : true
			});
			oLabel.addStyleClass(" CustomLabel");
			var VerticalLayout = new sap.ui.layout.VerticalLayout({
				width: "120px",
				content:[
					new sap.ui.core.Icon({
						src: "sap-icon://address-book",
						size: "2.9rem",
						color: "Default",
						decorative : true,
						customData:[{
							key: "TileUrl",
							value: "custom Icon"
						}],
						press:function (oEvent){
							that.fntoUrl(oEvent);
						}
					}),
					oLabel,
					new sap.m.RatingIndicator({
						maxValue: 1,
						value   : 1,
						iconUnselected: "sap-icon://unfavorite",
						visualMode :"Half",
						editable : true,
						customData:[{
							key: "TileId",
							value: "custom Rating"
						},{
							key: "TileDesc",
						}],
						change: function(oEvent){
							that._fnSetFavorite(oEvent);
						}
					})
				]
			});
			VerticalLayout.addStyleClass("sapThemeBaseBG-asBackgroundColor gridLayoutCell sapMLIBFocusable sapMFocusable CustomVerticalLayout");
			Hbox.addItem(VerticalLayout);
			Vbox.addItem(Hbox);
			oContainer.addItem(Vbox);
		}

If you see like this in your page, congratulations，you got it !