Timeline.view.xml

<mvc:View
  xmlns:commons="sap.suite.ui.commons"
  controllerName="org.openui5.bestofui5.controller.Timeline"
  xmlns:m="sap.m"
  xmlns="sap.ui.webc.fiori"
  xmlns:webcm="sap.ui.webc.main"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true"
  height="100%"
>
  <m:FlexBox
    width="{= ${device>/system/phone} === true ? '' : '1024px' }"
    height="100%"
    direction="Column"
    alignItems="{= ${device>/system/phone} === true ? 'Inherit' : 'Center' }"
    justifyContent="Start"
  >
    <Timeline items="{path: 'versions>/', sorter : { path : 'date',descending: 'false' }}">
      <TimelineItem
        titleText="{versions>version}"
        name="{versions>name}"
        nameClickable="true"
        nameClick=".onNameClick($event, 'mycustomString')"
        subtitleText="{= ${i18n>list_item_tag_updated}.replace('{0}', ${
          path: 'versions>date',
          type: 'sap.ui.model.type.Date',
          formatOptions: {
            source : {
              pattern: 'yyyy-MM-ddTHH:mm:ss.SSSZ'
            },
            relative: true,
            relativeScale: 'auto',
            relativeStyle: 'wide'
          }
        }) }"
      />
    </Timeline>
  </m:FlexBox>
</mvc:View>