Question

我正在使用卡片显示一些数据。我想在sapui5中单击卡控件时调用某些功能。

<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>

Answer 1

当前，click没有任何var card = this.getView().byId("your-card-id"); card.attachBrowserEvent("click", function(event) { // handle card click }, this);事件。但是，您可以使用浏览器事件：

{{1}}

Answer 2

在撰写本文时，sap.f.Card 不不提供任何新闻活动。你可以..

遵守指南，仅单击标题即可。实现sap.f.cards.IHeader的控件确实提供了press事件。
或将sap.m.CustomListItem与type="Active"配合使用，以使卡片内容可点击。请参见下面的演示：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core">
    <f:Card xmlns:f="sap.f" class="sapUiTinyMargin" width="10rem">
      <f:content>
        <CustomListItem type="Active" press="alert('Card clicked!')">
          <VBox height="9rem" justifyContent="SpaceAround" alignItems="Center">
            <Title text="Clickable Card" titleStyle="H4" />
            <core:Icon src="sap-icon://sap-ui5" size="4rem" color="#ff7b17"/>
          </VBox>
        </CustomListItem>
      </f:content>
    </f:Card>
  </mvc:View>`,
}).then(view => 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.f, sap.ui.layout"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-xx-waitForTheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

sapui5中的新闻事件或来自卡片控制的导航

2 个答案: