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.

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”.

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.

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.

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:

Importing the stylesheet will result in the form appearance below:

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.

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.