vRealize Automation vRealize Orchestrator

Custom Forms Enhancements – CSS and Complex Input Types

The March 2020 release of vRealize Automation (and vRealize Automation 8.1) has two new enhancements to the Custom Forms capabilities in Service Broker: Custom CSS, and Complex Input Types. Custom CSS allows you to import a stylesheet to customise the appearance of forms, which allows you to create a richer user experience. Complex Input Types allows you to create Catalog Items for vRealize Orchestrator (vRO) Workflows that have CompositeType inputs.

Custom CSS in Service Broker Forms

To demonstrate this new capability I’ve created a basic Cloud Assembly blueprint with some different input types and published a new version to the Service Broker catalog. The “vanilla” request form for this catalog item is shown below, and while I love the VMware Clarity user interface, some customers have a requirement for more control over the forms appearance.

Vanilla Catalog Item Form

To customise the CSS for a catalog item you need to create a custom form and import a CSS file. Within Service Broker, navigate to “Content & Policies” and the “Content” page. Select the three dots to open the menu for the item you want to customise, and then select “Customize Form”. To import the CSS file, click “Actions”, then “Import CSS” – a file dialogue will open allowing you to select a CSS file to import.

The easiest way to write the custom CSS for the form is to view the HTML source for the form and get the ID of the element

  • For Chrome, right-click the form item you want to customise and select “Inspect”
  • For Firefox, right-click the form item you want to customise and select “Inspect Element”

For example, I want to modify the CSS style for the “Integer” input in my custom form. I right-click the element and inspect it. You can see below that Chrome has highlighted the HTML input element, and that the input has an ID “input_integer”.

Inspecting the Form Element

I want my Integer input to have a blue background, some extra padding, white text and to highlight when I click into the input. I create a CSS file and modify the display of that form element.

Form element CSS

I edit the custom form, import the CSS file, enable and save the custom form. When view the request form now, the styles have been applied and I can see my new form input displayed.

Input styled

I can also use more generic CSS selectors, for example using input elements, or attribute selectors, to customise more broadly. For example, the following code could be used to style all of the inputs at once:

CSS for all form elements

Importing the stylesheet will result in the form appearance below:

Custom form CSS styled

Complex Input Types for vRealize Orchestrator Catalog Items

The second enhancement to custom forms is the ability to consume vRealize Orchestrator Workflows with complex inputs as Catalog Items. This is especially useful to capture information for XaaS (anything as a service) workflows, and facilitates the use of custom types in vRealize Automation.

So, for example, a vRealize Orchestrator Workflow that has a CompositeType input as shown below, can be added to Service Broker.

vRO Workflow with CompositeType input

In Service Broker, requesting the Catalog Item will display the normal request form details with the additional complex input form, which allows the end user to create the CompositeType input by entering the individual properties.

Service Broker request form with a complex input type

CompositeType form


Thanks for reading this brief introduction to two small, but powerful, enhancements to vRealize Automation Service Broker’s Custom Forms.


Leave a Reply

Your email address will not be published. Required fields are marked *