Tabs are a great way to organize screen real estate. However, there are some things that you need to keep in mind when adding tabs to a Suitelet.

If all controls in your Suitelet are standard NetSuite controls and you do not add any INLINEHTML, you should be fine. However, there are times when you need to do your own thing. If that is your situation, read on!

If you add <input> or <textarea> or any other standard HTML controls tags inside an INLINEHTML, the values in those will correctly POST. They work just like NetSuite controls, form.addField({ type: ANYTHING_BUT_INLINHTML}). However, once you add tabs to your Suitelet, those same <input> controls no longer POST.

The workaround is this. In the client script, be sure to populate a standard NetSuite control, which can be hidden, with any values you need to POST back to your server-side program.

Here is an example of how this works. In this Suitelet, I have 2 tabs and 3 controls which I POST back to the server. You can’t see it here, but Tab 2 has a hidden serverWidget.FieldType.HIDDEN control which I POST back to the server. What I’m demonstrating is that you can still use INLINEHTML <input>, <textarea> tags, but be sure to move the results into your HIDDEN field before submitting the page.

When you click POST, which is just a standsard <submit> control, here is what you see.

The <textarea> control that is nested inside an INLINEHTML control, but not inside a tab, works great. Results are sent back to the server. The <textarea> control inside Tab 1 does not make it back. And finally the serverWidget.FieldType.TEXT, but hidden, inside Tab 2 also works fine and POSTs correctly back to the server.

One more things before I show you my code. If you dissect the DOM, you’ll find that each tab has become it’s own <form>. If you have 2 tabs, you’ll have at least 3 forms . Form[0] is full of a bunch of NetSuite variables. Once I added tabs, I could no longer jQuery(‘form’).submit(). I ended up doing a jQuery(‘input[type=”submit”]’)[0].click().

Here is my example code, which hopefully makes better sense of this topic.

/**
*@NApiVersion 2.x
*@NScriptType Suitelet
*/
define(['N/ui/serverWidget'],
    function (serverWidget) {

        function onRequest(context) {
            var form = serverWidget.createForm({
                title: 'Custom Suitelet Demo of Tabs Response on POST'
            });

            form.addFieldGroup({
                id: 'fieldgroup_main',
                label: 'Primary Information'
            })

            if (context.request.method === 'POST') {
                // Show results of POST
                var parameters = context.request.parameters;
                var results = form.addField({
                    id: 'custpage_not_in_tab_inlinehtml',
                    type: serverWidget.FieldType.INLINEHTML,
                    label: 'This label will not show',
                    container: 'fieldgroup_main'
                });
                results.defaultValue = [
                    '<b>custpage_not_in_tab:</b> ' + parameters.custpage_not_in_tab + '<br />',
                    '<b>custpage_in_tab:</b> ' + parameters.custpage_in_tab + '<br />',
                    '<b>custpage_std_control:</b> ' + parameters.custpage_std_control + '<br />',
                ].join("\n");
            }
            else {
                // Build the initial Page on GET

                form.addField({
                    id: 'custpage_label1',
                    type: serverWidget.FieldType.LABEL,
                    label: 'There is a standard HTML control outside of tabs',
                    container: 'fieldgroup_main'
                });

                // Add a standard html control (not a NetSuite form.addField()) outside of the tabs
                var results = form.addField({
                    id: 'custpage_not_in_tab_inlinehtml',
                    type: serverWidget.FieldType.INLINEHTML,
                    label: 'This label will not show',
                    container: 'fieldgroup_main'
                });
                results.defaultValue = [
                    '<textarea id="custpage_not_in_tab" name="custpage_not_in_tab">This will make it back on POST</textarea>'
                ].join("\n");

                // You'll need at least 2 tabs for them to show.
                form.addTab({
                    id: 'custpage_tab_1',
                    label: 'Tab 1'
                });

                form.addField({
                    id: 'custpage_label2',
                    type: serverWidget.FieldType.LABEL,
                    label: 'There is a standard HTML control inside a tab',
                    container: 'custpage_tab_1'
                });

                // Add another standard html control inside of the tabs
                var control_in_tab = form.addField({
                    id: 'custpage_in_tab_inlinehtml',
                    type: serverWidget.FieldType.INLINEHTML,
                    label: 'This label will not show',
                    container: 'custpage_tab_1'
                });
                control_in_tab.defaultValue = [
                    '<textarea id="custpage_in_tab">This will NOT make it back on POST</textarea>'
                ].join("\n");

                form.addTab({
                    id: 'custpage_tab_2',
                    label: 'Tab 2'
                });

                form.addField({
                    id: 'custpage_label3',
                    type: serverWidget.FieldType.LABEL,
                    label: 'There is a hidden NetSuite control inside a tab',
                    container: 'custpage_tab_2'
                });

                /**
                 * The shipmethod control must be a standard netsuite control
                 * in order to post back to the server while the control is placed inside a
                 * tab.
                 */
                var custpage_std_control = form.addField({
                    id: 'custpage_std_control',
                    type: serverWidget.FieldType.TEXT,
                    label: 'This label will not show',
                    container: 'custpage_tab_2'
                }).updateDisplayType({
                    displayType: serverWidget.FieldDisplayType.HIDDEN
                });
                custpage_std_control.defaultValue = 'This text WILL make it back to the server';
            }

            form.addSubmitButton({
                label: 'POST'
            });

            context.response.writePage(form);
        }

        return {
            onRequest: onRequest
        }
    }
);