vCloud Director 9.7 Portal Custom Branding

Posted on by

Much awaited feature for cloud provider to match thier corporate  standards and to create a fully custom cloud experience, now with release on vCloud Director 9.7 you can set the logo and the theme for your vCloud Director Service Provider Admin Portal and also now you can customize the vCloud Director Tenant Portal of each tenants . In addition, you can modify and add custom links to the two upper right menus in the vCloud Director provider and tenant portals.

Provider Portal Branding

vCloud Director 9.7 UI can be modified for the following elements:

  • Portal name
  • Portal color
  • Portal theme (vCloud Director contains two themes – default and dark.)
  • Logo & Browser icon

Customize Portal Name ,Portal Color and Portal Theme

To configure the Cloud Provider Portal Branding , make a PUT request to vCloud Director end point as below:

  • PUT – https://<vCD Url>/cloudapi/branding
  • BODY – {
    “portalName”: “string”,
    “portalColor”: “string”,
    “selectedTheme”: {
    “themeType”: “string”,
    “name”: “string”
    },
    “customLinks”: [
    {
    “name”: “string”,
    “menuItemType”: “link”,
    “url”: “string”
    }
    ]
    }
  • Headers
    • 2.png

Here is my API call using Postman client:

1.png

Customize Logo

To change the Logo, here is the procedure for API

  • Headers
    • 4.png
  • PUT
  • Body – This is bit tricky since we need to upload an image as a body.
    • In Postman client inside “Body” click on “Binary” which will allow you to choose file as body. select your logo.
    • 5.png

Customize Icon

To customize the icon, follow this API call and procedure.

  • Headers
    • 9.png
  • PUT
  • Body – same as above section , choose a image
    • 10.png

so after running above API calls , here is what my vCloud Director provider portal looks like.

678.png

Tenant Portal Branding

As we did above similarly we can now fully customize Tenant Portal

Customize Portal Name ,Portal Color and Portal Theme

To configure the Cloud Provider Portal Branding , make a PUT request to vCloud Director end point in to tenant organisation as below: ( T1 is my org Name)

  • PUT – https://<vCD Url>/cloudapi/branding/tenant/T1
  • BODY – {
    “portalName”: “string”,
    “portalColor”: “string”,
    “selectedTheme”: {
    “themeType”: “string”,
    “name”: “string”
    },
    “customLinks”: [
    {
    “name”: “string”,
    “menuItemType”: “link”,
    “url”: “string”
    }
    ]
    }
  • Headers
    • 11.png

Here is my API call using Postman client:

12.png

Customize Logo

To change the Logo, here is the procedure for API

  • Headers
    • 4.png
  • PUT
  • Body – As said above ,this is bit tricky since we need to upload an image as a body.
    • In Postman client inside “Body” click on “Binary” which will allow you to choose file as body, select your logo.
    • 14.png

Once i have done with above API calls, this is how my Tenant portal look like for “T1” organisation.

15.png

For a particular tenant, you can selectively override any combination of the portal name, background color, logo, icon, theme, and custom links. Any value that you do not set uses the corresponding system default value.

This completes feature walk through of Provider and Tenant custom branding options available now with vCD9.7.

14 thoughts on “vCloud Director 9.7 Portal Custom Branding”

  2. I am not able to customise my tenant portal using these steps are you able to let me know for which versions this works for? The API works to customise the tenant portals after you have logged in but at the login prompt it remains matching the provider portal.

    Like

    Reply ↓

    • By default, no org-specific branding will be shown outside of a logged in session that means it would not appear on login and logout pages.
      if you wish to allow branding outside of logged in sessions, you can use the cell management tool to execute the following command:
      manage-config -n backend.branding.requireAuthForBranding -v false

      Like

      Reply ↓

  3. Just one comment about Header “Content-type”, when you try to change the logo per-tenant, you need to put only “image/png” without “;version=32” because you receipt the error message:

    “Refused to load the image ‘unsafe:data:image…’ because it violates the following Content Security Policy directive: “img-src * data: blow: ‘unsafe-inline'”.

    then you never see changes when you tried to put a logo per-tenant. So you change that to ‘image/png’ and everything will work fine.

    Regards

    Like

    Reply ↓

  4. Hello i am using /branding/logo rest api with image svg+xml format. it is working fine with vcloud 9.5 (API version 31.0) but with vcloud 9.7 (API version 32.0) i get error message from portal :

    Refused to load the image ‘unsafe:data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDIxMS41IDEwMS41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMTEuNSAxMDEuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cG…0zLjEtMy40di03LjdoLTEuN3Y3LjgNCgkJCQkJYzAsMy4xLDEuOSw0LjksNC44LDQuOWMzLDAsNC44LTEuOCw0LjgtNC45VjMzLjV6IE0xMzEuNSw0NS45YzIuOSwwLDQuNC0xLjQsNC40LTMuNGMwLTEuOC0xLTIuNy0yLjgtMw0KCQkJCQljMS40LTAuNCwyLjQtMS40LDIuNC0yLjljMC0yLjUtMi41LTMtNC40LTNoLTQuNXYxMi40SDEzMS41eiBNMTI4LjMsNDQuNHYtNC4yaDIuNWMxLjcsMCwzLjMsMC4zLDMuMywyLjENCgkJCQkJYzAsMS4zLTAuOSwyLjItMi45LDIuMkgxMjguM3ogTTEyOC4zLDM4LjhWMzVoMi41YzEuMywwLDIuOSwwLjMsMi45LDEuOWMwLDEuMy0xLjIsMi0yLjgsMkgxMjguM3oiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K’ because it violates the following Content Security Policy directive: “img-src * data: blob: ‘unsafe-inline'”.

    I need help top be able to reuse my vRO workflow that was working fine in vCloud 9.5.

    Best regards
    joel B.

    Like

    Reply ↓

      • Hello, thanks for the tips. i will try it and let you know but as the image is SVG format i think it will not work properly.

        Like

      • Hello all,

        sorry for my late response. The test using image/png as contet-type was completed successfully as expected. Unfortunately i was not able to use PNG image as ResourceElement within vRO. This application is not able to transfer Byte from a Binary file. therefore i use a cURL command executed in the vRO appliance and this was executed successfully.

        Hope this workaround helps people

        Like

  5. Hi, thanks for the most useful post. Given the sprawling documentation and so much confusion created by a rapidly changing API, this has been most helpful and saved me a lot of time.

    Can portalColor be pointed to an image file instead of a plain solid color ?

    I ask because I have seen an indication that this may be possible through powershell.

    thank you.

    Like

    Reply ↓

  7. Pingback: Customize Vcloud Director Portal - Find Official Portal

  8. Just wanted to say that the /branding API also allows you to create custom themes by uploading your own CSS overriding CSS variables. This was added in 10.2 and has been backported all the way back to 9.7. See https://blogs.vmware.com/cloudprovider/2020/11/build-custom-theme-cloud-director.html You’ll need the following API calls: POST /branding/themes and https://developer.vmware.com/apis/vmware-cloud-director/latest/cloudapi/branding/themes/name/contents/post/ . The POST /branding/themes/contents will return a link in the header for the link to actually upload a binary to, whose header should be setting its type of `Content-Type: text/html`

    Like

    Reply ↓

Leave a comment