Some time ago I blogged about the possibility to link to vCloud Availability Portal directly from vCloud Director UI (here and here). This was done by inserting custom links into the vCloud Director Flex UI.
vCloud Director 9.x tenant HTML5 UI provides much richer possibilities to embed additional links, pages and full websites. My colleague Kelby Valenti wrote two whitepapers and one blog post how to do so.
Extending VMware vCloud Director User Interface Using Portal
Publishing vCloud Director User Interface Extensions
VMware also already released one service that integrates its UI into vCloud Director – vRealize Operations Tenant App.
In the below screenshot you can see VCD UI extended with five new sections that appear as additional menu options next to Datacenters, Libraries and Administration:
Stub Module – default example included in the UI Extensibility SDKÂ providing static page example (Terms of Service, etc.).
Operations Manager – above mentioned vRealize Operations Tenant App
Blog – this blog embedded as iframe.
Documentation – Static page with links to vCloud Director documentation.
The last module is the vCloud Availability 2.0 portal – the subject of this article:
It is also embedded using iframe.
I am attaching the source files so you can download and adapt them for your purposes. You will also need the SDK and I recommend deployment automation created by Kelby as described in his blog post listed above.
Some notes:
- The actual link to the portal is in the src/main/vcav.component.ts file. In my case it is
https://portal.proxy.cpsbu.localso replace it with the correct link for your environment. - For security reasons the vCloud Availability portal prohibits being rendered in browser frame by setting X-Frame-Options header to DENY. To work around this limitation I am replacing the header with X-Frame-Options: ALLOW-FROM <VCD-url> on the existing load balancer that is load balancing my two vCloud Availability Portal nodes as well as redirecting external port 443 to appliances’ port 8443. This is done with NSX Edge Gateway, SSL termination and the following application rule:
- The link to the portal is also passing the vCloud Director session authentication token for Single Sign-On. Note that however in the current release (2.0.1) this functionality is broken.
Tom Fojta's Blog 
Hello,
is there any official Developer Guide for new HTML UI extension framework to download ? I cant find anything besides github examples and partial readme files on: https://github.com/vmware/vcd-ext-sdk/blob/master/ui/vcd-plugin-seed/README.md
Regards
Tom
Yes, read the 2 whitepapers linked above.
Hi Tom, Cloud you please share the source for the example this blog embedded as iframe ? Thanks
Sure: https://www.dropbox.com/s/d5mwvbbhpejbm3e/Fojta_blog.zip?dl=0
Thanks for sharing Tom! Interesting issue. To get your blog example to work properly, I had to remove the following line from `fojta.component.scss`:
`height: 100%;`
I tested this with the latest Chrome and Safari.
is this possible for vsphere itself.. i.e. embedding a web page?
Any webpage can be embedded as long as the end-user browser can reach it. If you want to proxy vCenter access have a look at the SDDC Proxy feature: https://docs.vmware.com/en/vCloud-Director/10/com.vmware.vcloud.spportal.doc/GUID-090BFA79-CFA9-48B5-B1D6-D8D9C1BF4D8A.html
Hi Tomas, looking at writing some of our own extensions and can’t find either of the whitepapers linked – I know I’ve read them before, any chance the links can be updated? Thanks in advance, Jon.
The white papers are no longer available on line. Not sure why. Contact me privately and I can share them with you.
Hi Tom,
Trying to make work Commvault plugin in Cloud Director 10.2.1 (not oficially supported by Commvault, on ly supported for 10.1), installs ok but does not show after publishing, I think it only likes Customize plugin 2.0 and not 2.0.2 that is shipped with 10.2.1.
We deleted by mistake the customize portal plugin, so never again shows the Customize Portal button where it should. Is there anyway to reinstall the Customize Portal plugin? I cannot find anywhere to download it or instructions to reinstall it. Help will be appreciated! Thanks in advance!
You should be able to find the plugin ZIP on a fresh installation in `opt\vmware\vcloud-director\system\com\vmware\vcloud\post-install-configure\1.0.0\post-install-configure-1.0.0.jar\uiPlugins\`
But please open an SR if you really think it is dues Customize Portal plugin version.