If you’ve already navigated through SAP Fiori Design Guidelines you probably have already bumped into the Overview Page concept, a page supposed to be the entry point to a user, having all the information and actions he or she daily needs. Until now, this layout was only available in Fiori Elements, those data-driven generated applications, but now, in UI5 1.62 version, we have the opportunity to develop our own pages using Cards that are the OVP layout basis. Currently, this component has really confusing documentation, so I thought I could share with you what I’ve found and show you how to create a simple application using them.

All code shown here is available in my Github repo.

So, first of all, I created a simple blank UI5 app to start with. Inside our main page, to display Cards, we can use sap.f.CardContainer as an aggregator (this component doesn’t have documentation yet, but is used in some samples). Then, we can define as many Cards as we want, like this:

<mvc:View controllerName="card-blog.Sample.controller.Dashboard" 
	xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
	xmlns="sap.m"
	xmlns:f="sap.f"
	xmlns:w="sap.ui.integration.widgets"
	xmlns:core="sap.ui.core">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" 
							title="{i18n>pageTitle}">
					<content>
						<f:CardContainer>
							<w:Card />
						</f:CardContainer>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Ok, if you try to run this app, you’ll see that the page is still blank. So, let’s take a look a the Card properties:

Height and width are self-explanatory, but this manifest was my main problem when trying to develop cards. Type any doesn’t help too, we have no idea what to put in here. So, there are some samples with examples of how to define a manifest, but I’ll compile here everything that is possible.

First of all, the manifest is simply a JSON file you can define within your files structure. It always starts like this:

"sap.card": {
  "type": "List" //or Analytical
  ...
}

And you define all the properties inside this object. Currently, you can create List or Analytical cards, so I’ll show you which properties you can use in each of them.

List Card

Header

Default

The default header has these options:

{
  "ListDefaultHeader": {
    "sap.card": {
      "type": "List",
      "header": {
        "title": "Title",
        "subTitle": "Subtitle",
        "icon": {
          "src": "sap-icon://accept",
          "alt": "AltIcon",
          "shape": "Circle",
          "text": "IconText",
          "backgroundColor": "green",
          "color": "#fff"
        },
        "status": {
          "text": "status"
        }
      }
    }
  }
}

It generates this card:

I couldn’t really make backgroundColor and color work, but the options are there, maybe I’m missing something.

Numeric

The numeric header has these options:

"ListNumericHeader": {
    "sap.card": {
      "type": "List",
      "header": {
        "title": "Title",
        "subTitle": "Subtitle",
        "type": "Numeric",
        "unitOfMeasurement": "g",
        "mainIndicator": {
          "number": "100",
          "trend": "Down", //Down, None or Up
          "state": "Critical" //Critical, Error, Good or Neutral
        },
        "details": "Details",
        "sideIndicators": [
          {
            "title": "SideIndicator1",
            "number": "200",
            "unit": "mg"
          },
          {
            "title": "SideIndicator2",
            "number": "400",
            "unit": "mg"
          }
        ]
      }
    }
  }

And it looks like this:

For the numeric header, we can fetch data, but I’ll talk about this later.

Content

On List cards, we define where the data comes from and how it should be shown for each item in the list. For hardcoded data, you can define it like this:

"content": {
        "data": {
          "json": [
              {
                "title": "Item1 Title",
                "description": "Item1 Description",
                "info": "Item1 Info",
                "state": "Error"
              },
              {
                "title": "Item2 Title",
                "description": "Item2 Description",
                "info": "Item2 Info",
                "state": "Warning"
              },
              {
                "title": "Item3 Title",
                "description": "Item3 Description",
                "info": "Item3 Info",
                "state": "Success"
              }
            ]
        },
        "item": {
          "title": {
            "label": "TitleLabel",
            "value": "{title}"
          },
          "description": {
            "label": "DescLabel",
            "value": "{description}"
          },
          "info": {
            "label": "InfoLabel",
            "value": "{info}",
            "state": "{state}" //Error, Success, Warning or None
          },
          "highlight": "{state}", //Error, Success, Warning, None or Information
          "icon": {
            "src": "sap-icon://action",
            "alt": "AltIcon",
            "shape": "Circle", //Square or Circle
            "text": "IconText",
            "backgroundColor": "green",
            "color": "#fff"
          }
        }
      }

And it looks like this:

Of course, you won’t always use data defined like this. If you have an API endpoint to fetch data from, you can use the request property, instead of json:

"data": {
  "request": {
    "mode": "cors", //no-cors, same-origin or cors
    "method": "GET", //GET or POST
    "parameters": {
      "type": "1"
    },
    "headers": {
      "x-csrf-token": "123456789"
    },
    "url": "https://urltest.com/test"
  },
  "path": "/Items"
}

Inside request, the only required property is url, so only use the other ones if needed.

With this structure, you can already do a lot with lists (visually, at least), but some main features are still missing, like setting an onClick callback for the items.

Analytical Card

Header

Header works exactly the same for both types of cards.

Content

As stated in Fiori Guidelines for Analytical Cards:

The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data.

Its structure is as follow:

"content": {
  "data": {
    "json": [
        {
          "Dimension": "Dimension1",
          "Measure": 1
        },
        {
          "Dimension": "Dimension2",
          "Measure": 2
        },
        {
          "Dimension": "Dimension3",
          "Measure": 3
        }
      ]
  },
  "chartType": "Line", //Line, StackedColumn, StackedBar or Donut
  "legend": {
    "visible": true,
    "position": "Top", //Top, Bottom, Left, Right
    "alignment": "Center" //TopLeft, Center
  },
  "plotArea": {
    "dataLabel": {
      "visible": true,
      "showTotal": true
    },
    "categoryAxisText": {
      "visible": true
    },
    "valueAxisText": {
      "visible": true
    }
  },
  "title": {
    "visible": true,
    "text": "Chart title",
    "alignment": "Left" //Left, Center, Right
  },
  "measureAxis": "valueAxis",
  "dimensionAxis": "categoryAxis",
  "dimensions": [
    {
      "label": "Dimension1",
      "value": "{Dimension}"
    }
  ],
  "measures": [
    {
      "label": "Measure1",
      "value": "{Measure}"
    }
  ]
}

The result is this chart:

Of course, the data can be fetched from an API as shown before.

So, as of this version, that’s all we can achieve using cards. Personally, this is an exciting addition, and I’m looking forward to the next steps and types of Cards we’ll be able to use in the future. Information on how to set the manifests to the model and for the complete code, head to my Github repo.