on 07-26-2017 3:58 PM
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!
"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"
}
},
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
This code helped me to resolve my default size issue in card. Thank you !
"defaultSpan" : {
"cols": 3,
"rows": 35
},
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
Until the official API is available, you could use some monkey patching.
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
}
}
}
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
86 | |
10 | |
10 | |
9 | |
7 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.