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

[Former Member]

Hi.

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!

[kyun_ryu · Accepted solution]

"sap.ovp": {
"globalFilterModel": "YSFLIGHT_SRV",
"globalFilterEntityType": "Sflight",
"containerLayout": "resizable",
"cards": {
"SflightOverview_card00": {
"model": "YSFLIGHT_SRV",
"template": "sap.ovp.cards.table",
"settings": {
"title": "{{ysflight_card00_title}}",
"subTitle": "{{ysflight_card00_subTitle}}",
"entitySet": "SflightSet",
"sortBy": "Carrid",
"sortOrder": "ascending",
"addODataSelect": "true",
"defaultSpan" : {
"cols": 3,
"rows": 35
},
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Table"
}
},

[ketann · Accepted solution]

This code helped me to resolve my default size issue in card. Thank you !

"defaultSpan" : {
"cols": 3,
"rows": 35

}, 

[Abhi9 · Accepted solution]

Just wondering is it still valid solution for version 1.108 and above . none of the props gets reflected .. stopResizing, defaultSpan and if i change containerLayout to Fixed it just throws an exception .

[former_member103161]

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.

Regards,

Prasita

[tejasChouhan]

This is still in roadmap 🙂

[tejasChouhan]

You can still add custom code to extend width.

[former_member289890]

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.

Thanks,

Tanveer

[Former Member]

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

1. Create a controller extension of sap.ovp.app.Main 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;
        }
        this.createCardOriginal(card);
    };
}

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": "pp.cards.customcard",
            "settings": {
                "title": "{{card01_title}}",
                "entitySet": "Products",
                "colSpan": 3
            }
        }
    }
}

[former_member289890]

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": {
			"sap.ovp.app.Main": {
			"controllerName": "sap.ovp.demo.ext.customConfiguration"
			}
		}
	}
},

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

Thanks,

Tanveer

[Sharathmg]

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.

Regards,

Sharath