Adding Inline HTML Field in Suitelet Sublist or Virtual Sublist by User Event

In NetSuite, you might often need to add custom formatting to the values displayed in a sublist. One way to achieve this is by using an INLINEHTML field or directly embedding HTML in a text field to apply styles like color. Below is an approach to add a custom field to a Suitelet sublist or a virtual sublist and display a value with inline HTML formatting using a User Event script.

Sample Code Snippet

Here’s a sample code snippet demonstrating how to add a field to a sublist and set its value with HTML for custom formatting:

// Define the form and sublist
let form = serverWidget.createForm({ title: 'Sublist HTML Formatting Example' });
let sublist = form.addSublist({
    id: 'custpage_gst_sublist',
    type: serverWidget.SublistType.LIST,
    label: 'Sample Sublist'
});

// Add fields to the sublist
sublist.addField({
    id: 'custpage_field1',
    type: serverWidget.FieldType.TEXT,
    label: 'Field 1'
});
sublist.addField({
    id: 'custpage_field2',
    type: serverWidget.FieldType.TEXT,
    label: 'Field 2'
});

// Add custom HTML field
let contractField = sublist.addField({
    id: 'custpage_contract',
    label: 'Contract',
    type: serverWidget.FieldType.TEXT
});

contractField.updateDisplayType({
    displayType: serverWidget.FieldDisplayType.INLINE
});
contractField.defaultValue = '<span style="color: red;">confirmed</span>';

// Add sample data to the sublist
sublist.setSublistValue({
    id: 'custpage_field1',
    line: 0,
    value: 'Sample Value 1'
});
sublist.setSublistValue({
    id: 'custpage_contract',
    line: 0,
    value: '<span style="color: red;">confirmed</span>'
});

// Render the form
context.response.writePage(form);

Explanation

1. Create the Form and Sublist:

• A form is created using the serverWidget module.
• A sublist is added to the form, specifying its type and label.

1. Add Fields to the Sublist:

• Regular text fields are added to the sublist to hold data.

1. Add a Custom HTML Field:

• A custom field named contractField is added to the sublist.
• The display type of the field is set to INLINE, allowing it to render HTML content.
• The default value of the field is set using an HTML <span> tag to apply inline styles (e.g., changing the text color to red).

1. Add Sample Data to the Sublist:

• Sample values, including the HTML formatted value, are set for the sublist fields.

1. Render the Form:

• The form with the sublist is rendered as the response to the client.

Use Case

This approach is useful when you need to highlight specific values in a sublist based on certain conditions, making it easier for users to identify important information at a glance. The inline HTML formatting provides flexibility to style the sublist values as needed.

By following this method, you can effectively add custom styling to sublist values in NetSuite, enhancing the user interface and improving data visibility.