Increasing the Width of a Data Grid in a Custom Form Using CSS

Products

• VMware Aria Suite

Issue/Introduction

This article outlines the steps involved in adjusting the default width of a data grid within a Service Broker custom form, enabling you to tailor its size to your specific needs.

Environment

VMware Aria Automation 8.x

Resolution

1. Accessing the Custom Form:
   • Within Service Broker, navigate to "Content & Policies" and then the "Content" page.
   • Locate the catalog item you wish to customize and select the three dots ︙to open its menu.
   • Choose "Customize Form" to access the Custom Form designer.
2. Identifying the Data Grid's Field ID:
   • In the Custom Form designer, select the data grid element whose width needs to be adjusted.
   • Open the properties pane for the selected data grid. The "Field ID" will be listed within the properties, for example, "datagrid_9fd9ed98".
3. Creating a CSS File:
   • Open a text editor (like Notepad) and create a new file.
   • Insert the following CSS code, replacing <Field ID> with the actual Field ID noted in step 2 and <width in pixels> with the desired width:

     #<Field ID> {
      width: <width in pixels> !important;
         }

     Example :

     #datagrid_9fd9ed98 {
      width: 2000px !important;
         }

   • Save the file with a .css extension (e.g., "custom_datagrid.css").
4. Importing the CSS File:
   
   • In the Custom Form designer, click "Actions" and then "Import CSS".
   • A file dialog box will open. Locate and select the CSS file you created in step 3.
5. Save the updated Custom Form.
6. Verifying the Changes:
   • Navigate to "Consume" and "Catalog" within Service Broker.
   • Request the updated catalog item and view the changes. The data grid should now display with the adjusted width specified in the CSS file.

 

 

Additional Information

https://techdocs.broadcom.com/us/en/vmware-cis/aria/aria-automation/8-14/consumption-on-prem-using-master-map-8-14/service-catalog-setting-up-service-catalog-for-your-organization/service-broker-custom-forms-customize-a-request-form/service-broker-custom-forms-learn-more-about-service-broker-custom-forms.html 

https://blogs.vmware.com/management/2020/03/service-broker-custom-forms-enhancements.html