注意:此标记'sapui5'涵盖了通常称为“OpenUI5”的工具包的2013年12月开源版本以及原始许可版本“SAPUI5”。 “用于HTML5的SAP UI开发工具包”(SAPUI5)是一种用户界面技术,用于构建和调整客户端应用程序。 SAPUI5运行时是一个客户端HTML5呈现库,具有丰富的标准和扩展控件以及轻量级编程模型。
有没有办法手动将 CSS/HTML 中的辅助功能字段更改为任何值?
我正在为客户构建 HTML 卡,他们想知道是否可以手动调整该卡中的辅助功能字段,特别是这些: 他们想要改变......的价值
我正在使用卡片来显示一些数据。我想在 UI5 中单击卡片时调用一些函数。 我正在使用卡片来显示一些数据。我想在 UI5 中点击卡片来调用一些功能。 <f:Card class="sapUiMediumMargin carousalCards" width="360px"> <f:content> <VBox height="370px" justifyContent="SpaceBetween"> <HBox justifyContent="SpaceBetween"> <VBox> <Title class="titleWidth" text="{getfileDefaultJSONModel>REFERENCE}" level="H1"/> <Text class="sapMGTSubHdrTxt" text="{getfileDefaultJSONModel>CREATION_DATE}"></Text> </VBox> <HBox class="checkedIcon"> <RadioButton custom:model="getfileDefaultJSONModel" select="fnCreateClone" text="{getfileDefaultJSONModel>ID}" groupName="GroupA" visible="{getfileDefaultJSONModel>RADIO_VISIBLE}"/> </HBox> </HBox> <HBox justifyContent="SpaceBetween" class="largeTileFooter"> <Text class="sapMTileCntFtrTxt" text="{getfileDefaultJSONModel>USER_ID} {getfileDefaultJSONModel>REFERENCE} Data"></Text> <Text class="sapMNCValue Neutral" text="{getfileDefaultJSONModel>JSON_SIZE}"></Text> </HBox> </VBox> </f:content> </f:Card> 目前sap.f.Card没有任何click活动。但是,您可以使用浏览器事件: var card = this.getView().byId("your-card-id"); card.attachBrowserEvent("click", function(event) { // handle card click }, this); 更新(2024-10) 自 UI5 1.131 起(提交:e207a13),所有 sap.f.CardBase 控件都支持 press 事件(当前处于实验阶段) if 卡的 semanticRole 设置为 "ListItem"。 之前的回答 在撰写本文时,sap.f.Card不提供任何新闻活动。你可以.. 遵循指南并仅使标题可点击。实现 sap.f.cards.IHeader 的控件确实提供 press 事件。 或者利用 sap.m.CustomListItem 和 type="Active" 使卡片内容可点击。 演示 globalThis.onUI5Init = () => sap.ui.require([ "sap/ui/core/Fragment", ], async Fragment => { "use strict"; const cardContent = `<Title text="Clickable Card" titleStyle="H4" /> <core:Icon xmlns:core="sap.ui.core" src="sap-icon://sap-ui5" size="4rem" color="#ff7b17" class="sapUiTinyMarginBottom" />`; const newerCard = await Fragment.load({ definition: `<f:Card xmlns:f="sap.f" xmlns="sap.m" width="18rem" press="alert('Card pressed!')" semanticRole="ListItem" class="sapUiSmallMargin" > <f:header> <cards:Header xmlns:cards="sap.f.cards" title="Header" statusText="Status" /> </f:header> <f:content> <FlexBox renderType="Bare" width="100%"> <HBox height="6.5rem" width="100%" justifyContent="SpaceAround" alignItems="Center" >${cardContent}</HBox> </FlexBox> </f:content> </f:Card>`, }); newerCard.placeAt("content"); const previousCard = await Fragment.load({ definition: `<f:Card xmlns:f="sap.f" width="18rem" class="sapUiSmallMargin"> <f:header> <cards:Header xmlns:cards="sap.f.cards" title="Separate Clickable Header" statusText="Status" press="alert('Header pressed')" /> </f:header> <f:content> <FlexBox xmlns="sap.m" renderType="Bare" width="100%"> <CustomListItem type="Active" press="alert('Card pressed')"> <HBox height="6.5rem" width="100%" justifyContent="SpaceAround" alignItems="Center" >${cardContent}</HBox> <layoutData> <FlexItemData minWidth="100%" /> </layoutData> </CustomListItem> </FlexBox> </f:content> </f:Card>`, }); previousCard.placeAt("content"); }); <script id="sap-ui-bootstrap" src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js" data-sap-ui-libs="sap.ui.core,sap.m,sap.f,sap.ui.unified,sap.ui.layout" data-sap-ui-onInit="onUI5Init" data-sap-ui-async="true" data-sap-ui-compatVersion="edge" data-sap-ui-excludeJQueryCompat="true" data-sap-ui-xx-waitForTheme="init" ></script> <body id="content" class="sapUiBody sapUiSizeCompact"></body>
最近我遇到了以下JSBin。在“JavaScript”部分,我们可以注意到全局 onUI5Init 侦听器内发生的初始化。这让我有点惊讶,因为所有的人......
赛普拉斯在 sapui5 Web 组件上进行测试,以确保在组合框下拉菜单上点击不可靠
我们在 Cypress 组件和 E2E 测试方面遇到了大量问题。 我们已经使用 V1 中的 Web 组件设置了一个用于 React 应用程序的 SAPUI5 Web 组件。 这一切都与组合框有关
如何正确引用部署在 BTP Cloud Foundry 上的 SAPUI5 组件以嵌入到另一个组件中(重用组件)
在 SAP BTP 上开发 Fiori 应用程序时,我一次又一次遇到同样的问题。我们如何将其他单独部署的组件嵌入到同一个CF Space中。 这是一个
我的自定义控件的数据绑定有问题。 我的控件继承自 sap.m.Input 并使用特殊的值助手对其进行扩展。我的新控件的新属性之一是一个简单的标题...
sap.ui.core.util.File.save 文件损坏?
我想在前端下载一个来自后端的 OData 文件。 该文件使用 FM 'SCMS_BASE64_ENCODE_STR' 进行编码,现在我想对其进行解码并使用 SAPUI5 下载它。 我...
转义符 Unicode 字符 \u000a 只能在 JavaScript 中使用。但是,我尝试在 XML 视图中添加换行符,如下所示。但不起作用: 转义字符 \n 和 Unicode 字符 \u000a 仅适用于 JavaScript。但是,我尝试在 XML 视图中添加换行符,如下所示。但不起作用: <u:TimelineItem text="First Line\n SecondLine" /> 文本控件中的新行可以添加以下字符: 在 XML 视图或 XML 片段中: 换行: 或
。 推荐:* 与 回车符结合使用: 或 
。 在 JS 或 i18n.properties 文件中: 换行:\n或\u000a。 推荐:* 与 回车符结合使用:\r\n 或 \u000d\u000a。 或者,考虑使用 模板文字,而不是手动连接上述字符(即简单地将 "..." 替换为 `...`)。 某些 UI5 控件允许开箱即用 HTML 标签 <br>(在 XML 中:<br>): sap.m.MessageStrip 自 UI5 v1.85 起:API 参考、示例 sap.m.FormattedText:API参考 * 请参阅 不同换行格式的问题。对于大多数互联网协议,建议使用回车符组合。 这是一个带有 sap.suite.ui.commons.TimelineItem* 和 sap.m.Text 的 UI5 演示: globalThis.onUI5Init = () => sap.ui.require([ "sap/ui/core/mvc/XMLView", "sap/m/Text", ], async (XMLView, Text) => { "use strict"; const view = await XMLView.create({ definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%"> <App xmlns="sap.m" autoFocus="false"> <Page showHeader="false" class="sapUiResponsiveContentPadding"> <commons:TimelineItem xmlns:commons="sap.suite.ui.commons" text="Multiline supported in Timeline items (XML)" /> <HBox id="myBox" justifyContent="SpaceAround"> <Text text="This is
a text (created in XML view)!" renderWhitespace="true" /> </HBox> </Page> </App> </mvc:View>`, }); const textCreatedInJS = new Text({ renderWhitespace: true, text: "And this\nis\u000aanother\r\ntext (created in JS)!", }); view.byId("myBox").addItem(textCreatedInJS); view.placeAt("content"); }); <script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.ui.core,sap.m,sap.suite.ui.commons" data-sap-ui-theme="sap_fiori_3" data-sap-ui-oninit="onUI5Init" data-sap-ui-async="true" data-sap-ui-compatversion="edge" data-sap-ui-excludejquerycompat="true" data-sap-ui-xx-waitfortheme="init" ></script> <body id="content" class="sapUiBody"></body> * TimelineItem 在 UI5 的早期版本中存在阻止多行的错误。根据 1.44.5 的变更日志: [修复] sap.suite.ui.commons.Timeline:改进了多行文本的渲染 如果使用控件 sap.m.Text,请记住启用属性 renderWhitespace 和 wrapping 以便在 DOM 中渲染新行。 对于 UI5 控件开发人员 在 DOM 中渲染文本可以通过 .text(/*...*/) 中的 API RenderManager 来实现。然而,即使文本包含上述换行符,该 API 也不一定应用换行符。在这种情况下, white-space 属性 pre-line 可以应用于控件的 CSS 样式: .myControlWithText { /* ...; */ white-space: pre-line; /* Allows line break characters to be applied */ } 而不是 您可以使用表达方式:“”。 例如: Text="{TOPOLINO} - {=${PAPERINO} === 'NA' || ${PAPERINO} === 0 ? '---' : ${PAPERINO}}{PAPERONE} " 您可以使用embeddedControl聚合来使用文本控件 在时间轴项目内 <u:TimelineItem> <u:embeddedControl><Text text="First Line\n SecondLine"></Text></u:embeddedControl> </u:TimelineItem>
我在 Business Applications Studio SAPUI5 的控制器中有此方法,但它无法按预期工作。 我希望使用提供的对象密钥将该文件附加到发票上,该对象密钥适用于...
SAPUI5 演示套件提供代码示例。如何在本地实际使用它们?
我刚刚开始使用 SAPUI5,我实际上很好奇这些示例是如何工作的。 例如:https://ui5.sap.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutColumnRes...
如何在 SAPUI5 中更新 JSON 文件(不仅仅是 JSON 模型)?
我有一个 SAPUI5 应用程序,其中我的模型下有一个 JSON 文件 users.json,如下所示: {“姓名”:“约翰”} 我想通过单击按钮来更新 JSON 文件 {“南...
我的目标是在 Fiori Elements 对象页面的页脚中有两个按钮。 一个按钮是接受实体,另一个按钮是拒绝对象页面上的实体。 为了强调这一点,我想...
如何设置@Conclusion.filter.defaultValue的日期范围?
我正在使用 ABAP Restful 应用程序编程模型 - oData v2。 我希望能够默认指定一个日期范围,例如过去 3 个月内的 CreationDate。 在非常基础的层面上,我可以定义...
语句既不进入 SalesOrder 应用程序,也不在控制台中打印任何错误
我想在启动板中的应用程序之间导航。我通过大量搜索发现,通过 ushell 中的 CrossApplicationNavigation 就是这样。这是文档的链接(SAPUI5...
我无法理解这个问题。我在忽略什么? 这是一个最小示例:https://plnkr.co/edit/VjqGeG9JpHblyLBb?preview 我无法理解这个问题。我忽略了什么? 这是一个最小示例:https://plnkr.co/edit/VjqGeG9JpHblyLBb?preview <tnt:InfoLabel text="{ path: 'LastName', formatter: '.formatter.typeText' }" colorScheme="{ path: 'LastName', formatter: '.formatter.typeColor' }" /> // formatter.js sap.ui.define([], function () { "use strict"; return { typeText: function(sLastName) { // Called with 'sLastName' value }, typeColor: function(sLastName) { // Not called } }; }); 我正在使用 UI5 1.79 和 sap.ui.model.odata.v4.ODataModel。 将 targetType: 'any' 添加到存在问题的属性绑定信息中。 <tnt:InfoLabel text="{ path: 'LastName', formatter: '.getMyText' }" colorScheme="{ path: 'LastName', formatter: '.getMyColorScheme', targetType: 'any' }" /> 使用 v4.ODataModel,属性绑定中的 数据类型 会根据实体属性的 EDM 类型自动确定。 IE。在上面的情况下:即使没有将某个 type 显式分配给 text 属性,v4.ODataPropertyBinding 也会自动选择 String 类型(因为 LastName 在 $metadata 中有 Type="Edm.String")并分配到type: <tnt:InfoLabel text="{ path: 'LastName', formatter: '.getMyText', type: 'sap.ui.model.odata.type.String' <-- automatically added by v4.ODataPropertyBinding }" 这对于 text 属性来说很好,因为它实际上等待 string 值,但对其他属性(例如等待 int 值的 colorScheme)执行相同操作,会导致 FormatException。* 为了防止自动类型确定,必须添加targetType: 'any'。 * 使用 commit:4611772(从 1.80 开始可用),我们可以在控制台中看到相应的错误消息: “Element sap.tnt.InfoLabel#...”的属性“colorScheme”中的FormatException:不是有效的int值。 提示:复合绑定和绑定表达式中引用的单个属性会自动转换为绑定控件属性的类型,除非指定了不同的“targetType”。 targetType:'any' 可能会避免转换并导致预期的行为。 意外定义Expression Binding时,上述错误也适用。尽管表达式绑定语法有效,但请参阅 “属性中的 FormatException ...”错误
我想更改SapUI5中输入控件按向上和向下箭头时的增量步骤,但我无法在文档中找到这样的属性。 我想更改 SapUI5 中输入控件按向上和向下箭头时的增量步骤,但我无法在文档中找到这样的属性。 <Input type="Number" value="{/config/value}" liveChange="onPriceChange" editable="true"/> HTML 中的输入有类似“step”属性的东西吗? 您可以尝试使用 sap.m.StepInput 的属性 step 来代替。 不,SAPUI5 中没有“step”属性,因为“Number”类型的 sap.m.Input 完全依赖于 HTML5 输入。也许你可以更新 DOM 元素中的“step”属性。 我们现在可以通过在命名空间声明 xmlns:html="http://www.w3.org/1999/xhtml" 来在 SAPUI5 中使用 HTML 标签,并使用我们希望拥有的任何 html 标签。 示例代码: <mvc:View controllerName="com.sap.demo.DemoApp.controller.Master" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core"> <Page id="idPage" title="Demo App"> <content> <!-- Use 'html:' before whichever html tag you want to use --> <html:input type="number"/> </content> </Page> </mvc:View> 希望这有帮助!
您能告诉我如何在SAPUI5中的OData V4中执行OData Read吗? 我可以在 OData V2 中轻松完成此操作,如何使用 oData V4 实现类似的功能? this_.getOwnerComponent().getModel("我的...
我正在设计一个基本布局。我想在与图标选项卡栏相同的行中添加一个按钮。我可以找到任何解决方案。上面贴了一张图片供参考。 我正在设计一个基本布局。我想在与图标选项卡栏相同的行中添加一个按钮。我可以找到任何解决方案。上面贴了一张图片供参考。 <mvc:View controllerName="Workspace.test01.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"> <Page title="{i18n>homePageTitle}"> <content> <IconTabBar id="idIconTabBarNoIcons" class="sapUiResponsiveContentPadding"> <items> <IconTabFilter text="abc" class="Tabheader"> </IconTabFilter> <IconTabFilter text="fdvvvfv"></IconTabFilter> <IconTabFilter text="vdfvvdvvv"></IconTabFilter> <IconTabFilter text="Avfdsd"></IconTabFilter> </items> </IconTabBar> </content> </Page> 您可以使用 HBox 和 layoutData 来实现 <l:VerticalLayout width="100%" > <HBox> <IconTabBar> <items> <IconTabFilter text="abc" class="Tabheader"> </IconTabFilter> <IconTabFilter text="fdvvvfv"></IconTabFilter> <IconTabFilter text="vdfvvdvvv"></IconTabFilter> <IconTabFilter text="Avfdsd"></IconTabFilter> </items> <layoutData> <FlexItemData growFactor="2" /> </layoutData> </IconTabBar> <Button text="Button" class="sapUiSmallMarginTop sapUiTinyMarginBegin" /> </HBox> </l:VerticalLayout> 输出 您可以使用按钮添加聚合,但随后它会呈现在 IconTabBar 下方。我想你最好的选择是扩展 IconTabBar 并创建一个接受聚合中按钮的自定义控件。 也许可以使用这个 SAPUI5 控件:https://sapui5.hana.ondemand.com/#/api/sap.m.TabContainer%23overview
我有一个 ToolPage 应用程序。 SideContent 的内容需要从 Firestore 集合读取的响应中填充,这是异步的(承诺)。 到目前为止,每一次尝试解决这个问题......