CODEWITHSUNDEEP
sapui5
user3736228
user3736228

Reputation: 283

How do I achieve the same thing with sap.m.CustomListItem in JS View?

I would like to list down all the information like in the sap.m.ObjectListItem but with sap.m.CustomListItem, see the screenshot attached. How do I achieve that? any working example?

enter image description here

This is what I have done so far, still a long way to go:

var oListTemplate = new sap.m.CustomListItem({
      content: [
        new sap.m.VBox({
          items: [
            new sap.m.Text({
              text: "{nct_id}"
            }),
            new sap.m.HBox({
              justifyContent: "SpaceBetween",
              items: [
                new sap.m.Label({
                  textAlign: sap.ui.core.TextAlign.Left,
                  text: "{title}",
                }).addStyleClass("Text_Big font_bold"),
                new sap.m.FormattedText({
                  textAlign: sap.ui.core.TextAlign.Right,
                  htmlText: "{condition_summary}"
                }),
              ]
            }).addStyleClass("sapUiTinyMargin")
          ]
        }).addStyleClass("sapUiTinyMargin"),
      ],
      type: sap.m.ListType.Active,
      press: function() {
        alert("Clicked the list item");
      }

Upvotes: 1

Views: 1895

Answers (1)

Inizio
Inizio

Reputation: 2256

Here is what you are looking for, hope this help you. As @Erch suggested better to use XML view.

JS

var oListTemplate = new sap.m.CustomListItem({
    content: [
      new sap.m.HBox({
        items: [
          new sap.m.FlexBox({
            items: [
              new sap.m.VBox({
                width: "80%",
                items: [
                  new sap.m.ObjectIdentifier({ title: "", text: "", titleActive: "false" }),
                  new sap.m.Label({ text: "" }),
                  new sap.m.Label({ text: "" })
                ],
                layoutData: new sap.m.FlexItemData({ growFactor: 3 })
              })
              new sap.m.VBox({
                width: "100px",
                items: [
                  new sap.m.Label({ text: "" }),
                  new sap.m.Label({ text: "" }),
                  new sap.m.ObjectStatus({ text: "", state: "Success" })
                ],
                layoutData: new sap.m.FlexItemData({ growFactor: 1 })
              })
            ],
            width: "100%",
            alignItems: "Start"
          })
        ],
        width: "100%",
        fitContainer: "true"
      }).addStyleClass("sapUiTinyMargin"),
    ],
    type: sap.m.ListType.Active,
    press: function() {
      alert("Clicked the list item");
    })
}

XML

<List>
    <items>
        <CustomListItem>
            <HBox width="100%" fitContainer="true">
                <FlexBox width="100%" alignItems="Start" class="sapUiTinyMargin">
                    <items>
                        <VBox width="80%">
                            <ObjectIdentifier title="" text="" titleActive="false" />
                            <Label text="" />
                            <Label text="" />
                            <layoutData>
                                <FlexItemData growFactor="3" />
                            </layoutData>
                        </VBox>
                        <VBox width="100px" class="sapUiTinyMarginBegin">
                            <items>
                                <Label text="" />
                                <Label text="" />
                                <ObjectStatus text="Product Shipped" state="Success" />
                            </items>
                            <layoutData>
                                <FlexItemData growFactor="1" />
                            </layoutData>
                        </VBox>
                    </items>
                </FlexBox>
            </HBox>
        </CustomListItem>
    </items>
</List>

Upvotes: 1

Related Questions