Skip to Content

How can I change the width of a card in overview page?

Jul 26, 2017 at 02:58 PM


avatar image


I need to change the width of some cards, for example some card has to be twice wider, than others, as on screenshot. But I can't find out how to do that. Is there any property or setting, that control the width of each card? Or if not, why have the cards different width on screenshot, that I took from developer guide?
Thank you in advance!

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
Prasita Prabhakaran
Jul 29, 2017 at 01:13 PM

Hello Kartoev,

As of now this is not supported. A concept for resizable cards is being worked on and will be made available in upcoming release.



10 |10000 characters needed characters left characters exceeded
Jan MATTFELD Nov 15, 2017 at 01:47 PM

Until the official API is available, you could use some monkey patching.

  1. Create a controller extension of as described here.
  2. Patch the createCard method as follows:
onInit: function() {
    // Store original function for later
    this.createCardOriginal = this.createCard;
    // Create a new function to adjust card width
    this.createCard = function(card) {
        // Check for card width setting in manifest and change if needed
        if (card.settings.colSpan) {
            card.dashboardLayout.colSpan = card.settings.colSpan;

3. Set a new width for your card in the manifest.json as colSpan and enable the resizable containerLayout:

"sap.ovp": {
    "containerLayout": "resizable",
    "cards": {
        "card01": {
            "model": "",
            "template": "",
            "settings": {
                "title": "{{card01_title}}",
                "entitySet": "Products",
                "colSpan": 3
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Jan,

Thanks a lot for suggesting an way. I tried but seems am missing something. So, looking for some more information.

1. The code of step 2 will go in customConfiguration.js that was created in step-1 ? Can I just copy paste code of step-2 as is or will have to modify ? (Got syntax error when I copied code as is )

2. mainfest.json - extends section of the descriptor will also be as is ?

"extends": {
	"extensions": {
		"sap.ui.controller.Extensions": {
			"": {
			"controllerName": "sap.ovp.demo.ext.customConfiguration"

I am beginner level developer so, my questions might be very basic :)



Tejas Chouhan Dec 29, 2017 at 10:21 AM

This is still in roadmap :)

ovpage.png (72.1 kB)
Show 2 Share
10 |10000 characters needed characters left characters exceeded

You can still add custom code to extend width.


Hi Tejas,

I see Jan suggested a way in comment section to add custom code to change the width of card .

I tried but isn't working for me, guess I am missing something.

Is that the only way ? Would you please outline steps of recomended way to achieve it ?

Thanks in for all of your contribution to SAP community.



Sharath M G Jul 29, 2017 at 07:25 PM

Use CSS, if you need to increase the width of the cards. Inspect the element and identify the CSS app lied to the card and its width being applied.

Incorporate those changes to the CSS in your file and test it.



10 |10000 characters needed characters left characters exceeded