Netsuite: How to group field in Suitelet?

Hi All,

While creating fields in Suitelet using ''N/ui/serverWidget" module, we can also group them based on group/set they belongs. Example: If you are creating suitelet which has filters as well as input field (which populate on record), use group to separate both. This way UI will become easier to understand for first time user.
User can select filter and wait for results to load or wait for page to load based on your design. If you want simple and effective loading of results, use client script and reload same URL with filter data in parameters or you can use AJAX and refresh results section without refreshing page.We will write more about this in our upcoming posts.

*** By results we mean results in sublist, to update fields on field change use simple client script on field change.You can add client script to form using "form.clientScriptFileId = XYXY;" in your code. XYXY is file id store in file cabinet.     

Sample code :

var form = serverWidget.createForm({
                            title: 'Netsuite Guru'
                        });
            
            form.clientScriptFileId = 11221122;//replace this with file internal id  

 

  //======= this is for input fields grouping =====
            var fieldgroup1 = form.addFieldGroup({
                id : 'custpage_ng_filters',
                label : 'Select Filters.....'
            });            
            var stdate = form.addField({
                id: 'custpage_ng_startdate',
                type: serverWidget.FieldType.DATE,
                label: ' Start Date',
                container: 'custpage_ng_filters'
            });
            if(startdate)
            {
                stdate.defaultValue = startdate;
            }
            
            var eddate = form.addField({
                id: 'custpage_ng_enddate',
                type: serverWidget.FieldType.DATE,
                label: ' End Date',
                container: 'custpage_ng_filters'
            });
            if(enddate)
            {
                eddate.defaultValue = enddate;
            }
          //======= End of filter fields grouping =====
            //======= this is for input fields grouping =====
            var fieldgroup2 = form.addFieldGroup({
                id : 'custpage_ng_values',
                label : 'Enter Values.....'
            });    
            var tranDateField = form.addField({
                id: 'custpage_ng_trandate',
                type: serverWidget.FieldType.DATE,
                label: 'Date',
                container: 'custpage_ng_values'
            });
            //======= End of input fields grouping =====
            
          
               // Use below to add your results in form of HTML table. Use input method accept data into fields.    
            
            var htmlImage = form.addField({
                id: 'custpage_ng_htmlfield',
                type: serverWidget.FieldType.INLINEHTML,
                label: 'Intelisys'
            });
            htmlImage.updateLayoutType({
                layoutType: serverWidget.FieldLayoutType.OUTSIDEBELOW
            });
            htmlImage.defaultValue = myHTML;        

           


            form.addSubmitButton({
                        label: 'I love Netsuite Guru'// :)
                    });
            
            context.response.writePage(form);

 Hope this will help someone in this little Netsuite world. Please let us know if you have any query, comment below.

Thanks

Netsuite Guru

 

 

Download Netsuite Guru Android App
Follow Me on Linkedin
Our FB Page