如何在Suitelet中实现字段纵向逐行排列显示？

要实现字段逐行纵向排列，直接通过SuiteScript的serverWidget模块创建表单并逐个添加字段即可，默认布局下每个字段会自动独占一行。以下是完整的Suitelet示例代码：

/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], (serverWidget) => {
    const onRequest = (context) => {
        if (context.request.method === 'GET') {
            // 创建表单实例
            const form = serverWidget.createForm({
                title: '纵向字段布局示例'
            });

            // 依次添加需要的字段，每个字段默认单独占一行
            form.addField({
                id: 'custpage_field1',
                type: serverWidget.FieldType.TEXT,
                label: 'field1'
            });

            form.addField({
                id: 'custpage_field2',
                type: serverWidget.FieldType.TEXT,
                label: 'field2'
            });

            form.addField({
                id: 'custpage_field3',
                type: serverWidget.FieldType.TEXT,
                label: 'field3'
            });

            form.addField({
                id: 'custpage_field4',
                type: serverWidget.FieldType.TEXT,
                label: 'field4'
            });

            form.addField({
                id: 'custpage_field5',
                type: serverWidget.FieldType.TEXT,
                label: 'field5'
            });

            form.addField({
                id: 'custpage_field6',
                type: serverWidget.FieldType.TEXT,
                label: 'field6'
            });

            form.addField({
                id: 'custpage_field7',
                type: serverWidget.FieldType.TEXT,
                label: 'field7'
            });

            // 添加Total字段，可设置为只读并赋值
            const totalField = form.addField({
                id: 'custpage_total',
                type: serverWidget.FieldType.CURRENCY,
                label: 'Total'
            });
            totalField.defaultValue = 0; // 可根据业务逻辑动态计算
            totalField.isDisabled = true;

            // 将表单输出到响应
            context.response.writePage(form);
        }
    };

    return {onRequest};
});

关键说明 #

1. 默认布局行为：通过form.addField添加的字段，默认会自动在新的一行显示，无需额外配置布局参数。
2. 排查横向排列问题：如果之前出现字段横向排列，检查是否误使用了addFieldGroup分组、设置了columnBreak强制换行属性，或者引入了自定义客户端样式干扰布局，移除这些内容即可恢复纵向排列。
3. Total字段扩展：如果需要Total字段根据其他字段值实时计算，可以添加客户端脚本（通过form.clientScriptModulePath关联），在字段值变化时触发计算逻辑并赋值给Total字段。

内容的提问来源于stack exchange，提问作者user15989047