Extension point to create primary tabs for custom objects?

[ChrisSmith2]

What is the correct extension point to create primary tabs for custom objects? I haven't been able to find this in the documentation.

The built-in objects, such as Hosts, have the default tabs (Summary, Monitor, Manage) but also have dedicated tabs that bring up specific lists of related objects (e.g. for Hosts, these are Networks, VMs, and Datastores).

I'd like to provide the same functionality when one of my custom objects is selected. Currently, I can set up relationships, but only the default tabs appear and all the relationships are grouped under a single vague "Related Objects" tab.

I can understand that it might not be possible to add tabs to the built-in objects, to avoid too many tabs existing, but shouldn't it be possible to do this for custom objects?

[laurentsd]

Yes, you can add top level tabs for custom objects. Here is how to do it in the case of the ChassisB-html sample:

   <!-- New top level tab extension -->

   <extensionPoint id="com.vmware.samples.chassisb.customTab">

      <objectType class="com.vmware.vise.mvc.model.ViewSpec"/>

   </extensionPoint>

   <!-- Declare the hostedPoint for that extension -->

   <extension id="com.vmware.samples.chassisb.custom">

      <extendedPoint>com.vmware.samples.chassisb.views</extendedPoint>

      <hostedPoint>com.vmware.samples.chassisb.customTab</hostedPoint>

      <precedingExtension>com.vmware.samples.chassisb.manage</precedingExtension>

      <object>

         <name>Custom Tab</name>

         <contentSpec>

            <url>resources/ui/views/tabs/TabContent.html</url>

         </contentSpec>

      </object>

      <metadata>

         <objectType>samples:ChassisB</objectType>

      </metadata>

   </extension>

   <!-- A view using the top level tab extension -->

   <extension id="com.vmware.samples.chassisb.customView">

      <extendedPoint>com.vmware.samples.chassisb.customTab</extendedPoint>

      <object>

         <name>#{monitor.view1}</name>

         <componentClass className="com.vmware.vsphere.client.htmlbridge.HtmlView">

            <object>

               <root>

                  <url>/vsphere-client/chassisb/resources/chassis-monitor.html</url>

               </root>

            </object>

         </componentClass>

      </object>

   </extension>

[ChrisSmith2]

Thanks!

Those steps cause a new tab to appear, but when it is selected, I just get an error "Plugin view not supported by this HTML client!". I tried this first in my own plugin, and then by copying your XML directly into a clean copy of the original "chassis-b" sample with no other changes.

I'm using the production VSphere Web Client SDK ("vsphere-client-sdk-6.5.0-4602587.zip"), and tried with both the latest Edge and Chrome builds.

Have I missed something obvious here?

Also, is it possible to get this to show the tab using the built-in listview for a given relationship rather than a custom HTML page, as the built-in extra tabs for HostSystem etc. do? If not, how can I get the objects/icons/labels etc. to render the equivalent of the similar built-in tabs?

[laurentsd]

The error "Plugin view not supported by this HTML client" means that you are not using a correct view extension like the one I gave as example. Is your <url> missing?

   <!-- View using the top level tab extension -->

   <extension id="com.vmware.samples.chassisb.customView">

      <extendedPoint>com.vmware.samples.chassisb.customTab</extendedPoint>

      <object>

         <name>#{monitor.view1}</name>

         <componentClass className="com.vmware.vsphere.client.htmlbridge.HtmlView">

            <object>

               <root>

                  <url>/vsphere-client/chassisb/resources/chassis-monitor.html</url>

               </root>

            </object>

         </componentClass>

      </object>

   </extension>

Is your other question about showing relations with other objects inside a custom tab instead of the "More Objects" tab that is already provided for that?

[ChrisSmith2]

The XML was a direct copy from your post; I've attached it here to confirm (plus the entire modified sample including the built packages).

I don't understand your last sentence. My objective here is to move the relations with other specific objects to a separate primary tab, rather than having them listed under "More Objects" - I'd expect the XML to include information about the relationship specification that should be shown as the contents of the tab as a list - e.g. "rackForChassis" for the sample.

[ChrisSmith2]

Maybe the attached sketch will clarify what I'm aiming to achieve:

[laurentsd]

The reason the custom tab doesn't work for you is because the XML snippet contains A0 ascii characters in front of each line instead of spaces  (could be a side effect of the Forum post content), so the <url> is not parsed correctly.   Make sure you have regular spaces and it should work.

As far as moving a list of related items to another tab I don't think it's possible but I would have to research more.

[ChrisSmith2]

Aha - that's fixed it - thanks! Here I was thinking I was *reducing* the chance of introducing errors by cut-n-paste'ing directly from the page...

If there's no way to use the built-in object list view, I guess I'll need to build my own HTML list instead. If I do have to go down that route, how can I get the exact icon, text, and link behaviour for the objects returned by the provider (e.g. via the "hosts" property of "samples:ChassisB"), so I can give the same look/action as on the built-in list? Is there a helper in the Javascript API to do this?

Sorry for all the questions - I'm pretty new to the plugin model, and whilst the samples have been a great help their scope is quite limited and the documentation somewhat lacking for these sort of fundamentals.

Thanks again for all your help!

[_vladi_]

Hi Chris,

Your questions are perfectly rational - please do ask whenever you have more. People on this forum should be able to help.

With regards to displaying related objects as top-level tabs this is the automatic behavior when you have only one relation for the given object type. In that case you would automatically see only Hosts instead of More Objects. When you have two or more they are grouped under More Objects for UX reasons: e.g. if there are too many relations the top level tabbar would become very cluttered. Nevertheless, as this is ownership of the plugin we are planning to allow this freedom in future releases - in the end when it comes to custom objects it is your UX so you should have the flexibility to choose what fits best. Stay tuned for that change which might come pretty soon!

When it comes to object lists you can use the list column extension point but the recommended way to achieve this going forward is to build your own list view (as Laurent suggested). The reason is exactly the flexibility you ask for - column renderer is not available at the moment so you cannot achieve the UX of the Host list view for example. Instead of limiting what you can and cannot add to a list column, etc. we will focus on helping plugins build their own lists. In the end you might want to have stuff like dashboards instead of lists or anything else that fits your use cases. As a result, my advice is to go down that road and watch out for developments from SDK side (official releases and announcements as well as the Fling where we share stuff that are not officially released yet).

Cheers,

Vladi

[ChrisSmith2]

Thanks for the comments. I have managed to build a suitable list page for the new tab that is similar to the VMWare default ones, so the UX is acceptable. The "More Objects" tab shows a redundant list, so being able to hide a relationship from that would be good in the future (I don't want to remove the declaration of the relationship from the XML, as that would remove it from the left-hand navigation set as I understand it) - but it isn't too bad.

I have found that using the custom tab only appears in the HTML client - not the Flex client - but as there are alternative ways to get to roughly similar information I've not investigated further as yet.

[msoni11]

Hi Laurent,

Is there a way to display custom tabs for FLEX client? It's not appearing currently with sample code you provided.

Thanks,

msoni

[_vladi_ · Accepted solution]

Hi folks,

Creating and hosting your own extension point is a workaround but not officially supported by the SDK.

Instead, we have exposed the ${namespace}.views extension point to create top-level tabs for custom objects with 6.5U1:

https://code.vmware.com/doc/preview?id=4180#/doc/GUID-8B487DF6-87A6-4BA3-A80E-8741F627CF6E.html

You can check custom-object-ui sample from SDK 6.5U1 to see its usage.

This is the recommended way to have top-level tabs for custom objects and is officially supported after 6.5U1 but should also work with earlier releases of the HTML Client and Flex Client. You can try it out.

Cheers,

Vladi

[msoni11]

Thanks _vladi_! It worked like a charm. I've another requirement to add custom tab at core object i.e. cluster and host level. Is it possible ?

Regards,

msoni

[_vladi_]

No, custom top-level tabs are not allowed on core vSphere objects. The reason is that the user experience would suffer if many plugins decide to add one or more top-level tabs on host/cluster.

This concern is not there for custom objects where your plugin essentially owns the object so it should be allowed to own the UI. The latest 6.7 and 6.5U2 SDK releases actually take this idea to the next level by deprecating the custom objects altogether and demonstrating how to implement custom object concepts entirely in the plugin taking advantage of UI flexibility and data fetching efficiency (see the HTML Sample).

As far as your particular requirement is concerned the recommended approach is to have a summary section (portlet) on cluster and host level that:

 - contains a very short summary of important data.

 - links to a Monitor/Configure view for more details (that you wanted to put in your top level tab).

Cheers,

Vladi

[msoni11]

Got it. Thanks for your reply