Skip to Content
avatar image
Former Member

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

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!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    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.

    Regards,

    Prasita

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    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 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
                }
            }
        }
    }
    Add comment
    10|10000 characters needed 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": {
      			"sap.ovp.app.Main": {
      			"controllerName": "sap.ovp.demo.ext.customConfiguration"
      			}
      		}
      	}
      },

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

      Thanks,

      Tanveer

  • Dec 29, 2017 at 10:21 AM

    This is still in roadmap :)

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Jul 29, 2017 at 07:25 PM
    -4

    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

    Add comment
    10|10000 characters needed characters exceeded